fix(z-task-modal): fixed employee handling and validation logic, as well as saving subtask to local storage

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

@@ -121,6 +121,7 @@
                 class="dp__icon dp__clear_icon dp__input_icons"
                 data-test="clear-icon"
                 @click.prevent="
+                  handleOnRemoveEmployee();
                   subtask.employee_id = null;
                   subtask.employee = null;
                 "
@@ -202,7 +203,10 @@
                 viewBox="0 0 32 32"
                 class="dp__icon dp__clear_icon dp__input_icons"
                 data-test="clear-icon"
-                @click.prevent="employee.id = null"
+                @click.prevent="
+                  handleOnRemoveEmployee();
+                  employee.id = null;
+                "
               >
                 <path
                   d="M23.057 7.057l-16 16c-0.52 0.52-0.52 1.365 0 1.885s1.365 0.52 1.885 0l16-16c0.52-0.52 0.52-1.365 0-1.885s-1.365-0.52-1.885 0z"
@@ -454,6 +458,7 @@ export default {
           ends_at_time: null,
         },
       ],
+      wasFormValidationTriggered: false,
     };
   },
 
@@ -622,7 +627,7 @@ export default {
       this.$router.replace({ name: this.$route.name });
     },
 
-    async save() {
+    async validateAllFields() {
       const employeesValid = await this._validateEmployees();
       const timeblocksValid = this.subtask?.id
         ? true
@@ -630,6 +635,19 @@ export default {
 
       if (!(await this.v$.$validate())) return;
       if (!employeesValid || !timeblocksValid) return;
+    },
+
+    async handleOnRemoveEmployee() {
+      if (this.wasFormValidationTriggered) {
+        setTimeout(async () => {
+          this.validateAllFields();
+        }, 100);
+      }
+    },
+
+    async save() {
+      this.wasFormValidationTriggered = true;
+      if (!(await this.validateAllFields())) return;
 
       this.subtask.description = this.$refs['description'].getHTML();
       this._mergeDeadlineTimeDate();
@@ -749,17 +767,19 @@ export default {
           if (!this.subtask.duration)
             this.employeeValidations[0].duration = true;
         } else {
+          // For new subtasks, only validate non-empty employee entries
           this.subtask.employees.forEach((employee, index) => {
-            if (index == this.subtask.employees.length - 1 && index > 0) return; // Skip the last which is allways empty
+            // Skip validation if both id and duration are empty
+            if (!employee.id && !employee.duration) return;
 
-            if (employee.id && employee.duration) return;
+            // Only validate if either id or duration is filled
+            if (employee.id || employee.duration) {
+              this.employeeValidations[index] = {};
 
-            this.employeeValidations[index] = {};
+              if (!employee.id) this.employeeValidations[index].employee = true;
-
+              if (!employee.duration)
-            if (!employee.id) this.employeeValidations[index].employee = true;
+                this.employeeValidations[index].duration = true;
-
+            }
-            if (!employee.duration)
-              this.employeeValidations[index].duration = true;
           });
         }
 
@@ -835,7 +855,16 @@ export default {
     subtask: {
       handler(val) {
         if (this.editMode && !this.subtask?.id) {
-          localStorage.setItem('subtaskData', JSON.stringify(val));
+          const employees = val.employees.filter(
+            (employee) => employee?.id || employee?.duration,
+          ) || [{}];
+
+          const subtaskData = {
+            ...val,
+            employees: employees && employees.length > 0 ? employees : [{}],
+          };
+          console.log('subtaskData', subtaskData);
+          localStorage.setItem('subtaskData', JSON.stringify(subtaskData));
         }
       },
       deep: true,