@afeefa/vue-app 0.0.61 → 0.0.64

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

@@ -1 +1 @@
-0.0.61
+0.0.64

package/README.md

@@ -1 +1,3 @@
-# @afeefa/vue-app
+# @afeefa/vue-app
+
+Force push :-);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.61",
+  "version": "0.0.64",
   "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/AModal.vue

@@ -7,6 +7,8 @@
     v-bind="$attrs"
     :contentClass="modalId"
     transition="v-fade-transition"
+    :persistent="true"
+    :no-click-animation="true"
     @click:outside="cancel"
     @keydown.esc="cancel"
   >
@@ -41,7 +43,7 @@ import { getZIndex } from 'vuetify/lib/util/helpers'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
-  props: ['show', 'title', 'triggerClass', 'anchorPosition']
+  props: ['show', 'title', 'beforeClose', 'triggerClass', 'anchorPosition']
 })
 export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentWidthMixin) {
   modalId = randomCssClass(10)
@@ -83,7 +85,15 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
    * and emit a visibility event
    */
   @Watch('show')
-  showChanged () {
+  async showChanged () {
+    // check if a modal is allowed to be closed
+    if (this.modal && !this.show && this.beforeClose) {
+      const result = await this.beforeClose()
+      if (!result) {
+        return
+      }
+    }
+
     this.modal = this.show
   }
 
@@ -121,7 +131,15 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
     this.urp_registerPositionWatcher(this.position)
   }
 
-  cancel () {
+  async cancel () {
+    // check if a modal is allowed to be closed
+    if (this.modal && this.beforeClose) {
+      const result = await this.beforeClose()
+      if (!result) {
+        return
+      }
+    }
+
     this.modal = false
   }
 

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/ATableRow.vue

@@ -62,6 +62,10 @@ export default class ATableRow extends Vue {
     }
   }
 
+  &.selectable {
+    cursor: pointer;
+  }
+
   &:hover, &.selected {
     background: #F4F4F4;
   }

package/src/components/flying-context/FlyingContextEvent.js

@@ -0,0 +1,5 @@
+import { BaseEvent } from '@a-vue/plugins/event-bus/BaseEvent'
+
+export class FlyingContextEvent extends BaseEvent {
+  static HIDE_ALL = 'FlyingContextEvent:hide-all'
+}

package/src/components/form/EditForm.vue

@@ -3,12 +3,11 @@
     v-model="valid"
     autocomplete="off"
   >
-    <slot name="fields" />
-
     <slot
+      name="form"
       :changed="changed"
       :valid="valid"
-      :model="model"
+      :modelToEdit="modelToEdit"
     />
   </v-form>
 </template>
@@ -18,14 +17,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 if (this.model) {
+      this.modelToEdit = this.model.cloneForEdit()
+    }
+    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 +49,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/EditModal.vue

@@ -1,6 +1,7 @@
 <template>
   <a-modal
     :title="title"
+    :beforeClose="beforeClose"
     :show.sync="show_"
     v-bind="$attrs"
   >
@@ -10,16 +11,18 @@
 
     <edit-form
       v-if="show_"
+      ref="form"
       :model="model"
+      :createModelToEdit="createModelToEdit"
     >
-      <template #fields>
+      <template #form="{modelToEdit, changed, valid}">
         <slot
-          name="fields"
-          :model="model"
+          name="form"
+          :modelToEdit="modelToEdit"
+          :changed="changed"
+          :valid="valid"
         />
-      </template>
 
-      <template #default="{changed, valid}">
         <a-row
           class="mt-8 mb-1 pb-1 gap-4"
           right
@@ -31,25 +34,14 @@
             Schließen
           </v-btn>
 
-          <a-row gap="2">
-            <v-btn
-              small
-              :disabled="!changed || !valid"
-              color="green white--text"
-              @click="save"
-            >
-              Speichern
-            </v-btn>
-
-            <v-icon
-              v-if="changed"
-              small
-              text
-              @click="reset"
-            >
-              {{ undoIcon }}
-            </v-icon>
-          </a-row>
+          <edit-form-buttons
+            :changed="changed"
+            :valid="valid"
+            small
+            :has="{reset: !!modelToEdit.id}"
+            @save="$emit('save', modelToEdit, ignoreChangesOnClose)"
+            @reset="$refs.form.reset()"
+          />
         </a-row>
       </template>
     </edit-form>
@@ -59,21 +51,26 @@
 
 <script>
 import { Component, Vue, Watch } from '@a-vue'
-import { mdiRotateLeft} from '@mdi/js'
+import { DialogEvent } from '@a-vue/events'
 
 @Component({
-  props: ['model', 'title', 'show']
+  props: ['model', 'createModelToEdit', 'title', 'show']
 })
 export default class EditModal extends Vue {
   show_ = false
+  ignoreChangesOnClose_ = false
 
-  undoIcon = mdiRotateLeft
+  created () {
+    if (this.show) { // open on create with v-show
+      this.open()
+    }
+  }
 
   /**
    * visiblility changes from outside
    * this will trigger the show_ watcher,
    * forward the change to the modal and
-   * later emit a open/close event
+   * later emit an open/close event
    */
   @Watch('show')
   showChanged () {
@@ -90,7 +87,6 @@ export default class EditModal extends Vue {
   @Watch('show_')
   show_Changed () {
     if (this.show_) {
-      this.reset()
       this.$emit('open')
     } else {
       this.$emit('close')
@@ -101,16 +97,35 @@ export default class EditModal extends Vue {
     this.show_ = true
   }
 
-  close () {
-    this.show_ = false
+  async beforeClose () {
+    // run only if show_ is true to prevent double checks with a-modal
+    if (this.show_ && this.$refs.form.changed && !this.ignoreChangesOnClose_) {
+      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) {
+        return false
+      }
+    }
+    return true
   }
 
-  reset () {
-    this.$emit('reset')
+  async close () {
+    const result = await this.beforeClose()
+    if (!result) {
+      return
+    }
+
+    this.show_ = false
   }
 
-  save () {
-    this.$emit('save')
+  /**
+   * hook to allow to leave a just created (saved) model
+   */
+  ignoreChangesOnClose () {
+    this.ignoreChangesOnClose_ = true
   }
 }
 </script>

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/form/NestedEditForm.vue

@@ -21,5 +21,9 @@ export default class NestedEditForm extends Vue {
       console.warn('Nested edit form does not have a model.')
     }
   }
+
+  get modelToEdit () {
+    return this.model
+  }
 }
 </script>

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/events.js

@@ -2,3 +2,4 @@ export { LoadingEvent } from './components/loading-indicator/LoadingEvent'
 export { SaveEvent } from './components/save-indicator/SaveEvent'
 export { AlertEvent } from './components/alert/AlertEvent'
 export { DialogEvent } from './components/dialog/DialogEvent'
+export { FlyingContextEvent } from './components/flying-context/FlyingContextEvent'

package/src-admin/bootstrap.js

@@ -1,5 +1,6 @@
 import './config/event-bus'
 import './config/components'
+import './directives'
 
 import { translationPlugin } from '@a-admin/plugins/translation/TranslationPlugin'
 import { apiResourcesPlugin } from '@a-vue/plugins/api-resources/ApiResourcesPlugin'

package/src-admin/components/App.vue

@@ -91,6 +91,8 @@
       </v-list>
     </v-navigation-drawer>
 
+    <flying-context-container />
+
     <v-app-bar
       app
       flat
@@ -142,12 +144,14 @@ import { appConfig } from '@a-admin/config/AppConfig'
 import { sleep } from '@a-vue/utils/timeout'
 import AppBarButtons from './app/AppBarButtons'
 import AppBarTitleContainer from './app/AppBarTitleContainer'
+import FlyingContextContainer from './FlyingContextContainer'
 import '../styles.scss'
 
 @Component({
   components: {
     AppBarButtons,
-    AppBarTitleContainer
+    AppBarTitleContainer,
+    FlyingContextContainer
   }
 })
 export default class App extends Vue {

package/src-admin/components/FlyingContext.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="flyingContext">
+    <div :class="contextId">
+      <slot v-if="isVisible" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Component, Watch, Vue } from '@a-vue'
+import { FlyingContextEvent } from '@a-vue/events'
+import { randomCssClass } from '@a-vue/utils/random'
+
+@Component({
+  props: [{show: false}]
+})
+export default class FlyingContext extends Vue {
+  isVisible = false
+  contextId = randomCssClass(10)
+
+  created () {
+    this.$events.on(FlyingContextEvent.HIDE_ALL, this.onHide)
+  }
+
+  mounted () {
+    if (this.show) {
+      this.showChanged()
+    }
+  }
+
+  @Watch('show')
+  showChanged () {
+    if (this.isVisible === this.show) {
+      return
+    }
+
+    this.isVisible = this.show
+
+    if (this.isVisible) {
+      const container = this.getSidebarContainer()
+      container.appendChild(this.getContent())
+    } else {
+      this.$el.appendChild(this.getContent())
+    }
+  }
+
+  destroyed () {
+    const container = this.getSidebarContainer()
+    const el = this.getContent()
+    if (container.contains(el)) {
+      container.removeChild(el)
+    }
+
+    this.$events.off(FlyingContextEvent.HIDE_ALL, this.onHide)
+  }
+
+  onHide () {
+    if (this.isVisible) {
+      this.$el.appendChild(this.getContent())
+      this.isVisible = false
+      this.$emit('hide')
+    }
+  }
+
+  getContent () {
+    return document.querySelector('.' + this.contextId)
+  }
+
+  getSidebarContainer () {
+    return document.getElementById('flyingContextContainer__children')
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+</style>