refactor: save One by one

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

@@ -471,6 +471,7 @@ const statsCustomerType = ref<CustomerStats>({
   CORP: 0,
   PERS: 0,
 });
+const hideBranch = ref<boolean>(true);
 const currentCustomerId = ref<string>('');
 const dialogInputCustomerBranchForm = ref<boolean>(false);
 const currentCustomer = ref<Customer>();
@@ -580,6 +581,7 @@ const fieldCustomer = ref([
   'customerNaturalPerson',
 ]);
 
+const countStartsOne = ref<number>(1);
 const dialogCustomerType = ref<boolean>(false);
 const dialogInputForm = ref<boolean>(false);
 const dialogEmployee = ref<boolean>(false);
@@ -701,7 +703,10 @@ function onCloseBranch() {
 }
 
 function clearForm() {
+  inputFile.value = '';
   profileFile.value = undefined;
+  profileUrl.value = null;
+  hideBranch.value = true;
 
   dialogInputForm.value = false;
   formData.value = {
@@ -748,6 +753,7 @@ function clearForm() {
 }
 
 function clearFormEmployee() {
+  inputFile.value = '';
   profileUrl.value = null;
   profileSubmit.value = false;
   dialogEmployee.value = false;
@@ -912,17 +918,88 @@ async function onSubmit() {
   flowStore.rotate();
 }
 
-async function onSubmitCustomerBranch() {
+async function onSubmitBasicInformation() {
-  dialogInputCustomerBranchForm.value = false;
+  if (selectorLabel.value === 'EMPLOYER') {
+    dialog({
+      color: 'info',
+      icon: 'mdi-alert',
+      title: t('saveConfirmTitle'),
+      actionText: t('ok'),
+      persistent: true,
+      message: t('saveConfirmMessage'),
+      action: async () => {
+        const res = await create({
+          ...formData.value,
+          customerBranch: [],
+          customerType: customerType.value === 'CORP' ? 'CORP' : 'PERS',
+          image: profileSubmit.value ? profileFile.value ?? null : null,
+        });
+
+        if (res) {
+          currentCustomerId.value = res.id;
+          hideBranch.value = false;
+        }
+        const resultList = await fetchList({ includeBranch: true });
+        if (resultList) listCustomer.value = resultList.result;
+      },
+      cancel: () => {},
+    });
+  }
+
+  // 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 || []) {
+  // for (const item of formData.value.customerBranch || []) {
+  //   await createBranch({
+  //     ...item,
+  //     customerId: currentCustomerId.value,
+  //   });
+  // }
+
+  dialog({
+    color: 'info',
+    icon: 'mdi-alert',
+    title: t('saveConfirmTitle'),
+    actionText: t('ok'),
+    persistent: true,
+    message: t('saveConfirmMessage'),
+    action: async () => {
+      if (
+        formData.value.customerBranch !== undefined &&
+        formData.value.customerBranch[indexTab.value] !== undefined
+      ) {
         await createBranch({
-      ...item,
+          ...formData.value.customerBranch[indexTab.value],
           customerId: currentCustomerId.value,
         });
       }
+    },
+    cancel: () => {},
+  });
+
+  if (opt.isClearForm) {
+    dialogInputCustomerBranchForm.value = false;
     clearForm();
+  }
   const result = await fetchListById(currentCustomerId.value);
   if (result) {
     currentCustomerName.value = result.customerName;
@@ -1178,6 +1255,7 @@ async function assignFormData(
   if (!data) return;
 
   indexTab.value = tabNo;
+  countStartsOne.value = 1;
 
   prevCustomer.value = {
     registeredBranchId: data.registeredBranchId,
@@ -1225,8 +1303,39 @@ async function assignFormData(
   });
 
   cloneData();
-}
 
+  if (formData.value.customerBranch?.length === 0) {
+    formData.value.customerBranch?.push({
+      code: '',
+      branchNo: 1,
+      address: '',
+      addressEN: '',
+      provinceId: '',
+      districtId: '',
+      subDistrictId: '',
+      zipCode: '',
+      email: '',
+      telephoneNo: '',
+      name: '',
+      status: 'CREATED',
+      taxNo: '',
+      nameEN: '',
+      legalPersonNo: '',
+      registerName: '',
+      registerDate: new Date(),
+      authorizedCapital: '',
+      employmentOffice: '',
+      bussinessType: '',
+      bussinessTypeEN: '',
+      jobPosition: '',
+      jobPositionEN: '',
+      jobDescription: '',
+      saleEmployee: '',
+      payDate: new Date(),
+      wageRate: 0,
+    });
+  }
+}
 function cloneData() {
   formData.value = {
     ...prevCustomer.value,
@@ -2972,7 +3081,12 @@ watch(isMainPage, () => {
     no-app-box
     width="60vw"
     height="50vh"
-    :close="() => (dialogCustomerType = false)"
+    :close="
+      () => {
+        clearForm();
+        dialogCustomerType = false;
+      }
+    "
   >
     <div class="row full-width items-center">
       <ItemCard
@@ -2995,15 +3109,29 @@ watch(isMainPage, () => {
     v-model:modal="dialogInputForm"
     :title="$t('customerEmployerAdd')"
     :customer-label="customerType"
-    :submit="
+    :hiddenBtnSave="false"
-      () => {
+    :submit="() => {}"
-        onSubmit();
-      }
-    "
     :close="
       () => {
+        if (hideBranch && countStartsOne === 1) {
+          dialog({
+            color: 'warning',
+            icon: 'mdi-alert',
+            title: t('warning'),
+            actionText: t('ok'),
+            persistent: true,
+            message: t('notRecorded'),
+            action: async () => {
+              countStartsOne++;
               clearForm();
               dialogInputForm = false;
+            },
+            cancel: () => {},
+          });
+        } else {
+          clearForm();
+          dialogInputForm = false;
+        }
       }
     "
   >
@@ -3031,12 +3159,19 @@ watch(isMainPage, () => {
         v-model:customer-name-en="formData.customerNameEN"
         v-model:person-name="formData.personName"
         v-model:tax-no="formData.taxNo"
+        @save="
+          async () => {
+            await onSubmitBasicInformation();
+            console.log('สร้าง');
+          }
+        "
       />
     </template>
 
     <template #address>
       <!-- <FormCustomerBranch separator dense outlined /> -->
 
+      <div v-if="!hideBranch">
         <div class="col-3 app-text-muted">
           • {{ $t('formDialogCustomerBranch') }}
         </div>
@@ -3048,6 +3183,7 @@ watch(isMainPage, () => {
             v-model:stat-branch-no="statBranchNo"
             v-model:customer-branch="formData.customerBranch"
             v-model:tab-index="indexTab"
+            @save="() => onSubmitCustomerBranch({ isClearForm: false })"
           >
             <template #address>
               <FormAddress
@@ -3057,9 +3193,15 @@ watch(isMainPage, () => {
                   indexTab !== undefined && formData.customerBranch?.[indexTab]
                 "
                 v-model:address="formData.customerBranch[indexTab].address"
-              v-model:address-e-n="formData.customerBranch[indexTab].addressEN"
+                v-model:address-e-n="
-              v-model:province-id="formData.customerBranch[indexTab].provinceId"
+                  formData.customerBranch[indexTab].addressEN
-              v-model:district-id="formData.customerBranch[indexTab].districtId"
+                "
+                v-model:province-id="
+                  formData.customerBranch[indexTab].provinceId
+                "
+                v-model:district-id="
+                  formData.customerBranch[indexTab].districtId
+                "
                 v-model:sub-district-id="
                   formData.customerBranch[indexTab].subDistrictId
                 "
@@ -3139,7 +3281,9 @@ watch(isMainPage, () => {
                   indexTab !== undefined && formData.customerBranch?.[indexTab]
                 "
                 v-model:mail="formData.customerBranch[indexTab].email"
-              v-model:telephone="formData.customerBranch[indexTab].telephoneNo"
+                v-model:telephone="
+                  formData.customerBranch[indexTab].telephoneNo
+                "
                 dense
                 outlined
                 separator
@@ -3157,6 +3301,7 @@ watch(isMainPage, () => {
             </template>
           </TabComponent>
         </div>
+      </div>
     </template>
   </FormDialog>
 
@@ -3319,144 +3464,7 @@ watch(isMainPage, () => {
   <FormDialog
     v-model:modal="dialogInputCustomerBranchForm"
     :title="$t('formDialogTitleCreateSubBranch')"
-    :submit="
+    :submit="() => {}"
-      () => {
-        onSubmitCustomerBranch();
-      }
-    "
-    :close="() => {}"
-  >
-    <template #address>
-      <!-- <FormCustomerBranch separator dense outlined /> -->
-
-      <div class="col-3 app-text-muted">
-        • {{ $t('formDialogCustomerBranch') }}
-      </div>
-
-      <div class="col-12 row bordered q-pt-none rounded">
-        <TabComponent
-          prefix-id="form-dialog-branch"
-          v-model:stat-branch-no="statBranchNo"
-          v-model:customer-branch="formData.customerBranch"
-          v-model:tab-index="indexTab"
-        >
-          <template #address>
-            <FormAddress
-              prefix-id="form-dialog-branch"
-              :id="indexTab"
-              v-if="
-                indexTab !== undefined && formData.customerBranch?.[indexTab]
-              "
-              v-model:address="formData.customerBranch[indexTab].address"
-              v-model:address-e-n="formData.customerBranch[indexTab].addressEN"
-              v-model:province-id="formData.customerBranch[indexTab].provinceId"
-              v-model:district-id="formData.customerBranch[indexTab].districtId"
-              v-model:sub-district-id="
-                formData.customerBranch[indexTab].subDistrictId
-              "
-              v-model:zip-code="formData.customerBranch[indexTab].zipCode"
-              separator
-              dense
-              outlined
-            />
-          </template>
-
-          <template #businessInformation>
-            <FormBusiness
-              prefix-id="form-dialog-branch"
-              v-if="
-                indexTab !== undefined && formData.customerBranch?.[indexTab]
-              "
-              v-model:employment-office="
-                formData.customerBranch[indexTab].employmentOffice
-              "
-              v-model:bussiness-type="
-                formData.customerBranch[indexTab].bussinessType
-              "
-              v-model:bussiness-type-en="
-                formData.customerBranch[indexTab].bussinessTypeEN
-              "
-              v-model:job-position="
-                formData.customerBranch[indexTab].jobPosition
-              "
-              v-model:job-position-en="
-                formData.customerBranch[indexTab].jobPositionEN
-              "
-              v-model:job-description="
-                formData.customerBranch[indexTab].jobDescription
-              "
-              v-model:sale-employee="
-                formData.customerBranch[indexTab].saleEmployee
-              "
-              v-model:pay-date="formData.customerBranch[indexTab].payDate"
-              v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
-              separator
-              dense
-              outlined
-            />
-          </template>
-          <template #about>
-            <AboutComponent
-              prefix-id="form-dialog-branch"
-              v-if="
-                indexTab !== undefined && formData.customerBranch?.[indexTab]
-              "
-              :type-customer="customerType"
-              v-model:tax-no="formData.customerBranch[indexTab].taxNo"
-              v-model:customer-name="formData.customerBranch[indexTab].name"
-              v-model:customer-english-name="
-                formData.customerBranch[indexTab].nameEN
-              "
-              v-model:authorized-capital="
-                formData.customerBranch[indexTab].authorizedCapital
-              "
-              v-model:register-name="
-                formData.customerBranch[indexTab].registerName
-              "
-              v-model:register-date="
-                formData.customerBranch[indexTab].registerDate
-              "
-              dense
-              outlined
-              separator
-            />
-          </template>
-          <template #contactInformation>
-            <ContactComponent
-              prefix-id="form-dialog-branch"
-              v-if="
-                indexTab !== undefined && formData.customerBranch?.[indexTab]
-              "
-              v-model:mail="formData.customerBranch[indexTab].email"
-              v-model:telephone="formData.customerBranch[indexTab].telephoneNo"
-              dense
-              outlined
-              separator
-            />
-          </template>
-          <template #otherDocuments>
-            <OtherInformation
-              prefix-id="form-dialog-branch"
-              v-if="
-                indexTab !== undefined && formData.customerBranch?.[indexTab]
-              "
-              dense
-              outlined
-            />
-          </template>
-        </TabComponent>
-      </div>
-    </template>
-  </FormDialog>
-
-  <FormDialog
-    v-model:modal="dialogInputCustomerBranchForm"
-    :title="$t('formDialogTitleCreateSubBranch')"
-    :submit="
-      () => {
-        onSubmitCustomerBranch();
-      }
-    "
     :close="
       () => {
         clearForm();
@@ -3477,6 +3485,11 @@ watch(isMainPage, () => {
           :stat-branch-no="statBranchNo"
           v-model:customer-branch="formData.customerBranch"
           v-model:tab-index="indexTab"
+          @save="
+            () => {
+              onSubmitCustomerBranch({ isClearForm: true });
+            }
+          "
         >
           <template #address>
             <FormAddress
@@ -3656,6 +3669,11 @@ watch(isMainPage, () => {
             v-model:customer-name-en="formData.customerNameEN"
             v-model:person-name="formData.personName"
             v-model:tax-no="formData.taxNo"
+            @save="
+              () => {
+                console.log('แก้ไข');
+              }
+            "
           />
         </template>
 
@@ -3671,6 +3689,7 @@ watch(isMainPage, () => {
               :readonly="!infoDrawerEdit"
               v-model:customer-branch="formData.customerBranch"
               v-model:tab-index="indexTab"
+              @save="() => onSubmitCustomerBranch({ isClearForm: false })"
             >
               <template #address>
                 <FormAddress