refactor: add ( ) ,

src/components/shared/select/SelectBusinessType.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { getRole } from 'src/services/keycloak';
 
 import { createSelect, SelectProps } from './select';
 import SelectInput from '../SelectInput.vue';
@@ -95,6 +94,70 @@ function setDefaultValue() {
       {{ (lang ?? $i18n.locale) !== 'eng' ? opt.name : opt.nameEN }}
     </template>
 
+    <template #no-option v-if="creatable">
+      <q-item
+        :disable="creatableDisabled"
+        clickable
+        v-close-popup
+        @click.stop="$emit('create')"
+      >
+        <q-item-section>
+          <span class="row items-center">
+            <q-icon
+              name="mdi-plus-circle-outline"
+              class="q-mr-sm"
+              style="color: hsl(var(--positive-bg))"
+            />
+            <b>
+              {{ $t('general.add', { text: $t('businessType.title') }) }}
+            </b>
+            <span
+              v-if="creatableDisabled && creatableDisabledText"
+              class="app-text-muted q-pl-xs"
+              style="font-size: 80%"
+            >
+              {{ creatableDisabledText }}
+            </span>
+          </span>
+        </q-item-section>
+      </q-item>
+
+      <q-separator class="q-mx-sm" />
+    </template>
+
+    <template #before-options v-if="creatable">
+      <q-item
+        :disable="creatableDisabled"
+        clickable
+        v-close-popup
+        @click.stop="$emit('create')"
+        for="select-biz-type-add-new"
+        id="select-biz-type-add-new"
+      >
+        <q-item-section>
+          <span class="row items-center">
+            <q-icon
+              name="mdi-plus-circle-outline"
+              class="q-mr-sm"
+              style="color: hsl(var(--positive-bg))"
+            />
+            <b>
+              {{ $t('general.add', { text: $t('businessType.title') }) }}
+            </b>
+            <span
+              v-if="creatableDisabled && creatableDisabledText"
+              class="app-text-muted q-pl-xs"
+              style="font-size: 80%"
+            >
+              {{ creatableDisabledText }}
+            </span>
+          </span>
+        </q-item-section>
+      </q-item>
+
+      <q-separator class="q-mx-sm" />
+    </template>
+
     <template #option="{ opt, scope }">
       <q-item v-bind="scope.itemProps">
         <span class="row items-center">

src/components/shared/select/select.ts

@@ -70,22 +70,25 @@ export const createSelect = <T extends Record<string, any>>(
 
     if (!currentValue) return;
 
-    const option = selectOptions.value.find(
-      (v) => v[valueField] === currentValue,
-    );
-
-    if (option) {
-      valueOption.value = option;
-      return;
-    }
     if (valueOption.value && valueOption.value[valueField] === currentValue) {
-      return selectOptions.value.unshift(valueOption.value);
+      selectOptions.value.unshift(valueOption.value);
+      selectOptions.value = selectOptions.value.filter((curr, idx, arr) => {
+        return (
+          arr.findIndex((item) => item[valueField] === curr[valueField]) === idx
+        );
+      });
+      return;
     }
 
     const ret = await getByValue(currentValue);
 
     if (ret) {
       selectOptions.value.unshift(ret);
+      selectOptions.value = selectOptions.value.filter((curr, idx, arr) => {
+        return (
+          arr.findIndex((item) => item[valueField] === curr[valueField]) === idx
+        );
+      });
       valueOption.value = ret;
     }
   }

src/i18n/eng.ts

@@ -340,7 +340,7 @@ export default {
       requireLength: 'Please enter {msg} character',
       branchNameField: "Only letters, numbers, or the characters . , - ' &.",
       branchNameENField:
-        "Only English letters, numbers, or the characters . , - ' &.",
+        "Only English letters, numbers, or the characters . , - ' &. ( )",
       passportFormat: 'Please enter the passport number in the correct format.',
     },
     warning: {

src/i18n/tha.ts

@@ -337,7 +337,7 @@ export default {
       letterAndNumOnly: 'โปรดใช้เฉพาะ _ ตัวอักษรภาษาอังกฤษและตัวเลขเท่านั้น',
       numOnly: 'โปรดใช้เฉพาะตัวเลขเท่านั้น',
       requireLength: 'กรุณากรอกให้ครบ {msg} หลัก',
-      branchNameField: "โปรดใช้ตัวอักษร ตัวเลข หรือ . , - ' & เท่านั้น",
+      branchNameField: "โปรดใช้ตัวอักษร ตัวเลข หรือ . , - ' ( ) & เท่านั้น",
       branchNameENField:
         "โปรดใช้ตัวอักษรภาษาอังกฤษ ตัวเลข หรือ . , - ' & เท่านั้น",
       passportFormat: 'กรุณากรอกหมายเลขพาสปอร์ตให้ถูกต้องตามรูปแบบ',

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

@@ -4328,7 +4328,7 @@ const emptyCreateDialog = ref(false);
                 customerFormData.customerBranch[0].legalPersonNo
               "
               v-model:business-type="
-                customerFormData.customerBranch[0].businessType
+                customerFormData.customerBranch[0].businessTypeId
               "
               v-model:job-position="
                 customerFormData.customerBranch[0].jobPosition

src/pages/03_customer-management/components/employer/EmployerFormAbout.vue

@@ -140,7 +140,7 @@ watch(
           :rules="[
             (val) => !!val || $t('form.error.required'),
             (val) =>
-              /^[A-Za-z0-9ก-๙\s&.,'-]+$/.test(val) ||
+              /^[A-Za-z0-9ก-๙\s&.,'()-]+$/.test(val) ||
               $t('form.error.branchNameField'),
           ]"
         />

src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue

@@ -2,6 +2,7 @@
 import useOptionStore from 'stores/options';
 import SelectBranch from 'src/components/shared/select/SelectBranch.vue';
 import { isRoleInclude } from 'src/stores/utils';
+import SelectBusinessType from 'src/components/shared/select/SelectBusinessType.vue';
 
 withDefaults(
   defineProps<{
@@ -142,15 +143,10 @@ const telephoneNo = defineModel<string>('telephoneNo', { default: '' });
           for="input-tax"
           v-model="legalPersonNo"
         />
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
+        <SelectBusinessType
           class="col-6 col-md-3"
-          :label="$t('customer.table.businessTypePure')"
-          for="input-business-type"
-          :model-value="optionStore.mapOption(businessType)"
+          v-model:value="businessType"
+          :readonly
         />
       </div>
 
@@ -179,15 +175,10 @@ const telephoneNo = defineModel<string>('telephoneNo', { default: '' });
           :label="$t('personnel.form.citizenId')"
           for="input-citizen-id"
         />
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
+        <SelectBusinessType
           class="col-6 col-md-3"
-          :label="$t('customer.table.businessTypePure')"
-          for="input-first-name-en"
-          :model-value="optionStore.mapOption(businessType)"
+          v-model:value="businessType"
+          :readonly
         />
       </div>
 

src/stores/business-type/index.ts

@@ -37,10 +37,13 @@ const useBusinessTypeStore = defineStore('business-type-store', () => {
     return false;
   }
 
-  async function create(data: BusinessTypePayLoad) {
-    const res = await api.post('/business-type', {
+  async function create(
+    data: BusinessTypePayLoad,
+  ): Promise<BusinessType | null> {
+    const res = await api.post<BusinessType>('/business-type', {
       ...data,
     });
+
     if (res.status < 400) {
       return res.data;
     }