feat: business type is now from api

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