refactor: save One by one of Employee

src/pages/03_customer-management/MainPage.vue

@@ -375,6 +375,8 @@ const formDataEmployeeOwner = ref<{
   subDistrictId: string;
   zipCode: string;
 }>();
+
+const currentEmployeeId = ref<string>('');
 const formDataEmployee = ref<EmployeeCreate>({
   code: '',
   image: null,
@@ -471,6 +473,7 @@ const statsCustomerType = ref<CustomerStats>({
   CORP: 0,
   PERS: 0,
 });
+const hideTab = ref<boolean>(true);
 const hideBranch = ref<boolean>(true);
 const currentCustomerId = ref<string>('');
 const dialogInputCustomerBranchForm = ref<boolean>(false);
@@ -754,6 +757,8 @@ function clearForm() {
 }
 
 function clearFormEmployee() {
+  hideTab.value = true;
+
   inputFile.value = '';
   profileUrl.value = null;
   profileSubmit.value = false;
@@ -887,36 +892,114 @@ function deleteBranchId(id: string) {
   });
 }
 
-async function onSubmit() {
+// async function onSubmit() {
-  if (selectorLabel.value === 'EMPLOYER') {
+//   if (selectorLabel.value === 'EMPLOYER') {
-    await create({
+//     await create({
-      ...formData.value,
+//       ...formData.value,
-      customerType: customerType.value === 'CORP' ? 'CORP' : 'PERS',
+//       customerType: customerType.value === 'CORP' ? 'CORP' : 'PERS',
-      image: profileSubmit.value ? profileFile.value ?? null : null,
+//       image: profileSubmit.value ? profileFile.value ?? null : null,
-    });
+//     });
-    clearForm();
+//     clearForm();
-    const resultList = await fetchList({ includeBranch: true });
+//     const resultList = await fetchList({ includeBranch: true });
 
-    if (resultList) listCustomer.value = resultList.result;
+//     if (resultList) listCustomer.value = resultList.result;
-  }
+//   }
 
-  if (selectorLabel.value === 'EMPLOYEE') {
+//   if (selectorLabel.value === 'EMPLOYEE') {
-    const isOk = await checkEmployeeForm();
+//     await employeeStore.create({
-    if (isOk) {
+//       ...formDataEmployee.value,
-      await employeeStore.create({
+//       image: profileSubmit.value ? profileFile.value ?? null : null,
-        ...formDataEmployee.value,
+//     });
-        image: profileSubmit.value ? profileFile.value ?? null : null,
+//     const resultList = await employeeStore.fetchList();
-      });
+//     if (resultList) listEmployee.value = resultList.result;
-      const resultList = await employeeStore.fetchList();
-      if (resultList) listEmployee.value = resultList.result;
 
-      const resultStatsEmployee = await employeeStore.getStatsEmployee();
+//     const resultStatsEmployee = await employeeStore.getStatsEmployee();
-      if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
+//     if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
 
-      clearFormEmployee();
+//     clearFormEmployee();
-    }
+//   }
-  }
+//   flowStore.rotate();
-  flowStore.rotate();
+// }
+
+async function onSubmitEmployee(
+  type: 'personalInfo' | 'healthCheck' | 'workHistory' | 'other',
+  indexTab: number = 0,
+) {
+  dialog({
+    color: 'info',
+    icon: 'mdi-alert',
+    title: t('saveConfirmTitle'),
+    actionText: t('ok'),
+    persistent: true,
+    message: t('saveConfirmMessage'),
+    action: async () => {
+      if (type === 'personalInfo') {
+        const res = await employeeStore.create({
+          ...formDataEmployee.value,
+          employeeWork: [],
+          employeeCheckup: [],
+          employeeOtherInfo: {},
+          image: profileSubmit.value ? profileFile.value ?? null : null,
+        });
+
+        if (res) {
+          currentEmployeeId.value = res.id;
+          hideTab.value = false;
+        }
+
+        const resultList = await employeeStore.fetchList();
+        if (resultList) {
+          listEmployee.value = resultList.result;
+        }
+        const resultStatsEmployee = await employeeStore.getStatsEmployee();
+        if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
+      }
+
+      if (
+        formDataEmployee.value.employeeCheckup?.[indexTab] &&
+        type === 'healthCheck'
+      ) {
+        const res = await employeeStore.createEmployeeCheckup(
+          currentEmployeeId.value,
+          {
+            ...formDataEmployee.value.employeeCheckup[indexTab],
+          },
+        );
+
+        if (res) {
+          formDataEmployee.value.employeeCheckup[indexTab].statusSave = true;
+        }
+      }
+
+      if (
+        formDataEmployee.value.employeeWork?.[indexTab] &&
+        type === 'workHistory'
+      ) {
+        const res = await employeeStore.createEmployeeWork(
+          currentEmployeeId.value,
+          {
+            ...formDataEmployee.value.employeeWork[indexTab],
+          },
+        );
+
+        if (res) {
+          formDataEmployee.value.employeeWork[indexTab].statusSave = true;
+        }
+      }
+
+      if (formDataEmployee.value.employeeOtherInfo && type === 'other') {
+        const res = await employeeStore.createEmployeeOtherInfo(
+          currentEmployeeId.value,
+          {
+            ...formDataEmployee.value.employeeOtherInfo,
+          },
+        );
+      }
+
+      flowStore.rotate();
+    },
+    cancel: () => {},
+  });
 }
 
 async function onSubmitBasicInformation() {
@@ -947,35 +1030,10 @@ async function onSubmitBasicInformation() {
     });
   }
 
-  // if (selectorLabel.value === 'EMPLOYEE') {
-  //   const isOk = await checkEmployeeForm();
-  //   if (isOk) {
-  //     await employeeStore.create({
-  //       ...formDataEmployee.value,
-  //       image: profileSubmit.value ? profileFile.value ?? null : null,
-  //     });
-  //     const resultList = await employeeStore.fetchList();
-  //     if (resultList) listEmployee.value = resultList.result;
-
-  //     const resultStatsEmployee = await employeeStore.getStatsEmployee();
-  //     if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
-
-  //     clearFormEmployee();
-  //   }
-  // }
   flowStore.rotate();
 }
 
 async function onSubmitCustomerBranch(opt: { isClearForm: boolean }) {
-  // await createBranch();
-
-  // for (const item of formData.value.customerBranch || []) {
-  //   await createBranch({
-  //     ...item,
-  //     customerId: currentCustomerId.value,
-  //   });
-  // }
-
   dialog({
     color: 'info',
     icon: 'mdi-alert',
@@ -1346,6 +1404,9 @@ function cloneData() {
 
 async function assignFormDataEmployee(id: string) {
   if (!listEmployee.value) return;
+
+  currentEmployeeId.value = id;
+
   const foundEmployee = listEmployee.value.find((x: Employee) => x.id === id);
 
   if (foundEmployee) {
@@ -3319,7 +3380,14 @@ watch(isMainPage, () => {
       formDataEmployeeTab === 'healthCheck' ||
       formDataEmployeeTab === 'workHistory'
     "
-    :tabs-list="employeeTab"
+    :tabs-list="
+      employeeTab.filter((x) => {
+        if (hideTab) {
+          return x.name === 'personalInfo';
+        }
+        return true;
+      })
+    "
     v-model:current-tab="formDataEmployeeTab"
     v-model:same-with-employer="formDataEmployeeSameAddr"
     v-model:address="formDataEmployee.address"
@@ -3331,9 +3399,9 @@ watch(isMainPage, () => {
     :title="$t('customerEmployeeAdd')"
     :submit="
       () => {
-        isEmployeeEdit
+        // isEmployeeEdit
-          ? currentEmployee && onSubmitEdit(currentEmployee.id)
+        //   ? currentEmployee && onSubmitEdit(currentEmployee.id)
-          : onSubmit();
+        //   : onSubmit();
       }
     "
     :close="
@@ -3403,6 +3471,11 @@ watch(isMainPage, () => {
         v-model:insurance-company-option="
           optionStore.globalOption.insurancePlace
         "
+        @save="
+          (index) => {
+            onSubmitEmployee('healthCheck', index);
+          }
+        "
       />
       <FormEmployeeWorkHistory
         prefix-id="form-dialog"
@@ -3414,6 +3487,11 @@ watch(isMainPage, () => {
         v-model:job-type-option="optionStore.globalOption.businessType"
         v-model:workplace-option="optionStore.globalOption.area"
         show-btn-save
+        @save="
+          (index) => {
+            onSubmitEmployee('workHistory', index);
+          }
+        "
       />
       <FormEmployeeOther
         prefix-id="form-dialog"
@@ -3424,6 +3502,7 @@ watch(isMainPage, () => {
         outlined
         v-model:employee-other="formDataEmployee.employeeOtherInfo"
         show-btn-save
+        @save="() => onSubmitEmployee('other')"
       />
     </template>
     <template #by-type>
@@ -3464,6 +3543,11 @@ watch(isMainPage, () => {
         v-model:entry-date="formDataEmployee.entryDate"
         v-model:visa-type-option="optionStore.globalOption.nationality"
         show-btn-save
+        @save="
+          () => {
+            onSubmitEmployee('personalInfo');
+          }
+        "
       />
     </template>
   </FormDialog>