@afeefa/vue-app 0.0.250 → 0.0.252

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

@@ -1 +1 @@
-0.0.250
+0.0.252

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.250",
+  "version": "0.0.252",
   "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/plugins/route-config/RouteConfigPlugin.js

@@ -46,6 +46,8 @@ class RouteConfigPlugin {
   _router = null
   _routes = []
 
+  _routeHistory = [];
+
   _promise = Promise.resolve(true)
 
   router (options = {}) {
@@ -178,6 +180,11 @@ class RouteConfigPlugin {
             }
           })
         }
+
+        this._router.beforeEach((to, from, next) => {
+          this._routeHistory.push(to)
+          next()
+        })
       })
     })
 
@@ -353,6 +360,14 @@ class RouteConfigPlugin {
     }
     return new BreadcrumbSetDefinition(options).getDefinitions()
   }
+
+  getRouteHistory () {
+    return this._routeHistory
+  }
+
+  removeFromRouteHistoryAfterIndex (index) {
+    this._routeHistory.splice(index + 1)
+  }
 }
 
 export const routeConfigPlugin = new RouteConfigPlugin()

package/src-admin/components/app/AppBarTitle.vue

@@ -7,7 +7,7 @@
       color="#F4F4F4"
       title="Zurück"
       class="mr-n2"
-      @click="$router.push(back)"
+      @click="goToLastNamedRoute()"
     >
       <v-icon>
         $arrowLeftIcon
@@ -34,6 +34,7 @@
 
 <script>
 import { Component, Vue } from '@a-vue'
+import { routeConfigPlugin } from '@a-vue/plugins/route-config/RouteConfigPlugin'
 
 @Component({
   props: ['back', 'icon', 'title', 'subtitle', 'detail']
@@ -57,6 +58,21 @@ export default class appBarTitle extends Vue {
   getButtonBar () {
     return document.getElementById('appBarTitleContainer')
   }
+
+  goToLastNamedRoute () {
+    const currentRouteName = this.$route.name
+    const historyStack = routeConfigPlugin.getRouteHistory()
+
+    // Durchlaufe die Historie rückwärts, um die letzte benannte Route zu finden, die sich vom aktuellen Namen unterscheidet
+    for (let i = historyStack.length - 2; i >= 0; i--) {
+      const route = historyStack[i]
+      if (route.name && route.name !== currentRouteName) {
+        this.$router.push({ name: route.name })
+        routeConfigPlugin.removeFromRouteHistoryAfterIndex(i)
+        return
+      }
+    }
+  }
 }
 </script>