@afeefa/vue-app 0.0.52 → 0.0.55

package/src-admin/components/Start.vue

@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['splash']
 })
-export default class Index extends Vue {
+export default class Start extends Vue {
   appLoaded () {
     this.splash.$destroy()
   }

package/src-admin/components/app/AppBarButton.vue

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

package/src-admin/components/app/AppBarButtons.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component
 export default class AppBarButtons extends Vue {

package/src-admin/components/app/AppBarTitle.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['icon', 'title']

package/src-admin/components/app/AppBarTitleContainer.vue

@@ -4,7 +4,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component
 export default class AppBarTitleContainer extends Vue {

package/src-admin/components/controls/SearchSelectFormField.vue

@@ -0,0 +1,223 @@
+<template>
+  <div>
+    <a-table
+      v-if="selectedItems.length"
+      :style="selectedWidthStyle"
+    >
+      <a-table-header
+        v-if="hasHeader"
+        small
+      >
+        <div
+          v-for="(column, index) in selectedColumns"
+          :key="index"
+        >
+          {{ column.header }}
+        </div>
+      </a-table-header>
+
+      <a-table-row
+        v-for="(item, index) in selectedItems"
+        :key="item.id"
+        :selected="isClicked(item)"
+      >
+        <template v-for="(column, index2) in selectedColumns">
+          <v-icon
+            v-if="column.icon"
+            :key="'icon' + index2"
+            :color="column.icon.color"
+            class="selectedIcon"
+            size="1.5rem"
+            v-text="column.icon.icon"
+          />
+
+          <div
+            v-else
+            :key="'text' + index2"
+            class="selectedContent"
+          >
+            {{ column.text(item) }}
+          </div>
+        </template>
+
+        <div>
+          <a-context-menu
+            :ref="'editItem' + index"
+            @open="clickedItem = item"
+            @close="clickedItem = null"
+          >
+            <a-context-menu-item @click="removeItem(item, index)">
+              <v-icon>$trashCanIcon</v-icon>
+              Löschen
+            </a-context-menu-item>
+          </a-context-menu>
+        </div>
+      </a-table-row>
+    </a-table>
+
+    <div v-else>
+      {{ isEmptyText }}
+    </div>
+
+    <a-search-select
+      :listViewConfig="selectableConfig.listViewConfig"
+      :loadOnlyIfKeyword="false"
+      :selectedItems="selectableSelectedItems"
+      :width="selectableWidth"
+      @select="addItem"
+    >
+      <template #activator>
+        <a-icon-button
+          icon="$plusIcon"
+          :text="selectableConfig.addButtonTitle || 'Hinzufügen'"
+          class="mt-4"
+        />
+      </template>
+
+      <template #filters>
+        <list-filter-row>
+          <list-filter-search
+            :focus="true"
+            maxWidth="100%"
+            label="Suche Berater:in"
+          />
+
+          <list-filter-page
+            :has="{page_size: false, page_number: true}"
+            :totalVisible="0"
+          />
+        </list-filter-row>
+      </template>
+
+      <template #row="{ model, on }">
+        <template
+          v-for="(column, index) in selectableColumns"
+          v-on="on"
+        >
+          <v-icon
+            v-if="column.icon"
+            :key="'icon' + index"
+            :color="column.icon.color"
+            class="selectableIcon"
+            size="1.5rem"
+            v-on="on"
+            v-text="column.icon.icon"
+          />
+
+          <div
+            v-else
+            :key="'text' + index"
+            class="selectableContent"
+            v-on="on"
+          >
+            {{ column.text(model) }}
+          </div>
+        </template>
+      </template>
+    </a-search-select>
+  </div>
+</template>
+
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: [
+    'value',
+    'selectedConfig',
+    'selectedWidth',
+    'selectableConfig',
+    'selectableWidth'
+  ]
+})
+export default class SearchSelectFormField extends Vue {
+  clickedItem = null
+
+  get hasHeader () {
+    return this.selectedColumns.some(c => !!c.header)
+  }
+
+  get selectedItems () {
+    return this.value
+  }
+
+  get selectableSelectedItems () {
+    return this.value.map(this.selectedConfig.selectedToSelectableItem)
+  }
+
+  get isEmptyText () {
+    return this.selectedConfig.isEmptyText
+  }
+
+  isClicked (selectedItem) {
+    return selectedItem === this.clickedItem
+  }
+
+  get selectedColumns () {
+    return this.selectedConfig.columns
+  }
+
+  get selectableColumns () {
+    return this.selectableConfig.columns
+  }
+
+  addItem (selectableItem) {
+    const selectedItem = this.selectedConfig.newSelectedItem(selectableItem)
+    const selectedItems = [...this.value, selectedItem]
+    if (this.$listeners.add) {
+      this.$emit('add', selectedItems)
+    } else {
+      this.$emit('input', selectedItems)
+    }
+  }
+
+  async removeItem (selectedItem, rowIndex) {
+    const removeDialog = this.selectedConfig.removeDialog(selectedItem)
+    const dialog = {
+      anchor: this.$refs['editItem' + rowIndex], // is array [component]
+      ...removeDialog,
+      yesButton: 'Löschen',
+      yesColor: 'red white--text'
+    }
+
+    const selectedItems = this.value.filter(i => i !== selectedItem)
+    if (this.$listeners.remove) {
+      this.$emit('remove', selectedItems, dialog)
+    } else {
+      this.$emit('input', selectedItems)
+    }
+  }
+
+  get selectedWidthStyle () {
+    if (!this.selectedWidth) {
+      return ''
+    }
+
+    let width = this.selectedWidth
+    if (!isNaN(width)) {
+      width = width + 'px'
+    }
+    return `width: ${width};`
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.selectedIcon::v-deep {
+  padding-right: .3rem !important;
+}
+
+.selectableIcon::v-deep {
+  padding-right: 2rem !important;
+}
+
+.selectedContent::v-deep {
+  width: 100%;
+}
+
+.selectableContent::v-deep {
+  width: 100%;
+}
+</style>

package/src-admin/components/detail/DetailProperty.vue

@@ -24,8 +24,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
-import { apiResources } from '@afeefa/api-resources-client'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['icon', 'iconModelType', 'label']
@@ -37,7 +36,7 @@ export default class DetailProperty extends Vue {
     }
 
     if (this.iconModelType) {
-      const ModelClass = apiResources.getModelClass(this.iconModelType)
+      const ModelClass = this.$apiResources.getModelClass(this.iconModelType)
       return ModelClass.icon
     }
   }
@@ -77,6 +76,5 @@ export default class DetailProperty extends Vue {
       padding-left: 55px;
     }
   }
-
 }
 </style>

package/src-admin/components/list/ListColumnHeader.vue

@@ -4,9 +4,10 @@
       :class="['content', {order}]"
       @click="toggleSort"
     >
-      <div :class="['text', {active}]">
-        {{ text }}
-      </div>
+      <div
+        :class="['text', {active}]"
+        v-html="text"
+      />
 
       <svg
         v-if="order"
@@ -21,7 +22,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['text', 'order']

package/src-admin/components/list/ListTitle.vue

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

package/src-admin/components/list/ListView.vue

@@ -9,7 +9,15 @@
     </div>
 
     <template v-if="models_.length">
-      <template v-if="_table">
+      <template v-if="$scopedSlots.models">
+        <slot
+          name="models"
+          :models="models_"
+          :setFilter="setFilter"
+        />
+      </template>
+
+      <template v-else-if="$scopedSlots['model-table']">
         <a-table>
           <a-table-header>
             <div v-if="$has.icon" />
@@ -37,7 +45,7 @@
         </a-table>
       </template>
 
-      <template v-else>
+      <template v-else-if="$scopedSlots.model">
         <div
           v-for="model in models_"
           :key="model.id"
@@ -61,13 +69,11 @@
 
 
 <script>
-import { Component, Watch, Mixins } from 'vue-property-decorator'
+import { Component, Watch, Mixins } from '@a-vue'
 import { ListViewMixin } from '@a-vue/components/list/ListViewMixin'
 import { LoadingEvent } from '@a-vue/events'
 
-@Component({
-  props: ['table']
-})
+@Component
 export default class ListView extends Mixins(ListViewMixin) {
   $hasOptions = ['icon']
 
@@ -83,10 +89,6 @@ export default class ListView extends Mixins(ListViewMixin) {
     this.$emit('update:isLoading', this.isLoading)
   }
 
-  get _table () {
-    return this.table !== false
-  }
-
   setFilter (name, value) {
     this.filters[name].value = value
   }

package/src-admin/components/menu/SidebarMenuItem.vue

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

package/src-admin/components/model/ModelCount.vue

@@ -10,7 +10,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 import { modelCountService } from './ModelCountService'
 import { SaveEvent } from '@a-vue/events'
 

package/src-admin/components/model/ModelIcon.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['model', 'modelClass']

package/src-admin/components/pages/CreatePage.vue

@@ -47,9 +47,8 @@
 </template>
 
 <script>
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from '@a-vue'
 import { EditPageMixin } from './EditPageMixin'
-import { apiResources } from '@afeefa/api-resources-client'
 
 @Component({
   props: ['icon', 'title', 'createModel', 'listLink']
@@ -86,7 +85,7 @@ export default class CreatePage extends Mixins(EditPageMixin) {
       return this.title
     }
 
-    const type = apiResources.getType(this.ModelClass.type)
+    const type = this.$apiResources.getType(this.ModelClass.type)
     return type.t('TITLE_NEW')
   }
 

package/src-admin/components/pages/DetailPage.vue

@@ -51,7 +51,7 @@
 
 
 <script>
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Component, Vue, Watch } from '@a-vue'
 import { RemoveAction } from '@a-vue/api-resources/ApiActions'
 
 @Component({
@@ -64,8 +64,8 @@ export default class DetailPage extends Vue {
   removeConfirmed = null
 
   created () {
-    if (!this.$parent.constructor.detailRouteConfig) {
-      console.warn('<detail-page> owner must provide a static getDetailConfig method.')
+    if (!this.$parent.constructor.getDetailRouteConfig) {
+      console.warn('<detail-page> owner must provide a static getDetailRouteConfig method.')
     }
     this.$emit('model', this.model)
   }
@@ -80,7 +80,7 @@ export default class DetailPage extends Vue {
   }
 
   get detailConfig () {
-    return this.$parent.constructor.detailRouteConfig
+    return this.$parent.constructor.getDetailRouteConfig(this.$route)
   }
 
   get document () {

package/src-admin/components/pages/EditPage.vue

@@ -65,8 +65,7 @@
 </template>
 
 <script>
-import { Component, Mixins, Watch } from 'vue-property-decorator'
-import { apiResources } from '@afeefa/api-resources-client'
+import { Component, Mixins, Watch } from '@a-vue'
 import { EditPageMixin } from './EditPageMixin'
 
 @Component({
@@ -78,8 +77,8 @@ export default class EditPage extends Mixins(EditPageMixin) {
   model_ = null
 
   created () {
-    if (!this.$parent.constructor.editRouteConfig) {
-      console.warn('<edit-page> owner must provide a static editRouteConfig method.')
+    if (!this.$parent.constructor.getEditRouteConfig) {
+      console.warn('<edit-page> owner must provide a static getEditRouteConfig method.')
     }
 
     this.model_ = this.model
@@ -95,7 +94,7 @@ export default class EditPage extends Mixins(EditPageMixin) {
   }
 
   get editConfig () {
-    return this.$parent.constructor.editRouteConfig
+    return this.$parent.constructor.getEditRouteConfig(this.$route)
   }
 
   get modelUpateAction () {
@@ -123,7 +122,7 @@ export default class EditPage extends Mixins(EditPageMixin) {
       return this.title
     }
 
-    const type = apiResources.getType(this.ModelClass.type)
+    const type = this.$apiResources.getType(this.ModelClass.type)
     return type.t('TITLE_EMPTY')
   }
 

package/src-admin/components/pages/EditPageMixin.js

@@ -1,6 +1,6 @@
 import { SaveAction } from '@a-vue/api-resources/ApiActions'
 import { DialogEvent } from '@a-vue/events'
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['saveAction']

package/src-admin/components/pages/ListPage.vue

@@ -20,8 +20,7 @@
 </template>
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
-import { apiResources } from '@afeefa/api-resources-client'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['icon', 'title', 'newTitle', 'newLink', 'Model']
@@ -38,7 +37,7 @@ export default class ListPage extends Vue {
       return this.title
     }
 
-    const type = apiResources.getType(this.Model.type)
+    const type = this.$apiResources.getType(this.Model.type)
     return type.t('TITLE_PLURAL')
   }
 
@@ -47,7 +46,7 @@ export default class ListPage extends Vue {
       return this.newTitle
     }
 
-    const type = apiResources.getType(this.Model.type)
+    const type = this.$apiResources.getType(this.Model.type)
     return type.t('TITLE_SINGULAR')
   }
 

package/src-admin/components/routes/CreateRoute.vue

@@ -4,7 +4,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component
 export default class CreateRoute extends Vue {

package/src-admin/components/routes/DetailRoute.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Component, Vue, Watch } from '@a-vue'
 import { GetAction } from '@a-vue/api-resources/ApiActions'
 
 Component.registerHooks([
@@ -19,11 +19,11 @@ function load (route) {
   const routeDefinition = route.meta.routeDefinition
   const Component = routeDefinition.config.detail
 
-  if (!Component.detailRouteConfig) {
-    console.warn('A detail route component must implement a static detailRouteConfig property.')
+  if (!Component.getDetailRouteConfig) {
+    console.warn('A detail route component must implement a static getDetailRouteConfig property.')
   }
 
-  const detailConfig = Component.detailRouteConfig
+  const detailConfig = Component.getDetailRouteConfig(route)
   const action = detailConfig.action || detailConfig.ModelClass.getAction('get')
 
   return new GetAction()

package/src-admin/components/routes/EditRoute.vue

@@ -8,7 +8,7 @@
 
 
 <script>
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Component, Vue, Watch } from '@a-vue'
 import { GetAction } from '@a-vue/api-resources/ApiActions'
 
 Component.registerHooks([
@@ -20,11 +20,11 @@ function load (route) {
   const routeDefinition = route.meta.routeDefinition
   const Component = routeDefinition.config.edit
 
-  if (!Component.editRouteConfig) {
-    console.warn('An edit route component must implement a static editRouteConfig property.')
+  if (!Component.getEditRouteConfig) {
+    console.warn('An edit route component must implement a static getEditRouteConfig property.')
   }
 
-  const editConfig = Component.editRouteConfig
+  const editConfig = Component.getEditRouteConfig(route)
   const action = editConfig.getAction || editConfig.ModelClass.getAction('get')
 
   return new GetAction()

package/src-admin/components/routes/ListRoute.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Component, Vue, Watch } from '@a-vue'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
 import { NextRouteFilterSource } from '@a-vue/components/list/NextRouteFilterSource'
 import { ListViewModel } from '@afeefa/api-resources-client'
@@ -31,11 +31,11 @@ function load (route) {
   const routeDefinition = route.meta.routeDefinition
   const Component = routeDefinition.config.list
 
-  if (!Component.listViewConfig) {
-    console.warn('A list route component must implement a static listViewConfig property.')
+  if (!Component.getListRouteConfig) {
+    console.warn('A list route component must implement a static getListRouteConfig property.')
   }
 
-  const request = new ListViewModel(Component.listViewConfig)
+  const request = new ListViewModel(Component.getListRouteConfig(route))
     // read from next route query string, but do not push
     // list component will be init with used_filters
     .filterSource(new NextRouteFilterSource(route), false)

package/src-admin/config/vuetify.js

@@ -6,6 +6,7 @@ import {
   mdiDelete,
   mdiDotsHorizontal,
   mdiDotsVertical,
+  mdiLock,
   mdiLogoutVariant,
   mdiMagnify,
   mdiPencil,
@@ -32,7 +33,8 @@ export default new Vuetify({
       pencilIcon: mdiPencil,
       trashCanIcon: mdiDelete,
       calendarIcon: mdiCalendar,
-      searchIcon: mdiMagnify
+      searchIcon: mdiMagnify,
+      lockIcon: mdiLock
     }
   },
   breakpoint: {

package/src-admin/models/Model.js

@@ -1,11 +1,17 @@
 import { Model as ApiResourcesModel, apiResources } from '@afeefa/api-resources-client'
 import { mdiAlphaMCircle } from '@mdi/js'
 
+import { ModelAdminConfig } from './ModelAdminConfig'
+
+export { ModelAdminConfig }
+
 export class Model extends ApiResourcesModel {
   static resourceType = null
   static routeName = null
   static routeIdKey = 'id'
 
+  static config = null
+
   static getLink (action) {
     return (new this()).getLink(action)
   }
@@ -21,6 +27,13 @@ export class Model extends ApiResourcesModel {
     return null
   }
 
+  static get adminConfig () {
+    return new ModelAdminConfig()
+      .setIcon({
+        icon: mdiAlphaMCircle
+      })
+  }
+
   static icon = {
     icon: mdiAlphaMCircle,
     color: 'blue lighten-2'