feat(012): enhance timeblock management with deleted tracking and improved rendering

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

@@ -100,6 +100,8 @@
             v-if="subtask.id"
             v-model:employee-data="editModeEmployee"
             :timeblocks="getEmployeeTimeblocks(subtask.employee_id)"
+            :all-timeblocks="timeblocks"
+            :deleted-timeblock-ids="deletedTimeblockIds"
             :custom-filter="customFilter"
             @update:timeblocks="
               updateEmployeeTimeblocks($event, subtask.employee_id)
@@ -118,6 +120,8 @@
               :ref="(el) => setEmployeeRef(el, index)"
               v-model:employee-data="subtask.employees[index]"
               :timeblocks="getEmployeeTimeblocks(employee.id)"
+              :all-timeblocks="timeblocks"
+              :deleted-timeblock-ids="deletedTimeblockIds"
               :custom-filter="customFilter"
               :required="index === 0"
               @update:timeblocks="updateEmployeeTimeblocks($event, employee.id)"
@@ -315,6 +319,7 @@ export default {
       showDatePicker: false,
       selectedNewDate: [],
       timeblocks: [],
+      deletedTimeblockIds: [], // Track IDs of saved timeblocks that have been deleted
       wasFormValidationTriggered: false,
       modalName: 'z-task-modal',
       employeeRefs: [],
@@ -537,16 +542,20 @@ export default {
     },
 
     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];
+      // Track deleted timeblocks (saved timeblocks that are no longer in the updated list)
+      const updatedIds = new Set(updatedTimeblocks.filter(tb => tb.id).map(tb => tb.id));
+      const deletedIds = this.timeblocks
+        .filter(tb => tb.employee_id === employeeId && tb.id && !updatedIds.has(tb.id))
+        .map(tb => tb.id)
+        .filter(id => !this.deletedTimeblockIds.includes(id));
+
+      this.deletedTimeblockIds.push(...deletedIds);
+
+      // Replace timeblocks for this employee
+      const otherEmployeeTimeblocks = this.timeblocks.filter(tb => tb.employee_id !== employeeId);
+      const updatedWithEmployeeId = updatedTimeblocks.map(tb => ({ ...tb, employee_id: employeeId }));
+
+      this.timeblocks = [...otherEmployeeTimeblocks, ...updatedWithEmployeeId];
     },
 
     updateTimeblock(val, index, employeeId) {
@@ -655,6 +664,7 @@ export default {
 
       this.visible = true;
       this.timeblocks = [];
+      this.deletedTimeblockIds = []; // Reset deleted timeblock IDs
       this.employeeRefs = [];
       this.$nextTick(() => {
         this.v$.$reset();