@afeefa/vue-app 0.0.52 → 0.0.55

package/src/components/form/FormFieldMixin.js

@@ -1,6 +1,5 @@
+import { Component, Vue } from '@a-vue'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
-import { apiResources } from '@afeefa/api-resources-client'
-import { Component, Vue } from 'vue-property-decorator'
 
 @Component({
   props: ['name', 'label']
@@ -17,7 +16,7 @@ export class FormFieldMixin extends Vue {
   }
 
   get modelType () {
-    return apiResources.getType(this.model.type)
+    return this.$apiResources.getType(this.model.type)
   }
 
   get field () {

package/src/components/form/fields/FormFieldCheckbox.vue

@@ -0,0 +1,18 @@
+<template>
+  <a-checkbox
+    v-model="model[name]"
+    :label="label || name"
+    :validator="validator"
+    v-bind="$attrs"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+import { Component, Mixins } from '@a-vue'
+import { FormFieldMixin } from '../FormFieldMixin'
+
+@Component
+export default class FormFieldCheckbox extends Mixins(FormFieldMixin) {
+}
+</script>

package/src/components/form/fields/FormFieldDate.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
 @Component

package/src/components/form/fields/FormFieldRadioGroup.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
 @Component

package/src/components/form/fields/FormFieldRichTextArea.vue

@@ -0,0 +1,14 @@
+<template>
+  <a-rich-text-area
+    v-model="model[name]"
+  />
+</template>
+
+<script>
+import { Component, Mixins } from '@a-vue'
+import { FormFieldMixin } from '../FormFieldMixin'
+
+@Component
+export default class FormFieldRichTextArea extends Mixins(FormFieldMixin) {
+}
+</script>

package/src/components/form/fields/FormFieldSearchSelect.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
 @Component({

package/src/components/form/fields/FormFieldSelect.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
 @Component

package/src/components/form/fields/FormFieldSelect2.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 import { ComponentWidthMixin } from '../../mixins/ComponentWidthMixin'
 

package/src/components/form/fields/FormFieldText.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
 @Component

package/src/components/form/fields/FormFieldTextArea.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
 @Component

package/src/components/index.js

@@ -2,8 +2,10 @@ import Vue from 'vue'
 
 import EditForm from './form/EditForm'
 import EditModal from './form/EditModal'
+import FormFieldCheckbox from './form/fields/FormFieldCheckbox'
 import FormFieldDate from './form/fields/FormFieldDate'
 import FormFieldRadioGroup from './form/fields/FormFieldRadioGroup'
+import FormFieldRichTextArea from './form/fields/FormFieldRichTextArea'
 import FormFieldSearchSelect from './form/fields/FormFieldSearchSelect'
 import FormFieldSelect from './form/fields/FormFieldSelect'
 import FormFieldSelect2 from './form/fields/FormFieldSelect2'
@@ -18,7 +20,9 @@ Vue.component('EditForm', EditForm)
 Vue.component('EditModal', EditModal)
 Vue.component('FormFieldText', FormFieldText)
 Vue.component('FormFieldTextArea', FormFieldTextArea)
+Vue.component('FormFieldRichTextArea', FormFieldRichTextArea)
 Vue.component('FormFieldRadioGroup', FormFieldRadioGroup)
+Vue.component('FormFieldCheckbox', FormFieldCheckbox)
 Vue.component('FormFieldDate', FormFieldDate)
 Vue.component('FormFieldSearchSelect', FormFieldSearchSelect)
 Vue.component('FormFieldSelect', FormFieldSelect)

package/src/components/list/ListFilterMixin.js

@@ -1,4 +1,4 @@
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['name', 'label']

package/src/components/list/ListFilterRow.vue

@@ -9,7 +9,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['gap']

package/src/components/list/ListViewMixin.js

@@ -1,13 +1,12 @@
+import { Component, Vue, Watch } from '@a-vue'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
-import { propsWithDefaults } from '@a-vue/utils/props-helper'
 import { ListViewModel } from '@afeefa/api-resources-client'
-import { Component, Vue, Watch } from 'vue-property-decorator'
 
 import { CurrentRouteFilterSource } from './CurrentRouteFilterSource'
 import { FilterSourceType } from './FilterSourceType'
 
 @Component({
-  ...propsWithDefaults([
+  props: [
     'models', 'meta', // given, if already loaded
     'listViewConfig',
     'filterHistoryKey',
@@ -17,7 +16,7 @@ import { FilterSourceType } from './FilterSourceType'
       events: true,
       history: true
     }
-  ])
+  ]
 })
 export class ListViewMixin extends Vue {
   LIST_VIEW = true
@@ -93,6 +92,10 @@ export class ListViewMixin extends Vue {
     this.load()
   }
 
+  reload () {
+    this.load()
+  }
+
   resetFilters () {
     this.listViewModel.resetFilters()
   }

package/src/components/list/filters/ListFilterPage.vue

@@ -27,7 +27,7 @@
 
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { ListFilterMixin } from '../ListFilterMixin'
 
 @Component({

package/src/components/list/filters/ListFilterSearch.vue

@@ -12,7 +12,7 @@
 
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { ListFilterMixin } from '../ListFilterMixin'
 
 @Component

package/src/components/list/filters/ListFilterSelect.vue

@@ -13,7 +13,7 @@
 
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { ListFilterMixin } from '../ListFilterMixin'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
 

package/src/components/mixins/ClickOutsideMixin.js

@@ -1,4 +1,4 @@
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 import { getZIndex } from 'vuetify/lib/util/helpers'
 
 @Component

package/src/components/mixins/ComponentWidthMixin.js

@@ -1,4 +1,4 @@
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['maxWidth', 'width']

package/src/components/search-select/SearchSelectFilters.vue

@@ -9,7 +9,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['filters', 'count']

package/src/components/search-select/SearchSelectList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="searchSelectList">
+  <div :class="['searchSelectList', {isLoading}]">
     <template v-if="models_.length">
       <a-table v-bind="$attrs">
         <a-table-header
@@ -13,6 +13,7 @@
           v-for="model in models_"
           :key="model.id"
           small
+          :class="{selected: isSelected(model)}"
         >
           <slot
             name="row"
@@ -38,11 +39,11 @@
 
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { ListViewMixin } from '@a-vue/components/list/ListViewMixin'
 
 @Component({
-  props: ['q']
+  props: ['q', 'selectedItems']
 })
 export default class SearchSelectList extends Mixins(ListViewMixin) {
   get hasHeader () {
@@ -58,16 +59,25 @@ export default class SearchSelectList extends Mixins(ListViewMixin) {
     }
   }
 
+  isSelected (model) {
+    return !!this.selectedItems.find(i => i.equals(model))
+  }
+
   _filtersInitialized () {
     if (this.q) {
       this.filters.q.value = this.q
     }
+    this.$emit('update:filters', this.filters)
   }
 }
 </script>
 
 
 <style scoped lang="scss">
+.isLoading {
+  opacity: .6;
+}
+
 .notFound {
   padding: 0 .5rem .3rem;
 }

package/src/components/vue/Component.js

@@ -0,0 +1,46 @@
+import { Component as VueComponent } from 'vue-property-decorator'
+
+const Component = function (options) {
+  if (options.props) {
+    options.props = propsWithDefaults(options.props)
+  }
+  return VueComponent(options)
+}
+
+Component.registerHooks = VueComponent.registerHooks
+
+export { Component }
+
+function propsWithDefaults (props) {
+  if (props && typeof props === 'object' && props.constructor === Object) {
+    return props
+  }
+
+  const normalizedProps = {}
+
+  for (const prop of props) {
+    if (typeof prop === 'object') {
+      Object.keys(prop).forEach(subProp => {
+        const value = prop[subProp]
+        // property: []
+        if (Array.isArray(value)) {
+          normalizedProps[subProp] = {
+            default () { // must be a function according to vue spec
+              return value
+            }
+          }
+        // property: { some object }, should be a normal vue props object
+        } else if (value && typeof value === 'object' && value.constructor === Object) {
+          normalizedProps[subProp] = value
+        // property: true, null, ...
+        } else {
+          normalizedProps[subProp] = { default: value }
+        }
+      })
+    } else {
+      normalizedProps[prop] = null
+    }
+  }
+
+  return normalizedProps
+}

package/src/index.js

@@ -0,0 +1,4 @@
+import './styles/vue-app.scss'
+
+export { Mixins, Vue, Watch } from 'vue-property-decorator'
+export { Component } from '@a-vue/components/vue/Component'

package/src/plugins/api-resources/ApiResourcesPlugin.js

@@ -1,6 +1,18 @@
 import { apiResources } from '@afeefa/api-resources-client'
 
 class ApiResourcesPlugin {
+  apiResources = apiResources
+
+  register (models, apis) {
+    apiResources
+      .registerModels(models)
+      .registerApis(apis)
+  }
+
+  schemasLoaded () {
+    return apiResources.schemasLoaded()
+  }
+
   install (Vue) {
     Object.defineProperty(Vue.prototype, '$apiResources', {
       get () {

package/src/plugins/route-config/RouteConfigPlugin.js

@@ -121,7 +121,8 @@ class RouteConfigPlugin {
     this._promise = this._promise.then(() => {
       callback = callback({
         ROUTESET: this.routeSet,
-        ROUTE: this.route
+        ROUTE: this.route,
+        GETROUTE: this.getRoute
       })
 
       if (!(callback instanceof Promise)) {
@@ -290,6 +291,29 @@ class RouteConfigPlugin {
     return new RouteSetDefinition(options).getDefinitions()
   }
 
+  getRoute = (name, component) => {
+    switch (name) {
+      case 'notfound':
+        return this.route({
+          path: '/:pathMatch(.*)*',
+          name: 'notfound',
+          ignoreBreadcrumb: true,
+          component: component || {
+            template: '<div>Not found</div>'
+          }
+        })
+      case 'auth':
+        return this.route({
+          path: '/auth2',
+          name: 'auth',
+          ignoreBreadcrumb: true,
+          component: {
+            template: '<div>Auth</div>'
+          }
+        })
+    }
+  }
+
   breadcrumb = options => {
     options.config = {
       ...this._config,

package/src/services/escape/CancelOnEscMixin.js

@@ -1,4 +1,4 @@
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 import { cascadingWindowEventDispatcher } from './CascadingWindowEventDispatcher'
 

package/src/services/position/UsesPositionServiceMixin.js

@@ -1,4 +1,4 @@
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 import { positionService } from '../PositionService'
 

package/src/styles/forms.scss

@@ -0,0 +1,8 @@
+.a-text-input {
+  border: 1px solid #CCCCCC;
+  padding: .5rem;
+
+  &-focused {
+    outline: 1px solid #9999FF;
+  }
+}

package/src/styles/vue-app.scss

@@ -0,0 +1 @@
+@import "forms";

package/src-admin/bootstrap.js

@@ -4,7 +4,6 @@ import './config/components'
 import { apiResourcesPlugin } from '@a-vue/plugins/api-resources/ApiResourcesPlugin'
 import { hasOptionsPlugin } from '@a-vue/plugins/has-options/HasOptionsPlugin'
 import { timeout } from '@a-vue/utils/timeout'
-import { apiResources } from '@afeefa/api-resources-client'
 import Vue from 'vue'
 
 import { appConfig } from './config/AppConfig'
@@ -17,9 +16,7 @@ Vue.use(hasOptionsPlugin)
 Vue.config.productionTip = false
 
 export async function bootstrap ({ apis, models, routing, authService, app, components }) {
-  apiResources
-    .registerModels(models)
-    .registerApis(apis)
+  apiResourcesPlugin.register(models, apis)
 
   appConfig.authService = authService
   appConfig.app = app
@@ -36,7 +33,7 @@ export async function bootstrap ({ apis, models, routing, authService, app, comp
 
   routing(routeConfigPlugin)
   const router = await routeConfigPlugin.getRouter()
-  await apiResources.schemasLoaded()
+  await apiResourcesPlugin.schemasLoaded()
 
   if (authService) {
     authService.initApp(router)

package/src-admin/components/App.vue

@@ -136,7 +136,7 @@
 </template>
 
 <script>
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Component, Vue, Watch } from '@a-vue'
 import { LoadingEvent } from '@a-vue/events'
 import { appConfig } from '@a-admin/config/AppConfig'
 import { sleep } from '@a-vue/utils/timeout'

package/src-admin/components/NotFound.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="notFound">
+    <a-row
+      vertical
+      center
+      class="content"
+    >
+      <div class="logo">
+        <slot />
+      </div>
+
+      <a-row
+        vertical
+        center
+      >
+        <div class="mt-0">
+          {{ title || '404 - Not Found' }}
+        </div>
+
+        <div class="mt-4">
+          <router-link :to="backlink || { path: '/'}">
+            {{ backlinkTitle || 'Zurück' }}
+          </router-link>
+        </div>
+      </a-row>
+    </a-row>
+  </div>
+</template>
+
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  name: 'adminNotFound',
+  props: ['title', 'backlink', 'backlinkTitle']
+})
+export default class NotFound extends Vue {
+  created () {
+    this.$parent.$emit('appLoaded')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.notFound {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  min-height: 50vh;
+  transform: translate(-50%, -50%);
+}
+
+.logo {
+  margin-bottom: 2rem;
+}
+</style>

package/src-admin/components/SidebarMenu.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 import SidebarMenuItem from './menu/SidebarMenuItem'
 
 @Component({

package/src-admin/components/Splash.vue

@@ -1,41 +1,37 @@
 <template>
   <v-app class="splash">
-    <v-container
-      fill-height
-      fluid
-      pb-0
-      d-flex
-      align-center
-      justify-center
+    <a-row
+      vertical
+      center
+      class="content"
     >
-      <div>
-        <div class="logo">
-          <slot />
-        </div>
+      <div class="logo">
+        <slot />
+      </div>
 
-        <a-row
-          vertical
-          center
-        >
-          <v-progress-linear
-            :size="45"
-            :width="6"
-            indeterminate
-            :color="color || 'green'"
-          />
+      <a-row
+        vertical
+        center
+        fullWidth
+      >
+        <v-progress-linear
+          :size="45"
+          :width="6"
+          indeterminate
+          :color="color || 'green'"
+        />
 
-          <div class="mt-4">
-            {{ title || 'Lade App ...' }}
-          </div>
-        </a-row>
-      </div>
-    </v-container>
+        <div class="mt-4">
+          {{ title || 'Lade App ...' }}
+        </div>
+      </a-row>
+    </a-row>
   </v-app>
 </template>
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['title', 'color']
@@ -47,20 +43,24 @@ export default class Splash extends Vue {
 }
 </script>
 
-
 <style lang="scss" scoped>
 .splash {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
+  height: 100vh;
 }
 
-.logo {
-  margin-bottom: 2rem;
+.content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  min-height: 50vh;
+  transform: translate(-50%, -50%);
 }
 
-.container {
-  transform: translateY(-10%);
+.logo {
+  margin-bottom: 2rem;
 }
 </style>