@afeefa/vue-app 0.0.61 → 0.0.62

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

@@ -1 +1 @@
-0.0.61
+0.0.62

package/package.json

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

package/src/api-resources/ApiAction.js

@@ -0,0 +1,87 @@
+import { AlertEvent, LoadingEvent } from '@a-vue/events'
+import { eventBus } from '@a-vue/plugins/event-bus/EventBus'
+import { sleep } from '@a-vue/utils/timeout'
+import { ApiAction as ApiResourcesApiAction } from '@afeefa/api-resources-client'
+
+import { SaveEvent } from '../events'
+
+export class ApiAction extends ApiResourcesApiAction {
+  _dispatchGlobalLoadingEvents = false
+  _dispatchGlobalSaveEvents = false
+  _minDuration = 100
+  _startTime = 0
+
+  id (id) {
+    this.param('id', id)
+    return this
+  }
+
+  dispatchGlobalLoadingEvents (dispatch = true) {
+    this._dispatchGlobalLoadingEvents = dispatch
+    return this
+  }
+
+  dispatchGlobalSaveEvents (dispatch = true) {
+    this._dispatchGlobalSaveEvents = dispatch
+    return this
+  }
+
+  async beforeRequest () {
+    this._startTime = Date.now()
+
+    if (this._dispatchGlobalLoadingEvents) {
+      eventBus.dispatch(new LoadingEvent(LoadingEvent.START_LOADING))
+    }
+
+    if (this._dispatchGlobalSaveEvents) {
+      eventBus.dispatch(new SaveEvent(SaveEvent.START_SAVING))
+    }
+  }
+
+  async beforeBulkRequest () {
+    if (this._dispatchGlobalLoadingEvents) {
+      eventBus.dispatch(new LoadingEvent(LoadingEvent.START_LOADING))
+    }
+
+    if (this._dispatchGlobalSaveEvents) {
+      eventBus.dispatch(new SaveEvent(SaveEvent.START_SAVING))
+    }
+  }
+
+  async afterRequest () {
+    if (this._minDuration) {
+      const diffTime = Date.now() - this._startTime
+      const restTime = Math.max(0, this._minDuration - diffTime)
+      if (restTime) {
+        await sleep(restTime / 1000)
+      }
+    }
+
+    if (this._dispatchGlobalLoadingEvents) {
+      eventBus.dispatch(new LoadingEvent(LoadingEvent.STOP_LOADING))
+    }
+
+    if (this._dispatchGlobalSaveEvents) {
+      eventBus.dispatch(new SaveEvent(SaveEvent.STOP_SAVING))
+    }
+  }
+
+  async afterBulkRequest () {
+    if (this._dispatchGlobalLoadingEvents) {
+      eventBus.dispatch(new LoadingEvent(LoadingEvent.STOP_LOADING))
+    }
+
+    if (this._dispatchGlobalSaveEvents) {
+      eventBus.dispatch(new SaveEvent(SaveEvent.STOP_SAVING))
+    }
+  }
+
+  alert (message) {
+    eventBus.dispatch(new AlertEvent(AlertEvent.MESSAGE, {
+      message
+    }))
+  }
+}
+
+export class BulkAction extends ApiAction {
+}

package/src/api-resources/ApiActions2.js

@@ -0,0 +1,13 @@
+import { BulkAction } from './ApiAction'
+import { DeleteAction } from './DeleteAction'
+import { GetAction } from './GetAction'
+import { ListAction } from './ListAction'
+import { SaveAction } from './SaveAction'
+
+export {
+  BulkAction,
+  ListAction,
+  GetAction,
+  SaveAction,
+  DeleteAction
+}

package/src/api-resources/DeleteAction.js

@@ -0,0 +1,21 @@
+import { ApiAction } from './ApiAction'
+
+export class DeleteAction extends ApiAction {
+  _minDuration = 400
+
+  delete () {
+    this.data(null)
+
+    return this.execute()
+  }
+
+  async afterRequest () {
+    await super.afterRequest()
+
+    this.alert('Die Daten wurden gelöscht.')
+  }
+
+  processResult () {
+    return true
+  }
+}

package/src/api-resources/GetAction.js

@@ -0,0 +1,18 @@
+import { AlertEvent } from '@a-vue/events'
+import { eventBus } from '@a-vue/plugins/event-bus/EventBus'
+
+import { ApiAction } from './ApiAction'
+
+export class GetAction extends ApiAction {
+  load () {
+    return this.execute()
+  }
+
+  processError (result) {
+    eventBus.dispatch(new AlertEvent(AlertEvent.ERROR, {
+      headline: 'Die Daten konntent nicht geladen werden.',
+      message: result.message,
+      detail: result.detail
+    }))
+  }
+}

package/src/api-resources/ListAction.js

@@ -0,0 +1,27 @@
+import { NextRouteFilterSource } from '@a-vue/components/list/NextRouteFilterSource'
+import { ListViewModel } from '@afeefa/api-resources-client'
+
+import { ApiAction } from './ApiAction'
+
+export class ListAction extends ApiAction {
+  load () {
+    return this.execute()
+  }
+
+  initFiltersForRoute (route) {
+    const request = new ListViewModel(this)
+      // 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 ListAction.fromRequest(request)
+  }
+}

package/src/api-resources/SaveAction.js

@@ -0,0 +1,15 @@
+import { ApiAction } from './ApiAction'
+
+export class SaveAction extends ApiAction {
+  _minDuration = 400
+
+  save () {
+    return this.execute()
+  }
+
+  async afterRequest () {
+    await super.afterRequest()
+
+    this.alert('Die Daten wurden gespeichert.')
+  }
+}

package/src/components/ASearchSelect.vue

@@ -45,7 +45,7 @@
     <div :class="listCssClass">
       <search-select-list
         v-if="isOpen"
-        :listViewConfig="listViewConfig"
+        :listAction="listAction"
         :q="q"
         :selectedItems="selectedItems"
         :events="false"
@@ -96,7 +96,7 @@ import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
   props: [
-    'listViewConfig',
+    'listAction',
     'q',
     'width',
     'closeOnSelect',

package/src/components/form/EditForm.vue

@@ -3,12 +3,10 @@
     v-model="valid"
     autocomplete="off"
   >
-    <slot name="fields" />
-
     <slot
       :changed="changed"
       :valid="valid"
-      :model="model"
+      :model="modelToEdit"
     />
   </v-form>
 </template>
@@ -18,14 +16,31 @@
 import { Component, Vue, Watch } from '@a-vue'
 
 @Component({
-  props: ['model']
+  props: [
+    'model',
+    'createModelToEdit'
+  ]
 })
 export default class EditForm extends Vue {
   EDIT_FORM = true
 
+  modelToEdit = null
   valid = false
   lastJson = null
 
+  created () {
+    this.reset()
+  }
+
+  reset () {
+    if (this.createModelToEdit) {
+      this.modelToEdit = this.createModelToEdit(this.model)
+    } else {
+      this.modelToEdit = this.model
+    }
+    this.lastJson = this.json
+  }
+
   /**
    * This will be triggered after the this.model has been set
    * but before sub components may have changed model values
@@ -33,14 +48,20 @@ export default class EditForm extends Vue {
    * Using the created() method would result in already having set
    * the default date, hence not detecting a valid "change" anymore.
    */
-  @Watch('model', {immediate: true})
+  // @Watch('modelToEdit', {immediate: true})
+  // @Watch('modelToEdit')
+  // modelToEditChanged () {
+  //   this.lastJson = this.json
+  //   this.$emit('update:changed', this.changed)
+  // }
+
+  @Watch('model')
   modelChanged () {
-    this.lastJson = this.json
-    this.$emit('update:changed', this.changed)
+    this.reset()
   }
 
   get json () {
-    return JSON.stringify(this.model)
+    return JSON.stringify(this.modelToEdit)
   }
 
   get changed () {

package/src/components/form/FormFieldMixin.js

@@ -9,7 +9,7 @@ export class FormFieldMixin extends Vue {
     let parent = this
     while (parent) {
       if (parent.EDIT_FORM) {
-        return parent.model
+        return parent.modelToEdit
       }
       parent = parent.$parent
     }

package/src/components/list/ListViewMixin.js

@@ -8,7 +8,7 @@ import { FilterSourceType } from './FilterSourceType'
 @Component({
   props: [
     'models', 'meta', // given, if already loaded
-    'listViewConfig',
+    'listAction',
     'filterHistoryKey',
     'loadOnlyIfKeyword',
     {
@@ -52,7 +52,7 @@ export class ListViewMixin extends Vue {
       this.meta_ = this.meta
     }
 
-    this.listViewModel = new ListViewModel(this.listViewConfig)
+    this.listViewModel = new ListViewModel(this.listAction)
       .filterSource(filterSource, !!filterSource)
       .historyKey(historyKey, this.history)
       .usedFilters(this.meta_.used_filters || null, this.meta_.count_search || 0)

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

@@ -8,12 +8,20 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: ['prepend']
+  props: {
+    prepend: {
+      type: Boolean
+    }
+  }
 })
 export default class AppBarButton extends Vue {
   mounted () {
     const section = this.getButtonBar()
-    section.appendChild(this.$el)
+    if (this.prepend) {
+      section.prepend(this.$el)
+    } else {
+      section.append(this.$el)
+    }
   }
 
   destroyed () {

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

@@ -60,7 +60,7 @@
     </div>
 
     <a-search-select
-      :listViewConfig="selectableConfig.listViewConfig"
+      :listAction="selectableConfig.listAction"
       :loadOnlyIfKeyword="false"
       :selectedItems="selectableSelectedItems"
       :width="selectableWidth"

package/src-admin/components/form/EditFormButtons.vue

@@ -0,0 +1,38 @@
+<template>
+  <a-row gap="2">
+    <v-btn
+      :small="small"
+      :disabled="!changed || !valid"
+      color="green white--text"
+      @click="$emit('save')"
+    >
+      Speichern
+    </v-btn>
+
+    <v-icon
+      v-if="changed"
+      :small="small"
+      text
+      title="Formular zurücksetzen"
+      @click="$emit('reset')"
+    >
+      {{ undoIcon }}
+    </v-icon>
+  </a-row>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+import { mdiRotateLeft} from '@mdi/js'
+
+@Component({
+  props: [
+    'changed',
+    'valid',
+    'small'
+  ]
+})
+export default class EditFormButtons extends Vue {
+  undoIcon = mdiRotateLeft
+}
+</script>

package/src-admin/components/form/RemoveButton.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <a-icon-button
+      small
+      color="red white--text"
+      :class="'removeButton-' + dialogId"
+      icon="$trashCanIcon"
+      text="Löschen"
+      @click="remove"
+    />
+
+    <a-dialog
+      :id="dialogId"
+      :anchor="[document, '.removeButton-' + dialogId]"
+      :active="protect ? removeKey === removeConfirmed : true"
+    >
+      <template v-if="protect">
+        <div>Bitte folgenden Key eingeben: <strong class="removeKey">{{ removeKey }}</strong></div>
+
+        <a-text-field
+          v-model="removeConfirmed"
+          label="Key"
+          :focus="true"
+          width="100"
+        />
+      </template>
+    </a-dialog>
+  </div>
+</template>
+
+
+<script>
+import { Component, Vue } from '@a-vue'
+import { DialogEvent } from '@a-vue/events'
+import { randomCssClass } from '@a-vue/utils/random'
+
+@Component({
+  props: ['itemTitle', 'protect']
+})
+export default class EditPage extends Vue {
+  dialogId = randomCssClass(10)
+  document = document
+  removeKey = null
+  removeConfirmed = null
+
+  async remove () {
+    if (this.protect) {
+      this.removeKey = [...Array(6)].map(() => Math.floor(Math.random() * 16).toString(16)).join('')
+    }
+
+    const result = await this.$events.dispatch(new DialogEvent(DialogEvent.SHOW, {
+      id: this.dialogId,
+      title: this.itemTitle + ' löschen?',
+      message: 'Soll ' + this.itemTitle + ' gelöscht werden?',
+      yesButton: 'Löschen',
+      yesColor: 'red white--text'
+    }))
+
+    if (result === DialogEvent.RESULT_YES) {
+      this.$emit('remove')
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.removeKey {
+  user-select: none;
+}
+</style>

package/src-admin/components/index.js

@@ -7,7 +7,8 @@ import DetailContent from './detail/DetailContent'
 import DetailMeta from './detail/DetailMeta'
 import DetailProperty from './detail/DetailProperty'
 import DetailTitle from './detail/DetailTitle'
-import Start from './Start.vue'
+import EditFormButtons from './form/EditFormButtons'
+import RemoveButton from './form/RemoveButton'
 import ListCard from './list/ListCard'
 import ListColumnHeader from './list/ListColumnHeader'
 import ListContent from './list/ListContent'
@@ -20,6 +21,7 @@ import CreatePage from './pages/CreatePage'
 import DetailPage from './pages/DetailPage'
 import EditPage from './pages/EditPage'
 import ListPage from './pages/ListPage'
+import Start from './Start.vue'
 
 Vue.component('ListCard', ListCard)
 Vue.component('ListColumnHeader', ListColumnHeader)
@@ -32,6 +34,8 @@ Vue.component('ListPage', ListPage)
 Vue.component('CreatePage', CreatePage)
 
 Vue.component('EditPage', EditPage)
+Vue.component('EditFormButtons', EditFormButtons)
+Vue.component('RemoveButton', RemoveButton)
 
 Vue.component('ModelCount', ModelCount)
 Vue.component('ModelIcon', ModelIcon)

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

@@ -1,151 +1,55 @@
 <template>
-  <div class="editPage">
-    <app-bar-title
-      :icon="_icon"
-      :title="_title"
-    />
-
-    <app-bar-button v-if="$has.list">
-      <v-btn
-        :to="_listLink"
-        small
-      >
-        Liste
-      </v-btn>
-    </app-bar-button>
-
-    <app-bar-button v-if="$has.detail">
-      <v-btn
-        :to="model.getLink()"
-        small
-      >
-        Ansehen
-      </v-btn>
-    </app-bar-button>
-
-    <edit-form
-      :model="modelToEdit"
-      :valid.sync="valid"
-      :changed.sync="changed"
-    >
-      <template #fields>
-        <slot
-          name="fields"
-          :model="modelToEdit"
-        />
-      </template>
-    </edit-form>
-
-    <a-row class="mt-8">
-      <v-btn
-        :disabled="!changed || !valid"
-        color="green white--text"
-        @click="save"
-      >
-        Speichern
-      </v-btn>
-
-      <v-btn
-        v-if="changed"
-        text
-        @click="reset"
-      >
-        Zurücksetzen
-      </v-btn>
-    </a-row>
-  </div>
+  <edit-form
+    ref="form"
+    :model="model"
+    :createModelToEdit="createModelToEdit"
+  >
+    <template #default="{model, changed, valid}">
+      <slot
+        :model="model"
+        :changed="changed"
+        :valid="valid"
+      />
+
+      <edit-form-buttons
+        :changed="changed"
+        :valid="valid"
+        @save="$emit('save', model)"
+        @reset="$refs.form.reset()"
+      />
+    </template>
+  </edit-form>
 </template>
 
 <script>
-import { Component, Mixins, Watch } from '@a-vue'
-import { EditPageMixin } from './EditPageMixin'
+import { Component, Vue } from '@a-vue'
+import { DialogEvent } from '@a-vue/events'
 
 @Component({
-  props: [
-    'model',
-    'icon',
-    'title',
-    'listLink',
-    'getAction'
-  ]
+  props: ['model', 'createModelToEdit']
 })
-export default class EditPage extends Mixins(EditPageMixin) {
-  $hasOptions = ['detail', {list: false}]
-
-  model_ = null
+export default class EditPage extends Vue {
+  unregisterRouterHook = null
 
   created () {
-    if (!this.$parent.constructor.getEditRouteConfig) {
-      console.warn('<edit-page> owner must provide a static getEditRouteConfig method.')
-    }
-
-    this.model_ = this.model
-    this.reset()
-  }
-
-  @Watch('model')
-  modelChanged () {
-    this.model_ = this.model
-    this.reset()
-  }
-
-  get editConfig () {
-    return this.$parent.constructor.getEditRouteConfig(this.$route)
-  }
-
-  get modelUpateAction () {
-    return this.editConfig.updateAction || this.ModelClass.getAction('save')
-  }
-
-  get _getAction () {
-    if (this.getAction) {
-      return this.getAction
-    }
-    return this.ModelClass.getAction('get')
-  }
-
-  get _icon () {
-    return this.icon || this.model.getIcon()
-  }
-
-  get _title () {
-    const title = this.modelToEdit.getTitle()
-    if (title) {
-      return title
-    }
-
-    if (this.title) {
-      return this.title
-    }
-
-    return this.$t('Admin.Types', this.ModelClass.type, null, 'TITLE_EMPTY', 'de')
-  }
-
-  get _listLink () {
-    if (this.listLink) {
-      if (typeof this.listLink === 'function') {
-        return this.listLink()
-      } else {
-        return this.listLink
+    this.unregisterRouterHook = this.$router.beforeEach(async (to, from, next) => {
+      if (this.$refs.form.changed) {
+        const result = await this.$events.dispatch(new DialogEvent(DialogEvent.SHOW, {
+          title: 'Änderungen verwerfen?',
+          message: 'Im Formular sind nicht gespeicherte Änderungen. Sollen diese verworfen werden?',
+          yesButton: 'Verwerfen'
+        }))
+        if (result === DialogEvent.RESULT_YES) {
+          next()
+        }
+        return
       }
-    }
-    return this.model.getLink('list')
-  }
-
-  createModelToEdit () {
-    return this.model_.cloneForEdit(this.fields)
-  }
-
-  get saveParams () {
-    return {
-      id: this.model.id
-    }
+      next()
+    })
   }
 
-  afterSave (model) {
-    this.model_ = model
-    this.reset()
-    this.$emit('saved', model)
+  destroyed () {
+    this.unregisterRouterHook()
   }
 }
 </script>

package/src-admin/components/routes/DataRouteMixin.js

@@ -0,0 +1,75 @@
+import { Component, Vue, Watch } from '@a-vue'
+
+Component.registerHooks([
+  'beforeRouteEnter',
+  'beforeRouteUpdate'
+])
+
+let onLoadCallback = () => {}
+let routerHookCalled = false
+
+function onLoad (callback) {
+  onLoadCallback = callback
+}
+
+function load (route) {
+  const Component = [...route.matched].pop().components.default
+
+  if (!Component.drm_getActions) {
+    console.warn('A data route component must implement a static drm_getActions() method.')
+  }
+
+  const request = Component.drm_getActions(route, onLoad)
+  if (Array.isArray(request)) {
+    return Promise.all(request.map(request => {
+      return request
+        .dispatchGlobalLoadingEvents()
+        .execute()
+    }))
+  } else {
+    return request
+      .dispatchGlobalLoadingEvents()
+      .execute()
+  }
+}
+
+@Component
+export class DataRouteMixin extends Vue {
+  drm_isLoaded = false
+
+  async beforeRouteEnter (to, from, next) {
+    routerHookCalled = true
+    const result = await load(to)
+
+    next(vm => {
+      if (result !== false) {
+        vm.drm_onLoad(result)
+        vm.drm_isLoaded = true
+      }
+      routerHookCalled = false
+    })
+  }
+
+  /**
+   * triggered both, if route name or route params change
+   */
+  @Watch('$route.params')
+  async routeParamsChanged () {
+    if (routerHookCalled) {
+      return
+    }
+
+    if (!this.drm_isLoaded) {
+      const result = await load(this.$route)
+
+      if (result !== false) {
+        this.drm_onLoad(result)
+        this.drm_isLoaded = true
+      }
+    }
+  }
+
+  drm_onLoad (result) {
+    onLoadCallback(this, result)
+  }
+}

package/src-admin/models/Model.js

@@ -17,11 +17,11 @@ export class Model extends ApiResourcesModel {
     return (new this()).getLink(action)
   }
 
-  static getAction (action) {
+  static getAction (actionName) {
     if (this.resourceType) {
       return apiResources.getAction({
-        resource: this.resourceType,
-        action
+        resourceType: this.resourceType,
+        actionName
       })
     }
     console.warn('You can\'t get an action out of a model without resourceType:', this.type)