wip(task-timeline): stage changes

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

@@ -88,85 +88,33 @@
             />
           </div>
 
-          <!-- Employee Assignment -->
-          <A-task-employees
-            v-model="subtask"
-            :is-edit-mode="!!subtask.id"
-            :validation-errors="employeeValidations"
+          <!-- Employee Assignment with Timeblocks -->
+          <!-- Edit Mode: Single Employee -->
+          <A-employee
+            v-if="subtask.id"
+            v-model:employee-data="editModeEmployee"
+            :timeblocks="getEmployeeTimeblocks(subtask.employee_id)"
             :custom-filter="customFilter"
-            @remove-employee="handleRemoveEmployee"
-            @clear-validation="clearEmployeeValidation"
+            @update:timeblocks="
+              updateEmployeeTimeblocks($event, subtask.employee_id)
+            "
+            @clear-employee="handleRemoveEmployee"
+            @add-timeblock="addTimeblock(subtask.employee_id)"
           />
 
-          <!-- Timeblocks per Employee -->
-          <div class="employees-timeblocks w-100">
-            <template v-if="subtask.id">
-              <!-- Edit Mode: Single Employee -->
-              <div
-                v-if="subtask.employee_id"
-                class="employee-timeblocks-section"
-              >
-                <div class="employee-header">
-                  <h3>{{ getEmployeeFullName(subtask.employee_id) }}</h3>
-                </div>
-                <A-task-employee-timeline
-                  v-for="(timeblock, index) in getEmployeeTimeblocks(
-                    subtask.employee_id,
-                  )"
-                  :key="`timeblock-${index}`"
-                  :timeblock="timeblock"
-                  :employee="getEmployeeById(subtask.employee_id)"
-                  :deletable="
-                    getEmployeeTimeblocks(subtask.employee_id).length > 1
-                  "
-                  :index="index"
-                  @update-timeblock="
-                    (val) => updateTimeblock(val, index, subtask.employee_id)
-                  "
-                  @remove-timeblock="
-                    removeTimeblock(index, subtask.employee_id)
-                  "
-                />
-                <div class="end-button w-100">
-                  <button @click="addTimeblock(subtask.employee_id)">
-                    Pridať časový blok
-                  </button>
-                </div>
-              </div>
-            </template>
-
-            <template v-else>
-              <!-- Create Mode: Multiple Employees -->
-              <div
-                v-for="employee in getValidEmployees()"
-                :key="`employee-${employee.id}`"
-                class="employee-timeblocks-section"
-              >
-                <div class="employee-header">
-                  <h3>{{ getEmployeeFullName(employee.id) }}</h3>
-                </div>
-                <A-task-employee-timeline
-                  v-for="(timeblock, index) in getEmployeeTimeblocks(
-                    employee.id,
-                  )"
-                  :key="`timeblock-${employee.id}-${index}`"
-                  :timeblock="timeblock"
-                  :employee="getEmployeeById(employee.id)"
-                  :deletable="getEmployeeTimeblocks(employee.id).length > 1"
-                  :index="index"
-                  @update-timeblock="
-                    (val) => updateTimeblock(val, index, employee.id)
-                  "
-                  @remove-timeblock="removeTimeblock(index, employee.id)"
-                />
-                <div class="end-button w-100">
-                  <button @click="addTimeblock(employee.id)">
-                    Pridať časový blok
-                  </button>
-                </div>
-              </div>
-            </template>
-          </div>
+          <!-- Create Mode: Multiple Employees -->
+          <template v-else>
+            <A-employee
+              v-for="(employee, index) in getValidEmployees()"
+              :key="`employee-${employee.id || index}`"
+              v-model:employee-data="subtask.employees[index]"
+              :timeblocks="getEmployeeTimeblocks(employee.id)"
+              :custom-filter="customFilter"
+              @update:timeblocks="updateEmployeeTimeblocks($event, employee.id)"
+              @clear-employee="() => removeEmployeeAtIndex(index)"
+              @add-timeblock="addTimeblock(employee.id)"
+            />
+          </template>
 
           <div class="w-100 modal-input quill-editor-wrapper">
             <QuillEditor
@@ -317,8 +265,7 @@ import '@vueup/vue-quill/dist/vue-quill.snow.css';
 import AutocompleteMixin from '@/plugins/tm@_mixins/autocomplete.mixin';
 
 import ZTaskReadonlyInfo from './_components/z-task-readonly-info.vue';
-import ATaskEmployees from './_components/a-task-employees.vue';
-import ATaskEmployeeTimeline from './_components/a-task-employee-timeline.vue';
+import AEmployee from './_components/employees/a-employee.vue';
 import { mapGetters } from 'vuex';
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
 import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
@@ -328,8 +275,7 @@ import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
 export default {
   components: {
     ZTaskReadonlyInfo,
-    ATaskEmployees,
-    ATaskEmployeeTimeline,
+    AEmployee,
     ZFilesUpload,
     ZDatepicker,
     // ATaskTimeblocks,
@@ -367,6 +313,20 @@ export default {
         _fullName: `${mastertask.name} [${mastertask.project_code}]`,
       }));
     },
+    editModeEmployee: {
+      get() {
+        return {
+          id: this.subtask?.employee_id || null,
+          duration: this.subtask?.duration || null,
+        };
+      },
+      set(value) {
+        if (this.subtask) {
+          this.subtask.employee_id = value.id;
+          this.subtask.duration = value.duration;
+        }
+      },
+    },
   },
 
   validations() {
@@ -557,6 +517,19 @@ export default {
       return this.timeblocks.filter((tb) => tb.employee_id === employeeId);
     },
 
+    updateEmployeeTimeblocks(updatedTimeblocks, employeeId) {
+      // Remove old timeblocks for this employee
+      const otherTimeblocks = this.timeblocks.filter(
+        (tb) => tb.employee_id !== employeeId,
+      );
+      // Add updated timeblocks with employee_id
+      const timeblocksWithEmployeeId = updatedTimeblocks.map((tb) => ({
+        ...tb,
+        employee_id: employeeId,
+      }));
+      this.timeblocks = [...otherTimeblocks, ...timeblocksWithEmployeeId];
+    },
+
     // Clear employee validation
     clearEmployeeValidation(index) {
       if (index !== undefined && this.employeeValidations[index]) {
@@ -608,14 +581,37 @@ export default {
     },
 
     // Handle remove employee - also removes their timeblocks
-    handleRemoveEmployee(employeeId) {
-      if (employeeId) {
+    handleRemoveEmployee() {
+      if (this.subtask.employee_id) {
         // Remove all timeblocks for this employee
         this.timeblocks = this.timeblocks.filter(
-          (tb) => tb.employee_id !== employeeId,
+          (tb) => tb.employee_id !== this.subtask.employee_id,
         );
       }
 
+      // Clear employee data in edit mode
+      this.subtask.employee_id = null;
+      this.subtask.duration = null;
+
+      if (this.wasFormValidationTriggered) {
+        setTimeout(async () => {
+          this.validateAllFields();
+        }, 100);
+      }
+    },
+
+    removeEmployeeAtIndex(index) {
+      const employee = this.subtask.employees[index];
+      if (employee?.id) {
+        // Remove all timeblocks for this employee
+        this.timeblocks = this.timeblocks.filter(
+          (tb) => tb.employee_id !== employee.id,
+        );
+      }
+
+      // Remove employee from array
+      this.subtask.employees.splice(index, 1);
+
       if (this.wasFormValidationTriggered) {
         setTimeout(async () => {
           this.validateAllFields();