feat: business type is now from api

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
           }}

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[
-                                ? props.row.branch[0].businessType !== null
+                                $i18n.locale === 'eng' ? 'nameEN' : 'name'
-                                  ? optionStore.mapOption(
+                              ]
-                                      props.row.branch[0].businessType,
-                                    )
-                                  : ''
-                                : '-'
                             }}
-
                             <q-tooltip>
                               {{
-                                props.row.branch.length !== 0
+                                props.row.branch[0].businessType[
-                                  ? props.row.branch[0].businessType !== null
+                                  $i18n.locale === 'eng' ? 'nameEN' : 'name'
-                                    ? optionStore.mapOption(
+                                ]
-                                        props.row.branch[0].businessType,
-                                      )
-                                    : ''
-                                  : '-'
                               }}
                             </q-tooltip>
                           </q-td>

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"

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
+    <SelectBusinessType
-      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"
       class="col-md-6 col-12"
-      :dense="dense"
+      v-model:value="businessTypeId"
-      :readonly="readonly"
+      :readonly
-      :label="$t('customer.form.businessType')"
+      lang="tha"
-      :options="typeBusinessOptions"
+    />
-      :for="`${prefixId}-select-business-type`"
+    <SelectBusinessType
-      @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"
       class="col-md-6 col-12"
-      :dense="dense"
+      v-model:value="businessTypeId"
-      :readonly="readonly"
+      lang="eng"
-      :options="typeBusinessENOptions"
+      :readonly
-      @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>
 
     <q-select
       outlined

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:
+      businessTypeId:
-        currentFormData.value.customerBranch?.at(0)?.businessType || '',
+        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,

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;