@afeefa/vue-app 0.0.46 → 0.0.50

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

@@ -1 +1 @@
-0.0.46
+0.0.50

package/package.json

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

package/src/api-resources/ApiActions.js

@@ -1,8 +1,6 @@
-import { RouteParamsFilterSource } from '@a-vue/components/list/RouteParamsFilterSource'
 import { AlertEvent, DialogEvent, LoadingEvent, SaveEvent } from '@a-vue/events'
 import { eventBus } from '@a-vue/plugins/event-bus/EventBus'
 import { sleep } from '@a-vue/utils/timeout'
-import { RequestFilters } from '@afeefa/api-resources-client'
 
 export class GetAction {
   action = null
@@ -35,7 +33,7 @@ export class GetAction {
       eventBus.dispatch(new LoadingEvent(LoadingEvent.START_LOADING))
     }
 
-    const result = await this.action.request()
+    const result = await this.action.createRequest()
       .params({
         id: this.id
       })
@@ -111,7 +109,7 @@ export class SaveAction {
 
     const startTime = Date.now()
 
-    const result = await this.action.request()
+    const result = await this.action.createRequest()
       .params({
         id: this.id || undefined
       })
@@ -195,7 +193,7 @@ export class RemoveAction {
 
       const startTime = Date.now()
 
-      const result = await this.action.request()
+      const result = await this.action.createRequest()
         .params({
           id: this.id
         })
@@ -230,11 +228,6 @@ export class RemoveAction {
 
 export class ListAction {
   request = null
-  action = null
-  fields = null
-  scopes = {}
-  filters = {}
-  route = null
   events = true
 
   setRequest (request) {
@@ -242,31 +235,6 @@ export class ListAction {
     return this
   }
 
-  setAction (action) {
-    this.action = action
-    return this
-  }
-
-  setFiltersForRoute (route) {
-    this.route = route
-    return this
-  }
-
-  setFields (fields) {
-    this.fields = fields
-    return this
-  }
-
-  setScopes (scopes) {
-    this.scopes = scopes
-    return this
-  }
-
-  setFilters (filters) {
-    this.filters = filters
-    return this
-  }
-
   noEvents (noEvents) {
     this.events = noEvents === undefined ? false : !noEvents
     return this
@@ -277,26 +245,7 @@ export class ListAction {
       eventBus.dispatch(new LoadingEvent(LoadingEvent.START_LOADING))
     }
 
-    let filters = this.filters
-
-    if (this.route) {
-      const querySource = new RouteParamsFilterSource(this.route)
-      const requestFilters = this.action.createRequestFilters(null, querySource)
-      const storedFilters = RequestFilters.fromHistory(this.route.path)
-      if (storedFilters) {
-        requestFilters.initFromUsed(storedFilters.serialize(), 1)
-      }
-      filters = requestFilters.serialize()
-    }
-
-    const request = this.request ||
-      this.action
-        .request()
-        .scopes(this.scopes)
-        .filters(filters)
-        .fields(this.fields)
-
-    const result = await request.send()
+    const result = await this.request.send()
 
     if (result.error) {
       if (this.events) {

package/src/components/AModal.vue

@@ -64,7 +64,7 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
   }
 
   mounted () {
-    // monkey patch onFousin to allow non vuetify-popups to receive focus
+    // monkey patch onFocusin to allow non vuetify-popups to receive focus
     const dialog = this.$refs.dialog
     const onFocusin = dialog.onFocusin
     dialog.onFocusin = e => {
@@ -127,7 +127,6 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
 
   createTransientAnchor () {
     let transientAnchorEl = document.querySelector('.' + this.transientAnchorClass)
-    console.log('anchor', this.anchorPosition)
     if (!transientAnchorEl) {
       transientAnchorEl = document.createElement('div')
       transientAnchorEl.classList.add(this.transientAnchorClass)

package/src/components/ASearchSelect.vue

@@ -46,11 +46,10 @@
         v-if="isOpen"
         v-bind="listConfig"
         :q="q"
-        :noEvents="true"
-        :noHistory="true"
+        :events="false"
+        :history="false"
         :filterSource="filterSource"
         :loadOnlyIfKeyword="_loadOnlyIfKeyword"
-        :filters.sync="filters"
         :count.sync="count"
         :isLoading.sync="isLoading"
       >
@@ -76,7 +75,7 @@
           <div class="lastColumn" />
         </template>
 
-        <template #not-found>
+        <template #not-found="{ filters }">
           <slot
             name="not-found"
             :filters="filters"
@@ -93,7 +92,7 @@ import { Component, Watch, Mixins } from 'vue-property-decorator'
 import { UsesPositionServiceMixin } from '../services/position/UsesPositionServiceMixin'
 import { PositionConfig } from '../services/PositionService'
 import { randomCssClass } from '../utils/random'
-import { QuerySourceType } from '@a-vue/components/list/QuerySourceType'
+import { FilterSourceType } from '@a-vue/components/list/FilterSourceType'
 import SearchSelectFilters from './search-select/SearchSelectFilters'
 import SearchSelectList from './search-select/SearchSelectList'
 import { CancelOnEscMixin } from '@a-vue/services/escape/CancelOnEscMixin'
@@ -109,7 +108,7 @@ export default class ASearchSelect extends Mixins(UsesPositionServiceMixin, Canc
   selectId = randomCssClass(10)
   isOpen = false
   items_ = []
-  filterSource = QuerySourceType.OBJECT
+  filterSource = FilterSourceType.OBJECT
 
   isLoading = false
   filters = []

package/src/components/ASelect.vue

@@ -23,14 +23,22 @@ export default class ASelect extends Mixins(ComponentWidthMixin) {
   items_ = []
 
   mounted () {
-    // monkey patch v-select setting 'undefined' on clearable
+    // monkey patch v-select to set default value on clear
+    const clearableCallback = this.select.clearableCallback
+    this.select.clearableCallback = () => {
+      this.select.isClear = true
+      clearableCallback()
+      this.select.isClear = false
+    }
+
     const setValue = this.select.setValue
     this.select.setValue = value => {
-      if (!value && value !== false) { // if undefined alike
+      if (this.select.isClear) {
         value = this.defaultValue || null
       }
       setValue(value)
     }
+
     this.init()
   }
 

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

@@ -0,0 +1,7 @@
+export class FilterSourceType {
+  // filters are synchronized with url's query string
+  static QUERY_STRING = 'query_string'
+
+  // filters are synchronized with plain history object
+  static OBJECT = 'object'
+}

package/src/components/list/ListFilterMixin.js

@@ -28,12 +28,9 @@ export class ListFilterMixin extends Vue {
 
   get filter () {
     const filter = this.filters[this._name]
-
-
     if (!filter) {
       console.warn(`Filter "${this._name}" not found`)
     }
-
     return filter
   }
 

package/src/components/list/ListViewMixin.js

@@ -1,23 +1,30 @@
 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 { QuerySourceType } from './QuerySourceType'
-import { RouteFilterSource } from './RouteFilterSource'
+import { CurrentRouteFilterSource } from './CurrentRouteFilterSource'
+import { FilterSourceType } from './FilterSourceType'
 
 @Component({
-  props: [
-    'models', 'meta', // if already loaded
-    'action', 'scopes', 'initialFilters', 'fields',
-    'noEvents', 'noHistory', 'filterHistoryKey', 'filterSource',
-    'loadOnlyIfKeyword'
-  ]
+  ...propsWithDefaults([
+    'models', 'meta', // given, if already loaded
+    'listViewConfig',
+    'filterHistoryKey',
+    'loadOnlyIfKeyword',
+    {
+      filterSource: FilterSourceType.QUERY_STRING,
+      events: true,
+      history: true
+    }
+  ])
 })
 export class ListViewMixin extends Vue {
   LIST_VIEW = true
 
+  listViewModel = null
   models_ = []
   meta_ = {}
-  requestFilters = null
   isLoading = false
 
   created () {
@@ -25,37 +32,41 @@ export class ListViewMixin extends Vue {
   }
 
   destroyed () {
-    this.requestFilters.off('change', this.filtersChanged)
+    this.listViewModel.off('change', this.filtersChanged)
   }
 
   init () {
-    if (this.models) {
-      this.models_ = this.models
-      this.meta_ = this.meta
-    }
-
-    if (this.requestFilters) {
-      this.requestFilters.off('change', this.filtersChanged)
+    if (this.listViewModel) {
+      // this can happen only on HMR-reload
+      this.listViewModel.off('change', this.filtersChanged)
     }
 
-    const historyKey = this.noHistory
-      ? undefined
-      : [this.$route.path, this.filterHistoryKey].filter(i => i).join('.')
-    const querySource = this.filterSource === QuerySourceType.OBJECT ? undefined : new RouteFilterSource(this.$router)
-    this.requestFilters = this.action.createRequestFilters(historyKey, querySource)
+    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.initialFilters) {
-      console.log('set initial Filters: ', this.initialFilters)
-      this.requestFilters.initFromUsed(this.initialFilters)
+    if (this.models) {
+      this.models_ = this.models
+      this.meta_ = this.meta
     }
 
-    this.requestFilters.on('change', this.filtersChanged)
+    this.listViewModel = new ListViewModel(this.listViewConfig)
+      .filterSource(filterSource, !!filterSource)
+      .historyKey(historyKey, this.history)
+      .usedFilters(this.meta_.used_filters || null, this.meta_.count_search || 0)
+      .initFilters({
+        source: !!filterSource,
+        history: !!historyKey,
+        used: !!this.models
+      })
+      .on('change', this.filtersChanged) // listen to change
 
-    this.$emit('update:filters', this.filters)
     this._filtersInitialized()
 
     if (this.models) {
-      this.requestFilters.initFromUsed(this.meta_.used_filters, this.meta_.count_search)
       this.$emit('update:count', this.meta_.count_search)
     } else {
       this.load()
@@ -64,8 +75,8 @@ export class ListViewMixin extends Vue {
 
   @Watch('$route.query')
   routeQueryChanged () {
-    if (this.filterSource !== QuerySourceType.ROUTE) {
-      this.requestFilters.querySourceChanged()
+    if (this.filterSource === FilterSourceType.QUERY_STRING) {
+      this.listViewModel.filterSourceChanged()
     }
   }
 
@@ -79,16 +90,15 @@ export class ListViewMixin extends Vue {
   }
 
   filtersChanged () {
-    console.log('filters changed')
     this.load()
   }
 
   resetFilters () {
-    this.requestFilters.reset()
+    this.listViewModel.resetFilters()
   }
 
   get filters () {
-    return this.requestFilters.getFilters()
+    return this.listViewModel.getFilters().getEntries()
   }
 
   get count () {
@@ -110,16 +120,16 @@ export class ListViewMixin extends Vue {
     this.isLoading = true
     this.$emit('update:isLoading', this.isLoading)
 
+    const request = this.listViewModel.getApiRequest()
+
     const {models, meta} = await new ListAction()
-      .setAction(this.action)
-      .setScopes(this.scopes)
-      .setFilters(this.requestFilters.serialize())
-      .setFields(this.fields)
-      .noEvents(this.noEvents)
+      .setRequest(request)
+      .noEvents(!this.events)
       .load()
 
-    if (!models) { // error, reset filters
-      this.resetFilters()
+    if (!models) { // error happened
+      this.isLoading = false
+      this.$emit('update:isLoading', this.isLoading)
       return
     }
 
@@ -127,7 +137,7 @@ export class ListViewMixin extends Vue {
     this.meta_ = meta
 
     if (this.meta_.used_filters) {
-      this.requestFilters.initFromUsed(this.meta_.used_filters, this.meta_.count_search)
+      this.listViewModel.initFromUsedFilters(this.meta_.used_filters, this.meta_.count_search)
     }
 
     this.isLoading = false

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

@@ -5,7 +5,8 @@
     :items="_items"
     itemText="itemTitle"
     itemValue="itemValue"
-    :clearable="filter.value !== null"
+    :clearable="filter.value !== filter.defaultValue"
+    :defaultValue="filter.defaultValue"
     v-bind="$attrs"
   />
 </template>
@@ -16,16 +17,14 @@ import { Component, Mixins } from 'vue-property-decorator'
 import { ListFilterMixin } from '../ListFilterMixin'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
 
-@Component({
-  props: ['totalVisible']
-})
+@Component
 export default class ListFilterSelect extends Mixins(ListFilterMixin) {
   items = null
 
   created () {
-    if (this.hasOptionsRequest()) {
+    if (this.filter.hasOptionsRequest()) {
       this.items = this.loadRequestOptions()
-    } else if (this.hasOptions()) {
+    } else if (this.filter.hasOptions()) {
       this.items = this.getOptions()
     }
   }
@@ -34,43 +33,49 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
     return this.$attrs.items || this.items || []
   }
 
-  hasOptions () {
-    return this.filter.options
+  get showNullOption () {
+    // either null is a selectable option, than it should be shown in the list
+    // or the default is null, so the list should offer a 'null' option for the unselected state
+    return this.filter.nullIsOption || this.filter.defaultValue === null
   }
 
-  hasOptionsRequest () {
-    return this.filter.request
+  createOptions () {
+    const options = []
+
+    if (this.showNullOption) {
+      options.push({
+        itemTitle: 'Alle',
+        itemValue: null
+      })
+    }
+
+    return options
   }
 
   async loadRequestOptions () {
     const {models} = await new ListAction()
-      .setRequest(this.filter.request)
+      .setRequest(this.filter.createOptionsRequest())
       .noEvents()
       .load()
 
     return [
-      {
-        itemTitle: 'Alle',
-        itemValue: null
-      },
+      ...this.createOptions(),
       ...models.map(model => ({
         itemTitle: model.name,
         itemValue: model.id
       }))
-
     ]
   }
 
   getOptions () {
     return [
-      {
-        itemTitle: 'Alle',
-        itemValue: null
-      },
-      ...this.filter.options.map(o => ({
-        itemTitle: o ? 'Ja' : 'Nein',
-        itemValue: o
-      }))
+      ...this.createOptions(),
+      ...this.filter.options
+        .filter(o => o !== null) // null is already set in options (if any)
+        .map(o => ({
+          itemTitle: o ? 'Ja' : 'Nein',
+          itemValue: o
+        }))
     ]
   }
 }

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

@@ -26,7 +26,10 @@
       v-else-if="showNotFound"
       class="notFound"
     >
-      <slot name="not-found">
+      <slot
+        name="not-found"
+        :filters="filters"
+      >
         Nichts gefunden.
       </slot>
     </div>

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

@@ -0,0 +1,13 @@
+import { apiResources } from '@afeefa/api-resources-client'
+
+class ApiResourcesPlugin {
+  install (Vue) {
+    Object.defineProperty(Vue.prototype, '$apiResources', {
+      get () {
+        return apiResources
+      }
+    })
+  }
+}
+
+export const apiResourcesPlugin = new ApiResourcesPlugin()

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/bootstrap.js

@@ -1,6 +1,7 @@
 import './config/event-bus'
 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'
@@ -10,6 +11,7 @@ import { appConfig } from './config/AppConfig'
 import routeConfigPlugin from './config/routing'
 import vuetify from './config/vuetify'
 
+Vue.use(apiResourcesPlugin)
 Vue.use(hasOptionsPlugin)
 
 Vue.config.productionTip = false

package/src-admin/components/Splash.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app class="splash">
     <v-container
       fill-height
       fluid
@@ -49,6 +49,13 @@ export default class Splash extends Vue {
 
 
 <style lang="scss" scoped>
+.splash {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+}
+
 .logo {
   margin-bottom: 2rem;
 }

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

@@ -8,10 +8,10 @@
       >
         {{ _icon.icon }}
       </v-icon>
-      <label :class="['label', {'label--withIcon': this._icon != null}]">{{ label }}</label>
+      <label :class="['label', {'label--withIcon': _icon != null}]">{{ label }}</label>
     </div>
 
-    <div :class="['content', {'content--withIcon': this._icon != null}]">
+    <div :class="['content', {'content--withIcon': _icon != null}]">
       <a-row
         vertical
         gap="6"
@@ -37,8 +37,8 @@ export default class DetailProperty extends Vue {
     }
 
     if (this.iconModelType) {
-      const model = apiResources.getModel(this.iconModelType)
-      return model.icon
+      const ModelClass = apiResources.getModelClass(this.iconModelType)
+      return ModelClass.icon
     }
   }
 }
@@ -64,7 +64,7 @@ export default class DetailProperty extends Vue {
       @media (max-width: 900px), (orientation : portrait) {
         padding-left: 55px;
         &--withIcon {
-          padding-left: 0; 
+          padding-left: 0;
         }
       }
     }

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

@@ -31,6 +31,7 @@
             <slot
               name="model-table"
               :model="model"
+              :setFilter="setFilter"
             />
           </a-table-row>
         </a-table>
@@ -72,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 {
@@ -85,6 +86,10 @@ export default class ListView extends Mixins(ListViewMixin) {
   get _table () {
     return this.table !== false
   }
+
+  setFilter (name, value) {
+    this.filters[name].value = value
+  }
 }
 </script>
 

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,15 @@ 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(this.$routeDefinition, 'create')
+    return this.editConfig.createAction || this.ModelClass.getAction('create')
+  }
+
+  get _icon () {
+    return this.icon || this.modelToEdit.getIcon()
   }
 
   get _title () {
@@ -89,7 +93,7 @@ export default class CreatePage extends Mixins(EditPageMixin) {
   get _listLink () {
     if (this.listLink) {
       if (typeof this.listLink === 'function') {
-        return this.listLink(this.$route.params)
+        return this.listLink()
       } else {
         return this.listLink
       }
@@ -97,13 +101,6 @@ export default class CreatePage extends Mixins(EditPageMixin) {
     return this.modelToEdit.getLink('list')
   }
 
-  get _icon () {
-    if (this.icon) {
-      return this.icon
-    }
-    return this.modelToEdit.getIcon()
-  }
-
   createModelToEdit () {
     if (this.createModel) {
       return this.createModel(this.fields)

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 () {
@@ -94,7 +94,7 @@ export default class DetailPage extends Vue {
   get _listLink () {
     if (this.listLink) {
       if (typeof this.listLink === 'function') {
-        return this.listLink(this.$route.params)
+        return this.listLink()
       } else {
         return this.listLink
       }
@@ -110,10 +110,7 @@ export default class DetailPage extends Vue {
   }
 
   get _deleteAction () {
-    if (this.removeAction) {
-      return this.removeAction
-    }
-    return this.ModelClass.getAction(this.$routeDefinition, 'delete')
+    return this.detailConfig.removeAction || this.ModelClass.getAction('delete')
   }
 
   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,18 +95,22 @@ 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(this.$routeDefinition, 'update')
+    return this.editConfig.updateAction || this.ModelClass.getAction('update')
   }
 
   get _getAction () {
     if (this.getAction) {
       return this.getAction
     }
-    return this.ModelClass.getAction(this.$routeDefinition, 'get')
+    return this.ModelClass.getAction('get')
+  }
+
+  get _icon () {
+    return this.icon || this.model.getIcon()
   }
 
   get _title () {
@@ -126,7 +130,7 @@ export default class EditPage extends Mixins(EditPageMixin) {
   get _listLink () {
     if (this.listLink) {
       if (typeof this.listLink === 'function') {
-        return this.listLink(this.$route.params)
+        return this.listLink()
       } else {
         return this.listLink
       }
@@ -134,13 +138,6 @@ export default class EditPage extends Mixins(EditPageMixin) {
     return this.model.getLink('list')
   }
 
-  get _icon () {
-    if (this.icon) {
-      return this.icon
-    }
-    return this.model.getIcon()
-  }
-
   createModelToEdit () {
     return this.model_.cloneForEdit(this.fields)
   }

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

@@ -24,17 +24,21 @@ import { Component, Vue } from 'vue-property-decorator'
 import { apiResources } from '@afeefa/api-resources-client'
 
 @Component({
-  props: ['title', 'newTitle', 'newLink', 'ModelClass']
+  props: ['icon', 'title', 'newTitle', 'newLink', 'Model']
 })
 export default class ListPage extends Vue {
   $hasOptions = ['add']
 
+  get _icon () {
+    return this.icon || this.Model.icon
+  }
+
   get _title () {
     if (this.title) {
       return this.title
     }
 
-    const type = apiResources.getType(this.ModelClass.type)
+    const type = apiResources.getType(this.Model.type)
     return type.t('TITLE_PLURAL')
   }
 
@@ -43,26 +47,12 @@ export default class ListPage extends Vue {
       return this.newTitle
     }
 
-    const type = apiResources.getType(this.ModelClass.type)
+    const type = apiResources.getType(this.Model.type)
     return type.t('TITLE_SINGULAR')
   }
 
-  get _icon () {
-    if (this.icon) {
-      return this.icon
-    }
-    return this.ModelClass.icon
-  }
-
   get _newLink () {
-    if (this.newLink) {
-      if (typeof this.newLink === 'function') {
-        return this.newLink(this.$route.params)
-      } else {
-        return this.newLink
-      }
-    }
-    return this.ModelClass.getLink('new')
+    return this.newLink || this.Model.getLink('new')
   }
 }
 </script>

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

@@ -18,8 +18,13 @@ Component.registerHooks([
 function load (route) {
   const routeDefinition = route.meta.routeDefinition
   const Component = routeDefinition.config.detail
-  const detailConfig = Component.getDetailConfig(route)
-  const action = detailConfig.action || detailConfig.ModelClass.getAction(routeDefinition, 'get')
+
+  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)

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

@@ -19,8 +19,13 @@ Component.registerHooks([
 function load (route) {
   const routeDefinition = route.meta.routeDefinition
   const Component = routeDefinition.config.edit
-  const editConfig = Component.getEditConfig(route)
-  const action = editConfig.getAction || editConfig.ModelClass.getAction(routeDefinition, 'get')
+
+  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)

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

@@ -10,6 +10,8 @@
 <script>
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
+import { NextRouteFilterSource } from '@a-vue/components/list/NextRouteFilterSource'
+import { ListViewModel } from '@afeefa/api-resources-client'
 
 Component.registerHooks([
   'beforeRouteEnter',
@@ -28,14 +30,26 @@ let lastVm = null
 function load (route) {
   const routeDefinition = route.meta.routeDefinition
   const Component = routeDefinition.config.list
-  const listConfig = Component.getListConfig(route)
-  const action = listConfig.action || listConfig.ModelClass.getAction(routeDefinition, 'list')
+
+  if (!Component.listViewConfig) {
+    console.warn('A list route component must implement a static listViewConfig property.')
+  }
+
+  const request = new ListViewModel(Component.listViewConfig)
+    // 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,
+      history: true
+    })
+    .getApiRequest()
 
   return new ListAction()
-    .setAction(action)
-    .setFields(listConfig.fields)
-    .setScopes(listConfig.scopes)
-    .setFiltersForRoute(route)
+    .setRequest(request)
     .load()
 }
 

package/src-admin/models/Model.js

@@ -1,5 +1,6 @@
-import { Model as ApiResourcesModel } from '@afeefa/api-resources-client'
+import { Model as ApiResourcesModel, apiResources } from '@afeefa/api-resources-client'
 import { mdiAlphaMCircle } from '@mdi/js'
+
 export class Model extends ApiResourcesModel {
   static resourceType = null
   static routeName = null
@@ -9,12 +10,14 @@ export class Model extends ApiResourcesModel {
     return (new this()).getLink(action)
   }
 
-  static getAction (routeDefinition, action) {
+  static getAction (action) {
     if (this.resourceType) {
-      const api = routeDefinition.config.api
-      return api.getAction(this.resourceType, action)
+      return apiResources.getAction({
+        resource: this.resourceType,
+        action
+      })
     }
-    console.warn('You can\'t get an action of a model without resourceType:', this.type)
+    console.warn('You can\'t get an action out of a model without resourceType:', this.type)
     return null
   }
 
@@ -32,8 +35,8 @@ export class Model extends ApiResourcesModel {
     }
   }
 
-  getAction (routeDefinition, action) {
-    return this.constructor.getAction(routeDefinition, action)
+  getAction (action) {
+    return this.constructor.getAction(action)
   }
 
   getIcon () {

package/src-admin/styles.scss

@@ -21,14 +21,16 @@
 }
 
 .v-application {
-  margin-bottom: 2rem;
-
   .text-strike {
     color: inherit;
     text-decoration: line-through;
   }
 }
 
+.v-main {
+  margin-bottom: 2rem;
+}
+
 .theme--light.v-btn.v-btn--has-bg {
   background-color: #E9E9E9;
 }

package/src/components/list/QuerySourceType.js

@@ -1,4 +0,0 @@
-export class QuerySourceType {
-  static ROUTE = 'route'
-  static OBJECT = 'object'
-}

package/src/components/list/RouteParamsFilterSource.js

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