From b5925cb6ee538dc263b6f351ec1caaaa44456cf2 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 4 Jul 2024 13:27:58 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87=20=20=E0=B8=AA=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=82=E0=B8=B2=20=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B9=84?=
 =?UTF-8?q?=E0=B8=94=E0=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/03_customer-management/MainPage.vue | 101 +++++++++---------
 1 file changed, 50 insertions(+), 51 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index e7fb7e38..592e5dce 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -4,7 +4,7 @@ import { computed, ref, watch, toRaw } from 'vue';
 import useCustomerStore from 'src/stores/customer';
 import useEmployeeStore from 'src/stores/employee';
 import useOptionStore from 'src/stores/options';
-import useBranchStore from 'src/stores/branch';
+import useMyBranchStore from 'src/stores/my-branch';
 
 import { Status } from 'src/stores/types';
 
@@ -63,9 +63,9 @@ import useFlowStore from 'src/stores/flow';
 const { t, locale } = useI18n();
 const utilsStore = useUtilsStore();
 const userCustomer = useCustomerStore();
-const userBranch = useBranchStore();
+const useMyBranch = useMyBranchStore();
 
-const { fetchList: fetchListBranch } = userBranch;
+const { fetchListOptionBranch } = useMyBranch;
 
 const {
   create,
@@ -242,7 +242,7 @@ const formDataEmployee = ref<EmployeeCreate>({
   },
 });
 
-const allBranch = ref<{ id: string; name: string }[]>();
+const branchOption = ref<{ id: string; name: string }[]>();
 const indexTab = ref<number>(0);
 const statusToggle = ref<boolean>(false);
 const profileSubmit = ref<boolean>(false);
@@ -390,7 +390,7 @@ const employeeHistory = ref<EmployeeHistory[]>();
 
 async function triggerCreate(type: CustomerType) {
   customerType.value = type;
-  await fetchListOfBranch();
+  await fetchListOfOptionBranch();
   openDialogInputForm();
   dialogCustomerType.value = false;
 }
@@ -413,7 +413,7 @@ async function openDialogInputForm(
   if (action === 'INFO') {
     if (!id) return;
     if (selectorLabel.value === 'EMPLOYER') {
-      await fetchListOfBranch();
+      await fetchListOfOptionBranch();
       infoDrawer.value = true;
     }
     if (selectorLabel.value === 'EMPLOYEE') {
@@ -448,7 +448,7 @@ async function openDialogInputForm(
     }
   } else {
     if (selectorLabel.value === 'EMPLOYER') {
-      await fetchListOfBranch();
+      await fetchListOfOptionBranch();
       dialogInputForm.value = true;
     }
     if (selectorLabel.value === 'EMPLOYEE') {
@@ -711,12 +711,10 @@ async function onSubmitCustomerBranch() {
   flowStore.rotate();
 }
 
-async function fetchListOfBranch() {
-  const res = await fetchListBranch({ pageSize: 999 });
+async function fetchListOfOptionBranch() {
+  const res = await fetchListOptionBranch({ pageSize: 999 });
 
-  if (res) allBranch.value = res.result;
-
-  console.log(allBranch.value);
+  if (res) branchOption.value = res.result;
 }
 
 async function fetchListCustomer() {
@@ -1354,44 +1352,42 @@ watch([inputSearch, currentStatus], async () => {
             }}
           </div>
 
-          <div class="scroll">
-            <div class="q-mx-md" style="display: inline-block">
-              <StatCardComponent
-                v-if="customerStats && selectorLabel === 'EMPLOYER'"
-                labelI18n
-                :branch="
-                  customerStats.map((v) => ({
-                    count:
-                      v.name === 'CORP'
-                        ? statsCustomerType?.CORP ?? 0
-                        : statsCustomerType?.PERS ?? 0,
-                    label:
-                      v.name === 'CORP'
-                        ? 'customerLegalEntity'
-                        : 'customerNaturalPerson',
-                    color: v.name === 'CORP' ? 'purple' : 'green',
-                  }))
-                "
-                :dark="$q.dark.isActive"
-                nowrap
-                class="q-mb-md"
-              />
+          <div class="q-px-md scroll">
+            <StatCardComponent
+              v-if="customerStats && selectorLabel === 'EMPLOYER'"
+              labelI18n
+              :branch="
+                customerStats.map((v) => ({
+                  count:
+                    v.name === 'CORP'
+                      ? statsCustomerType?.CORP ?? 0
+                      : statsCustomerType?.PERS ?? 0,
+                  label:
+                    v.name === 'CORP'
+                      ? 'customerLegalEntity'
+                      : 'customerNaturalPerson',
+                  color: v.name === 'CORP' ? 'purple' : 'green',
+                }))
+              "
+              :dark="$q.dark.isActive"
+              nowrap
+              class="q-mb-md"
+            />
 
-              <StatCardComponent
-                v-if="customerStats && selectorLabel === 'EMPLOYEE'"
-                labelI18n
-                :branch="[
-                  {
-                    label: 'EMPLOYEE',
-                    count: statsEmployee,
-                    color: 'pink',
-                  },
-                ]"
-                :dark="$q.dark.isActive"
-                nowrap
-                class="q-mb-md"
-              />
-            </div>
+            <StatCardComponent
+              v-if="customerStats && selectorLabel === 'EMPLOYEE'"
+              labelI18n
+              :branch="[
+                {
+                  label: 'EMPLOYEE',
+                  count: statsEmployee,
+                  color: 'pink',
+                },
+              ]"
+              :dark="$q.dark.isActive"
+              nowrap
+              class="q-mb-md"
+            />
           </div>
         </div>
       </div>
@@ -1841,7 +1837,7 @@ watch([inputSearch, currentStatus], async () => {
         outlined
         separator
         :type-customer="customerType"
-        :options-branch="allBranch"
+        :options-branch="branchOption"
         v-model:registered-branch-id="formData.registeredBranchId"
         v-model:customer-name="formData.customerName"
         v-model:customer-name-en="formData.customerNameEN"
@@ -2326,6 +2322,7 @@ watch([inputSearch, currentStatus], async () => {
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
               :type-customer="customerType"
+              v-model:branch-no="formData.customerBranch[indexTab].branchNo"
               v-model:tax-no="formData.customerBranch[indexTab].taxNo"
               v-model:customer-name="formData.customerBranch[indexTab].name"
               v-model:customer-english-name="
@@ -2440,7 +2437,7 @@ watch([inputSearch, currentStatus], async () => {
             separator
             :readonly="!infoDrawerEdit"
             :type-customer="customerType"
-            :options-branch="allBranch"
+            :options-branch="branchOption"
             v-model:registered-branch-id="formData.registeredBranchId"
             v-model:customer-name="formData.customerName"
             v-model:customer-name-en="formData.customerNameEN"
@@ -2743,6 +2740,8 @@ watch([inputSearch, currentStatus], async () => {
                 <AboutComponent
                   v-if="formData.customerBranch?.[0]"
                   :type-customer="customerType"
+                  v-model:branch-code="formData.customerBranch[indexTab].code"
+                  v-model:branch-no="formData.customerBranch[indexTab].branchNo"
                   v-model:customer-name="formData.customerBranch[indexTab].name"
                   v-model:customer-english-name="
                     formData.customerBranch[indexTab].nameEN