jandl-taskmanager-app/app/src/plugins/tm@modal/task/z-task-add-time-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">
        <h1>Pridať odpracovaný čas</h1>

        <div class="d-flex align-start">
          <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">
        <v-text-field
          v-model="form.hours"
          variant="solo"
          bg-color="white"
          type="number"
          :hint="
            v$.form.hours.$errors
              ? errorUtils.parseErrors(v$.form.hours.$errors)
              : null
          "
          :class="{ error: v$.form.hours.$errors.length }"
          class="mb-2"
          label="Odpracovaný čas"
        />
      </v-card-actions>
      <v-btn class="button primary mt-5" @click="submit()">Potvrdiť</v-btn>
      <a-resize-handle
        :current-width="modalWidthPx"
        :current-height="modalHeightPx"
        @resize="handleModalResize"
        @resize-end="handleResizeEnd"
      />
    </v-card>
  </v-dialog>
</template>

<script>
import errorUtils from '@/plugins/lib@auth/_utils/error.utils';
import useVuelidate from '@vuelidate/core';
import { required, numeric, minValue } from '@vuelidate/validators';
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: ['close', 'on-subtask-edited'],

  data() {
    return {
      v$: useVuelidate(),
      errorUtils,
      visible: false,
      subtask: null,
      form: {
        hours: null,
      },
      modalName: 'z-task-add-time-modal',
      modalSize: 'medium',
    };
  },

  validations() {
    return {
      form: {
        hours: { required, numeric, minValue: minValue(0.1) },
      },
    };
  },

  methods: {
    async showModal({ subtask }) {
      this.subtask = subtask;
      this.visible = true;
      this.form.hours = null;
      this.$nextTick(() => this.v$.$reset());
    },

    async submit() {
      if (!(await this.v$.$validate())) return;

      if (this.subtask.deadline)
        this.subtask.deadline = tmUtils.formatDateTimeForBackend(
          this.subtask.deadline,
        );

      this.subtask.timesheets.push({
        id: null,
        employee_id: this.subtask.employee_id,
        time:
          typeof this.form.hours == 'string'
            ? parseFloat(this.form.hours)
            : this.form.hours,
      });

      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 payload = {
        ...this.subtask,
        timesheets,
        timeblocks,
      };

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

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

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