Added movability of dialogs

frontend/src/components/MessageboxWidget.vue

@@ -0,0 +1,183 @@
+<template>
+    <div v-if="visible" :class="['dialog-overlay', { 'non-modal': false }]">
+        <div class="dialog" :class="{ minimized: minimized }" :style="{ width: dialogWidth, height: dialogHeight }">
+            <div class="dialog-header">
+                <span class="dialog-title">{{ getHeadLine() }}</span>
+                <span class="dialog-close" @click="close">✖</span>
+            </div>
+            <div class="dialog-body">
+                {{ message }}
+            </div>
+            <div class="dialog-footer">
+                <button @click="close()" class="dialog-button">Ok</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'MessageboxWidget',
+    props: {
+        type: {
+            type: String,
+            required: true
+        },
+        width: {
+            type: String,
+            default: '300px'
+        },
+        height: {
+            type: String,
+            default: '200px'
+        },
+        message: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            visible: false,
+            minimized: false
+        };
+    },
+    computed: {
+        dialogWidth() {
+            return this.width || '70%';
+        },
+        dialogHeight() {
+            return this.height || '60%';
+        }
+    },
+    watch: {
+        visible(newValue) {
+            if (!newValue) {
+                this.minimized = false;  // Reset minimized state when dialog is closed
+            }
+        }
+    },
+    methods: {
+        open() {
+            this.visible = true;
+            if (this.modal === false) {
+                this.$store.dispatch('dialogs/addOpenDialog', {
+                    status: 'open',
+                    dialog: this
+                });
+            }
+        },
+        close() {
+            this.visible = false;
+            this.$store.dispatch('dialogs/removeOpenDialog', this.name);
+        },
+        getHeadLine() {
+            switch (this.type) {
+                case 'error':
+                    return this.$t('error-title');
+                case 'warning':
+                    return this.$t('warning-title');
+                case 'info':
+                    return this.$t('info-title');
+                default:
+                    return this.$t('info-title');
+            }
+        }
+    },
+    mounted() {
+        this.$store.subscribe((mutation) => {
+            if (mutation.type === 'dialogs/toggleDialogMinimize' && mutation.payload === this.name) {
+                this.minimized = !this.minimized;
+            }
+        });
+    }
+};
+</script>
+
+<style scoped>
+.dialog-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.dialog-overlay.non-modal {
+    background: transparent;
+    pointer-events: none;
+}
+
+.dialog {
+    background: white;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    pointer-events: all;
+}
+
+.dialog.minimized {
+    height: auto;
+    overflow: hidden;
+}
+
+.dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    border-bottom: 1px solid #ddd;
+    background-color: #F9A22C;
+}
+
+.dialog-icon {
+    margin-right: 10px;
+}
+
+.dialog-title {
+    flex-grow: 1;
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+.dialog-close,
+.dialog-minimize {
+    cursor: pointer;
+    font-size: 1.5em;
+    margin-left: 10px;
+}
+
+.dialog-body {
+    flex-grow: 1;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px 20px;
+    border-top: 1px solid #ddd;
+}
+
+.dialog-button {
+    margin-left: 10px;
+    padding: 10px 20px;
+    cursor: pointer;
+    background: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    transition: background 0.3s;
+}
+
+.dialog-button:hover {
+    background: #0056b3;
+}
+</style>