jandl-taskmanager-app/app/src/plugins/tm@modal/blocker/z-delete-blocker-modal.vue

<template>
  <v-dialog
    v-model="visible"
    :width="modalWidth"
    :height="modalHeight"
    persistent
    :retain-focus="false"
  >
    <v-card
      style="position: relative; height: 100%; max-height: calc(100vh - 48px)"
    >
      <div class="d-flex justify-space-between align-center">
        <h1>
          Ste si istý, že chcete zmazať <b>{{ blocker.name }}</b
          >?
        </h1>

        <div class="d-flex align-start">
          <a-reset-size-button @reset="resetModalSize" />
          <a-close-button class="mb-15" @close="closeModal()" />
        </div>
      </div>
      <v-card-actions
        class="mt-10 d-flex justify-start align-center mobile-view"
      >
        <v-btn
          class="button primary half"
          variant="flat"
          :disabled="isDeleting"
          @click="deleteBlocker()"
          >ÁNO</v-btn
        >
        <v-btn class="button primary half outline" @click.stop="closeModal()"
          >ZRUŠIŤ</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],
  emits: ['on-blocker-deleted'],

  data() {
    return {
      visible: false,
      blocker: null,
      isDeleting: false,
      modalName: 'z-delete-blocker-modal',
      modalSize: 'small',
    };
  },

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

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

    async deleteBlocker() {
      if (this.isDeleting) return;

      this.isDeleting = true;

      try {
        await this.$axios.delete_auth(`v1/blockers/${this.blocker.id}`);

        this.$emit('on-blocker-deleted', this.blocker);
        this.closeModal();
      } catch (error) {
        this.$toast.error(this.$parseError(error));
      } finally {
        this.isDeleting = false;
      }
    },
  },
};
</script>