From a534bfaa135da5aefe6edb130bb2a347b195233e Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 26 Jul 2024 11:37:07 +0700
Subject: [PATCH] feat: enable input on select

---
 .../02_personnel-management/FormPerson.vue    | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 4cf511c6..7ad52100 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import useOptionStore from 'src/stores/options';
+import { selectOptionFilter } from 'src/stores/utils';
 import {
   dateFormat,
   calculateAge,
@@ -21,6 +22,12 @@ 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 { options: nationalityOptions, filter: nationalityFilter } =
+  selectOptionFilter(optionStore.globalOption.nationality);
+
 defineProps<{
   dense?: boolean;
   outlined?: boolean;
@@ -128,7 +135,9 @@ defineProps<{
       option-label="label"
       option-value="value"
       v-model="gender"
-      :options="optionStore.globalOption.gender"
+      use-input
+      @filter="genderFilter"
+      :options="genderOptions"
     />
 
     <VueDatePicker
@@ -223,8 +232,10 @@ defineProps<{
       class="col-md-3 col-6"
       option-label="label"
       option-value="value"
+      use-input
       v-model="gender"
-      :options="optionStore.globalOption.gender"
+      @filter="genderFilter"
+      :options="genderOptions"
       :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputGender'),
@@ -247,7 +258,9 @@ defineProps<{
       option-label="label"
       option-value="label"
       v-model="nationality"
-      :options="optionStore.globalOption.nationality"
+      :options="nationalityOptions"
+      use-input
+      @filter="nationalityFilter"
       :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputNationality'),