From 3b0510922b131e1019a6c316d7fe2b32c5d011b6 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 30 Jul 2024 04:04:17 +0000
Subject: [PATCH] refactor(02): input select

---
 .../02_personnel-management/FormAddress.vue   | 284 ++++++++++++++----
 .../FormInformation.vue                       | 176 ++++++++---
 .../02_personnel-management/FormPerson.vue    | 123 +++++---
 .../02_personnel-management/MainPage.vue      |   4 -
 4 files changed, 428 insertions(+), 159 deletions(-)

diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
index 1039e3c8..b0cbe34e 100644
--- a/src/components/02_personnel-management/FormAddress.vue
+++ b/src/components/02_personnel-management/FormAddress.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { onMounted, watch, reactive } from 'vue';
+import { onMounted, watch, reactive, ref } from 'vue';
 import useAddressStore, {
   District,
   Province,
   SubDistrict,
 } from 'src/stores/address';
+import { selectFilterOptionRefMod } from 'src/stores/utils';
+import { QSelect } from 'quasar';
 
 defineProps<{
   title?: string;
@@ -43,6 +45,18 @@ async function fetchProvince() {
   const result = await adrressStore.fetchProvince();
 
   if (result) addrOptions.provinceOps = result;
+
+  provinceFilter = selectFilterOptionRefMod(
+    ref(addrOptions.provinceOps),
+    provinceOptions,
+    'name',
+  );
+
+  provinceEnFilter = selectFilterOptionRefMod(
+    ref(addrOptions.provinceOps),
+    provinceOptions,
+    'nameEN',
+  );
 }
 
 async function fetchDistrict() {
@@ -50,6 +64,18 @@ async function fetchDistrict() {
 
   const result = await adrressStore.fetchDistrictByProvinceId(provinceId.value);
   if (result) addrOptions.districtOps = result;
+
+  districtFilter = selectFilterOptionRefMod(
+    ref(addrOptions.districtOps),
+    districtOptions,
+    'name',
+  );
+
+  districtEnFilter = selectFilterOptionRefMod(
+    ref(addrOptions.districtOps),
+    districtOptions,
+    'nameEN',
+  );
 }
 
 async function fetchSubDistrict() {
@@ -58,6 +84,18 @@ async function fetchSubDistrict() {
     districtId.value,
   );
   if (result) addrOptions.subDistrictOps = result;
+
+  subDistrictFilter = selectFilterOptionRefMod(
+    ref(addrOptions.subDistrictOps),
+    subDistrictOptions,
+    'name',
+  );
+
+  subDistrictEnFilter = selectFilterOptionRefMod(
+    ref(addrOptions.subDistrictOps),
+    subDistrictOptions,
+    'nameEN',
+  );
 }
 
 async function selectSubDistrict(id: string) {
@@ -68,6 +106,36 @@ async function selectSubDistrict(id: string) {
       .map((x) => x.zipCode)[0] ?? '';
 }
 
+const provinceOptions = ref<Record<string, unknown>[]>([]);
+let provinceFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+let provinceEnFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+const districtOptions = ref<Record<string, unknown>[]>([]);
+let districtFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+let districtEnFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+const subDistrictOptions = ref<Record<string, unknown>[]>([]);
+let subDistrictFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+let subDistrictEnFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
 onMounted(async () => {
   await fetchProvince();
   await fetchDistrict();
@@ -124,15 +192,15 @@ watch(districtId, fetchSubDistrict);
       </div>
       <div class="col-md-9 col-12 row q-col-gutter-md">
         <q-input
-          lazy-rules="ondemand"
-          :for="`${prefixId}-${id !== undefined ? `input-address-${id}` : 'input-address'}`"
-          :dense="dense"
           outlined
-          :readonly="readonly || sameWithEmployer"
           hide-bottom-space
-          :label="$t('address')"
           class="col-12"
           v-model="address"
+          lazy-rules="ondemand"
+          :dense="dense"
+          :label="$t('address')"
+          :readonly="readonly || sameWithEmployer"
+          :for="`${prefixId}-${id !== undefined ? `input-address-${id}` : 'input-address'}`"
           :rules="
             disabledRule
               ? []
@@ -144,21 +212,26 @@ watch(districtId, fetchSubDistrict);
           "
         />
         <q-select
-          lazy-rules="ondemand"
-          :id="`${prefixId}-${id !== undefined ? `select-province-${id}` : 'select-province'}`"
-          :dense="dense"
-          :readonly="readonly || sameWithEmployer"
           outlined
-          :hide-dropdown-icon="readonly || sameWithEmployer"
-          hide-bottom-space
+          clearable
+          use-input
+          fill-input
           emit-value
           map-options
-          v-model="provinceId"
+          hide-selected
+          hide-bottom-space
           option-value="id"
+          input-debounce="0"
           option-label="name"
-          :label="$t('province')"
+          v-model="provinceId"
+          lazy-rules="ondemand"
           class="col-md-3 col-6"
-          :options="addrOptions.provinceOps"
+          :dense="dense"
+          :label="$t('province')"
+          :options="provinceOptions"
+          :readonly="readonly || sameWithEmployer"
+          :hide-dropdown-icon="readonly || sameWithEmployer"
+          :id="`${prefixId}-${id !== undefined ? `select-province-${id}` : 'select-province'}`"
           :rules="
             disabledRule
               ? []
@@ -168,25 +241,39 @@ watch(districtId, fetchSubDistrict);
                     $t('formDialogInputProvinceValidate'),
                 ]
           "
+          @filter="provinceFilter"
           @update:model-value="districtId = subDistrictId = zipCode = null"
-        />
+        >
+          <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}-${id !== undefined ? `select-district-${id}` : 'select-district'}`"
-          :dense="dense"
-          :readonly="readonly || sameWithEmployer"
           outlined
-          :hide-dropdown-icon="readonly || sameWithEmployer"
-          hide-bottom-space
+          clearable
+          use-input
+          fill-input
           emit-value
           map-options
-          v-model="districtId"
+          hide-selected
+          hide-bottom-space
           option-value="id"
+          input-debounce="0"
           option-label="name"
-          :label="$t('district')"
+          v-model="districtId"
+          lazy-rules="ondemand"
           class="col-md-3 col-6"
-          :options="addrOptions.districtOps"
+          :dense="dense"
+          :label="$t('district')"
+          :options="districtOptions"
+          :readonly="readonly || sameWithEmployer"
+          :hide-dropdown-icon="readonly || sameWithEmployer"
+          :id="`${prefixId}-${id !== undefined ? `select-district-${id}` : 'select-district'}`"
           :rules="
             disabledRule
               ? []
@@ -196,24 +283,38 @@ watch(districtId, fetchSubDistrict);
                     $t('formDialogInputDistrictValidate'),
                 ]
           "
+          @filter="districtFilter"
           @update:model-value="subDistrictId = zipCode = null"
-        />
+        >
+          <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}-${id !== undefined ? `select-sub-district-${id}` : 'select-sub-district'}`"
-          :dense="dense"
-          :readonly="readonly || sameWithEmployer"
           outlined
-          :hide-dropdown-icon="readonly || sameWithEmployer"
-          hide-bottom-space
+          clearable
+          use-input
+          fill-input
           emit-value
           map-options
-          v-model="subDistrictId"
+          hide-selected
+          hide-bottom-space
           option-value="id"
+          input-debounce="0"
           option-label="name"
-          :label="$t('subDistrict')"
+          lazy-rules="ondemand"
           class="col-md-3 col-6"
-          :options="addrOptions.subDistrictOps"
+          v-model="subDistrictId"
+          :dense="dense"
+          :label="$t('subDistrict')"
+          :options="subDistrictOptions"
+          :readonly="readonly || sameWithEmployer"
+          :hide-dropdown-icon="readonly || sameWithEmployer"
+          :id="`${prefixId}-${id !== undefined ? `select-sub-district-${id}` : 'select-sub-district'}`"
           :rules="
             disabledRule
               ? []
@@ -224,7 +325,16 @@ watch(districtId, fetchSubDistrict);
                 ]
           "
           @update:model-value="(v: string) => selectSubDistrict(v)"
-        />
+          @filter="subDistrictFilter"
+        >
+          <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}-${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
@@ -264,21 +374,26 @@ watch(districtId, fetchSubDistrict);
           "
         />
         <q-select
-          lazy-rules="ondemand"
-          :id="`${prefixId}-${id !== undefined ? `select-province-en-${id}` : 'select-province-en'}`"
-          hide-bottom-space
-          :dense="dense"
-          :readonly="readonly || sameWithEmployer"
           outlined
-          :hide-dropdown-icon="readonly || sameWithEmployer"
+          clearable
+          use-input
+          fill-input
           emit-value
           map-options
-          v-model="provinceId"
+          hide-selected
+          hide-bottom-space
           option-value="id"
+          input-debounce="0"
+          v-model="provinceId"
+          lazy-rules="ondemand"
           option-label="nameEN"
-          :label="$t('province')"
           class="col-md-3 col-6"
-          :options="addrOptions.provinceOps"
+          :dense="dense"
+          :label="$t('province')"
+          :options="provinceOptions"
+          :readonly="readonly || sameWithEmployer"
+          :hide-dropdown-icon="readonly || sameWithEmployer"
+          :id="`${prefixId}-${id !== undefined ? `select-province-en-${id}` : 'select-province-en'}`"
           :rules="
             disabledRule
               ? []
@@ -289,23 +404,37 @@ watch(districtId, fetchSubDistrict);
                 ]
           "
           @update:model-value="districtId = subDistrictId = zipCode = null"
-        />
+          @filter="provinceEnFilter"
+        >
+          <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}-${id !== undefined ? `select-district-en-${id}` : 'select-district-en'}`"
-          hide-bottom-space
-          :dense="dense"
-          :readonly="readonly || sameWithEmployer"
           outlined
-          :hide-dropdown-icon="readonly || sameWithEmployer"
+          clearable
+          use-input
+          fill-input
           emit-value
           map-options
-          v-model="districtId"
+          hide-selected
+          hide-bottom-space
           option-value="id"
+          input-debounce="0"
+          v-model="districtId"
+          lazy-rules="ondemand"
           option-label="nameEN"
-          :label="$t('district')"
           class="col-md-3 col-6"
-          :options="addrOptions.districtOps"
+          :dense="dense"
+          :label="$t('district')"
+          :options="districtOptions"
+          :readonly="readonly || sameWithEmployer"
+          :hide-dropdown-icon="readonly || sameWithEmployer"
+          :id="`${prefixId}-${id !== undefined ? `select-district-en-${id}` : 'select-district-en'}`"
           :rules="
             disabledRule
               ? []
@@ -316,23 +445,37 @@ watch(districtId, fetchSubDistrict);
                 ]
           "
           @update:model-value="subDistrictId = zipCode = null"
-        />
+          @filter="districtEnFilter"
+        >
+          <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}-${id !== undefined ? `select-sub-district-en-${id}` : 'select-sub-district-en'}`"
-          hide-bottom-space
-          :dense="dense"
-          :readonly="readonly || sameWithEmployer"
           outlined
-          :hide-dropdown-icon="readonly || sameWithEmployer"
+          clearable
+          use-input
+          fill-input
           emit-value
           map-options
-          v-model="subDistrictId"
+          hide-selected
+          hide-bottom-space
           option-value="id"
+          input-debounce="0"
+          lazy-rules="ondemand"
           option-label="nameEN"
-          :label="$t('subDistrict')"
           class="col-md-3 col-6"
-          :options="addrOptions.subDistrictOps"
+          v-model="subDistrictId"
+          :dense="dense"
+          :label="$t('subDistrict')"
+          :options="subDistrictOptions"
+          :readonly="readonly || sameWithEmployer"
+          :hide-dropdown-icon="readonly || sameWithEmployer"
+          :id="`${prefixId}-${id !== undefined ? `select-sub-district-en-${id}` : 'select-sub-district-en'}`"
           :rules="
             disabledRule
               ? []
@@ -343,7 +486,16 @@ watch(districtId, fetchSubDistrict);
                 ]
           "
           @update:model-value="(v: string) => selectSubDistrict(v)"
-        />
+          @filter="subDistrictEnFilter"
+        >
+          <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"
           hide-bottom-space
diff --git a/src/components/02_personnel-management/FormInformation.vue b/src/components/02_personnel-management/FormInformation.vue
index 03b5d9f4..61c620a5 100644
--- a/src/components/02_personnel-management/FormInformation.vue
+++ b/src/components/02_personnel-management/FormInformation.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import useUserStore from 'src/stores/user';
-import { onMounted } from 'vue';
+import { selectFilterOptionRefMod } from 'src/stores/utils';
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const userStore = useUserStore();
+const { t } = useI18n();
 
 const hqId = defineModel<string | null | undefined>('hqId');
 const brId = defineModel<string | null | undefined>('brId');
@@ -29,6 +32,39 @@ async function selectHq(id: string) {
   }
 }
 
+const hqOptions = ref<Record<string, unknown>[]>([]);
+const hqFilter = selectFilterOptionRefMod(
+  ref(userStore.userOption.hqOpts),
+  hqOptions,
+  'label',
+);
+
+const brOptions = ref<Record<string, unknown>[]>([]);
+const brFilter = selectFilterOptionRefMod(
+  ref(userStore.userOption.brOpts),
+  brOptions,
+  'label',
+);
+
+const userTypeOptions = ref<Record<string, unknown>[]>([]);
+const userTypeFilter = selectFilterOptionRefMod(
+  ref(
+    userStore.userOption.userTypeOpts.map((v) => ({
+      label: t(v.label),
+      value: v.value,
+    })),
+  ),
+  userTypeOptions,
+  'label',
+);
+
+const roleOptions = ref<Record<string, unknown>[]>([]);
+const roleFilter = selectFilterOptionRefMod(
+  ref(userStore.userOption.roleOpts),
+  roleOptions,
+  'label',
+);
+
 onMounted(async () => {
   if (userStore.userOption.hqOpts[0].value)
     await userStore.fetchBrOption(userStore.userOption.hqOpts[0].value);
@@ -40,44 +76,69 @@ onMounted(async () => {
   </div>
   <div class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
-      lazy-rules="ondemand"
-      id="select-hq-id"
-      :dense="dense"
       outlined
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
+      clearable
+      use-input
+      fill-input
       emit-value
       map-options
-      options-dense
+      hide-selected
       hide-bottom-space
-      class="col-md-4 col-6"
       v-model="hqId"
+      id="select-hq-id"
+      input-debounce="0"
       option-label="label"
       option-value="value"
+      lazy-rules="ondemand"
+      class="col-md-4 col-6"
+      :dense="dense"
+      :readonly="readonly"
+      :hide-dropdown-icon="readonly"
       :label="$t('formDialogInputCode')"
-      :options="userStore.userOption.hqOpts"
+      :options="hqOptions"
       :rules="[(val: string) => !!val || $t('formDialogInputHqIdValidate')]"
       @update:model-value="(val: string) => selectHq(val)"
-    />
+      @filter="hqFilter"
+    >
+      <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="select-br-id"
-      :dense="dense"
       outlined
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
+      clearable
+      use-input
+      fill-input
       emit-value
       map-options
-      options-dense
-      clearable
+      hide-selected
       hide-bottom-space
-      class="col-md-4 col-6"
       v-model="brId"
-      :label="$t('formDialogInputBrId')"
+      id="select-br-id"
+      input-debounce="0"
       option-label="label"
       option-value="value"
-      :options="userStore.userOption.brOpts"
-    />
+      lazy-rules="ondemand"
+      class="col-md-4 col-6"
+      :dense="dense"
+      :readonly="readonly"
+      :hide-dropdown-icon="readonly"
+      :label="$t('formDialogInputBrId')"
+      :options="brOptions"
+      @filter="brFilter"
+    >
+      <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="input-username"
@@ -97,54 +158,69 @@ onMounted(async () => {
       ]"
     />
     <q-select
+      outlined
+      clearable
+      use-input
+      fill-input
+      emit-value
+      map-options
+      hide-selected
+      hide-bottom-space
+      class="col-6"
+      v-model="userType"
+      input-debounce="0"
+      option-value="value"
+      option-label="label"
       lazy-rules="ondemand"
       id="select-user-type"
       :dense="dense"
-      outlined
       :readonly="readonly"
       :hide-dropdown-icon="readonly"
-      emit-value
-      map-options
-      options-dense
-      hide-bottom-space
-      class="col-6"
-      option-value="value"
       :label="$t('formDialogInputUserType')"
-      v-model="userType"
-      :options="userStore.userOption.userTypeOpts"
+      :options="userTypeOptions"
       :rules="[(val: string) => !!val || $t('formDialogInputUserTypeValidate')]"
+      @filter="userTypeFilter"
     >
-      <template v-slot:option="scope">
-        <q-item v-if="scope.opt" v-bind="scope.itemProps">
-          {{ $t(scope.opt.label) }}
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ $t('noResults') }}
+          </q-item-section>
         </q-item>
       </template>
-
-      <template v-slot:selected-item="scope">
-        <div v-if="scope.opt">
-          {{ $t(scope.opt.label) }}
-        </div>
-      </template>
     </q-select>
     <q-select
+      outlined
+      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"
       id="select-user-role"
       :dense="dense"
-      outlined
+      v-model="userRole"
       :readonly="readonly"
       :hide-dropdown-icon="readonly"
-      emit-value
-      map-options
-      options-dense
-      hide-bottom-space
-      class="col-6"
       :label="$t('formDialogInputUserRole')"
-      option-label="label"
-      option-value="value"
-      v-model="userRole"
-      :options="userStore.userOption.roleOpts"
+      :options="roleOptions"
       :rules="[(val: string) => !!val || $t('formDialogInputUserRoleValidate')]"
-    />
+      @filter="roleFilter"
+    >
+      <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"
       id="input-user-code"
       :dense="dense"
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 7ad52100..07520504 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import useOptionStore from 'src/stores/options';
-import { selectOptionFilter } from 'src/stores/utils';
+import { selectFilterOptionRefMod } from 'src/stores/utils';
 import {
   dateFormat,
   calculateAge,
   parseAndFormatDate,
   disabledAfterToday,
 } from 'src/utils/datetime';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { locale } = useI18n();
@@ -22,11 +23,19 @@ const gender = defineModel<string>('gender');
 const birthDate = defineModel<Date | string | null>('birthDate');
 const nationality = defineModel<string>('nationality');
 
-const { options: genderOptions, filter: genderFilter } = selectOptionFilter(
-  optionStore.globalOption.gender,
+const genderOptions = ref<Record<string, unknown>[]>([]);
+const genderFilter = selectFilterOptionRefMod(
+  ref(optionStore.globalOption.gender),
+  genderOptions,
+  'label',
+);
+
+const nationalityOptions = ref<Record<string, unknown>[]>([]);
+const nationalityFilter = selectFilterOptionRefMod(
+  ref(optionStore.globalOption.nationality),
+  nationalityOptions,
+  'label',
 );
-const { options: nationalityOptions, filter: nationalityFilter } =
-  selectOptionFilter(optionStore.globalOption.nationality);
 
 defineProps<{
   dense?: boolean;
@@ -121,24 +130,37 @@ defineProps<{
       v-model="email"
     />
     <q-select
-      lazy-rules="ondemand"
       v-if="!employee"
-      :id="`${prefixId}-select-gender`"
-      :dense="dense"
       outlined
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
+      clearable
+      use-input
+      fill-input
       emit-value
       map-options
-      :label="$t('formDialogInputGender')"
-      class="col-md-3 col-6"
+      hide-selected
+      hide-bottom-space
+      v-model="gender"
+      input-debounce="0"
       option-label="label"
       option-value="value"
-      v-model="gender"
-      use-input
-      @filter="genderFilter"
+      lazy-rules="ondemand"
+      class="col-md-3 col-6"
+      :dense="dense"
+      :readonly="readonly"
       :options="genderOptions"
-    />
+      :hide-dropdown-icon="readonly"
+      :id="`${prefixId}-select-gender`"
+      :label="$t('formDialogInputGender')"
+      @filter="genderFilter"
+    >
+      <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}-input-birth-date`"
@@ -218,54 +240,77 @@ defineProps<{
       "
     />
     <q-select
-      lazy-rules="ondemand"
       v-if="employee"
-      :id="`${prefixId}-select-gender`"
-      hide-bottom-space
-      :dense="dense"
       outlined
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
+      clearable
+      use-input
+      fill-input
       emit-value
       map-options
-      :label="$t('formDialogInputGender')"
-      class="col-md-3 col-6"
+      hide-selected
+      hide-bottom-space
+      input-debounce="0"
       option-label="label"
       option-value="value"
-      use-input
+      lazy-rules="ondemand"
+      class="col-md-3 col-6"
+      :dense="dense"
       v-model="gender"
-      @filter="genderFilter"
+      :readonly="readonly"
       :options="genderOptions"
+      :hide-dropdown-icon="readonly"
+      :id="`${prefixId}-select-gender`"
+      :label="$t('formDialogInputGender')"
       :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputGender'),
       ]"
-    />
+      @filter="genderFilter"
+    >
+      <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"
       v-if="employee"
-      :id="`${prefixId}-select-nationality`"
-      hide-bottom-space
-      :dense="dense"
       outlined
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
+      clearable
+      use-input
+      fill-input
       emit-value
       map-options
-      options-dense
-      :label="$t('formDialogInputNationality')"
-      class="col-md-3 col-6"
+      hide-selected
+      hide-bottom-space
+      input-debounce="0"
       option-label="label"
       option-value="label"
       v-model="nationality"
+      lazy-rules="ondemand"
+      class="col-md-3 col-6"
+      :dense="dense"
+      :readonly="readonly"
       :options="nationalityOptions"
-      use-input
-      @filter="nationalityFilter"
+      :hide-dropdown-icon="readonly"
+      :id="`${prefixId}-select-nationality`"
+      :label="$t('formDialogInputNationality')"
       :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputNationality'),
       ]"
-    />
+      @filter="nationalityFilter"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ $t('noResults') }}
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
   </div>
   <q-separator
     v-if="separator"
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index cf908bb4..f5a0c9cb 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -599,10 +599,6 @@ onMounted(async () => {
   modeView.value = $q.screen.lt.md ? true : false;
 
   await fetchUserList();
-
-  userStore.userOption.roleOpts.length === 0
-    ? await userStore.fetchRoleOption()
-    : '';
   if (optionStore.globalOption) {
     userStore.userOption.genderOpts = optionStore.globalOption.gender;
     userStore.userOption.responsibleAreaOpts = optionStore.globalOption.area;