@afeefa/vue-app 0.0.61 → 0.0.64

package/src-admin/components/FlyingContextContainer.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    id="flyingContextContainer"
+    :class="{visible}"
+  >
+    <a
+      href=""
+      @click.prevent="hide"
+    >close</a>
+
+    <br>
+    <br>
+
+    <div id="flyingContextContainer__children" />
+  </div>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+import { FlyingContextEvent } from '@a-vue/events'
+
+@Component({
+  props: []
+})
+export default class FlyingContextContainer extends Vue {
+  visible = false
+
+  mounted () {
+    this.mutationWatcher = new MutationObserver(this.domChanged)
+    this.mutationWatcher.observe(this.getChildrenContainer(), { childList: true })
+
+    window.addEventListener('mousedown', this.onClickOutside)
+  }
+
+  domChanged () {
+    const container = this.getChildrenContainer()
+    this.visible = !!container.children.length
+  }
+
+  hide () {
+    if (this.visible) {
+      this.$events.dispatch(new FlyingContextEvent(FlyingContextEvent.HIDE_ALL))
+    }
+  }
+
+  getChildrenContainer () {
+    return this.$el.querySelector('#flyingContextContainer__children')
+  }
+
+  onClickOutside (e) {
+    // check if trigger is clicked
+    let parent = e.target
+    while (parent) {
+      if (parent.classList.contains('flyingContextTrigger')) {
+        return
+      }
+      parent = parent.parentElement
+    }
+
+    // check if flying context ist clicked
+    if (!this.$el.contains(e.target)) {
+      this.hide()
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+#flyingContextContainer {
+  position: fixed;
+  z-index: 200;
+  right: 0;
+  width: 60vw;
+  height: 80vh;
+  top: 10vh;
+  background: rgba($color: white, $alpha: .6);
+  border: 1px solid black;
+  transition: right .2s;
+
+  &:not(.visible) {
+    right: -80vw;
+  }
+}
+</style>

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,40 @@
+<template>
+  <a-row gap="2">
+    <v-btn
+      :small="small"
+      :disabled="($has.reset && !changed) || !valid"
+      color="green white--text"
+      @click="$emit('save')"
+    >
+      Speichern
+    </v-btn>
+
+    <v-icon
+      v-if="$has.reset && 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 {
+  $hasOptions = ['reset']
+
+  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,9 @@ 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 FlyingContext from './FlyingContext.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'
@@ -16,10 +18,8 @@ import ListTitle from './list/ListTitle'
 import ListView from './list/ListView'
 import ModelCount from './model/ModelCount'
 import ModelIcon from './model/ModelIcon'
-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)
@@ -27,11 +27,10 @@ Vue.component('ListContent', ListContent)
 Vue.component('ListMeta', ListMeta)
 Vue.component('ListTitle', ListTitle)
 Vue.component('ListView', ListView)
-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)
@@ -39,7 +38,6 @@ Vue.component('ModelIcon', ModelIcon)
 Vue.component('DetailContent', DetailContent)
 Vue.component('DetailMeta', DetailMeta)
 Vue.component('DetailTitle', DetailTitle)
-Vue.component('DetailPage', DetailPage)
 Vue.component('DetailProperty', DetailProperty)
 Vue.component('DetailColumn', DetailColumn)
 
@@ -47,3 +45,4 @@ Vue.component('AppBarButton', AppBarButton)
 Vue.component('AppBarTitle', AppBarTitle)
 
 Vue.component('Start', Start)
+Vue.component('FlyingContext', FlyingContext)

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

@@ -28,7 +28,11 @@
           <a-table-row
             v-for="model in models_"
             :key="model.id"
-            :class="getModelClass(model)"
+            v-flying-context-trigger="hasFlyingContext"
+            :class="{selectable: hasFlyingContext}"
+            v-bind="getRowAttributes(model)"
+            v-on="getRowListeners(model)"
+            @click="$emit('flyingContext', model)"
           >
             <v-icon
               v-if="$has.icon"
@@ -50,7 +54,6 @@
         <div
           v-for="model in models_"
           :key="model.id"
-          :class="getModelClass(model)"
         >
           <slot
             name="model"
@@ -76,7 +79,7 @@ import { ListViewMixin } from '@a-vue/components/list/ListViewMixin'
 import { LoadingEvent } from '@a-vue/events'
 
 @Component({
-  props: ['modelClass']
+  props: ['rowAttributes', 'rowListeners']
 })
 export default class ListView extends Mixins(ListViewMixin) {
   $hasOptions = ['icon']
@@ -93,8 +96,19 @@ export default class ListView extends Mixins(ListViewMixin) {
     this.$emit('update:isLoading', this.isLoading)
   }
 
-  getModelClass (model) {
-    return this.modelClass && this.modelClass(model)
+  getRowAttributes (model) {
+    if (typeof this.rowAttributes === 'function') {
+      return this.rowAttributes(model)
+    }
+    return this.rowAttributes
+  }
+
+  getRowListeners (model) {
+    return (this.rowListeners && this.rowListeners(model)) || {}
+  }
+
+  get hasFlyingContext () {
+    return !!this.$listeners.flyingContext
   }
 
   setFilter (name, value) {

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

@@ -1,151 +1,65 @@
 <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 #form="{modelToEdit, changed, valid}">
+      <slot
+        name="form"
+        :modelToEdit="modelToEdit"
+        :changed="changed"
+        :valid="valid"
+      />
+
+      <edit-form-buttons
+        :changed="changed"
+        :valid="valid"
+        :has="{reset: !!modelToEdit.id}"
+        @save="$emit('save', modelToEdit, ignoreChangesOnRouteChange)"
+        @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
+  ignoreChangesOnRouteChange_ = false
 
   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 && !this.ignoreChangesOnRouteChange_) {
+        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)
+      next()
+    })
   }
 
-  get saveParams () {
-    return {
-      id: this.model.id
-    }
+  destroyed () {
+    this.unregisterRouterHook()
   }
 
-  afterSave (model) {
-    this.model_ = model
-    this.reset()
-    this.$emit('saved', model)
+  /**
+   * hook to allow to leave a just created (saved) model
+   */
+  ignoreChangesOnRouteChange () {
+    this.ignoreChangesOnRouteChange_ = true
   }
 }
 </script>

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

@@ -0,0 +1,84 @@
+import { Component, Vue, Watch } from '@a-vue'
+
+Component.registerHooks([
+  'beforeRouteEnter',
+  'beforeRouteUpdate'
+])
+
+let onLoadCallback = () => {}
+let routerHookCalled = false
+let lastResult = null // cache last result because of hmr reload
+
+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)
+    lastResult = result
+  }
+
+  created () {
+    // hmr reload creates vm but not triggers route enter
+    if (!routerHookCalled) {
+      onLoadCallback(this, lastResult)
+    }
+  }
+}

package/src-admin/config/routing.js

@@ -1,7 +1,3 @@
-import CreateRoute from '@a-admin/components/routes/CreateRoute'
-import DetailRoute from '@a-admin/components/routes/DetailRoute'
-import EditRoute from '@a-admin/components/routes/EditRoute'
-import ListRoute from '@a-admin/components/routes/ListRoute'
 import { routeConfigPlugin } from '@a-vue/plugins/route-config/RouteConfigPlugin'
 
 export default routeConfigPlugin
@@ -9,13 +5,6 @@ export default routeConfigPlugin
     linkActiveClass: 'active'
   })
 
-  .defaultComponents({
-    list: ListRoute,
-    new: CreateRoute,
-    detail: DetailRoute,
-    edit: EditRoute
-  })
-
   .defaultBreadcrumbTitles({
     edit: 'Bearbeiten',
     new: 'Neu'

package/src-admin/directives/index.js

@@ -0,0 +1,26 @@
+import { Vue } from '@a-vue'
+
+Vue.directive('flying-context-trigger', {
+  bind: function (el, bindings) {
+    if (bindings.value) {
+      el.$flyingContextObserver = new MutationObserver(() => {
+        if (!el.classList.contains('flyingContextTrigger')) {
+          el.classList.add('flyingContextTrigger')
+        }
+      })
+
+      el.$flyingContextObserver.observe(el, {
+        attributes: true,
+        attributeFilter: ['class']
+      })
+
+      el.classList.add('flyingContextTrigger')
+    }
+  },
+
+  unbind: function (el) {
+    if (el.$flyingContextObserver) {
+      el.$flyingContextObserver.disconnect()
+    }
+  }
+})

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)