Initial commit

frontend/src/components/DialogWidget.vue

@@ -0,0 +1,200 @@
+<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">
+        <span v-if="icon" class="dialog-icon">
+          <img :src="'/images/icons/' + icon" alt="Icon" />
+        </span>
+        <span class="dialog-title">{{ isTitleTranslated ? $t(title) : title }}</span>
+        <span v-if="!modal" class="dialog-minimize" @click="minimize">_</span>
+        <span v-if="showClose" class="dialog-close" @click="close">✖</span>
+      </div>
+      <div class="dialog-body">
+        <slot></slot>
+      </div>
+      <div class="dialog-footer">
+        <button v-for="button in buttons" :key="button.text" @click="buttonClick(button.text)"
+                class="dialog-button">
+          {{ button.text }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DialogWidget',
+  props: {
+    icon: {
+      type: String,
+      default: null
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    showClose: {
+      type: Boolean,
+      default: false
+    },
+    buttons: {
+      type: Array,
+      default: () => [{ text: 'Ok' }]
+    },
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    width: {
+      type: String,
+      default: '70%'
+    },
+    height: {
+      type: String,
+      default: '60%'
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    isTitleTranslated: {
+      type: Boolean,
+      default: false
+    }
+  },
+  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) {
+        this.$store.dispatch('dialogs/addOpenDialog', {
+          status: 'open',
+          dialog: this
+        });
+      }
+    },
+    close() {
+      this.visible = false;
+      this.$store.dispatch('dialogs/removeOpenDialog', this.name);
+    },
+    buttonClick(buttonText) {
+      this.$emit(buttonText.toLowerCase());
+      this.close();
+    },
+    handleOverlayClick() {
+      if (!this.modal) {
+        this.close();
+      }
+    },
+    minimize() {
+      this.minimized = true;
+    },
+    toggleMinimize() {
+      this.minimized = !this.minimized;
+      this.$store.dispatch('dialogs/toggleDialogMinimize', this.name);
+    }
+  },
+  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: 10px;
+  overflow-y: auto;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px 20px;
+  border-top: 1px solid #ddd;
+}
+
+</style>