jandl-taskmanager-app/app/src/plugins/tm@modal/task/z-unable-to-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>Sub Task má nedokončené úlohy</h1>

        <div class="d-flex align-center">
          <a-reset-size-button @reset="resetModalSize" />
          <a-close-button @close="closeModal()" />
        </div>
      </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
            class="finish-icon circle-border cursor-pointer ml-2"
            :class="{
              disabled: loadingTimeblocks[timeblock.id] || loadingCloseAll,
              finished: timeblock.is_finished,
            }"
            icon="mdi-check"
            size="medium"
            @click.stop="handleFinishTimeblock(timeblock)"
          />
        </div>
      </div>

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

  props: {
    mode: {
      type: String,
      default: 'edit', // edit or delete
    },
  },
  emits: ['close', 'on-subtask-edited'],

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

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

    async complete() {
      /* eslint-disable */ console.log(
        ...oo_oo(`2694900664_86_6_86_29_4`, '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')
          /* eslint-disable */ console.log(
            ...oo_oo(
              `2694900664_119_10_119_63_4`,
              '[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>