jandl-taskmanager-app/app/src/plugins/tm@modal/task/z-delete-timeblock-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">
        <h4 class="mt-3">Vyberte časový úsek, ktorý chcete odstrániť</h4>

        <div class="d-flex align-start">
          <a-reset-size-button @reset="resetModalSize" />
          <a-close-button @close="closeModal()" />
        </div>
      </div>
      <div
        v-for="(timeblock, index) in subtask.timeblocks"
        :key="timeblock.id"
        class="d-flex align-center justify-center mb-3 mt-3"
      >
        <p
          class="task-badge rounded-pill"
          :class="{ 'strike-through': timeblock.is_finished }"
        >
          {{ tmUtils.formatDateTime(timeblock.start) }} -
          {{ tmUtils.formatDateTime(timeblock.end) }}
        </p>
        <v-icon
          class="close-icon circle-border cursor-pointer ml-3 text-red"
          icon="mdi-close"
          size="medium"
          @click.stop="
            subtask.id
              ? deleteTimeblock(timeblock)
              : deleteTimeblockWithoutId(index)
          "
        />
      </div>
      <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 tmUtils from '@/plugins/tm@_utils/tm.utils';
import moment from 'moment';
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-subtask-edited'],

  data() {
    return {
      visible: false,
      subtask: null,
      isDeleting: false,
      tmUtils,
      modalName: 'z-delete-timeblock-modal',
      modalSize: 'medium',
    };
  },

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

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

    async deleteTimeblock({ id }) {
      const subtask = JSON.parse(JSON.stringify(this.subtask));
      subtask.timeblocks = subtask.timeblocks.filter(
        (timeblock) => timeblock.id != id,
      );
      if (subtask.deadline)
        subtask.deadline = tmUtils.formatDateTimeForBackend(subtask.deadline);

      this._update(subtask);
    },

    deleteTimeblockWithoutId(index) {
      this.subtask.timeblocks.splice(index, 1);
      this._update(this.subtask);
    },

    async _update(data) {
      try {
        const timesheets = data.timesheets.map((timesheet) => {
          delete timesheet.employee_name;
          return timesheet;
        });

        // Convert timeblocks from internal format to BE format
        const timeblocks = (data.timeblocks || [])
          .filter((timeblock) => {
            // Filter timeblocks that have either old format (date) or new format (start)
            return timeblock.date || timeblock.start;
          })
          .map((timeblock) => {
            // If already in BE format (has start field), return as is
            if (timeblock.start && !timeblock.date) {
              return {
                id: timeblock.id || null,
                start: timeblock.start,
                end: timeblock.end,
                is_finished: timeblock.is_finished || 0,
              };
            }

            // Convert from internal format to BE format
            const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
            return {
              id: timeblock.id || null,
              start: `${dateStr} ${timeblock.starts_at_time}:00`,
              end: `${dateStr} ${timeblock.ends_at_time}:00`,
              is_finished: timeblock.is_finished || 0,
            };
          });

        const { subtask } = await this.$axios.put_auth(
          `v1/subtasks/${data.id}`,
          { ...data, timesheets, timeblocks },
        );

        this.closeModal();
        this.$events.emit('on-subtask-edited', subtask);
      } catch (error) {
        this.$toast.error(error.message || error);
      }
    },
  },
};
</script>

<style lang="sass" scoped>
.close-icon:hover
	background: red
	color: #fff !important
</style>