@afeefa/vue-app 0.0.43 → 0.0.47

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

@@ -1 +1 @@
-0.0.43
+0.0.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.43",
+  "version": "0.0.47",
   "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/APagination.vue

@@ -33,10 +33,6 @@ export default class APagination extends Vue {
 
 
 <style scoped lang="scss">
-.pagination-nav {
-  line-height: 1;
-}
-
 ::v-deep .v-pagination {
   gap: .3rem;
   .v-pagination__item,

package/src/components/ARow.vue

@@ -58,9 +58,7 @@ export default class ARow extends Vue {
 <style scoped lang="scss">
 .a-row {
   display: flex;
-  width: 100%;
-  overflow-x: scroll;
-
+  overflow: hidden;
   @media (max-width: 900px), (orientation : portrait) {
     flex-wrap: wrap;
     & > * {

package/src/components/ASearchSelect.vue

@@ -93,7 +93,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 +109,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/ATableHeader.vue

@@ -56,7 +56,7 @@ export default class ATableHeader extends Vue {
     > * {
       padding-left: .5rem;
       padding-right: 1rem;
-      padding-bottom: .2rem;
+      padding-bottom: .6rem;
       &:last-child {
         padding-right: .2rem;
       }

package/src/components/list/FilterSourceType.js

@@ -0,0 +1,10 @@
+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,14 +1,15 @@
 import { ListAction } from '@a-vue/api-resources/ApiActions'
 import { Component, Vue, Watch } from 'vue-property-decorator'
 
-import { QuerySourceType } from './QuerySourceType'
+import { FilterSourceType } from './FilterSourceType'
 import { RouteFilterSource } from './RouteFilterSource'
 
 @Component({
   props: [
-    'models', 'meta',
-    'action', 'scopes', 'initialFilters', 'fields',
-    'noEvents', 'noHistory', 'filterHistoryKey', 'filterSource',
+    'models', 'meta', // if already loaded
+    'listViewRequest',
+    'noEvents', 'noHistory',
+    'filterHistoryKey', 'filterSource',
     'loadOnlyIfKeyword'
   ]
 })
@@ -35,19 +36,16 @@ export class ListViewMixin extends Vue {
     }
 
     if (this.requestFilters) {
+      // this can happen only on HMR-reload
       this.requestFilters.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)
-
-    console.log('Initial Filters: ', this.initialFilters)
-    if (this.initialFilters) {
-      this.requestFilters.initFromUsed(this.initialFilters)
-    }
+    const filterSource = this.filterSource === FilterSourceType.OBJECT ? undefined : new RouteFilterSource(this.$router)
+    const action = this.listViewRequest.getAction()
+    this.requestFilters = action.createRequestFilters(historyKey, filterSource)
 
     this.requestFilters.on('change', this.filtersChanged)
 
@@ -64,8 +62,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.requestFilters.filterSourceChanged()
     }
   }
 
@@ -109,11 +107,12 @@ export class ListViewMixin extends Vue {
     this.isLoading = true
     this.$emit('update:isLoading', this.isLoading)
 
+    const request = this.listViewRequest
+      .filters(this.requestFilters.serialize())
+      .toApiRequest()
+
     const {models, meta} = await new ListAction()
-      .setAction(this.action)
-      .setFields(this.fields)
-      .setScopes(this.scopes)
-      .setFilters(this.requestFilters.serialize())
+      .setRequest(request)
       .noEvents(this.noEvents)
       .load()
 

package/src/components/list/ListViewRequest.js

@@ -0,0 +1,124 @@
+import { RequestFilters, apiResources } from '@afeefa/api-resources-client'
+
+export class ListViewRequest {
+  _api = {}
+  _resource = {}
+  _action = {}
+
+  _params = {}
+  _filters = {}
+  _fields = {}
+
+  _filterSource = null
+  _historyKey = null
+
+  action ({api, resource, action}) {
+    this._api = api
+    this._resource = resource
+    this._action = action
+    return this
+  }
+
+  getAction () {
+    return apiResources.getAction({
+      api: this._api,
+      resource: this._resource,
+      action: this._action
+    })
+  }
+
+  params (params) {
+    this._params = params
+    return this
+  }
+
+  getParams () {
+    return this._params
+  }
+
+  filters (filters) {
+    this._filters = filters
+    return this
+  }
+
+  getFilters () {
+    return this._filters
+  }
+
+  fields (fields) {
+    this._fields = fields
+    return this
+  }
+
+  getFields () {
+    return this._fields
+  }
+
+  initFromFilterSource (filterSource) {
+    this._filterSource = filterSource
+    return this
+  }
+
+  recreateFromHistory (historyKey) {
+    this._historyKey = historyKey
+    return this
+  }
+
+  clone () {
+    const request = new ListViewRequest()
+    request._api = this._api
+    request._resource = this._resource
+    request._action = this._action
+    request._params = this._params
+    request._filters = this._filters
+    request._fields = this._fields
+    return request
+  }
+
+  toApiRequest () {
+    const action = this.getAction({
+      api: this._api,
+      resource: this._resource,
+      action: this._action
+    })
+
+    const request = action.createRequest()
+      .params(this._params)
+      .fields(this._fields)
+
+    // filters set on the request will be skipped if filterSource or historyKey are given
+    // and produce results
+    let filtersToUse = this._filters
+    let useHistory = true
+
+    // create and init request filters based on the current filter source state
+    if (this._filterSource) {
+      const requestFilters = action.createRequestFilters(null, this._filterSource)
+      const requestFiltersToUse = requestFilters.serialize()
+      // do not use history if any filter given by the given filter source
+      if (Object.keys(requestFiltersToUse).length) {
+        useHistory = false
+      }
+
+      filtersToUse = {
+        ...filtersToUse,
+        ...requestFiltersToUse
+      }
+    }
+
+    // if any filters is set by current filter source
+    // skip history and give that filter precedence
+    // otherwise: set stored filters
+    if (useHistory && this._historyKey) {
+      // check any already stored filters from a previous request
+      const storedFilters = RequestFilters.fromHistory(this._historyKey)
+      if (storedFilters) {
+        filtersToUse = storedFilters.serialize()
+      }
+    }
+
+    request.filters(filtersToUse)
+
+    return request
+  }
+}

package/src/components/list/{RouteParamsFilterSource.js → RouteQueryFilterSource.js}

@@ -1,6 +1,6 @@
 import { BaseFilterSource } from '@afeefa/api-resources-client'
 
-export class RouteParamsFilterSource extends BaseFilterSource {
+export class RouteQueryFilterSource extends BaseFilterSource {
   route = null
 
   constructor (route) {

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-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
@@ -48,7 +50,7 @@ export async function bootstrap ({ apis, models, routing, authService, app, comp
       vuetify,
       router,
       el: '#app',
-      template: '<index :splash="splash" />',
+      template: '<start :splash="splash" />',
       data: {
         splash
       }

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

@@ -7,7 +7,7 @@ import DetailContent from './detail/DetailContent'
 import DetailMeta from './detail/DetailMeta'
 import DetailProperty from './detail/DetailProperty'
 import DetailTitle from './detail/DetailTitle'
-import Index from './Index'
+import Start from './Start.vue'
 import ListCard from './list/ListCard'
 import ListColumnHeader from './list/ListColumnHeader'
 import ListContent from './list/ListContent'
@@ -46,4 +46,4 @@ Vue.component('DetailColumn', DetailColumn)
 Vue.component('AppBarButton', AppBarButton)
 Vue.component('AppBarTitle', AppBarTitle)
 
-Vue.component('Index', Index)
+Vue.component('Start', Start)

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

@@ -9,23 +9,32 @@
     </div>
 
     <template v-if="models_.length">
-      <template v-if="table">
-        <div class="table">
-          <div class="header">
+      <template v-if="_table">
+        <a-table>
+          <a-table-header>
+            <div v-if="$has.icon" />
+
             <slot name="header-table" />
-          </div>
+          </a-table-header>
 
-          <div
+          <a-table-row
             v-for="model in models_"
             :key="model.id"
-            class="row"
           >
+            <v-icon
+              v-if="$has.icon"
+              :color="model.getIcon().color"
+              size="1.2rem"
+              v-text="model.getIcon().icon"
+            />
+
             <slot
               name="model-table"
               :model="model"
+              :setFilter="setFilter"
             />
-          </div>
-        </div>
+          </a-table-row>
+        </a-table>
       </template>
 
       <template v-else>
@@ -60,6 +69,8 @@ import { LoadingEvent } from '@a-vue/events'
   props: ['table']
 })
 export default class ListView extends Mixins(ListViewMixin) {
+  $hasOptions = ['icon']
+
   @Watch('isLoading')
   isLoadingChanged () {
     if (this.noEvents === undefined || !this.noEvents) {
@@ -71,56 +82,31 @@ 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
+  }
 }
 </script>
 
 
 <style lang="scss" scoped>
+.listView {
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
 .filters {
+  margin-left: 4px;
   margin-bottom: 2rem;
 }
 
-.table {
-  display: table;
-  border-collapse: collapse;
+.a-table-row > :last-child {
   width: 100%;
-
-  .header, .row {
-    display: table-row;
-    > * {
-      display: table-cell;
-      padding: .4rem;
-      padding-right: 1.5rem;
-      white-space: nowrap;
-      vertical-align: middle;
-
-      &.info {
-        background: none !important;
-        color: #888888;
-      }
-    }
-  }
-
-  .header {
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    color: #999999;
-    font-size: .9rem;
-    > * {
-      padding-right: 1rem;
-    }
-  }
-
-  .row {
-    border-bottom: 1px solid #DDDDDD;
-
-    &:hover {
-      background: #F4F4F4;
-    }
-
-    &:last-child {
-      border: none;
-    }
-  }
 }
 </style>

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

@@ -69,7 +69,11 @@ export default class CreatePage extends Mixins(EditPageMixin) {
   }
 
   get modelUpateAction () {
-    return this.ModelClass.getAction(this.$routeDefinition, 'create')
+    return 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

@@ -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
       }
@@ -113,7 +113,7 @@ export default class DetailPage extends Vue {
     if (this.removeAction) {
       return this.removeAction
     }
-    return this.ModelClass.getAction(this.$routeDefinition, 'delete')
+    return this.ModelClass.getAction('delete')
   }
 
   async remove () {

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

@@ -99,14 +99,18 @@ export default class EditPage extends Mixins(EditPageMixin) {
   }
 
   get modelUpateAction () {
-    return this.ModelClass.getAction(this.$routeDefinition, 'update')
+    return 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

@@ -15,72 +15,7 @@
       />
     </app-bar-button>
 
-    <list-view
-      v-bind="$attrs"
-      :models="models"
-      :meta="meta"
-      :action="action"
-      :scopes="scopes"
-      :fields="fields"
-      :table="table"
-      :initialFilters="initialFilters"
-      v-on="$listeners"
-    >
-      <template #filters="{filters, count}">
-        <div class="pl-2">
-          <slot
-            name="filters"
-            :filters="filters"
-            :count="count"
-          />
-        </div>
-      </template>
-
-      <template
-        v-if="table"
-        #header-table
-      >
-        <div />
-
-        <slot name="header" />
-      </template>
-
-      <template
-        v-if="table"
-        #model-table="{ model }"
-      >
-        <v-icon
-          :color="model.getIcon().color"
-          size="1.5rem"
-          v-text="model.getIcon().icon"
-        />
-
-        <slot
-          name="model"
-          :model="model"
-        />
-
-        <div class="lastColumn" />
-      </template>
-
-      <template
-        v-if="!table"
-        #model="{ model }"
-      >
-        <a-row gap="4">
-          <v-icon
-            :color="model.getIcon().color"
-            size="2rem"
-            v-text="model.getIcon().icon"
-          />
-
-          <slot
-            name="model"
-            :model="model"
-          />
-        </a-row>
-      </template>
-    </list-view>
+    <slot />
   </div>
 </template>
 
@@ -89,42 +24,13 @@ import { Component, Vue } from 'vue-property-decorator'
 import { apiResources } from '@afeefa/api-resources-client'
 
 @Component({
-  props: ['models', 'meta', 'title', 'newTitle', 'newLink', 'table']
+  props: ['icon', 'title', 'newTitle', 'newLink', 'Model']
 })
 export default class ListPage extends Vue {
   $hasOptions = ['add']
 
-  created () {
-    if (!this.$parent.constructor.getListConfig) {
-      console.warn('<list-view> owner must provide a static getListConfig method.')
-    }
-  }
-
-  get listConfig () {
-    return this.$parent.constructor.getListConfig(this.$route)
-  }
-
-  get ModelClass () {
-    return this.listConfig.ModelClass
-  }
-
-  get action () {
-    if (this.listConfig.action) {
-      return this.listConfig.action
-    }
-    return this.ModelClass.getAction(this.$routeDefinition, 'list')
-  }
-
-  get scopes () {
-    return this.listConfig.scopes
-  }
-
-  get initialFilters () {
-    return this.listConfig.initialFilters
-  }
-
-  get fields () {
-    return this.listConfig.fields
+  get _icon () {
+    return this.icon || this.Model.icon
   }
 
   get _title () {
@@ -132,7 +38,7 @@ export default class ListPage extends Vue {
       return this.title
     }
 
-    const type = apiResources.getType(this.ModelClass.type)
+    const type = apiResources.getType(this.Model.type)
     return type.t('TITLE_PLURAL')
   }
 
@@ -141,33 +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>
-
-
-<style lang="scss" scoped>
-.lastColumn {
-  width: 100%;
-}
-</style>

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

@@ -19,13 +19,7 @@ function load (route) {
   const routeDefinition = route.meta.routeDefinition
   const Component = routeDefinition.config.detail
   const detailConfig = Component.getDetailConfig(route)
-
-  let action = null
-  if (detailConfig.ModelClass) {
-    action = detailConfig.ModelClass.getAction(routeDefinition, 'get')
-  } else {
-    action = detailConfig.action
-  }
+  const action = detailConfig.action || detailConfig.ModelClass.getAction('get')
 
   return new GetAction()
     .setAction(action)

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

@@ -20,13 +20,7 @@ function load (route) {
   const routeDefinition = route.meta.routeDefinition
   const Component = routeDefinition.config.edit
   const editConfig = Component.getEditConfig(route)
-
-  let action = null
-  if (editConfig.ModelClass) {
-    action = editConfig.ModelClass.getAction(routeDefinition, 'get')
-  } else {
-    action = editConfig.getAction
-  }
+  const action = editConfig.getAction || editConfig.ModelClass.getAction('get')
 
   return new GetAction()
     .setAction(action)

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

@@ -10,6 +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'
 
 Component.registerHooks([
   'beforeRouteEnter',
@@ -28,20 +29,18 @@ let lastVm = null
 function load (route) {
   const routeDefinition = route.meta.routeDefinition
   const Component = routeDefinition.config.list
-  const listConfig = Component.getListConfig(route)
 
-  let action = null
-  if (listConfig.ModelClass) {
-    action = listConfig.ModelClass.getAction(routeDefinition, 'list')
-  } else {
-    action = listConfig.action
+  if (!Component.listViewRequest) {
+    console.warn('A list route component must implement a static listViewRequest property.')
   }
 
+  const request = Component.listViewRequest.clone()
+    .initFromFilterSource(new RouteQueryFilterSource(route))
+    .recreateFromHistory(route.path)
+    .toApiRequest()
+
   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/ibm-plex-sans.scss

@@ -0,0 +1,43 @@
+$fontUrl: '';
+
+@if variable-exists(ibmPlexSansFontUrl) {
+  $fontUrl: $ibmPlexSansFontUrl;
+}
+
+/* ibm-plex-sans-regular - latin */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local(''),
+       url('#{$fontUrl}/ibm-plex-sans-v9-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('#{$fontUrl}/ibm-plex-sans-v9-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* ibm-plex-sans-italic - latin */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local(''),
+       url('#{$fontUrl}/ibm-plex-sans-v9-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('#{$fontUrl}/ibm-plex-sans-v9-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* ibm-plex-sans-700 - latin */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local(''),
+       url('#{$fontUrl}/ibm-plex-sans-v9-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('#{$fontUrl}/ibm-plex-sans-v9-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* ibm-plex-sans-700italic - latin */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: local(''),
+       url('#{$fontUrl}/ibm-plex-sans-v9-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('#{$fontUrl}/ibm-plex-sans-v9-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

package/src/components/list/QuerySourceType.js

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