refactor(02): input select

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"