refactor: can create new type

src/components/shared/select/SelectBusinessType.vue

@@ -158,6 +158,39 @@ function setDefaultValue() {
       <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-business-type-add-new"
+        id="select-business-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('menu.manage.businessType') }) }}
+            </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/pages/03_customer-management/MainPage.vue

@@ -2263,7 +2263,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/EmployerFormBusiness.vue

@@ -10,10 +10,25 @@ import { useI18n } from 'vue-i18n';
 import ThaiBahtText from 'thai-baht-text';
 import SelectBusinessType from 'src/components/shared/select/SelectBusinessType.vue';
 
+import BusinessTypeDialog from 'src/pages/16_business-type-management/BusinessTypeDialog.vue';
+
+import useBusinessTypeStore from 'src/stores/business-type';
+
 const { locale } = useI18n({ useScope: 'global' });
 
 const rawOption = ref();
 
+const businessTypeDialog = ref<boolean>(false);
+const formDataBusinessType = ref<{
+  name: string;
+  nameEN: string;
+}>({
+  name: '',
+  nameEN: '',
+});
+
+const useBusinessType = useBusinessTypeStore();
+
 const businessTypeId = defineModel<string>('businessTypeId');
 const jobPosition = defineModel<string>('jobPosition');
 const jobDescription = defineModel<string>('jobDescription');
@@ -29,6 +44,8 @@ const typeBusinessENOption = ref([]);
 const jobPositionOption = ref([]);
 const jobPositionENOption = ref([]);
 
+const keySelect = ref<number>(0);
+
 defineProps<{
   title?: string;
   dense?: boolean;
@@ -38,6 +55,20 @@ defineProps<{
   showTitle?: boolean;
 }>();
 
+function resetFormBusinessType() {
+  businessTypeDialog.value = false;
+  formDataBusinessType.value = { name: '', nameEN: '' };
+}
+
+async function submitBusinessType() {
+  const res = await useBusinessType.create(formDataBusinessType.value);
+  if (res) {
+    businessTypeId.value = res.id;
+    resetFormBusinessType();
+    keySelect.value++;
+  }
+}
+
 onMounted(async () => {
   const resultOption = await fetch('/option/option.json');
   rawOption.value = await resultOption.json();
@@ -121,16 +152,24 @@ let jobPositionENFilter = selectFilterOptionRefMod(
     </div>
 
     <SelectBusinessType
+      :key="keySelect"
       class="col-md-6 col-12"
       v-model:value="businessTypeId"
       :readonly
+      creatable
       lang="tha"
+      :rules="[(val: string) => !!val || $t('form.error.required')]"
+      @create="() => (businessTypeDialog = true)"
     />
     <SelectBusinessType
+      :key="keySelect"
       class="col-md-6 col-12"
       v-model:value="businessTypeId"
-      lang="eng"
       :readonly
+      creatable
+      lang="eng"
+      :rules="[(val: string) => !!val || $t('form.error.required')]"
+      @create="() => (businessTypeDialog = true)"
     />
 
     <q-select
@@ -282,4 +321,12 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       "
     />
   </div>
+
+  <BusinessTypeDialog
+    ref="refBusinessTypeDialog"
+    @close="resetFormBusinessType()"
+    @submit="submitBusinessType()"
+    v-model="businessTypeDialog"
+    v-model:data="formDataBusinessType"
+  />
 </template>