@afeefa/vue-app 0.0.63 → 0.0.66

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

@@ -1,4 +1,4 @@
-import { Component, Vue, Watch } from '@a-vue'
+import { Component, Vue } from '@a-vue'
 
 Component.registerHooks([
   'beforeRouteEnter',
@@ -7,6 +7,7 @@ Component.registerHooks([
 
 let onLoadCallback = () => {}
 let routerHookCalled = false
+let lastResult = null // cache last result because of hmr reload
 
 function onLoad (callback) {
   onLoadCallback = callback
@@ -52,24 +53,32 @@ export class DataRouteMixin extends Vue {
 
   /**
    * triggered both, if route name or route params change
-   */
-  @Watch('$route.params')
-  async routeParamsChanged () {
-    if (routerHookCalled) {
-      return
-    }
+   @Watch('$route.params')
+   async routeParamsChanged () {
+     if (routerHookCalled) {
+       return
+     }
 
-    if (!this.drm_isLoaded) {
-      const result = await load(this.$route)
+     if (!this.drm_isLoaded) {
+       const result = await load(this.$route)
 
-      if (result !== false) {
-        this.drm_onLoad(result)
-        this.drm_isLoaded = true
-      }
-    }
-  }
+       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/config/vuetify.js

@@ -1,17 +1,27 @@
 import {
   mdiAlarmLightOutline,
+  mdiArrowLeft,
   mdiCalendar,
+  mdiCheck,
+  mdiCheckBold,
   mdiChevronRight,
   mdiClose,
+  mdiCloseThick,
   mdiDelete,
   mdiDotsHorizontal,
   mdiDotsVertical,
   mdiLock,
   mdiLogoutVariant,
   mdiMagnify,
+  mdiMenuDown,
+  mdiMenuUp,
   mdiPencil,
   mdiPlus,
-  mdiThumbUpOutline
+  mdiThumbUpOutline,
+  mdiAccountGroup,
+  mdiShopping,
+  mdiMessage,
+  mdiPencilBoxMultiple
 } from '@mdi/js'
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib'
@@ -26,6 +36,7 @@ export default new Vuetify({
       thumbsUpIcon: mdiThumbUpOutline,
       alarmIcon: mdiAlarmLightOutline,
       closeIcon: mdiClose,
+      closeBoldIcon: mdiCloseThick,
       dotsVerticalIcon: mdiDotsVertical,
       dotsHorizontalIcon: mdiDotsHorizontal,
       logoutIcon: mdiLogoutVariant,
@@ -34,7 +45,16 @@ export default new Vuetify({
       trashCanIcon: mdiDelete,
       calendarIcon: mdiCalendar,
       searchIcon: mdiMagnify,
-      lockIcon: mdiLock
+      lockIcon: mdiLock,
+      checkIcon: mdiCheck,
+      checkBoldIcon: mdiCheckBold,
+      arrowLeftIcon: mdiArrowLeft,
+      caretDownIcon: mdiMenuDown,
+      caretUpIcon: mdiMenuUp,
+      householdMembers: mdiAccountGroup,
+      shop: mdiShopping,
+      annotation: mdiMessage,
+      duplicates: mdiPencilBoxMultiple
     }
   },
   breakpoint: {

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/styles.scss

@@ -15,6 +15,7 @@
 .contextButton {
   color: #AAAAAA !important;
   cursor: pointer;
+
   &:hover {
     color: #333333 !important;
   }
@@ -27,14 +28,30 @@
   }
 }
 
-.v-main {
-  margin-bottom: 2rem;
-}
-
 .theme--light.v-btn.v-btn--has-bg {
   background-color: #E9E9E9;
 }
 
+.theme--light.v-btn.v-btn--disabled,
+.theme--light.v-btn.v-btn--disabled .v-icon,
+.theme--light.v-btn.v-btn--disabled .v-btn__loading {
+  color: white !important;
+}
+
+.theme--light.v-btn.v-btn--disabled.v-btn--has-bg {
+  background-color: #EEEEEE !important;
+}
+
+.v-btn {
+  box-shadow: none !important;
+}
+
+// @for $i from 1 through 10 {
+//   .gap-{$i} {
+//     gap: 0.25rem * $i;
+//   }
+// }
+
 .gap-0 {
   gap: 0;
 }

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>