@afeefa/vue-app 0.0.48 → 0.0.52

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.48
+0.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.48",
+  "version": "0.0.52",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src/api-resources/ApiActions.js

@@ -197,6 +197,7 @@ export class RemoveAction {
         .params({
           id: this.id
         })
+        .data(null)
         .send()
 
       if (this.afterRemoveHook) {

package/src/components/AContextMenu.vue

@@ -6,7 +6,7 @@
     >
       <slot name="activator">
         <a-icon class="contextButton">
-          $dotsHorizontalIcon
+          {{ triggerIcon || '$dotsHorizontalIcon' }}
         </a-icon>
       </slot>
     </div>
@@ -31,7 +31,7 @@ import { Positions, PositionConfig } from '../services/PositionService'
 import { randomCssClass } from '../utils/random'
 
 @Component({
-  props: ['contentHeight', 'repositionWatchKey']
+  props: ['contentHeight', 'repositionWatchKey', 'triggerIcon']
 })
 export default class AContextMenu extends Mixins(UsesPositionServiceMixin) {
   CONTEXT_MENU = true

package/src/components/AContextMenuItem.vue

@@ -10,7 +10,9 @@
 <script>
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
+@Component({
+  props: ['to']
+})
 export default class AContextMenuItem extends Vue {
   get contextMenu () {
     let parent = this.$parent
@@ -25,7 +27,12 @@ export default class AContextMenuItem extends Vue {
 
   click () {
     this.contextMenu.close()
-    this.$emit('click')
+    if (this.to) {
+      this.$router.push(this.to)
+        .catch(() => null) // prevent duplicated navigation
+    } else {
+      this.$emit('click')
+    }
   }
 }
 </script>

package/src/components/ASearchSelect.vue

@@ -46,8 +46,8 @@
         v-if="isOpen"
         v-bind="listConfig"
         :q="q"
-        :noEvents="true"
-        :noHistory="true"
+        :events="false"
+        :history="false"
         :filterSource="filterSource"
         :loadOnlyIfKeyword="_loadOnlyIfKeyword"
         :count.sync="count"

package/src/components/list/{RouteFilterSource.js → CurrentRouteFilterSource.js}

@@ -1,6 +1,6 @@
-import { BaseFilterSource } from '@afeefa/api-resources-client'
+import { ListViewFilterSource } from '@afeefa/api-resources-client'
 
-export class RouteFilterSource extends BaseFilterSource {
+export class CurrentRouteFilterSource extends ListViewFilterSource {
   router = null
 
   constructor (router) {

package/src/components/list/FilterSourceType.js

@@ -2,9 +2,6 @@ export class FilterSourceType {
   // filters are synchronized with url's query string
   static QUERY_STRING = 'query_string'
 
-  // filters are initialized from given route params (no synchronisation allowed)
-  static ROUTE_PARAMS = 'route_params'
-
   // filters are synchronized with plain history object
   static OBJECT = 'object'
 }

package/src/components/list/ListViewMixin.js

@@ -1,26 +1,31 @@
 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'
-import { RouteFilterSource } from './RouteFilterSource'
 
 @Component({
-  props: [
-    'models', 'meta', // if already loaded
+  ...propsWithDefaults([
+    'models', 'meta', // given, if already loaded
     'listViewConfig',
-    'noEvents', 'noHistory',
-    'filterHistoryKey', 'filterSource',
-    'loadOnlyIfKeyword'
-  ]
+    'filterHistoryKey',
+    'loadOnlyIfKeyword',
+    {
+      filterSource: FilterSourceType.QUERY_STRING,
+      events: true,
+      history: true
+    }
+  ])
 })
 export class ListViewMixin extends Vue {
   LIST_VIEW = true
 
+  listViewModel = null
   models_ = []
   meta_ = {}
   isLoading = false
-  listViewModel = null
 
   created () {
     this.init()
@@ -36,10 +41,12 @@ export class ListViewMixin extends Vue {
       this.listViewModel.off('change', this.filtersChanged)
     }
 
-    const historyKey = this.noHistory
-      ? undefined
-      : [this.$route.path, this.filterHistoryKey].filter(i => i).join('.')
-    const filterSource = this.filterSource === FilterSourceType.OBJECT ? undefined : new RouteFilterSource(this.$router)
+    const historyKey = this.history
+      ? [this.$route.path, this.filterHistoryKey].filter(i => i).join('.')
+      : undefined
+    const filterSource = this.filterSource === FilterSourceType.QUERY_STRING
+      ? new CurrentRouteFilterSource(this.$router)
+      : undefined
 
     if (this.models) {
       this.models_ = this.models
@@ -47,12 +54,12 @@ export class ListViewMixin extends Vue {
     }
 
     this.listViewModel = new ListViewModel(this.listViewConfig)
-      .filterSource(filterSource, true)
-      .historyKey(historyKey, true)
+      .filterSource(filterSource, !!filterSource)
+      .historyKey(historyKey, this.history)
       .usedFilters(this.meta_.used_filters || null, this.meta_.count_search || 0)
       .initFilters({
-        source: true,
-        history: true,
+        source: !!filterSource,
+        history: !!historyKey,
         used: !!this.models
       })
       .on('change', this.filtersChanged) // listen to change
@@ -68,7 +75,7 @@ export class ListViewMixin extends Vue {
 
   @Watch('$route.query')
   routeQueryChanged () {
-    if (this.filterSource !== FilterSourceType.QUERY_STRING) {
+    if (this.filterSource === FilterSourceType.QUERY_STRING) {
       this.listViewModel.filterSourceChanged()
     }
   }
@@ -117,7 +124,7 @@ export class ListViewMixin extends Vue {
 
     const {models, meta} = await new ListAction()
       .setRequest(request)
-      .noEvents(this.noEvents === true)
+      .noEvents(!this.events)
       .load()
 
     if (!models) { // error happened

package/src/components/list/NextRouteFilterSource.js

@@ -0,0 +1,15 @@
+import { ListViewFilterSource } from '@afeefa/api-resources-client'
+
+export class NextRouteFilterSource extends ListViewFilterSource {
+  route = null
+
+  constructor (route) {
+    super()
+
+    this.route = route
+  }
+
+  getQuery () {
+    return this.route.query
+  }
+}

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

@@ -22,7 +22,7 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
   items = null
 
   created () {
-    if (this.filter.hasRequest()) {
+    if (this.filter.hasOptionsRequest()) {
       this.items = this.loadRequestOptions()
     } else if (this.filter.hasOptions()) {
       this.items = this.getOptions()
@@ -54,7 +54,7 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
 
   async loadRequestOptions () {
     const {models} = await new ListAction()
-      .setRequest(this.filter.request)
+      .setRequest(this.filter.createOptionsRequest())
       .noEvents()
       .load()
 

package/src/utils/props-helper.js

@@ -0,0 +1,21 @@
+export function propsWithDefaults (props) {
+  const normalizedProps = {}
+
+  for (const prop of props) {
+    if (typeof prop === 'object') {
+      Object.keys(prop).forEach(subProp => {
+        if (typeof prop[subProp] === 'object') {
+          normalizedProps[subProp] = prop[subProp]
+        } else {
+          normalizedProps[subProp] = { default: prop[subProp] }
+        }
+      })
+    } else {
+      normalizedProps[prop] = null
+    }
+  }
+
+  return {
+    props: normalizedProps
+  }
+}

package/src-admin/components/App.vue

@@ -13,7 +13,7 @@
       >
         <router-link
           :to="{name: rootRouteName}"
-          class="logoContainer d-flex flex-column pa-6"
+          class="logoContainer d-flex flex-column align-center pa-6"
         >
           <img
             v-if="logoUrl"
@@ -59,32 +59,14 @@
               </div>
             </div>
 
-            <v-menu top>
-              <template #activator="{ on, attrs }">
-                <v-icon
-                  class="contextButton"
-                  v-bind="attrs"
-                  v-on="on"
-                >
-                  $dotsVerticalIcon
-                </v-icon>
-              </template>
-
-              <v-list
-                class="pa-0"
+            <a-context-menu triggerIcon="$dotsVerticalIcon">
+              <a-context-menu-item
+                :to="{name: 'settings', params: {accountId: account.id}}"
               >
-                <v-list-item :to="{name: 'accounts.edit', params: {accountId: account.id}}">
-                  <v-list-item-icon class="ma-0 mr-2 align-self-center">
-                    <v-icon class="ml-n1 mr-1">
-                      $pencilIcon
-                    </v-icon>
-                  </v-list-item-icon>
-                  <v-list-item-title>
-                    Einstellungen
-                  </v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
+                <v-icon>$pencilIcon</v-icon>
+                Einstellungen
+              </a-context-menu-item>
+            </a-context-menu>
           </div>
         </v-container>
       </v-container>

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

@@ -73,7 +73,7 @@ export default class ListView extends Mixins(ListViewMixin) {
 
   @Watch('isLoading')
   isLoadingChanged () {
-    if (this.noEvents === undefined || !this.noEvents) {
+    if (this.events) {
       if (this.isLoading) {
         this.$events.dispatch(new LoadingEvent(LoadingEvent.START_LOADING))
       } else {

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

@@ -56,8 +56,8 @@ import { apiResources } from '@afeefa/api-resources-client'
 })
 export default class CreatePage extends Mixins(EditPageMixin) {
   created () {
-    if (!this.$parent.constructor.getCreateConfig) {
-      console.warn('<create-page> owner must provide a static getCreateConfig method.')
+    if (!this.$parent.constructor.createRouteConfig) {
+      console.warn('<create-page> owner must provide a static createRouteConfig method.')
     }
 
     this.reset()
@@ -65,11 +65,11 @@ export default class CreatePage extends Mixins(EditPageMixin) {
   }
 
   get editConfig () {
-    return this.$parent.constructor.getCreateConfig(this.$route)
+    return this.$parent.constructor.createRouteConfig
   }
 
   get modelUpateAction () {
-    return this.ModelClass.getAction('create')
+    return this.editConfig.createAction || this.ModelClass.getAction('save')
   }
 
   get _icon () {

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

@@ -55,7 +55,7 @@ import { Component, Vue, Watch } from 'vue-property-decorator'
 import { RemoveAction } from '@a-vue/api-resources/ApiActions'
 
 @Component({
-  props: ['model', 'title', 'icon', 'removeAction', 'protectRemove', 'listLink']
+  props: ['model', 'title', 'icon', 'protectRemove', 'listLink']
 })
 export default class DetailPage extends Vue {
   $hasOptions = ['edit', 'remove', 'list']
@@ -64,7 +64,7 @@ export default class DetailPage extends Vue {
   removeConfirmed = null
 
   created () {
-    if (!this.$parent.constructor.getDetailConfig) {
+    if (!this.$parent.constructor.detailRouteConfig) {
       console.warn('<detail-page> owner must provide a static getDetailConfig method.')
     }
     this.$emit('model', this.model)
@@ -80,7 +80,7 @@ export default class DetailPage extends Vue {
   }
 
   get detailConfig () {
-    return this.$parent.constructor.getDetailConfig(this.$route)
+    return this.$parent.constructor.detailRouteConfig
   }
 
   get document () {
@@ -110,10 +110,7 @@ export default class DetailPage extends Vue {
   }
 
   get _deleteAction () {
-    if (this.removeAction) {
-      return this.removeAction
-    }
-    return this.ModelClass.getAction('delete')
+    return this.detailConfig.removeAction || this.ModelClass.getAction('save')
   }
 
   async remove () {

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

@@ -78,8 +78,8 @@ export default class EditPage extends Mixins(EditPageMixin) {
   model_ = null
 
   created () {
-    if (!this.$parent.constructor.getEditConfig) {
-      console.warn('<edit-page> owner must provide a static getEditConfig method.')
+    if (!this.$parent.constructor.editRouteConfig) {
+      console.warn('<edit-page> owner must provide a static editRouteConfig method.')
     }
 
     this.model_ = this.model
@@ -95,11 +95,11 @@ export default class EditPage extends Mixins(EditPageMixin) {
   }
 
   get editConfig () {
-    return this.$parent.constructor.getEditConfig(this.$route)
+    return this.$parent.constructor.editRouteConfig
   }
 
   get modelUpateAction () {
-    return this.ModelClass.getAction('update')
+    return this.editConfig.updateAction || this.ModelClass.getAction('save')
   }
 
   get _getAction () {

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

@@ -18,13 +18,18 @@ Component.registerHooks([
 function load (route) {
   const routeDefinition = route.meta.routeDefinition
   const Component = routeDefinition.config.detail
-  const detailConfig = Component.getDetailConfig(route)
+
+  if (!Component.detailRouteConfig) {
+    console.warn('A detail route component must implement a static detailRouteConfig property.')
+  }
+
+  const detailConfig = Component.detailRouteConfig
   const action = detailConfig.action || detailConfig.ModelClass.getAction('get')
 
   return new GetAction()
     .setAction(action)
     .setFields(detailConfig.fields)
-    .setId(route.params[routeDefinition.idKey])
+    .setId(detailConfig.id || route.params[routeDefinition.idKey])
     .load()
 }
 

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

@@ -19,13 +19,18 @@ Component.registerHooks([
 function load (route) {
   const routeDefinition = route.meta.routeDefinition
   const Component = routeDefinition.config.edit
-  const editConfig = Component.getEditConfig(route)
+
+  if (!Component.editRouteConfig) {
+    console.warn('An edit route component must implement a static editRouteConfig property.')
+  }
+
+  const editConfig = Component.editRouteConfig
   const action = editConfig.getAction || editConfig.ModelClass.getAction('get')
 
   return new GetAction()
     .setAction(action)
     .setFields(editConfig.fields)
-    .setId(route.params[routeDefinition.idKey])
+    .setId(editConfig.id || route.params[routeDefinition.idKey])
     .load()
 }
 

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

@@ -10,7 +10,7 @@
 <script>
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
-import { RouteQueryFilterSource } from '@a-vue/components/list/RouteQueryFilterSource'
+import { NextRouteFilterSource } from '@a-vue/components/list/NextRouteFilterSource'
 import { ListViewModel } from '@afeefa/api-resources-client'
 
 Component.registerHooks([
@@ -36,7 +36,11 @@ function load (route) {
   }
 
   const request = new ListViewModel(Component.listViewConfig)
-    .filterSource(new RouteQueryFilterSource(route), false)
+    // read from next route query string, but do not push
+    // list component will be init with used_filters
+    .filterSource(new NextRouteFilterSource(route), false)
+    // read from history, but do not push
+    // list component will be init with used_filters
     .historyKey(route.path, false)
     .initFilters({
       source: true,

package/src/components/list/RouteQueryFilterSource.js

@@ -1,18 +0,0 @@
-import { BaseFilterSource } from '@afeefa/api-resources-client'
-
-export class RouteQueryFilterSource extends BaseFilterSource {
-  route = null
-
-  constructor (route) {
-    super()
-
-    this.route = route
-  }
-
-  getQuery () {
-    return this.route.query
-  }
-
-  push (_query) {
-  }
-}