@afeefa/vue-app 0.0.249 → 0.0.251

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

@@ -1 +1 @@
-0.0.249
+0.0.251

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.249",
+  "version": "0.0.251",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src/components/AModal.vue

@@ -22,14 +22,19 @@
     </template>
 
     <v-card v-if="modal">
-      <v-card-title v-if="title">
+      <v-card-title
+        v-if="title"
+        :style="{ cursor: draggable ? 'move' : 'default' }"
+        @mousedown="startDrag"
+      >
         <v-icon
           v-if="icon"
           :color="icon.color"
           class="mr-2"
           size="1.5rem"
-          v-text="icon.icon"
-        />
+        >
+          {{ icon.icon }}
+        </v-icon>
 
         {{ title }}
       </v-card-title>
@@ -51,7 +56,7 @@ import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 import { CancelOnEscMixin } from '@a-vue/services/escape/CancelOnEscMixin'
 
 @Component({
-  props: ['show', 'icon', 'title', 'beforeClose', 'anchorPosition', 'screenCentered']
+  props: ['show', 'icon', 'title', 'beforeClose', 'anchorPosition', 'screenCentered', {draggable: true}]
 })
 export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentWidthMixin, CancelOnEscMixin) {
   modalId = randomCssClass(10)
@@ -59,6 +64,11 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
   modal = false
   position = null
 
+  dragStartX = 0
+  dragStartY = 0
+  initialLeft = 0
+  initialTop = 0
+
   cwm_maxWidth_ = 1000
 
   created () {
@@ -95,6 +105,42 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
     }, true) // capture phase, stop event before v-dialog receives it
   }
 
+  startDrag (event) {
+    if (!this.draggable) {
+      return
+    }
+
+    this.dragStartX = event.clientX
+    this.dragStartY = event.clientY
+
+    const dialog = document.querySelector('.' + this.modalId)
+    const rect = dialog.getBoundingClientRect()
+    this.initialLeft = rect.left
+    this.initialTop = rect.top
+
+    document.addEventListener('mousemove', this.onDrag)
+    document.addEventListener('mouseup', this.stopDrag)
+  }
+
+  onDrag (event) {
+    const deltaX = event.clientX - this.dragStartX
+    const deltaY = event.clientY - this.dragStartY
+
+    const dialog = document.querySelector('.' + this.modalId)
+    if (dialog) {
+      dialog.style.left = `${this.initialLeft + deltaX}px`
+      dialog.style.top = `${this.initialTop + deltaY}px`
+    }
+  }
+
+  stopDrag () {
+    document.removeEventListener('mousemove', this.onDrag)
+    document.removeEventListener('mouseup', this.stopDrag)
+
+    // remove from position watching if has been dragged once
+    this.urp_unregisterPositionWatchers()
+  }
+
   coe_cancelOnEsc () {
     this.cancel()
     return false // stop esc propagation
@@ -201,7 +247,6 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
 }
 </script>
 
-
 <style lang="scss" scoped>
 .v-card__title {
   padding: .8rem 1rem !important;

package/src/components/form/EditModal.vue

@@ -32,6 +32,16 @@
           gap-2
           justify-end
         >
+          <v-btn
+            ref="deleteButton"
+            v-if="deleteButton && modelToEdit.id"
+            small
+            color="error"
+            @click="handleDelete"
+          >
+            Löschen
+          </v-btn>
+
           <v-btn
             small
             @click="close"
@@ -62,7 +72,7 @@ import { Component, Vue, Watch } from '@a-vue'
 import { DialogEvent } from '@a-vue/events'
 
 @Component({
-  props: ['model', 'createModelToEdit', 'show', {reset: true, valid: true, forceChanged: false, forceActive: false}]
+  props: ['model', 'createModelToEdit', 'show', {deleteButton: false, reset: true, valid: true, forceChanged: false, forceActive: false}]
 })
 export default class EditModal extends Vue {
   show_ = false
@@ -137,6 +147,19 @@ export default class EditModal extends Vue {
     this.show_ = false
   }
 
+  async handleDelete () {
+    const result = await this.$events.dispatch(new DialogEvent(DialogEvent.SHOW, {
+      anchor: this.$refs.form,
+      title: 'Löschen bestätigen',
+      message: 'Soll dieser Eintrag wirklich gelöscht werden?',
+      yesButton: 'Löschen'
+    }))
+    if (result === DialogEvent.RESULT_YES) {
+      this.$emit('delete', this.ignoreChangesOnClose, this.close)
+      this.show_ = false
+    }
+  }
+
   /**
    * hook to allow to leave a just created (saved) model
    */