yourpart3/frontend/src/components/DialogWidget.vue

<template>
  <div v-if="visible" :class="['dialog-overlay', { 'non-modal': !modal, 'is-active': isActive }]" @click.self="handleOverlayClick">
    <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="'/images/icons/' + icon" alt="Icon" />
        </span>
        <span class="dialog-title">{{ localIsTitleTranslated ? $t(localTitle) : localTitle }}</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.action)" class="dialog-button">
          {{ isTitleTranslated ? $t(button.text) : 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', action: 'close' }]
    },
    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,
      dialogTop: '50%',
      dialogLeft: '50%',
      isDragging: false,
      dragOffsetX: 0,
      dragOffsetY: 0,
      localTitle: this.title,
      localIsTitleTranslated: this.isTitleTranslated,
      isActive: false,
    };
  },
  computed: {
    dialogWidth() {
      const val = this.width || '70%';
      return val;
    },
    dialogHeight() {
      return this.height || '60%';
    }
  },
  watch: {
    visible(newValue) {
      if (!newValue) {
        this.minimized = false;
      }
    },
    title(newValue) {
      this.updateTitle(newValue);
    }
  },
  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);
    },
    buttonClick(action) {
      if (typeof action === 'function') {
        action();
      } else {
        this.$emit(action);
        if (action === 'close') {
          this.close();
        }
      }
    },
    handleOverlayClick() {
      if (!this.modal) {
        this.close();
      }
    },
    minimize() {
      this.minimized = true;
    },
    toggleMinimize() {
      this.minimized = !this.minimized;
      this.$store.dispatch('dialogs/toggleDialogMinimize', this.name);
    },
    isMinimized() {
      return this.minimized;
    },
    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);
    },
    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);
    },
    updateTitle(newTitle, newIsTitleTranslated) {
      this.localTitle = newTitle;
      this.localIsTitleTranslated = newIsTitleTranslated;
      this.$store.dispatch('dialogs/updateDialogTitle', {
        name: this.name,
        newTitle: newTitle,
        isTitleTranslated: this.localIsTitleTranslated
      });
    },
    setActiveState(newActiveState) {
      this.isActive = newActiveState;
    }
  }
};
</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;
  position: absolute;
  transform: translate(-50%, -50%);
}

.dialog.minimized {
  height: auto;
  overflow: hidden;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 5px;
  border-bottom: 1px solid #ddd;
  background-color: #F9A22C;
  cursor: move;
}

.dialog-icon {
  padding: 2px 5px 0 0;
}

.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: 5px 10px;
  cursor: pointer;
  background: #F9A22C;
  color: #000000;
  border: none;
  border-radius: 4px;
  transition: background 0.02s;
}

.dialog-button:hover {
  background: #fdf1db;
  color: #7E471B;
  border: 1px solid #7E471B;
}
.is-active {
  z-index: 990;
}
</style>