jandl-taskmanager-app/app/src/plugins/tm@modal/task-cell/z-show-menu-modal.vue

<template>
  <v-dialog
    v-model="visible"
    :width="modalWidth"
    :height="modalHeight"
    persistent
    :retain-focus="false"
  >
    <v-card style="position: relative; height: 100%">
      <div class="d-flex justify-space-between align-center">
        <h1>Vytvoriť</h1>
        <div class="d-flex align-start">
          <a-reset-size-button @reset="resetModalSize" />
          <a-close-button @close="closeModal()" />
        </div>
      </div>

      <v-card-actions
        class="mt-10 d-flex justify-start align-center mobile-view"
      >
        <v-btn class="button primary half outline" @click.stop="createTask()"
          >SUB TASK</v-btn
        >
        <v-btn class="button primary half outline" @click.stop="createBlocker()"
          >BLOCKER</v-btn
        >
      </v-card-actions>
      <a-resize-handle
        :current-width="modalWidthPx"
        :current-height="modalHeightPx"
        @resize="handleModalResize"
        @resize-end="handleResizeEnd"
      />
    </v-card>
  </v-dialog>
</template>

<script>
import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';

export default {
  components: {
    AResizeHandle,
    AResetSizeButton,
    ACloseButton,
  },
  mixins: [modalMixin],
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  emits: ['update', 'data'],

  data() {
    return {
      visible: false,
      localData: null,
      modalName: 'z-show-menu-modal',
      modalSize: 'small',
    };
  },

  mounted() {
    this.$events.on('blocker-created', () => {
      this.closeModal();
    });

    this.$events.on('task-created', () => {
      this.closeModal();
    });
  },

  methods: {
    async showModal(data) {
      this.localData = data;
      this.visible = true;
    },

    closeModal() {
      this.visible = false;
    },

    createTask() {
      this.$events.emit('show-subtask-modal', {
        subtask: {
          deadline: this.localData.date,
          _deadline_time: this.localData.time,
          employee_id: this.localData.employee,
        },
        onTaskCreated: () => {
          this.closeModal();
        },
      });
    },

    createBlocker() {
      this.$events.emit('show-blocker-modal', {
        blocker: {
          starts_at_time: this.localData.time,
          datepicker: this.localData.date,
          employee_id: this.localData.employee,
        },
        onBlockerCreated: () => {
          this.closeModal();
        },
      });
    },
  },
};
</script>