Added movability of dialogs

frontend/src/components/DialogWidget.vue

@@ -1,8 +1,9 @@
 <template>
   <div v-if="visible" :class="['dialog-overlay', { 'non-modal': !modal }]" @click.self="handleOverlayClick">
-    <div class="dialog" :class="{ minimized: minimized }" :style="{ width: dialogWidth, height: dialogHeight }"
-      v-if="!minimized">
-      <div class="dialog-header">
+    <div class="dialog" :class="{ minimized: minimized }"
+      :style="{ width: dialogWidth, height: dialogHeight, top: dialogTop, left: dialogLeft, position: 'absolute' }"
+      v-if="!minimized" ref="dialog">
+      <div class="dialog-header" @mousedown="startDragging">
         <span v-if="icon" class="dialog-icon">
           <img :src="icon" alt="Icon" />
         </span>
@@ -66,12 +67,19 @@ export default {
   data() {
     return {
       visible: false,
-      minimized: false
+      minimized: false,
+      dialogTop: '50%',
+      dialogLeft: '50%',
+      isDragging: false,
+      dragOffsetX: 0,
+      dragOffsetY: 0,
     };
   },
   computed: {
     dialogWidth() {
-      return this.width || '70%';
+      const val = this.width || '70%';
+      console.log(val);
+      return val;
     },
     dialogHeight() {
       return this.height || '60%';
@@ -80,7 +88,7 @@ export default {
   watch: {
     visible(newValue) {
       if (!newValue) {
-        this.minimized = false;  // Reset minimized state when dialog is closed
+        this.minimized = false;
       }
     }
   },
@@ -101,7 +109,7 @@ export default {
     buttonClick(action) {
       this.$emit(action);
       if (action === 'close') {
-        this.close(); // Close dialog after button click if action is close
+        this.close();
       }
     },
     handleOverlayClick() {
@@ -115,7 +123,26 @@ export default {
     toggleMinimize() {
       this.minimized = !this.minimized;
       this.$store.dispatch('dialogs/toggleDialogMinimize', this.name);
-    }
+    },
+    startDragging(event) {
+      this.isDragging = true;
+      const dialog = this.$refs.dialog;
+      this.dragOffsetX = event.clientX - dialog.offsetLeft;
+      this.dragOffsetY = event.clientY - dialog.offsetTop;
+      document.addEventListener('mousemove', this.onDrag);
+      document.addEventListener('mouseup', this.stopDragging);
+      console.log('dragging started');
+    },
+    onDrag(event) {
+      if (!this.isDragging) return;
+      this.dialogLeft = `${event.clientX - this.dragOffsetX}px`;
+      this.dialogTop = `${event.clientY - this.dragOffsetY}px`;
+    },
+    stopDragging() {
+      this.isDragging = false;
+      document.removeEventListener('mousemove', this.onDrag);
+      document.removeEventListener('mouseup', this.stopDragging);
+    },
   },
   mounted() {
     this.$store.subscribe((mutation) => {
@@ -153,6 +180,8 @@ export default {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
   pointer-events: all;
+  position: absolute;
+  transform: translate(-50%, -50%);
 }
 
 .dialog.minimized {
@@ -167,6 +196,7 @@ export default {
   padding: 10px 20px;
   border-bottom: 1px solid #ddd;
   background-color: #F9A22C;
+  cursor: move;
 }
 
 .dialog-icon {