yourpart3/frontend/src/components/DialogWidget.vue

<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>