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

app/dist/js/index.js

@@ -543,7 +543,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var cor
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var core_js_modules_es_json_stringify_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.json.stringify.js */ \"./node_modules/core-js/modules/es.json.stringify.js\");\n/* harmony import */ var core_js_modules_es_json_stringify_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_json_stringify_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var core_js_modules_esnext_iterator_constructor_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/esnext.iterator.constructor.js */ \"./node_modules/core-js/modules/esnext.iterator.constructor.js\");\n/* harmony import */ var core_js_modules_esnext_iterator_constructor_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_esnext_iterator_constructor_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var core_js_modules_esnext_iterator_filter_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/esnext.iterator.filter.js */ \"./node_modules/core-js/modules/esnext.iterator.filter.js\");\n/* harmony import */ var core_js_modules_esnext_iterator_filter_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_esnext_iterator_filter_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var core_js_modules_esnext_iterator_find_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/esnext.iterator.find.js */ \"./node_modules/core-js/modules/esnext.iterator.find.js\");\n/* harmony import */ var core_js_modules_esnext_iterator_find_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_esnext_iterator_find_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var core_js_modules_esnext_iterator_for_each_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/esnext.iterator.for-each.js */ \"./node_modules/core-js/modules/esnext.iterator.for-each.js\");\n/* harmony import */ var core_js_modules_esnext_iterator_for_each_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_esnext_iterator_for_each_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var core_js_modules_esnext_iterator_map_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/esnext.iterator.map.js */ \"./node_modules/core-js/modules/esnext.iterator.map.js\");\n/* harmony import */ var core_js_modules_esnext_iterator_map_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_esnext_iterator_map_js__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var core_js_modules_esnext_iterator_some_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! core-js/modules/esnext.iterator.some.js */ \"./node_modules/core-js/modules/esnext.iterator.some.js\");\n/* harmony import */ var core_js_modules_esnext_iterator_some_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_esnext_iterator_some_js__WEBPACK_IMPORTED_MODULE_7__);\n/* harmony import */ var _plugins_tm_components_z_datepicker_vue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/plugins/tm@_components/z-datepicker.vue */ \"./src/plugins/tm@_components/z-datepicker.vue\");\n/* harmony import */ var _plugins_tm_components_z_files_upload_vue__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @/plugins/tm@_components/z-files-upload.vue */ \"./src/plugins/tm@_components/z-files-upload.vue\");\n/* harmony import */ var _vuelidate_core__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @vuelidate/core */ \"./node_modules/@vuelidate/core/dist/index.esm.js\");\n/* harmony import */ var _vuelidate_validators__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @vuelidate/validators */ \"./node_modules/@vuelidate/validators/dist/index.esm.js\");\n/* harmony import */ var _plugins_lib_auth_utils_error_utils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @/plugins/lib@auth/_utils/error.utils */ \"./src/plugins/lib@auth/_utils/error.utils.ts\");\n/* harmony import */ var _vueup_vue_quill__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @vueup/vue-quill */ \"./node_modules/@vueup/vue-quill/dist/vue-quill.esm-bundler.js\");\n/* harmony import */ var _master_task_mixins_selects_mixin__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../master-task/_mixins/selects.mixin */ \"./src/plugins/tm@modal/master-task/_mixins/selects.mixin.ts\");\n/* harmony import */ var _Line truncated
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var core_js_modules_es_json_stringify_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.json.stringify.js */ \"./node_modules/core-js/modules/es.json.stringify.js\");\n/* harmony import */ var core_js_modules_es_json_stringify_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_json_stringify_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var core_js_modules_esnext_iterator_constructor_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/esnext.iterator.constructor.js */ \"./node_modules/core-js/modules/esnext.iterator.constructor.js\");\n/* harmony import */ var core_js_modules_esnext_iterator_constructor_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_esnext_iterator_constructor_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var core_js_modules_esnext_iterator_filter_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/esnext.iterator.filter.js */ \"./node_modules/core-js/modules/esnext.iterator.filter.js\");\n/* harmony import */ var core_js_modules_esnext_iterator_filter_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_esnext_iterator_filter_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var core_js_modules_esnext_iterator_find_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/esnext.iterator.find.js */ \"./node_modules/core-js/modules/esnext.iterator.find.js\");\n/* harmony import */ var core_js_modules_esnext_iterator_find_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_esnext_iterator_find_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var core_js_modules_esnext_iterator_for_each_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/esnext.iterator.for-each.js */ \"./node_modules/core-js/modules/esnext.iterator.for-each.js\");\n/* harmony import */ var core_js_modules_esnext_iterator_for_each_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_esnext_iterator_for_each_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var core_js_modules_esnext_iterator_map_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/esnext.iterator.map.js */ \"./node_modules/core-js/modules/esnext.iterator.map.js\");\n/* harmony import */ var core_js_modules_esnext_iterator_map_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_esnext_iterator_map_js__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var core_js_modules_esnext_iterator_some_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! core-js/modules/esnext.iterator.some.js */ \"./node_modules/core-js/modules/esnext.iterator.some.js\");\n/* harmony import */ var core_js_modules_esnext_iterator_some_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_esnext_iterator_some_js__WEBPACK_IMPORTED_MODULE_7__);\n/* harmony import */ var _plugins_tm_components_z_datepicker_vue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/plugins/tm@_components/z-datepicker.vue */ \"./src/plugins/tm@_components/z-datepicker.vue\");\n/* harmony import */ var _plugins_tm_components_z_files_upload_vue__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @/plugins/tm@_components/z-files-upload.vue */ \"./src/plugins/tm@_components/z-files-upload.vue\");\n/* harmony import */ var _vuelidate_core__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @vuelidate/core */ \"./node_modules/@vuelidate/core/dist/index.esm.js\");\n/* harmony import */ var _vuelidate_validators__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @vuelidate/validators */ \"./node_modules/@vuelidate/validators/dist/index.esm.js\");\n/* harmony import */ var _plugins_lib_auth_utils_error_utils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @/plugins/lib@auth/_utils/error.utils */ \"./src/plugins/lib@auth/_utils/error.utils.ts\");\n/* harmony import */ var _vueup_vue_quill__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @vueup/vue-quill */ \"./node_modules/@vueup/vue-quill/dist/vue-quill.esm-bundler.js\");\n/* harmony import */ var _master_task_mixins_selects_mixin__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../master-task/_mixins/selects.mixin */ \"./src/plugins/tm@modal/master-task/_mixins/selects.mixin.ts\");\n/* harmony import */ var _Line truncated
 
 /***/ }),
 
@@ -1362,7 +1362,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.runtime.esm-bundler.js\");\n\nconst _hoisted_1 = {\n  key: 0,\n  class: \"employee__timeblocks\"\n};\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", {\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)([\"employee\", {\n      'employee--has-background': $props.hasBackground\n    }])\n  }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup[\"AEmployeeSelect\"], {\n    ref: \"employeeSelectRef\",\n    modelValue: $setup.employeeDataLocal,\n    \"onUpdate:modelValue\": _cache[0] || (_cache[0] = $event => $setup.employeeDataLocal = $event),\n    \"custom-filter\": $props.customFilter,\n    required: $props.required,\n    onClearEmployee: $setup.handleClearEmployee\n  }, null, 8 /* PROPS */, [\"modelValue\", \"custom-filter\", \"required\"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\" Timeblocks Timeline \"), $setup.selectedEmployee ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", _hoisted_1, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.timeblocks, (timeblock, index) => {\n    return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup[\"AEmployeeTimeblock\"], {\n      key: `timeblock-${index}`,\n      ref_for: true,\n      ref: el => $setup.setTimeblockRef(el, index),\n      \"model-value\": timeblock,\n      employee: $setup.selectedEmployee,\n      \"all-employee-timeblocks\": $props.timeblocks,\n      \"all-timeblocks\": $setup.allTimeblocksForCurrentEmployee,\n      \"deleted-timeblock-ids\": $props.deletedTimeblockIds,\n      \"current-index\": index,\n      deletable: $props.timeblocks.length > 1,\n      index: index,\n      \"onUpdate:modelValue\": val => $setup.handleUpdateTimeblock(index, val),\n      onAddTimeblock: $event => $setup.handleAddTimeblock(index),\n      onRemoveTimeblock: $event => $setup.handleRemoveTimeblock(index)\n    }, null, 8 /* PROPS */, [\"model-value\", \"employee\", \"all-employee-timeblocks\", \"all-timeblocks\", \"deleted-timeblock-ids\", \"current-index\", \"deletable\", \"index\", \"onUpdate:modelValue\", \"onAddTimeblock\", \"onRemoveTimeblock\"]);\n  }), 128 /* KEYED_FRAGMENT */))])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)], 2 /* CLASS */);\n}\n\n//# sourceURL=webpack://jandl/./src/plugins/tm@modal/task/_components/employees/a-employee.vue?./node_modules/webpack-plugin-vuetify/dist/scriptLoader.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use%5B1%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B5%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.runtime.esm-bundler.js\");\n\nconst _hoisted_1 = {\n  key: 0,\n  class: \"employee__timeblocks\"\n};\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", {\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)([\"employee\", {\n      'employee--has-background': $props.hasBackground\n    }])\n  }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup[\"AEmployeeSelect\"], {\n    ref: \"employeeSelectRef\",\n    modelValue: $setup.employeeDataLocal,\n    \"onUpdate:modelValue\": _cache[0] || (_cache[0] = $event => $setup.employeeDataLocal = $event),\n    \"custom-filter\": $props.customFilter,\n    required: $props.required,\n    onClearEmployee: $setup.handleClearEmployee\n  }, null, 8 /* PROPS */, [\"modelValue\", \"custom-filter\", \"required\"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\" Timeblocks Timeline \"), $setup.selectedEmployee ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", _hoisted_1, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.timeblocks, (timeblock, index) => {\n    return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup[\"AEmployeeTimeblock\"], {\n      key: timeblock._clientId || timeblock.id || `timeblock-${index}`,\n      ref_for: true,\n      ref: el => $setup.setTimeblockRef(el, index),\n      \"model-value\": timeblock,\n      employee: $setup.selectedEmployee,\n      \"all-employee-timeblocks\": $props.timeblocks,\n      \"all-timeblocks\": $setup.allTimeblocksForCurrentEmployee,\n      \"deleted-timeblock-ids\": $props.deletedTimeblockIds,\n      \"current-index\": index,\n      deletable: $props.timeblocks.length > 1,\n      index: index,\n      \"onUpdate:modelValue\": val => $setup.handleUpdateTimeblock(index, val),\n      onAddTimeblock: $event => $setup.handleAddTimeblock(index),\n      onRemoveTimeblock: $event => $setup.handleRemoveTimeblock(index)\n    }, null, 8 /* PROPS */, [\"model-value\", \"employee\", \"all-employee-timeblocks\", \"all-timeblocks\", \"deleted-timeblock-ids\", \"current-index\", \"deletable\", \"index\", \"onUpdate:modelValue\", \"onAddTimeblock\", \"onRemoveTimeblock\"]);\n  }), 128 /* KEYED_FRAGMENT */))])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)], 2 /* CLASS */);\n}\n\n//# sourceURL=webpack://jandl/./src/plugins/tm@modal/task/_components/employees/a-employee.vue?./node_modules/webpack-plugin-vuetify/dist/scriptLoader.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use%5B1%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B5%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D\n}");
 
 /***/ }),
 

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,