jandl-taskmanager-app/app/src/plugins/tm@modal/task/z-complete-task-modal.vue

<template>
  <v-dialog
    v-model="visible"
    :width="modalWidth"
    :height="modalHeight"
    persistent
    :retain-focus="false"
  >
    <v-card style="position: relative">
      <div class="d-flex justify-space-between align-center">
        <h1>
          Ste si istý, že chcete
          {{ subtask.is_finished ? 'znovu otvoriť' : 'dokončiť' }} sub task, z
          mastertasku
          <b>{{ subtask?.master_task?.name || subtask.master_task }}</b
          >?
        </h1>
        <div class="d-flex align-center">
          <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" variant="flat" @click="complete()"
          >ÁNO</v-btn
        >
        <v-btn class="button primary half outline" @click.stop="visible = false"
          >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 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: ['close', 'on-subtask-edited'],

  data() {
    return {
      visible: false,
      subtask: null,
      modalName: 'z-complete-task-modal',
    };
  },

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

    async complete() {
      try {
        const timesheets = this.subtask.timesheets.map((timesheet) => {
          delete timesheet.employee_name;
          return timesheet;
        });

        // Convert timeblocks from internal format to BE format
        const timeblocks = (this.subtask.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 tempSubtask = {
          ...this.subtask,
          is_finished: this.subtask.is_finished ? 0 : 1,
          timesheets,
          timeblocks,
        };

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

        this.visible = false;
        this.$emit('on-subtask-edited', subtask);
      } catch (error) {
        this.$toast.error(this.$parseError(error));
      }
    },

    closeModal() {
      this.visible = false;
    },
  },
};
</script>