@afeefa/vue-app 0.0.62 → 0.0.65

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

@@ -1 +1 @@
-0.0.62
+0.0.65

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.62",
+  "version": "0.0.65",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src/components/ABreadcrumbs.vue

@@ -106,9 +106,10 @@ export default class ABreadcrumbs extends Vue {
   getItemTitle (title) {
     // title = title.concat(title).concat(title)
     if (title.length > 20) {
-      title = title.slice(0, 10).trim() + '...' + title.slice(-10).trim()
+      // title = title.slice(0, 10).trim() + '...' + title.slice(-10).trim()
     }
-    return title.toUpperCase()
+    return title
+    // return title.toUpperCase()
   }
 }
 </script>

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

@@ -4,85 +4,84 @@
       v-if="editor"
       class="menu-bar"
     >
-      <v-btn
-        small
-        :class="['menu-button', {'is-active': focus && editor.isActive('bold')}]"
-        @click="editor.chain().focus().toggleBold().run()"
-      >
-        <v-icon>{{ boldIcon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        :class="['menu-button', {'is-active': focus && editor.isActive('italic')}]"
-        @click="editor.chain().focus().toggleItalic().run()"
-      >
-        <v-icon>{{ italicIcon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        :class="['menu-button', 'strike', {'is-active': focus && editor.isActive('strike')}]"
-        @click="editor.chain().focus().toggleStrike().run()"
-      >
-        <v-icon>{{ strikeIcon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        :class="['menu-button', {'is-active': focus && editor.isActive('heading', {level: 1})}]"
-        @click="editor.chain().focus().toggleHeading({level: 1}).run()"
-      >
-        <v-icon>{{ h1Icon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        :class="['menu-button', {'is-active': focus && editor.isActive('heading', {level: 2})}]"
-        @click="editor.chain().focus().toggleHeading({level: 2}).run()"
-      >
-        <v-icon>{{ h2Icon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        :class="['menu-button', {'is-active': focus && editor.isActive('bulletList')}]"
-        @click="editor.chain().focus().toggleBulletList().run()"
-      >
-        <v-icon>{{ ulIcon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        :class="['menu-button', {'is-active': focus && editor.isActive('orderedList')}]"
-        @click="editor.chain().focus().toggleOrderedList().run()"
-      >
-        <v-icon>{{ olIcon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        :class="['menu-button', {'is-active': focus && editor.isActive('blockquote')}]"
-        @click="editor.chain().focus().toggleBlockquote().run()"
-      >
-        <v-icon>{{ commentIcon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        class="menu-button"
-        @click="editor.chain().focus().undo().run()"
-      >
-        <v-icon>{{ undoIcon }}</v-icon>
-      </v-btn>
-
-      <v-btn
-        small
-        class="menu-button"
-        @click="editor.chain().focus().redo().run()"
-      >
-        <v-icon>{{ redoIcon }}</v-icon>
-      </v-btn>
+      <div>
+        <v-btn
+          small
+          :class="['menu-button', {'is-active': focus && editor.isActive('bold')}]"
+          @click="editor.chain().focus().toggleBold().run()"
+        >
+          <v-icon>{{ boldIcon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          :class="['menu-button', {'is-active': focus && editor.isActive('italic')}]"
+          @click="editor.chain().focus().toggleItalic().run()"
+        >
+          <v-icon>{{ italicIcon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          :class="['menu-button', 'strike', {'is-active': focus && editor.isActive('strike')}]"
+          @click="editor.chain().focus().toggleStrike().run()"
+        >
+          <v-icon>{{ strikeIcon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          :class="['menu-button', {'is-active': focus && editor.isActive('heading', {level: 1})}]"
+          @click="editor.chain().focus().toggleHeading({level: 1}).run()"
+        >
+          <v-icon>{{ h1Icon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          :class="['menu-button', {'is-active': focus && editor.isActive('heading', {level: 2})}]"
+          @click="editor.chain().focus().toggleHeading({level: 2}).run()"
+        >
+          <v-icon>{{ h2Icon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          :class="['menu-button', {'is-active': focus && editor.isActive('bulletList')}]"
+          @click="editor.chain().focus().toggleBulletList().run()"
+        >
+          <v-icon>{{ ulIcon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          :class="['menu-button', {'is-active': focus && editor.isActive('orderedList')}]"
+          @click="editor.chain().focus().toggleOrderedList().run()"
+        >
+          <v-icon>{{ olIcon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          :class="['menu-button', {'is-active': focus && editor.isActive('blockquote')}]"
+          @click="editor.chain().focus().toggleBlockquote().run()"
+        >
+          <v-icon>{{ commentIcon }}</v-icon>
+        </v-btn>
+
+        <v-btn
+          small
+          class="menu-button"
+          :disabled="initialValue === editor.getHTML()"
+          @click="editor.chain().focus().undo().run()"
+        >
+          <v-icon>{{ undoIcon }}</v-icon>
+        </v-btn>
+      </div>
+
+      <div>
+        <slot name="buttons" />
+      </div>
     </div>
 
     <editor-content
@@ -119,6 +118,7 @@ import {
 export default class ARichTextArea extends Vue {
   editor = null
   internalValue = null
+  initialValue = null
   focus = false
 
   boldIcon = mdiFormatBold
@@ -133,6 +133,7 @@ export default class ARichTextArea extends Vue {
   redoIcon = mdiRotateRight
 
   created () {
+    this.initialValue = this.value
     this.internalValue = this.value
   }
 
@@ -158,14 +159,20 @@ export default class ARichTextArea extends Vue {
         this.$emit('blur')
       }
     })
-
-    this.editor.commands.setContent(this.internalValue, false)
   }
 
   beforeDestroy () {
     this.editor.destroy()
   }
 
+  /**
+   * reset the text area to disable the undo button
+   * e.g. after saving the form while keeping it open
+   */
+  reset () {
+    this.initialValue = this.value
+  }
+
   @Watch('value')
   valueChanged () {
     this.internalValue = this.value
@@ -192,10 +199,6 @@ export default class ARichTextArea extends Vue {
 
 
 <style lang="scss" scoped>
-.v-input:not(.v-input--is-focused) ::v-deep .v-counter {
-  display: none;
-}
-
 .a-rich-text-editor {
   ::v-deep .ProseMirror {
     &-focused {
@@ -205,9 +208,12 @@ export default class ARichTextArea extends Vue {
 }
 
 .menu-bar {
+  display: flex;
+  justify-content: space-between;
   margin: -.2rem 0 .5rem -.2rem;
 }
 
+.menu-bar .v-btn,
 .menu-button {
   padding: 0 !important;
   width: 30px !important;
@@ -239,6 +245,10 @@ export default class ARichTextArea extends Vue {
   &.is-active {
     background: #ECECEC !important;
   }
+
+  &[disabled] {
+    background: none !important;
+  }
 }
 
 ::v-deep .ProseMirror {

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

@@ -4,9 +4,10 @@
     autocomplete="off"
   >
     <slot
+      name="form"
       :changed="changed"
       :valid="valid"
-      :model="modelToEdit"
+      :modelToEdit="modelToEdit"
     />
   </v-form>
 </template>
@@ -27,16 +28,22 @@ export default class EditForm extends Vue {
   modelToEdit = null
   valid = false
   lastJson = null
+  forcedUnchange = false
 
   created () {
     this.reset()
   }
 
+  forceUnchanged () {
+    this.forcedUnchange = true
+    this.$emit('update:changed', false)
+  }
+
   reset () {
     if (this.createModelToEdit) {
       this.modelToEdit = this.createModelToEdit(this.model)
-    } else {
-      this.modelToEdit = this.model
+    } else if (this.model) {
+      this.modelToEdit = this.model.cloneForEdit()
     }
     this.lastJson = this.json
   }
@@ -65,6 +72,9 @@ export default class EditForm extends Vue {
   }
 
   get changed () {
+    if (this.forcedUnchange) {
+      return false
+    }
     // console.log(this.json)
     // console.log(this.lastJson)
     return this.json !== this.lastJson

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,37 @@ 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.$refs.form.forceUnchanged()
+    console.info('TODO switch form to forceUnchanged')
+    this.ignoreChangesOnClose_ = true
   }
 }
 </script>

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

@@ -1,7 +1,9 @@
 <template>
-  <a-rich-text-area
-    v-model="model[name]"
-  />
+  <a-rich-text-area v-model="model[name]">
+    <template #buttons>
+      <slot name="buttons" />
+    </template>
+  </a-rich-text-area>
 </template>
 
 <script>

package/src/components/list/ListViewMixin.js

@@ -64,9 +64,16 @@ export class ListViewMixin extends Vue {
       .on('change', this.filtersChanged) // listen to change
 
     this._filtersInitialized()
+    this.$emit('update:filters', this.filters)
+    this.$emit('update:listViewModel', this.listViewModel)
 
     if (this.models) {
       this.$emit('update:count', this.meta_.count_search)
+
+      this.$emit('onLoad', {
+        models: this.models_,
+        meta: this.meta_
+      })
     } else {
       this.load()
     }
@@ -132,7 +139,7 @@ export class ListViewMixin extends Vue {
 
     if (!models) { // error happened
       this.isLoading = false
-      this.$emit('update:isLoading', this.isLoading)
+      this.$emit('update:isLoading', false)
       return
     }
 
@@ -144,8 +151,13 @@ export class ListViewMixin extends Vue {
     }
 
     this.isLoading = false
-    this.$emit('update:isLoading', this.isLoading)
+    this.$emit('update:isLoading', false)
 
     this.$emit('update:count', this.meta_.count_search)
+
+    this.$emit('onLoad', {
+      models,
+      meta
+    })
   }
 }

package/src/components/search-select/SearchSelectList.vue

@@ -67,7 +67,6 @@ export default class SearchSelectList extends Mixins(ListViewMixin) {
     if (this.q) {
       this.filters.q.value = this.q
     }
-    this.$emit('update:filters', this.filters)
   }
 }
 </script>

package/src/components/vue/Component.js

@@ -32,9 +32,16 @@ function propsWithDefaults (props) {
         // property: { some object }, should be a normal vue props object
         } else if (value && typeof value === 'object' && value.constructor === Object) {
           normalizedProps[subProp] = value
-        // property: true, null, ...
+        // property: true, false, null, ...
         } else {
-          normalizedProps[subProp] = { default: value }
+          if (typeof value === 'boolean') {
+            normalizedProps[subProp] = {
+              type: Boolean,
+              default: value
+            }
+          } else {
+            normalizedProps[subProp] = { default: value }
+          }
         }
       })
     } else {

package/src/events.js

@@ -1,4 +1,6 @@
+export { BaseEvent } from './plugins/event-bus/BaseEvent'
 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'