fix(02): form by type option

src/components/02_personnel-management/FormByType.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import useUserStore from 'stores/user';
+import useOptionStore from 'stores/options';
 import { UserAttachmentDelete } from 'stores/user/types';
-import { dialog } from 'stores/utils';
+import { dialog, selectFilterOptionRefMod } from 'stores/utils';
 import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
-import { ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Icon } from '@iconify/vue';
+import { QSelect } from 'quasar';
 
 const { locale } = useI18n();
 const userStore = useUserStore();
+const optionStore = useOptionStore();
 
 const userId = defineModel<string>('userId');
 const userType = defineModel<string>('userType');
@@ -67,6 +70,60 @@ function deleteFile(name: string) {
     },
   });
 }
+
+const nationalityOptions = ref<Record<string, unknown>[]>([]);
+let nationalityFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+const trainingPlaceOptions = ref<Record<string, unknown>[]>([]);
+let trainingPlaceFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+const responsibleAreaOptions = ref<Record<string, unknown>[]>([]);
+let responsibleAreaFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+onMounted(() => {
+  if (optionStore.globalOption?.nationality) {
+    nationalityFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.nationality),
+      nationalityOptions,
+      'label',
+    );
+    trainingPlaceFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.training),
+      trainingPlaceOptions,
+      'label',
+    );
+    responsibleAreaFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.area),
+      responsibleAreaOptions,
+      'label',
+    );
+  }
+});
+
+watch(
+  () => optionStore.globalOption,
+  () => {
+    nationalityFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.nationality),
+      nationalityOptions,
+      'label',
+    );
+    trainingPlaceFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.training),
+      trainingPlaceOptions,
+      'label',
+    );
+  },
+);
 </script>
 <template>
   <div class="row col-12">
@@ -224,23 +281,37 @@ function deleteFile(name: string) {
           </template>
         </VueDatePicker>
         <q-select
-          lazy-rules="ondemand"
-          id="input-responsible-area"
           v-if="userType === 'MESSENGER'"
-          :dense="dense"
           outlined
-          :readonly="readonly"
-          :hide-dropdown-icon="readonly"
+          clearable
+          use-input
+          fill-input
           emit-value
           map-options
-          options-dense
-          :label="$t('formDialogInputResponsibleArea')"
+          hide-selected
+          hide-bottom-space
           class="col-12"
+          input-debounce="0"
           option-label="label"
-          option-value="label"
+          option-value="value"
+          lazy-rules="ondemand"
+          id="input-responsible-area"
           v-model="responsibleArea"
-          :options="userStore.userOption.responsibleAreaOpts"
-        />
+          :dense="dense"
+          :readonly="readonly"
+          :hide-dropdown-icon="readonly"
+          :label="$t('formDialogInputResponsibleArea')"
+          :options="responsibleAreaOptions"
+          @filter="responsibleAreaFilter"
+        >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey">
+                {{ $t('noResults') }}
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
       </div>
       <div
         v-if="userType === 'DELEGATE'"
@@ -265,56 +336,98 @@ function deleteFile(name: string) {
         style="margin-left: 0px; padding-left: 0px"
       >
         <q-select
+          outlined
+          clearable
+          use-input
+          fill-input
+          emit-value
+          map-options
+          hide-selected
+          hide-bottom-space
+          input-debounce="0"
+          option-value="value"
+          option-label="label"
           lazy-rules="ondemand"
+          class="col-md-3 col-6"
+          v-model="sourceNationality"
           id="input-source-nationality"
           :dense="dense"
-          outlined
           :readonly="readonly"
           :hide-dropdown-icon="readonly"
+          :label="$t('formDialogInputSourceNationality')"
+          :options="nationalityOptions"
+          @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>
+        <q-select
+          outlined
+          clearable
+          use-input
+          fill-input
           emit-value
           map-options
-          options-dense
-          :label="$t('formDialogInputSourceNationality')"
-          class="col-md-3 col-6"
+          hide-selected
+          hide-bottom-space
+          input-debounce="0"
+          option-value="value"
           option-label="label"
-          option-value="label"
-          v-model="sourceNationality"
-          :options="userStore.userOption.nationalityOpts"
-        />
-        <q-select
+          class="col-md-3 col-6"
           lazy-rules="ondemand"
+          v-model="importNationality"
           id="input-import-nationality"
           :dense="dense"
-          outlined
           :readonly="readonly"
           :hide-dropdown-icon="readonly"
+          :label="$t('formDialogInputImportNationality')"
+          :options="nationalityOptions"
+          @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>
+        <q-select
+          outlined
+          clearable
+          use-input
+          fill-input
           emit-value
           map-options
-          options-dense
-          :label="$t('formDialogInputImportNationality')"
-          class="col-md-3 col-6"
+          hide-selected
+          hide-bottom-space
+          input-debounce="0"
           option-label="label"
           option-value="label"
-          v-model="importNationality"
-          :options="userStore.userOption.nationalityOpts"
-        />
-        <q-select
           lazy-rules="ondemand"
+          class="col-md-6 col-12"
+          v-model="trainingPlace"
           id="select-trainig-place"
           :dense="dense"
-          outlined
           :readonly="readonly"
           :hide-dropdown-icon="readonly"
-          emit-value
-          map-options
-          options-dense
           :label="$t('formDialogInputTrainingPlace')"
-          class="col-md-6 col-12"
-          option-label="label"
-          option-value="label"
-          v-model="trainingPlace"
-          :options="userStore.userOption.trainingPlaceOpts"
-        />
+          :options="trainingPlaceOptions"
+          @filter="trainingPlaceFilter"
+        >
+          <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-checkpoint"