@afeefa/vue-app 0.0.63 → 0.0.64

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/components/pages/CreatePage.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="createPage">
-    <app-bar-title
-      :icon="_icon"
-      :title="_title"
-    />
-
-    <app-bar-button>
-      <v-btn
-        :to="_listLink"
-        small
-      >
-        Liste
-      </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-6">
-      <v-btn
-        :disabled="!changed || !valid"
-        color="green white--text"
-        @click="save"
-      >
-        Anlegen
-      </v-btn>
-
-      <v-btn
-        v-if="changed"
-        text
-        @click="reset"
-      >
-        Zurücksetzen
-      </v-btn>
-    </a-row>
-  </div>
-</template>
-
-<script>
-import { Component, Mixins } from '@a-vue'
-import { EditPageMixin } from './EditPageMixin'
-
-@Component({
-  props: ['icon', 'title', 'createModel', 'listLink']
-})
-export default class CreatePage extends Mixins(EditPageMixin) {
-  created () {
-    if (!this.$parent.constructor.getCreateRouteConfig) {
-      console.warn('<create-page> owner must provide a static createRouteConfig method.')
-    }
-
-    this.reset()
-  }
-
-  get editConfig () {
-    return this.$parent.constructor.getCreateRouteConfig(this.$route)
-  }
-
-  get modelUpateAction () {
-    return this.editConfig.createAction || this.ModelClass.getAction('save')
-  }
-
-  get _icon () {
-    return this.icon || this.modelToEdit.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_NEW', 'de')
-  }
-
-  get _listLink () {
-    if (this.listLink) {
-      if (typeof this.listLink === 'function') {
-        return this.listLink()
-      } else {
-        return this.listLink
-      }
-    }
-    return this.modelToEdit.getLink('list')
-  }
-
-  createModelToEdit () {
-    if (this.createModel) {
-      return this.createModel(this.fields)
-    }
-    return this.ModelClass.createForNew(this.fields)
-  }
-
-  saved (model) {
-    this.ignoreChanged = true
-    this.$router.push(model.getLink('edit'))
-  }
-}
-</script>

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

@@ -1,143 +0,0 @@
-<template>
-  <div class="detailPage ml-4 mt-12">
-    <app-bar-title
-      :icon="_icon"
-      :title="_title"
-    />
-
-    <app-bar-button v-if="$has.remove">
-      <v-btn
-        small
-        color="red white--text"
-        class="removeButton"
-        @click="remove"
-      >
-        Löschen
-      </v-btn>
-    </app-bar-button>
-
-    <app-bar-button v-if="$has.edit">
-      <a-icon-button
-        :to="model.getLink('edit')"
-        icon="$pencilIcon"
-        text="Bearbeiten"
-        color="green white--text"
-      />
-    </app-bar-button>
-
-    <slot
-      name="model"
-      :model="model"
-    />
-
-    <a-dialog
-      id="detailPageRemoveDialog"
-      :anchor="[document, '.removeButton']"
-      :active="protectRemove ? removeKey === removeConfirmed : true"
-    >
-      <template v-if="protectRemove">
-        <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, Watch } from '@a-vue'
-import { RemoveAction } from '@a-vue/api-resources/ApiActions'
-
-@Component({
-  props: ['model', 'title', 'icon', 'protectRemove', 'listLink']
-})
-export default class DetailPage extends Vue {
-  $hasOptions = ['edit', 'remove', 'list']
-
-  removeKey = null
-  removeConfirmed = null
-
-  created () {
-    if (!this.$parent.constructor.getDetailRouteConfig) {
-      console.warn('<detail-page> owner must provide a static getDetailRouteConfig method.')
-    }
-    this.$emit('model', this.model)
-  }
-
-  @Watch('model')
-  modelChanged () {
-    this.$emit('model', this.model)
-  }
-
-  get _title () {
-    return this.title || this.model.getTitle()
-  }
-
-  get detailConfig () {
-    return this.$parent.constructor.getDetailRouteConfig(this.$route)
-  }
-
-  get document () {
-    return document
-  }
-
-  get ModelClass () {
-    return this.detailConfig.ModelClass
-  }
-
-  get _listLink () {
-    if (this.listLink) {
-      if (typeof this.listLink === 'function') {
-        return this.listLink()
-      } else {
-        return this.listLink
-      }
-    }
-    return this.model.getLink('list')
-  }
-
-  get _icon () {
-    if (this.icon) {
-      return this.icon
-    }
-    return this.model.getIcon()
-  }
-
-  get _deleteAction () {
-    return this.detailConfig.removeAction || this.ModelClass.getAction('save')
-  }
-
-  async remove () {
-    this.removeKey = [...Array(6)].map(() => Math.floor(Math.random() * 16).toString(16)).join('')
-
-    const result = await new RemoveAction()
-      .setAction(this._deleteAction)
-      .setId(this.model.id)
-      .setDialog({
-        id: 'detailPageRemoveDialog',
-        title: this.model.getTitle() + ' löschen?',
-        message: 'Soll ' + this.model.getTitle() + ' gelöscht werden?',
-        yesButton: 'Löschen',
-        yesColor: 'red white--text'
-      })
-      .delete()
-
-    if (result) {
-      this.$router.push(this.model.getLink('list'))
-    }
-  }
-}
-</script>
-
-
-<style lang="scss" scoped>
-.removeKey {
-  user-select: none;
-}
-</style>

package/src-admin/components/pages/EditPageMixin.js

@@ -1,96 +0,0 @@
-import { Component, Vue } from '@a-vue'
-import { SaveAction } from '@a-vue/api-resources/ApiActions'
-import { DialogEvent } from '@a-vue/events'
-
-@Component({
-  props: ['saveAction']
-})
-export class EditPageMixin extends Vue {
-  valid = false
-  changed = false
-  modelToEdit = null
-  ignoreChanged = false
-
-  unregisterRouterHook = null
-
-  created () {
-    this.unregisterRouterHook = this.$router.beforeEach(async (to, from, next) => {
-      if (!this.ignoreChanged && this.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
-      }
-      next()
-    })
-  }
-
-  destroyed () {
-    this.unregisterRouterHook()
-  }
-
-  createModelToEdit () {
-    return null
-  }
-
-  get editConfig () {
-    return null
-  }
-
-  get ModelClass () {
-    return this.editConfig.ModelClass
-  }
-
-  get _saveAction () {
-    if (this.saveAction) {
-      return this.saveAction
-    }
-    return this.modelUpateAction
-  }
-
-  get modelUpateAction () {
-    return null
-  }
-
-  get fields () {
-    return this.editConfig.fields
-  }
-
-  get saveParams () {
-    return {}
-  }
-
-  async save () {
-    const model = await new SaveAction()
-      .setAction(this._saveAction)
-      .setFields(this.fields)
-      .setId(this.modelToEdit.id)
-      .setData(this.modelToEdit.serialize(this.fields))
-      .setAfterSaveHook(this.afterSave)
-      .save()
-
-    this.saved(model)
-  }
-
-  reset () {
-    const modelToEdit = this.createModelToEdit()
-    if (this.editConfig.createModelToEdit) {
-      this.editConfig.createModelToEdit(modelToEdit)
-    }
-    this.modelToEdit = modelToEdit // this assignment makes modelToEdit recursively reactive
-    this.$emit('model', this.modelToEdit)
-  }
-
-  afterSave (_model) {
-    // e.g. reload model
-  }
-
-  saved (_model) {
-    // e.g. redirect after save
-  }
-}

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

@@ -1,55 +0,0 @@
-<template>
-  <div class="listPage">
-    <app-bar-title
-      :icon="_icon"
-      :title="_title"
-    />
-
-    <app-bar-button v-if="$has.add">
-      <a-icon-button
-        v-if="$has.add"
-        :to="_newLink"
-        icon="$plusIcon"
-        :text="_newTitle"
-        color="green white--text"
-      />
-    </app-bar-button>
-
-    <slot />
-  </div>
-</template>
-
-<script>
-import { Component, Vue } from '@a-vue'
-
-@Component({
-  props: ['icon', 'title', 'newTitle', 'newLink', 'Model']
-})
-export default class ListPage extends Vue {
-  $hasOptions = ['add']
-
-  get _icon () {
-    return this.icon || this.Model.icon
-  }
-
-  get _title () {
-    if (this.title) {
-      return this.title
-    }
-
-    return this.$t('Admin.Types', this.Model.type, null, 'TITLE_PLURAL', 'de')
-  }
-
-  get _newTitle () {
-    if (this.newTitle) {
-      return this.newTitle
-    }
-
-    return this.$t('Admin.Types', this.Model.type, null, 'TITLE_SINGULAR', 'de')
-  }
-
-  get _newLink () {
-    return this.newLink || this.Model.getLink('new')
-  }
-}
-</script>

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

@@ -1,15 +0,0 @@
-<template>
-  <component :is="Component" />
-</template>
-
-
-<script>
-import { Component, Vue } from '@a-vue'
-
-@Component
-export default class CreateRoute extends Vue {
-  get Component () {
-    return this.$routeDefinition.config.new
-  }
-}
-</script>

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

@@ -1,85 +0,0 @@
-<template>
-  <component
-    :is="Component"
-    v-if="model"
-    :model="model"
-  />
-</template>
-
-<script>
-import { Component, Vue, Watch } from '@a-vue'
-import { GetAction } from '@a-vue/api-resources/ApiActions'
-
-Component.registerHooks([
-  'beforeRouteEnter',
-  'beforeRouteUpdate'
-])
-
-function load (route) {
-  const routeDefinition = route.meta.routeDefinition
-  const Component = routeDefinition.config.detail
-
-  if (!Component.getDetailRouteConfig) {
-    console.warn('A detail route component must implement a static getDetailRouteConfig property.')
-  }
-
-  const detailConfig = Component.getDetailRouteConfig(route)
-  const action = detailConfig.action || detailConfig.ModelClass.getAction('get')
-
-  return new GetAction()
-    .setAction(action)
-    .setFields(detailConfig.fields)
-    .setId(detailConfig.id || route.params[routeDefinition.idKey])
-    .load()
-}
-
-let routerHookCalled = false
-
-@Component
-export default class DetailRoute extends Vue {
-  model = null
-
-  /**
-   * triggered, when the route name changes
-   * not triggered, when only route params change
-   */
-  async beforeRouteEnter (to, from, next) {
-    routerHookCalled = true
-    const result = await load(to)
-    next(vm => {
-      if (result !== false) {
-        vm.model = result
-      }
-      routerHookCalled = false
-    })
-  }
-
-  /**
-   * triggered both, if route name or route params change
-   */
-  @Watch('$route.params')
-  async routeParamsChanged () {
-    if (routerHookCalled) {
-      // set model to null in order to not recreate detail route's
-      // child components with the stale model which is still active
-      // in between resolving the route with next() + creating the
-      // route detail component and resetting vm.model later in the callback
-      this.model = null
-      return
-    }
-    this.model = await load(this.$route)
-  }
-
-  // probably not needed
-  // @Watch('$route.name')
-  // async routeNameChanged () {
-  //   if (routerHookCalled) {
-  //     // this.model = null
-  //   }
-  // }
-
-  get Component () {
-    return this.$routeDefinition.config.detail
-  }
-}
-</script>

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

@@ -1,78 +0,0 @@
-<template>
-  <component
-    :is="Component"
-    v-if="model"
-    :model="model"
-  />
-</template>
-
-
-<script>
-import { Component, Vue, Watch } from '@a-vue'
-import { GetAction } from '@a-vue/api-resources/ApiActions'
-
-Component.registerHooks([
-  'beforeRouteEnter',
-  'beforeRouteUpdate'
-])
-
-function load (route) {
-  const routeDefinition = route.meta.routeDefinition
-  const Component = routeDefinition.config.edit
-
-  if (!Component.getEditRouteConfig) {
-    console.warn('An edit route component must implement a static getEditRouteConfig property.')
-  }
-
-  const editConfig = Component.getEditRouteConfig(route)
-  const action = editConfig.getAction || editConfig.ModelClass.getAction('get')
-
-  return new GetAction()
-    .setAction(action)
-    .setFields(editConfig.fields)
-    .setId(editConfig.id || route.params[routeDefinition.idKey])
-    .load()
-}
-
-let routerHookCalled = false
-
-@Component
-export default class EditRoute extends Vue {
-  model = null
-
-  /**
-   * triggered, when the route name changes
-   * not triggered, when only route params change
-   */
-  async beforeRouteEnter (to, from, next) {
-    routerHookCalled = true
-    const result = await load(to)
-    next(vm => {
-      if (result !== false) {
-        vm.model = result
-      }
-      routerHookCalled = false
-    })
-  }
-
-  /**
-   * triggered both, if route name or route params change
-   */
-  @Watch('$route.params')
-  async routeParamsChanged () {
-    if (routerHookCalled) {
-      // set model to null in order to not recreate detail route's
-      // child components with the stale model which is still active
-      // in between resolving the route with next() + creating the
-      // route edit component and resetting vm.model later in the callback
-      this.model = null
-      return
-    }
-    this.model = await load(this.$route)
-  }
-
-  get Component () {
-    return this.$routeDefinition.config.edit
-  }
-}
-</script>