From 57e61cf663aee67a92493470403d9d0e1c4b8615 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 26 Jul 2024 11:44:00 +0000
Subject: [PATCH] refactor(03): input select

---
 .../BasicInformation.vue                      |  51 +++--
 .../03_customer-management/FormBusiness.vue   |  95 +++++++---
 .../FormEmployeeHealthCheck.vue               | 175 +++++++++++++-----
 .../FormEmployeePassport.vue                  |  93 +++++++---
 .../FormEmployeeVisa.vue                      |  48 +++--
 .../FormEmployeeWorkHistory.vue               | 150 +++++++++++----
 src/pages/03_customer-management/MainPage.vue |   6 +-
 7 files changed, 458 insertions(+), 160 deletions(-)

diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index f901bc36..fe4e8e40 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
 import { getRole } from 'src/services/keycloak';
 import { CustomerBranch } from 'src/stores/customer/types';
-import { onMounted, ref } from 'vue';
+import { selectFilterOptionRefMod } from 'src/stores/utils';
+import { ref } from 'vue';
 
 const personName = defineModel<string>('personName');
 const customerName = defineModel<string>('customerName');
 const customerNameEn = defineModel<string>('customerNameEn');
 const registeredBranchId = defineModel<string>('registeredBranchId');
+const optionsBranch = defineModel<{ id: string; name: string }[]>(
+  'optionsBranch',
+  { default: [] },
+);
 const taxNo = defineModel<string | null | undefined>('taxNo');
 
 const employerID = defineModel<string>('employerID');
@@ -31,7 +36,6 @@ const props = defineProps<{
   separator?: boolean;
   typeCustomer?: string;
   employee?: boolean;
-  optionsBranch?: { id: string; name: string }[];
   employeeOwnerOption?: CustomerBranch[];
   prefixId: string;
 }>();
@@ -39,6 +43,13 @@ const props = defineProps<{
 defineEmits<{
   (e: 'filterOwnerBranch', val: string, update: void): void;
 }>();
+
+const branchOptions = ref<Record<string, unknown>[]>([]);
+const branchFilter = selectFilterOptionRefMod(
+  optionsBranch,
+  branchOptions,
+  'name',
+);
 </script>
 
 <template>
@@ -47,22 +58,26 @@ defineEmits<{
   </div>
   <div v-if="!employee" class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
-      lazy-rules="ondemand"
-      :id="`${prefixId}-input-source-nationality`"
-      :dense="dense"
       outlined
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
-      hide-bottom-space
+      clearable
+      use-input
+      fill-input
       emit-value
       map-options
-      options-dense
-      :label="$t('registeredBranch')"
+      hide-selected
+      hide-bottom-space
       class="col-12"
-      option-label="name"
       option-value="id"
+      input-debounce="0"
+      option-label="name"
+      lazy-rules="ondemand"
       v-model="registeredBranchId"
-      :options="optionsBranch"
+      :dense="dense"
+      :readonly="readonly"
+      :options="branchOptions"
+      :hide-dropdown-icon="readonly"
+      :label="$t('registeredBranch')"
+      :id="`${prefixId}-input-source-nationality`"
       :rules="[
         (val) => {
           const roles = getRole() || [];
@@ -72,8 +87,16 @@ defineEmits<{
           return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
         },
       ]"
-      clearable
-    />
+      @filter="branchFilter"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ $t('noResults') }}
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
 
     <q-input
       lazy-rules="ondemand"
diff --git a/src/components/03_customer-management/FormBusiness.vue b/src/components/03_customer-management/FormBusiness.vue
index d28cb01c..b3c3ba5e 100644
--- a/src/components/03_customer-management/FormBusiness.vue
+++ b/src/components/03_customer-management/FormBusiness.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { selectFilterOptionRefMod } from 'src/stores/utils';
 import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
 import { onMounted } from 'vue';
 import { ref } from 'vue';
@@ -21,8 +22,8 @@ const saleEmployee = defineModel<string>('saleEmployee');
 
 const rawOption = ref();
 
-const typeBusinessOptions = ref([]);
-const jobPositionOptions = ref([]);
+const typeBusinessOption = ref([]);
+const jobPositionOption = ref([]);
 
 defineProps<{
   title?: string;
@@ -38,14 +39,28 @@ onMounted(async () => {
   rawOption.value = await resultOption.json();
 
   if (locale.value === 'en-US') {
-    typeBusinessOptions.value = rawOption.value.eng.businessType;
-    jobPositionOptions.value = rawOption.value.eng.position;
+    typeBusinessOption.value = rawOption.value.eng.businessType;
+    jobPositionOption.value = rawOption.value.eng.position;
   }
   if (locale.value === 'th-th') {
-    typeBusinessOptions.value = rawOption.value.tha.businessType;
-    jobPositionOptions.value = rawOption.value.tha.position;
+    typeBusinessOption.value = rawOption.value.tha.businessType;
+    jobPositionOption.value = rawOption.value.tha.position;
   }
 });
+
+const typeBusinessOptions = ref<Record<string, unknown>[]>([]);
+const typeBusinessFilter = selectFilterOptionRefMod(
+  typeBusinessOption,
+  typeBusinessOptions,
+  'label',
+);
+
+const jobPositionOptions = ref<Record<string, unknown>[]>([]);
+const jobPositionFilter = selectFilterOptionRefMod(
+  jobPositionOption,
+  jobPositionOptions,
+  'label',
+);
 </script>
 <template>
   <div class="col-12 row q-col-gutter-y-md">
@@ -67,20 +82,35 @@ onMounted(async () => {
       />
 
       <q-select
-        lazy-rules="ondemand"
-        :id="`${prefixId}-select-business-type`"
+        outlined
+        clearable
+        use-input
+        fill-input
         emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        input-debounce="0"
         option-value="value"
         option-label="label"
-        map-options
-        :dense="dense"
-        outlined
-        :readonly="readonly"
+        lazy-rules="ondemand"
         v-model="bussinessType"
-        :options="typeBusinessOptions"
-        :label="$t('businessType')"
         class="col-md-6 col-12"
-      />
+        :dense="dense"
+        :readonly="readonly"
+        :label="$t('businessType')"
+        :options="typeBusinessOptions"
+        :id="`${prefixId}-select-business-type`"
+        @filter="typeBusinessFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
 
       <q-input
         lazy-rules="ondemand"
@@ -96,21 +126,36 @@ onMounted(async () => {
       />
 
       <q-select
-        lazy-rules="ondemand"
-        :for="`${prefixId}-select-job-position`"
-        :id="`${prefixId}-select-job-position`"
+        outlined
+        clearable
+        use-input
+        fill-input
         emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        input-debounce="0"
         option-value="value"
         option-label="label"
-        map-options
-        :dense="dense"
-        outlined
-        :readonly="readonly"
+        lazy-rules="ondemand"
         v-model="jobPosition"
-        :options="jobPositionOptions"
-        :label="$t('jobPosition')"
         class="col-md-6 col-12"
-      />
+        :dense="dense"
+        :readonly="readonly"
+        :label="$t('jobPosition')"
+        :options="jobPositionOptions"
+        :id="`${prefixId}-select-job-position`"
+        :for="`${prefixId}-select-job-position`"
+        @filter="jobPositionFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
 
       <q-input
         lazy-rules="ondemand"
diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index cf439fc3..c42f0dbe 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -8,6 +8,7 @@ import useAddressStore, {
 } from 'src/stores/address';
 import { EmployeeCheckupCreate } from 'src/stores/employee/types';
 import { useI18n } from 'vue-i18n';
+import { selectFilterOptionRefMod } from 'src/stores/utils';
 
 const { locale } = useI18n();
 const adrressStore = useAddressStore();
@@ -23,13 +24,17 @@ const addrOptions = reactive<{
 });
 
 const employeeCheckup = defineModel<EmployeeCheckupCreate[]>('employeeCheckup');
-const checkupTypeOption =
-  defineModel<{ label: string; value: string }[]>('checkupTypeOption');
+const checkupTypeOption = defineModel<{ label: string; value: string }[]>(
+  'checkupTypeOption',
+  { required: true },
+);
 const medicalBenefitOption = defineModel<{ label: string; value: string }[]>(
   'medicalBenefitOption',
+  { required: true },
 );
 const insuranceCompanyOption = defineModel<{ label: string; value: string }[]>(
   'insuranceCompanyOption',
+  { required: true },
 );
 
 const tab = ref();
@@ -81,6 +86,34 @@ onMounted(async () => {
   await fetchProvince();
   tab.value = 'tab0';
 });
+
+// const provinceOps = ref<Record<string, unknown>[]>([]);
+// const provinceFilter = selectFilterOptionRefMod(
+//   addrOptions.provinceOps,
+//   provinceOps,
+//   'label',
+// );
+
+const checkupTypeOptions = ref<Record<string, unknown>[]>([]);
+const checkupTypeFilter = selectFilterOptionRefMod(
+  checkupTypeOption,
+  checkupTypeOptions,
+  'label',
+);
+
+const medicalBenefitOptions = ref<Record<string, unknown>[]>([]);
+const medicalBenefitFilter = selectFilterOptionRefMod(
+  medicalBenefitOption,
+  medicalBenefitOptions,
+  'label',
+);
+
+const insuranceCompanyOptions = ref<Record<string, unknown>[]>([]);
+const insuranceCompanyFilter = selectFilterOptionRefMod(
+  insuranceCompanyOption,
+  insuranceCompanyOptions,
+  'label',
+);
 </script>
 
 <template>
@@ -156,39 +189,67 @@ onMounted(async () => {
             v-model="checkup.checkupResult"
           />
           <q-select
-            lazy-rules="ondemand"
-            :id="`${prefixId}-select-province`"
-            :dense="dense"
-            :readonly="readonly"
             outlined
-            :hide-dropdown-icon="readonly"
-            hide-bottom-space
+            clearable
+            use-input
+            fill-input
             emit-value
             map-options
-            v-model="checkup.checkupType"
+            hide-selected
+            hide-bottom-space
+            class="col-6"
+            input-debounce="0"
             option-value="value"
             option-label="label"
-            :label="$t('formDialogInputCheckupType')"
-            class="col-6"
-            :options="checkupTypeOption"
-          />
-          <q-select
             lazy-rules="ondemand"
-            :id="`${prefixId}-select-province`"
+            v-model="checkup.checkupType"
             :dense="dense"
             :readonly="readonly"
-            outlined
+            :options="checkupTypeOptions"
             :hide-dropdown-icon="readonly"
-            hide-bottom-space
+            :id="`${prefixId}-select-province`"
+            :label="$t('formDialogInputCheckupType')"
+            @filter="checkupTypeFilter"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('noResults') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+          <q-select
+            outlined
+            clearable
+            use-input
+            fill-input
             emit-value
             map-options
-            v-model="checkup.provinceId"
+            hide-selected
+            hide-bottom-space
             option-value="id"
+            input-debounce="0"
             option-label="name"
-            :label="$t('province')"
+            lazy-rules="ondemand"
             class="col-md-3 col-6"
+            v-model="checkup.provinceId"
+            :dense="dense"
+            :readonly="readonly"
+            :label="$t('province')"
+            :hide-dropdown-icon="readonly"
+            :id="`${prefixId}-select-province`"
             :options="addrOptions.provinceOps"
-          />
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('noResults') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+          <!-- @filter="provinceFilter" -->
           <q-input
             lazy-rules="ondemand"
             :dense="dense"
@@ -211,39 +272,67 @@ onMounted(async () => {
             type="textarea"
           />
           <q-select
-            lazy-rules="ondemand"
-            :id="`${prefixId}-select-province`"
-            :dense="dense"
-            :readonly="readonly"
             outlined
-            :hide-dropdown-icon="readonly"
-            hide-bottom-space
+            clearable
+            use-input
+            fill-input
             emit-value
             map-options
+            hide-selected
+            hide-bottom-space
+            class="col-6"
+            input-debounce="0"
+            option-value="value"
+            option-label="label"
+            lazy-rules="ondemand"
             v-model="checkup.medicalBenefitScheme"
-            option-value="value"
-            option-label="label"
-            :label="$t('formDialogInputMedicalBenefit')"
-            class="col-6"
-            :options="medicalBenefitOption"
-          />
-          <q-select
-            lazy-rules="ondemand"
-            :id="`${prefixId}-select-province`"
             :dense="dense"
             :readonly="readonly"
-            outlined
             :hide-dropdown-icon="readonly"
-            hide-bottom-space
+            :options="medicalBenefitOptions"
+            :id="`${prefixId}-select-province`"
+            :label="$t('formDialogInputMedicalBenefit')"
+            @filter="medicalBenefitFilter"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('noResults') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+          <q-select
+            outlined
+            clearable
+            use-input
+            fill-input
             emit-value
             map-options
-            v-model="checkup.insuranceCompany"
-            option-value="value"
-            option-label="label"
-            :label="$t('formDialogInputInsuranceCompany')"
+            hide-selected
+            hide-bottom-space
             class="col-6"
-            :options="insuranceCompanyOption"
-          />
+            input-debounce="0"
+            option-label="label"
+            option-value="value"
+            lazy-rules="ondemand"
+            v-model="checkup.insuranceCompany"
+            :dense="dense"
+            :readonly="readonly"
+            :hide-dropdown-icon="readonly"
+            :options="insuranceCompanyOptions"
+            :id="`${prefixId}-select-province`"
+            :label="$t('formDialogInputInsuranceCompany')"
+            @filter="insuranceCompanyFilter"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('noResults') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
           <VueDatePicker
             utc
             autoApply
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 85b0228f..25974df8 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { QSelect } from 'quasar';
+import { selectFilterOptionRefMod } from 'src/stores/utils';
 import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { locale } = useI18n();
@@ -17,11 +20,13 @@ const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
 const previousPassportReference = defineModel<string>(
   'previousPassportReference',
 );
-const passportTypeOption =
-  defineModel<{ label: string; value: string }[]>('passportTypeOption');
+const passportTypeOption = defineModel<{ label: string; value: string }[]>(
+  'passportTypeOption',
+  { required: true },
+);
 const passportIssuingCountryOption = defineModel<
   { label: string; value: string }[]
->('passportIssuingCountryOption');
+>('passportIssuingCountryOption', { required: true });
 
 defineProps<{
   title?: string;
@@ -31,6 +36,20 @@ defineProps<{
   separator?: boolean;
   prefixId: string;
 }>();
+
+const passportTypeOptions = ref<Record<string, unknown>[]>([]);
+const passportTypeFilter = selectFilterOptionRefMod(
+  passportTypeOption,
+  passportTypeOptions,
+  'label',
+);
+
+const passportIssuingCountryOptions = ref<Record<string, unknown>[]>([]);
+const passportIssuingCountryFilter = selectFilterOptionRefMod(
+  passportIssuingCountryOption,
+  passportIssuingCountryOptions,
+  'label',
+);
 </script>
 
 <template>
@@ -39,26 +58,40 @@ defineProps<{
   </div>
   <div class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
-      lazy-rules="ondemand"
-      :id="`${prefixId}-select-passport-type`"
-      :dense="dense"
-      :readonly="readonly"
       outlined
-      :hide-dropdown-icon="readonly"
-      hide-bottom-space
+      clearable
+      use-input
+      fill-input
       emit-value
       map-options
-      v-model="passportType"
+      hide-selected
+      hide-bottom-space
+      input-debounce="0"
       option-value="value"
       option-label="label"
-      :label="$t('formDialogInputPassportType')"
+      lazy-rules="ondemand"
+      v-model="passportType"
       class="col-md-3 col-12"
-      :options="passportTypeOption"
+      :dense="dense"
+      :readonly="readonly"
+      :hide-dropdown-icon="readonly"
+      :options="passportTypeOptions"
+      :id="`${prefixId}-select-passport-type`"
+      :label="$t('formDialogInputPassportType')"
       :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputPassportType'),
       ]"
-    />
+      @filter="passportTypeFilter"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ $t('noResults') }}
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
     <q-input
       lazy-rules="ondemand"
       :for="`${prefixId}-input-passport-no`"
@@ -101,26 +134,40 @@ defineProps<{
       ]"
     />
     <q-select
-      lazy-rules="ondemand"
-      :id="`${prefixId}-select-passport-country`"
-      :dense="dense"
-      :readonly="readonly"
       outlined
-      :hide-dropdown-icon="readonly"
-      hide-bottom-space
+      clearable
+      use-input
+      fill-input
       emit-value
       map-options
-      v-model="passportIssuingCountry"
+      hide-selected
+      hide-bottom-space
+      input-debounce="0"
       option-value="value"
       option-label="label"
-      :label="$t('formDialogInputPassportCountry')"
+      lazy-rules="ondemand"
       class="col-md-3 col-6"
-      :options="passportIssuingCountryOption"
+      v-model="passportIssuingCountry"
+      :dense="dense"
+      :readonly="readonly"
+      :hide-dropdown-icon="readonly"
+      :options="passportIssuingCountryOptions"
+      :id="`${prefixId}-select-passport-country`"
+      :label="$t('formDialogInputPassportCountry')"
       :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputPassportCountry'),
       ]"
-    />
+      @filter="passportIssuingCountryFilter"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ $t('noResults') }}
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
     <VueDatePicker
       :id="`${prefixId}-date-picker-passport-issueance`"
       utc
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 4bdb8373..4a133708 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
 import useAddressStore, {
   District,
@@ -7,6 +7,7 @@ import useAddressStore, {
   SubDistrict,
 } from 'src/stores/address';
 import { useI18n } from 'vue-i18n';
+import { selectFilterOptionRefMod } from 'src/stores/utils';
 
 const { locale } = useI18n();
 const adrressStore = useAddressStore();
@@ -32,8 +33,10 @@ const visaStayUntilDate = defineModel<Date | null | string>(
 const tm6Number = defineModel<string>('tm6Number');
 const entryDate = defineModel<Date | null | string>('entryDate');
 
-const visaTypeOption =
-  defineModel<{ label: string; value: string }[]>('visaTypeOption');
+const visaTypeOption = defineModel<{ label: string; value: string }[]>(
+  'visaTypeOption',
+  { required: true },
+);
 
 defineProps<{
   title?: string;
@@ -54,6 +57,13 @@ async function fetchProvince() {
 onMounted(async () => {
   await fetchProvince();
 });
+
+const visaTypeOptions = ref<Record<string, unknown>[]>([]);
+const visaTypeFilter = selectFilterOptionRefMod(
+  visaTypeOption,
+  visaTypeOptions,
+  'label',
+);
 </script>
 
 <template>
@@ -62,22 +72,36 @@ onMounted(async () => {
   </div>
   <div class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
-      lazy-rules="ondemand"
-      :id="`${prefixId}-select-visa-type`"
-      :dense="dense"
-      :readonly="readonly"
       outlined
-      :hide-dropdown-icon="readonly"
-      hide-bottom-space
+      clearable
+      use-input
+      fill-input
       emit-value
       map-options
+      hide-selected
+      hide-bottom-space
+      input-debounce="0"
       v-model="visaType"
       option-value="value"
       option-label="label"
-      :label="$t('formDialogInputVisaType')"
+      lazy-rules="ondemand"
       class="col-md-3 col-6"
-      :options="visaTypeOption"
-    />
+      :dense="dense"
+      :readonly="readonly"
+      :options="visaTypeOptions"
+      :hide-dropdown-icon="readonly"
+      :id="`${prefixId}-select-visa-type`"
+      :label="$t('formDialogInputVisaType')"
+      @filter="visaTypeFilter"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ $t('noResults') }}
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
     <!-- :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputVisaType'),
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index 8f701ac7..19cf0d92 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -3,16 +3,23 @@ import { onMounted, ref } from 'vue';
 import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
 import { EmployeeWorkCreate } from 'src/stores/employee/types';
 import { useI18n } from 'vue-i18n';
+import { selectFilterOptionRefMod } from 'src/stores/utils';
 
 const { locale } = useI18n();
 
 const employeeWork = defineModel<EmployeeWorkCreate[]>('employeeWork');
-const positionNameOption =
-  defineModel<{ label: string; value: string }[]>('positionNameOption');
-const jobTypeOption =
-  defineModel<{ label: string; value: string }[]>('jobTypeOption');
-const workplaceOption =
-  defineModel<{ label: string; value: string }[]>('workplaceOption');
+const positionNameOption = defineModel<{ label: string; value: string }[]>(
+  'positionNameOption',
+  { required: true },
+);
+const jobTypeOption = defineModel<{ label: string; value: string }[]>(
+  'jobTypeOption',
+  { required: true },
+);
+const workplaceOption = defineModel<{ label: string; value: string }[]>(
+  'workplaceOption',
+  { required: true },
+);
 
 const tab = ref();
 
@@ -54,6 +61,27 @@ function removeData(index: number) {
 onMounted(async () => {
   tab.value = 'tab0';
 });
+
+const positionNameOptions = ref<Record<string, unknown>[]>([]);
+const positionNameFilter = selectFilterOptionRefMod(
+  positionNameOption,
+  positionNameOptions,
+  'label',
+);
+
+const jobTypeOptions = ref<Record<string, unknown>[]>([]);
+const jobTypeFilter = selectFilterOptionRefMod(
+  jobTypeOption,
+  jobTypeOptions,
+  'label',
+);
+
+const workplaceOptions = ref<Record<string, unknown>[]>([]);
+const workplaceFilter = selectFilterOptionRefMod(
+  workplaceOption,
+  workplaceOptions,
+  'label',
+);
 </script>
 
 <template>
@@ -130,56 +158,98 @@ onMounted(async () => {
             v-model="work.ownerName"
           />
           <q-select
-            lazy-rules="ondemand"
-            :id="`${prefixId}-select-position-name`"
-            :dense="dense"
-            :readonly="readonly"
             outlined
-            :hide-dropdown-icon="readonly"
-            hide-bottom-space
+            clearable
+            use-input
+            fill-input
             emit-value
             map-options
+            hide-selected
+            hide-bottom-space
+            class="col-6"
+            input-debounce="0"
+            option-value="value"
+            option-label="label"
+            lazy-rules="ondemand"
             v-model="work.positionName"
-            option-value="value"
-            option-label="label"
+            :dense="dense"
+            :readonly="readonly"
+            :options="positionNameOptions"
+            :hide-dropdown-icon="readonly"
+            :id="`${prefixId}-select-position-name`"
             :label="$t('formDialogInputJobPosition')"
-            class="col-6"
-            :options="positionNameOption"
-          />
+            @filter="positionNameFilter"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('noResults') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
           <q-select
-            lazy-rules="ondemand"
-            :id="`${prefixId}-select-job-type`"
-            :dense="dense"
-            :readonly="readonly"
             outlined
-            :hide-dropdown-icon="readonly"
-            hide-bottom-space
+            clearable
+            use-input
+            fill-input
             emit-value
             map-options
+            hide-selected
+            hide-bottom-space
+            class="col-6"
+            input-debounce="0"
+            option-label="label"
+            option-value="value"
+            lazy-rules="ondemand"
             v-model="work.jobType"
-            option-value="value"
-            option-label="label"
-            :label="$t('formDialogInputJobType')"
-            class="col-6"
-            :options="jobTypeOption"
-          />
-          <q-select
-            lazy-rules="ondemand"
-            :id="`${prefixId}-select-province`"
             :dense="dense"
             :readonly="readonly"
-            outlined
+            :options="jobTypeOptions"
             :hide-dropdown-icon="readonly"
-            hide-bottom-space
+            :id="`${prefixId}-select-job-type`"
+            :label="$t('formDialogInputJobType')"
+            @filter="jobTypeFilter"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('noResults') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+          <q-select
+            outlined
+            clearable
+            use-input
+            fill-input
             emit-value
             map-options
-            v-model="work.workplace"
-            option-value="value"
-            option-label="label"
-            :label="$t('formDialogInputWorkPlace')"
+            hide-selected
+            hide-bottom-space
             class="col-6"
-            :options="workplaceOption"
-          />
+            input-debounce="0"
+            lazy-rules="ondemand"
+            option-label="label"
+            option-value="value"
+            v-model="work.workplace"
+            :dense="dense"
+            :readonly="readonly"
+            :options="workplaceOptions"
+            :hide-dropdown-icon="readonly"
+            :id="`${prefixId}-select-province`"
+            :label="$t('formDialogInputWorkPlace')"
+            @filter="workplaceFilter"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('noResults') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
           <q-input
             lazy-rules="ondemand"
             :for="`${prefixId}-input-work-end-date`"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 2febe14b..5452d52d 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -3006,7 +3006,7 @@ watch(isMainPage, () => {
         separator
         prefix-id="form-dialog"
         :type-customer="customerType"
-        :options-branch="branchOption"
+        v-model:options-branch="branchOption"
         v-model:registered-branch-id="formData.registeredBranchId"
         v-model:customer-name="formData.customerName"
         v-model:customer-name-en="formData.customerNameEN"
@@ -3635,7 +3635,7 @@ watch(isMainPage, () => {
             separator
             :readonly="!infoDrawerEdit"
             :type-customer="customerType"
-            :options-branch="branchOption"
+            v-model:options-branch="branchOption"
             v-model:registered-branch-id="formData.registeredBranchId"
             v-model:customer-name="formData.customerName"
             v-model:customer-name-en="formData.customerNameEN"
@@ -3866,7 +3866,7 @@ watch(isMainPage, () => {
             separator
             :readonly="true"
             :type-customer="customerType"
-            :options-branch="branchOption"
+            v-model:options-branch="branchOption"
             v-model:registered-branch-id="formData.registeredBranchId"
             v-model:customer-name="formData.customerName"
             v-model:customer-name-en="formData.customerNameEN"