@afeefa/vue-app 0.0.54 → 0.0.57

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

@@ -1 +1 @@
-0.0.54
+0.0.57

package/package.json

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

package/src/components/AContextMenu.vue

@@ -140,7 +140,7 @@ export default class AContextMenu extends Mixins(UsesPositionServiceMixin) {
 .popUpContent {
   min-height: 2.2rem;
   position: absolute;
-  z-index: 200;
+  z-index: 400;
   display: block;
   background-color: white;
   padding: 0.5rem;

package/src/components/AContextMenuItem.vue

@@ -29,7 +29,7 @@ export default class AContextMenuItem extends Vue {
     this.contextMenu.close()
     if (this.to) {
       this.$router.push(this.to)
-        .catch(() => null) // prevent duplicated navigation
+        .catch(() => null) // prevent duplicated navigation warning
     } else {
       this.$emit('click')
     }

package/src/components/ADialog.vue

@@ -132,6 +132,8 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin) {
     if (!Array.isArray(anchor)) {
       if (typeof anchor === 'string') {
         anchor = [document.documentElement, anchor]
+      } else if (typeof anchor === 'object') { // dom element or vue ref
+        anchor = [anchor]
       } else {
         anchor = [document.documentElement]
       }

package/src/components/ARichTextArea.vue

@@ -0,0 +1,257 @@
+<template>
+  <div :class="['a-rich-text-editor a-text-input', {'a-text-input-focused': focus}]">
+    <div
+      v-if="editor"
+      class="menu-bar"
+    >
+      <v-btn
+        small
+        :class="['menu-button', {'is-active': focus && editor.isActive('bold')}]"
+        @click="editor.chain().focus().toggleBold().run()"
+      >
+        <v-icon>{{ boldIcon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        :class="['menu-button', {'is-active': focus && editor.isActive('italic')}]"
+        @click="editor.chain().focus().toggleItalic().run()"
+      >
+        <v-icon>{{ italicIcon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        :class="['menu-button', 'strike', {'is-active': focus && editor.isActive('strike')}]"
+        @click="editor.chain().focus().toggleStrike().run()"
+      >
+        <v-icon>{{ strikeIcon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        :class="['menu-button', {'is-active': focus && editor.isActive('heading', {level: 1})}]"
+        @click="editor.chain().focus().toggleHeading({level: 1}).run()"
+      >
+        <v-icon>{{ h1Icon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        :class="['menu-button', {'is-active': focus && editor.isActive('heading', {level: 2})}]"
+        @click="editor.chain().focus().toggleHeading({level: 2}).run()"
+      >
+        <v-icon>{{ h2Icon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        :class="['menu-button', {'is-active': focus && editor.isActive('bulletList')}]"
+        @click="editor.chain().focus().toggleBulletList().run()"
+      >
+        <v-icon>{{ ulIcon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        :class="['menu-button', {'is-active': focus && editor.isActive('orderedList')}]"
+        @click="editor.chain().focus().toggleOrderedList().run()"
+      >
+        <v-icon>{{ olIcon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        :class="['menu-button', {'is-active': focus && editor.isActive('blockquote')}]"
+        @click="editor.chain().focus().toggleBlockquote().run()"
+      >
+        <v-icon>{{ commentIcon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        class="menu-button"
+        @click="editor.chain().focus().undo().run()"
+      >
+        <v-icon>{{ undoIcon }}</v-icon>
+      </v-btn>
+
+      <v-btn
+        small
+        class="menu-button"
+        @click="editor.chain().focus().redo().run()"
+      >
+        <v-icon>{{ redoIcon }}</v-icon>
+      </v-btn>
+    </div>
+
+    <editor-content
+      :editor="editor"
+      :class="['a-rich-text-editor', {focus}]"
+    />
+  </div>
+</template>
+
+
+<script>
+import { Component, Vue, Watch } from '@a-vue'
+import { Editor, EditorContent } from '@tiptap/vue-2'
+import StarterKit from '@tiptap/starter-kit'
+import {
+  mdiFormatBold,
+  mdiFormatItalic,
+  mdiFormatStrikethroughVariant,
+  mdiFormatHeader1,
+  mdiFormatHeader2,
+  mdiFormatListBulleted,
+  mdiFormatListNumbered,
+  mdiFormatQuoteClose,
+  mdiRotateLeft,
+  mdiRotateRight
+} from '@mdi/js'
+
+@Component({
+  props: ['value', 'validator'],
+  components: {
+    EditorContent
+  }
+})
+export default class ARichTextArea extends Vue {
+  editor = null
+  internalValue = null
+  focus = false
+
+  boldIcon = mdiFormatBold
+  italicIcon = mdiFormatItalic
+  strikeIcon = mdiFormatStrikethroughVariant
+  h1Icon = mdiFormatHeader1
+  h2Icon = mdiFormatHeader2
+  ulIcon = mdiFormatListBulleted
+  olIcon = mdiFormatListNumbered
+  commentIcon = mdiFormatQuoteClose
+  undoIcon = mdiRotateLeft
+  redoIcon = mdiRotateRight
+
+  created () {
+    this.internalValue = this.value
+  }
+
+  mounted () {
+    if (this.validator) {
+      this.$refs.input.validate(true)
+    }
+
+    this.editor = new Editor({
+      content: this.internalValue,
+      extensions: [
+        StarterKit
+      ],
+      onUpdate: () => {
+        this.$emit('input', this.editor.getHTML())
+      },
+      onFocus: ({ editor, event }) => {
+        this.focus = true
+      },
+      onBlur: ({ editor, event }) => {
+        this.focus = false
+      }
+    })
+
+    this.editor.commands.setContent(this.internalValue, false)
+  }
+
+  beforeDestroy () {
+    this.editor.destroy()
+  }
+
+  @Watch('value')
+  valueChanged () {
+    this.internalValue = this.value
+
+    const isSame = this.editor.getHTML() === this.internalValue
+    if (!isSame) {
+      this.editor.commands.setContent(this.internalValue, false)
+    }
+  }
+
+  get validationRules () {
+    const label = this.$attrs.label
+    return (this.validator && this.validator.getRules(label)) || []
+  }
+
+  get counter () {
+    if (!this.validator) {
+      return false
+    }
+    return this.validator.getParams().max || false
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.v-input:not(.v-input--is-focused) ::v-deep .v-counter {
+  display: none;
+}
+
+.a-rich-text-editor {
+  ::v-deep .ProseMirror {
+    &-focused {
+      outline: none;
+    }
+  }
+}
+
+.menu-bar {
+  margin: -.2rem 0 .5rem -.2rem;
+}
+
+.menu-button {
+  padding: 0 !important;
+  width: 30px !important;
+  height: 32px !important;
+  min-width: unset !important;
+  text-align: center;
+  font-size: 1rem;
+  background: white !important;
+  border: none;
+  box-shadow: none;
+  border-radius: 0;
+
+  ::v-deep .v-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+
+  &.strike {
+    ::v-deep .v-icon {
+      width: 15px;
+    }
+  }
+
+  svg {
+    width: unset;
+  }
+
+  &.is-active {
+    background: #ECECEC !important;
+  }
+}
+
+::v-deep .ProseMirror {
+  min-height: 200px;
+
+  > :last-child {
+    margin: 0;
+  }
+
+  li p {
+    margin: 0;
+  }
+
+  ul {
+    margin: 16px 0;
+  }
+}
+</style>

package/src/components/ASearchSelect.vue

@@ -16,6 +16,7 @@
       <div
         v-if="isOpen"
         class="controls"
+        :style="cwm_widthStyle"
       >
         <div class="background elevation-6" />
 
@@ -54,6 +55,7 @@
         :filters.sync="filters"
         :count.sync="count"
         :isLoading.sync="isLoading"
+        :style="cwm_widthStyle"
       >
         <template #header>
           <div />
@@ -62,19 +64,11 @@
         </template>
 
         <template #row="{ model }">
-          <v-icon
-            :color="model.getIcon().color"
-            size="1.5rem"
-            v-text="model.getIcon().icon"
-          />
-
           <slot
             name="row"
             :model="model"
             :on="{ click: selectHandler(model) }"
           />
-
-          <div class="lastColumn" />
         </template>
 
         <template #not-found="{ filters }">
@@ -98,6 +92,7 @@ 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'
+import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
   props: [
@@ -115,7 +110,7 @@ import { CancelOnEscMixin } from '@a-vue/services/escape/CancelOnEscMixin'
     SearchSelectList
   }
 })
-export default class ASearchSelect extends Mixins(UsesPositionServiceMixin, CancelOnEscMixin) {
+export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPositionServiceMixin, CancelOnEscMixin) {
   selectId = randomCssClass(10)
   isOpen = false
   items_ = []
@@ -318,20 +313,25 @@ export default class ASearchSelect extends Mixins(UsesPositionServiceMixin, Canc
 }
 
 .controls {
-  min-width: 400px;
+  width: 400px;
   position: absolute;
   z-index: 300;
   display: block;
-  padding: 0 0.5rem;
+  padding: 0 .5rem;
+
+  ::v-deep .a-row {
+    overflow: unset;
+  }
 }
 
 .searchSelectList {
-  min-width: 400px;
+  width: 400px;
   position: absolute;
   z-index: 301;
 
   max-height: 40vh;
   overflow-y: auto;
+  overflow-x: hidden;
   overscroll-behavior: contain;
 
   ::v-deep .a-table-row {

package/src/components/form/EditForm.vue

@@ -8,6 +8,7 @@
     <slot
       :changed="changed"
       :valid="valid"
+      :model="model"
     />
   </v-form>
 </template>
@@ -15,7 +16,6 @@
 
 <script>
 import { Component, Vue, Watch } from '@a-vue'
-import { apiResources } from '@afeefa/api-resources-client'
 
 @Component({
   props: ['model']
@@ -52,9 +52,5 @@ export default class EditForm extends Vue {
   changedChanged () {
     this.$emit('update:changed', this.changed)
   }
-
-  get type () {
-    return apiResources.getType(this.model.type)
-  }
 }
 </script>

package/src/components/form/EditModal.vue

@@ -21,7 +21,7 @@
 
       <template #default="{changed, valid}">
         <a-row
-          class="mt-8 mb-2 gap-4"
+          class="mt-8 mb-1 pb-1 gap-4"
           right
         >
           <v-btn
@@ -31,23 +31,25 @@
             Schließen
           </v-btn>
 
-          <v-btn
-            small
-            :disabled="!changed || !valid"
-            color="green white--text"
-            @click="save"
-          >
-            Speichern
-          </v-btn>
+          <a-row gap="2">
+            <v-btn
+              small
+              :disabled="!changed || !valid"
+              color="green white--text"
+              @click="save"
+            >
+              Speichern
+            </v-btn>
 
-          <v-btn
-            v-if="changed"
-            small
-            text
-            @click="reset"
-          >
-            Zurücksetzen
-          </v-btn>
+            <v-icon
+              v-if="changed"
+              small
+              text
+              @click="reset"
+            >
+              {{ undoIcon }}
+            </v-icon>
+          </a-row>
         </a-row>
       </template>
     </edit-form>
@@ -57,6 +59,7 @@
 
 <script>
 import { Component, Vue, Watch } from '@a-vue'
+import { mdiRotateLeft} from '@mdi/js'
 
 @Component({
   props: ['model', 'title', 'show']
@@ -64,6 +67,8 @@ import { Component, Vue, Watch } from '@a-vue'
 export default class EditModal extends Vue {
   show_ = false
 
+  undoIcon = mdiRotateLeft
+
   /**
    * visiblility changes from outside
    * this will trigger the show_ watcher,

package/src/components/form/FormFieldMixin.js

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

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

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

package/src/components/index.js

@@ -5,6 +5,7 @@ import EditModal from './form/EditModal'
 import FormFieldCheckbox from './form/fields/FormFieldCheckbox'
 import FormFieldDate from './form/fields/FormFieldDate'
 import FormFieldRadioGroup from './form/fields/FormFieldRadioGroup'
+import FormFieldRichTextArea from './form/fields/FormFieldRichTextArea'
 import FormFieldSearchSelect from './form/fields/FormFieldSearchSelect'
 import FormFieldSelect from './form/fields/FormFieldSelect'
 import FormFieldSelect2 from './form/fields/FormFieldSelect2'
@@ -19,6 +20,7 @@ Vue.component('EditForm', EditForm)
 Vue.component('EditModal', EditModal)
 Vue.component('FormFieldText', FormFieldText)
 Vue.component('FormFieldTextArea', FormFieldTextArea)
+Vue.component('FormFieldRichTextArea', FormFieldRichTextArea)
 Vue.component('FormFieldRadioGroup', FormFieldRadioGroup)
 Vue.component('FormFieldCheckbox', FormFieldCheckbox)
 Vue.component('FormFieldDate', FormFieldDate)

package/src/components/list/ListViewMixin.js

@@ -92,6 +92,10 @@ export class ListViewMixin extends Vue {
     this.load()
   }
 
+  reload () {
+    this.load()
+  }
+
   resetFilters () {
     this.listViewModel.resetFilters()
   }

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

@@ -17,7 +17,9 @@ import { Component, Mixins } from '@a-vue'
 import { ListFilterMixin } from '../ListFilterMixin'
 import { ListAction } from '@a-vue/api-resources/ApiActions'
 
-@Component
+@Component({
+  props: ['itemTitle']
+})
 export default class ListFilterSelect extends Mixins(ListFilterMixin) {
   items = null
 
@@ -61,7 +63,7 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
     return [
       ...this.createOptions(),
       ...models.map(model => ({
-        itemTitle: model.name,
+        itemTitle: (this.itemTitle && this.itemTitle(model)) || model.name || model.title,
         itemValue: model.id
       }))
     ]

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="searchSelectList">
+  <div :class="['searchSelectList', {isLoading}]">
     <template v-if="models_.length">
       <a-table v-bind="$attrs">
         <a-table-header
@@ -74,6 +74,10 @@ export default class SearchSelectList extends Mixins(ListViewMixin) {
 
 
 <style scoped lang="scss">
+.isLoading {
+  opacity: .6;
+}
+
 .notFound {
   padding: 0 .5rem .3rem;
 }

package/src/index.js

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

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

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

package/src/styles/forms.scss

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

package/src/styles/vue-app.scss

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

package/src-admin/bootstrap.js

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

package/src-admin/components/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

@@ -25,7 +25,6 @@
 
 <script>
 import { Component, Vue } from '@a-vue'
-import { apiResources } from '@afeefa/api-resources-client'
 
 @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"

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" />
@@ -20,6 +28,7 @@
           <a-table-row
             v-for="model in models_"
             :key="model.id"
+            :class="getModelClass(model)"
           >
             <v-icon
               v-if="$has.icon"
@@ -37,10 +46,11 @@
         </a-table>
       </template>
 
-      <template v-else>
+      <template v-else-if="$scopedSlots.model">
         <div
           v-for="model in models_"
           :key="model.id"
+          :class="getModelClass(model)"
         >
           <slot
             name="model"
@@ -66,7 +76,7 @@ import { ListViewMixin } from '@a-vue/components/list/ListViewMixin'
 import { LoadingEvent } from '@a-vue/events'
 
 @Component({
-  props: ['table']
+  props: ['modelClass']
 })
 export default class ListView extends Mixins(ListViewMixin) {
   $hasOptions = ['icon']
@@ -83,8 +93,8 @@ export default class ListView extends Mixins(ListViewMixin) {
     this.$emit('update:isLoading', this.isLoading)
   }
 
-  get _table () {
-    return this.table !== false
+  getModelClass (model) {
+    return this.modelClass && this.modelClass(model)
   }
 
   setFilter (name, value) {

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

@@ -49,7 +49,6 @@
 <script>
 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

@@ -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

@@ -66,7 +66,6 @@
 
 <script>
 import { Component, Mixins, Watch } from '@a-vue'
-import { apiResources } from '@afeefa/api-resources-client'
 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/ListPage.vue

@@ -21,7 +21,6 @@
 
 <script>
 import { Component, Vue } from '@a-vue'
-import { apiResources } from '@afeefa/api-resources-client'
 
 @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/DetailRoute.vue

@@ -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

@@ -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

@@ -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'

package/src-admin/models/ModelAdminConfig.js

@@ -0,0 +1,20 @@
+export class ModelAdminConfig {
+  icon = null
+  selectedListConfig = null
+  selectableListConfig = null
+
+  setIcon (icon) {
+    this.icon = icon
+    return this
+  }
+
+  setSelectedListConfig (selectedListConfig) {
+    this.selectedListConfig = selectedListConfig
+    return this
+  }
+
+  setSelectableListConfig (selectableListConfig) {
+    this.selectableListConfig = selectableListConfig
+    return this
+  }
+}

package/src-components/AMdiIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>TEST</div>
+</template>
+
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: ['name']
+})
+export default class Splash extends Vue {
+}
+</script>
+
+
+<style lang="scss" scoped>
+</style>