refactor(02): input select

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"