From 577da39cf0126c4f7701e268d557171885beed23 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 11 Jul 2025 10:45:33 +0700
Subject: [PATCH] feat: business type is now from api

---
 .../shared/select/SelectBusinessType.vue      |  5 +-
 src/pages/03_customer-management/MainPage.vue | 21 ++---
 .../employer/EmployerFormBranch.vue           |  2 +-
 .../employer/EmployerFormBusiness.vue         | 90 +++----------------
 src/pages/03_customer-management/form.ts      | 12 +--
 src/stores/customer/types.ts                  |  9 +-
 6 files changed, 35 insertions(+), 104 deletions(-)

diff --git a/src/components/shared/select/SelectBusinessType.vue b/src/components/shared/select/SelectBusinessType.vue
index ebd4adc5..edef243e 100644
--- a/src/components/shared/select/SelectBusinessType.vue
+++ b/src/components/shared/select/SelectBusinessType.vue
@@ -27,6 +27,7 @@ defineEmits<{
 }>();
 
 type ExclusiveProps = {
+  lang?: string;
   codeOnly?: boolean;
   selectFirstValue?: boolean;
   branchVirtual?: boolean;
@@ -92,7 +93,7 @@ function setDefaultValue() {
   >
     <template #selected-item="{ opt }">
       {{
-        $i18n.locale === 'tha'
+        (lang ?? $i18n.locale) !== 'eng'
           ? opt.name + ' ' + opt.name
           : opt.nameEN + ' ' + opt.nameEN
       }}
@@ -102,7 +103,7 @@ function setDefaultValue() {
       <q-item v-bind="scope.itemProps">
         <span class="row items-center">
           {{
-            $i18n.locale === 'tha'
+            (lang ?? $i18n.locale) !== 'eng'
               ? opt.name + ' ' + opt.name
               : opt.nameEN + ' ' + opt.nameEN
           }}
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 88e8a730..45b055b4 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1266,24 +1266,15 @@ const emptyCreateDialog = ref(false);
                             class="ellipsis"
                           >
                             {{
-                              props.row.branch.length !== 0
-                                ? props.row.branch[0].businessType !== null
-                                  ? optionStore.mapOption(
-                                      props.row.branch[0].businessType,
-                                    )
-                                  : ''
-                                : '-'
+                              props.row.branch[0].businessType[
+                                $i18n.locale === 'eng' ? 'nameEN' : 'name'
+                              ]
                             }}
-
                             <q-tooltip>
                               {{
-                                props.row.branch.length !== 0
-                                  ? props.row.branch[0].businessType !== null
-                                    ? optionStore.mapOption(
-                                        props.row.branch[0].businessType,
-                                      )
-                                    : ''
-                                  : '-'
+                                props.row.branch[0].businessType[
+                                  $i18n.locale === 'eng' ? 'nameEN' : 'name'
+                                ]
                               }}
                             </q-tooltip>
                           </q-td>
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index e198b6b6..e2b80f13 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -158,7 +158,7 @@ withDefaults(
             outlined
             :prefix-id="prefixId || 'employer'"
             :readonly="readonly"
-            v-model:bussiness-type="item.businessType"
+            v-model:business-type-id="item.businessTypeId"
             v-model:job-position="item.jobPosition"
             v-model:job-description="item.jobDescription"
             v-model:pay-date="item.payDate"
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
index 5f3ab63f..0717d54f 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
@@ -8,12 +8,13 @@ import { onMounted, watch } from 'vue';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import ThaiBahtText from 'thai-baht-text';
+import SelectBusinessType from 'src/components/shared/select/SelectBusinessType.vue';
 
 const { locale } = useI18n({ useScope: 'global' });
 
 const rawOption = ref();
 
-const bussinessType = defineModel<string>('bussinessType');
+const businessTypeId = defineModel<string>('businessTypeId');
 const jobPosition = defineModel<string>('jobPosition');
 const jobDescription = defineModel<string>('jobDescription');
 const payDate = defineModel<string>('payDate');
@@ -40,32 +41,16 @@ defineProps<{
 onMounted(async () => {
   const resultOption = await fetch('/option/option.json');
   rawOption.value = await resultOption.json();
-  typeBusinessENOption.value = rawOption.value.eng.businessType;
   jobPositionENOption.value = rawOption.value.eng.position;
 
   if (locale.value === 'eng') {
-    typeBusinessOption.value = rawOption.value.eng.businessType;
     jobPositionOption.value = rawOption.value.eng.position;
   }
   if (locale.value === 'tha') {
-    typeBusinessOption.value = rawOption.value.tha.businessType;
     jobPositionOption.value = rawOption.value.tha.position;
   }
 });
 
-watch([typeBusinessOption, typeBusinessENOption], () => {
-  typeBusinessFilter = selectFilterOptionRefMod(
-    typeBusinessOption,
-    typeBusinessOptions,
-    'label',
-  );
-  typeBusinessENFilter = selectFilterOptionRefMod(
-    typeBusinessENOption,
-    typeBusinessENOptions,
-    'label',
-  );
-});
-
 watch(
   () => rate.value,
   (newValue) => {
@@ -135,69 +120,18 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       <span>{{ $t('customerBranch.tab.business') }}</span>
     </div>
 
-    <q-select
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      :hide-dropdown-icon="readonly"
-      input-debounce="0"
-      option-value="value"
-      option-label="label"
-      v-model="bussinessType"
+    <SelectBusinessType
       class="col-md-6 col-12"
-      :dense="dense"
-      :readonly="readonly"
-      :label="$t('customer.form.businessType')"
-      :options="typeBusinessOptions"
-      :for="`${prefixId}-select-business-type`"
-      @filter="typeBusinessFilter"
-      :rules="[(val: string) => !!val || $t('form.error.required')]"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('general.noData') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
-    <q-select
-      :for="`${prefixId}-input-bussiness-type-en`"
-      :id="`${prefixId}-input-bussiness-type-en`"
-      :label="`${$t('customer.form.businessType')} (EN)`"
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      :hide-dropdown-icon="readonly"
-      input-debounce="0"
-      option-value="value"
-      option-label="label"
-      v-model="bussinessType"
+      v-model:value="businessTypeId"
+      :readonly
+      lang="tha"
+    />
+    <SelectBusinessType
       class="col-md-6 col-12"
-      :dense="dense"
-      :readonly="readonly"
-      :options="typeBusinessENOptions"
-      @filter="typeBusinessENFilter"
-      :rules="[(val: string) => !!val || $t('form.error.required')]"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('general.noData') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
+      v-model:value="businessTypeId"
+      lang="eng"
+      :readonly
+    />
 
     <q-select
       outlined
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index e3cefea9..8734f698 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -34,7 +34,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     [key: string]: (keyof CustomerBranchCreate)[];
   }>({
     main: [],
-    business: ['businessType', 'jobPosition'],
+    business: ['businessTypeId', 'jobPosition'],
     address: [
       'address',
       'addressEN',
@@ -181,7 +181,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
         payDate: v.payDate,
         jobDescription: v.jobDescription,
         jobPosition: v.jobPosition,
-        businessType: v.businessType,
+        businessTypeId: v.businessTypeId,
         employmentOffice: v.employmentOffice,
         employmentOfficeEN: v.employmentOfficeEN,
         telephoneNo: v.telephoneNo,
@@ -289,8 +289,8 @@ export const useCustomerForm = defineStore('form-customer', () => {
       birthDate:
         currentFormData.value.customerBranch?.at(0)?.birthDate || undefined,
 
-      businessType:
-        currentFormData.value.customerBranch?.at(0)?.businessType || '',
+      businessTypeId:
+        currentFormData.value.customerBranch?.at(0)?.businessTypeId || '',
       jobPosition:
         currentFormData.value.customerBranch?.at(0)?.jobPosition || '',
       jobDescription:
@@ -538,7 +538,7 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
     gender: '',
     birthDate: undefined,
 
-    businessType: '',
+    businessTypeId: '',
     jobPosition: '',
     jobDescription: '',
     payDate: '',
@@ -619,7 +619,7 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
       payDateEN: _data.payDateEN,
       jobDescription: _data.jobDescription,
       jobPosition: _data.jobPosition,
-      businessType: _data.businessType,
+      businessTypeId: _data.businessTypeId,
       employmentOffice: _data.employmentOffice,
       employmentOfficeEN: _data.employmentOfficeEN,
       telephoneNo: _data.telephoneNo,
diff --git a/src/stores/customer/types.ts b/src/stores/customer/types.ts
index 5da29902..1cc52f28 100644
--- a/src/stores/customer/types.ts
+++ b/src/stores/customer/types.ts
@@ -34,7 +34,12 @@ export type CustomerBranch = {
   payDate: string;
   jobDescription: string;
   jobPosition: string;
-  businessType: string;
+  businessTypeId: string;
+  businessType?: {
+    id: string;
+    name: string;
+    nameEN: string;
+  };
   agentUserId: string;
 
   contactName: string;
@@ -107,7 +112,7 @@ export type CustomerBranchCreate = {
   telephoneNo?: string;
   gender?: string;
   birthDate?: string;
-  businessType: string;
+  businessTypeId: string;
   jobPosition: string;
   jobDescription: string;
   payDate?: string;