fix(z-task-modal): fixed unwanted clear of timeblocks in draft tasks on adding a new timeblock

app/src/plugins/tm@modal/task/_components/employees/a-employee.vue

@@ -12,7 +12,7 @@
     <div v-if="selectedEmployee" class="employee__timeblocks">
       <AEmployeeTimeblock
         v-for="(timeblock, index) in timeblocks"
-        :key="`timeblock-${index}`"
+        :key="timeblock._clientId || timeblock.id || `timeblock-${index}`"
         :ref="(el) => setTimeblockRef(el, index)"
         :model-value="timeblock"
         :employee="selectedEmployee"

app/src/plugins/tm@modal/task/_components/employees/types.ts

@@ -7,6 +7,7 @@ export interface EmployeeData {
 
 export interface TimeblockData {
   id?: number | null;
+  _clientId?: string; // Client-side unique identifier for Vue keying
   date: Date | string | null;
   starts_at_time: string | null;
   ends_at_time: string | null;

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

@@ -326,6 +326,7 @@ export default {
       employeeRefs: [],
       pendingRemoveEmployeeId: undefined,
       pendingRemoveEmployeeIndex: undefined,
+      timeblockClientIdCounter: 0, // Counter for generating unique client-side IDs
     };
   },
 
@@ -526,10 +527,12 @@ export default {
      * @returns {Object} Timeblock in internal format
      */
     _convertTimeblockToInternal(timeblock, employeeId) {
-      // If already in internal format, return as is
+      // If already in internal format, ensure it has a client ID
       if (timeblock.date) {
         return {
           ...timeblock,
+          _clientId:
+            timeblock._clientId || `client-${++this.timeblockClientIdCounter}`,
           employee_id: employeeId,
         };
       }
@@ -540,6 +543,8 @@ export default {
         const endMoment = moment(timeblock.end, 'YYYY-MM-DD HH:mm:ss');
         return {
           id: timeblock.id || null,
+          _clientId:
+            timeblock._clientId || `client-${++this.timeblockClientIdCounter}`,
           date: startMoment.toDate(),
           starts_at_time: startMoment.format('HH:mm'),
           ends_at_time: endMoment.format('HH:mm'),
@@ -676,6 +681,7 @@ export default {
 
     addTimeblock(employeeId, afterIndex = -1) {
       const newTimeblock = {
+        _clientId: `client-${++this.timeblockClientIdCounter}`, // Unique client-side ID
         date: new Date(), // Preset to current day
         starts_at_time: null,
         ends_at_time: null,
@@ -880,6 +886,9 @@ export default {
                   if (Array.isArray(parsedTimeblocks)) {
                     this.timeblocks = parsedTimeblocks.map((tb) => ({
                       ...tb,
+                      _clientId:
+                        tb._clientId ||
+                        `client-${++this.timeblockClientIdCounter}`,
                       date: tb.date ? new Date(tb.date) : null,
                     }));
                   } else {
@@ -952,6 +961,7 @@ export default {
                 ...(!isCurrentUser
                   ? [
                       {
+                        _clientId: `client-${++this.timeblockClientIdCounter}`,
                         date: new Date(subtask.deadline),
                         starts_at_time: subtask._deadline_time,
                         ends_at_time: null,
@@ -960,6 +970,7 @@ export default {
                     ]
                   : []),
                 {
+                  _clientId: `client-${++this.timeblockClientIdCounter}`,
                   date: new Date(subtask.deadline),
                   starts_at_time: subtask._deadline_time,
                   ends_at_time: null,