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

<template>
  <v-dialog v-model="visible" max-width="750" persistent>
    <v-card>
      <div class="d-flex justify-space-between align-center">
        <h1>Sub Task má nedokončené úlohy</h1>

        <v-icon
          @click.stop="closeModal()"
          icon="mdi-close"
          size="large"
        ></v-icon>
      </div>

      <div class="card-content">
        <div
          v-for="timeblock in subtask?.timeblocks"
          :key="timeblock.id"
          class="d-flex align-center mb-3"
        >
          <p
            class="task-badge rounded-pill"
            :class="{ 'strike-through': timeblock.is_finished }"
          >
            {{ tmUtils.formatDateTime(timeblock.start) }} -
            {{ tmUtils.formatDateTime(timeblock.end) }}
          </p>
          <v-icon
            @click.stop="handleFinishTimeblock(timeblock)"
            class="finish-icon circle-border cursor-pointer ml-2"
            :class="{
              disabled: loadingTimeblocks[timeblock.id] || loadingCloseAll,
              finished: timeblock.is_finished,
            }"
            icon="mdi-check"
            size="medium"
          />
        </div>
      </div>

      <div class="card-actions">
        <v-btn @click="closeModal()" class="button secondary">Zrušiť</v-btn>
        <v-btn
          @click="handleFinishAllTimeblocks()"
          :loading="loadingCloseAll"
          class="button primary"
          >Uzatvoriť všetky</v-btn
        >
      </div>
    </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';

export default {
  mixins: [modalMixin],
  emits: ['close', 'on-subtask-edited'],

  props: {
    mode: {
      type: String,
      default: 'edit', // edit or delete
    },
  },

  data() {
    return {
      tmUtils,
      visible: false,
      subtask: null,
      loadingTimeblocks: {},
      loadingCloseAll: false,
    };
  },

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

    async complete() {
      console.log('complete');
    },

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

    async handleFinishTimeblock(timeblock) {
      const subtask = JSON.parse(JSON.stringify(this.subtask));

      try {
        this.loadingTimeblocks[timeblock.id] = true;
        await this.$axios.put_auth(`v1/timeblocks/${timeblock.id}`, {
          ...timeblock,
          is_finished: 1,
        });
        timeblock.is_finished = 1;

        const areAllTimeblocksFinished = subtask.timeblocks.every(
          (timeblock) => timeblock.is_finished,
        );

        if (areAllTimeblocksFinished) {
          await this._finishSubtask();
          this.$store.dispatch('tm/removeOngoingSubtask', this.subtask.id);
        }

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

        if (process.env.NODE_ENV === 'development')
          console.log('[a-task-timeblocks.vue] Error: ', error);
      } finally {
        this.loadingTimeblocks[timeblock.id] = false;
      }
    },

    async handleFinishAllTimeblocks() {
      this.loadingCloseAll = true;

      try {
        const promises = this.subtask.timeblocks.map((timeblock) => {
          return this.$axios.put_auth(`v1/timeblocks/${timeblock.id}`, {
            ...timeblock,
            is_finished: 1,
          });
        });

        await Promise.all(promises);

        this.subtask.timeblocks = this.subtask.timeblocks.map((timeblock) => {
          timeblock.is_finished = 1;
          return timeblock;
        });

        await this._finishSubtask();

        this.$store.dispatch('tm/removeOngoingSubtask', this.subtask.id);
        this.$events.emit('on-subtask-edited', this.subtask);
        this.closeModal();
      } catch (error) {
        this.$toast.error(error.message || error);
      } finally {
        this.loadingCloseAll = false;
      }
    },

    async _finishSubtask() {
      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: 1,
        timesheets,
        timeblocks,
      };

      return this.$axios.put_auth(`v1/subtasks/${tempSubtask.id}`, tempSubtask);
    },
  },
};
</script>

<style lang="scss" scoped>
.card-content {
  margin-top: 20px;
  padding: 20px;
}

.card-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.finish-icon {
  cursor: pointer;

  &.disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  &.finished {
    background: #06dece;
  }
}
</style>