From 46cd97fb50a2b570b129a9a53f06b0cfec7cccee Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 29 Sep 2023 13:54:17 +0700
Subject: [PATCH] filter input

---
 .../components/3_result/DialogForm.vue        |  20 ++-
 .../components/3_result/Dialogbody.vue        |  24 ++-
 .../components/4_Allocate/DialogForm.vue      |  26 +++-
 .../components/4_Allocate/Main.vue            |   2 +-
 .../components/5_Borrow/DialogForm.vue        |  60 +++++++-
 .../07_insignia/components/5_Borrow/Main.vue  | 140 ++++++++++++++----
 .../components/report/Report_02.vue           |  20 ++-
 7 files changed, 243 insertions(+), 49 deletions(-)

diff --git a/src/modules/07_insignia/components/3_result/DialogForm.vue b/src/modules/07_insignia/components/3_result/DialogForm.vue
index 7270f401e..2555ecbc8 100644
--- a/src/modules/07_insignia/components/3_result/DialogForm.vue
+++ b/src/modules/07_insignia/components/3_result/DialogForm.vue
@@ -40,7 +40,7 @@ const affiliationReceived = ref<string>("");
 const receivedate = ref<Date | null>();
 const announceDate = ref<Date | null>();
 const invoiceDate = ref<Date | null>(null);
-
+const filterinsigniaOp2 = ref<any>(DataStore.insigniaOp2)
 const employeeClass = ref<string>("");
 const employeeClassOps = ref<DataOption[]>([
   { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
@@ -276,6 +276,19 @@ const searchcardid = () => {
     } else notifyError($q, "ไม่พบข้อมูลเลขบัตรประชาชนนี้");
   }
 };
+const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'insigniaOp2') {
+      brand.value = ''
+      filterinsigniaOp2.value = DataStore.insigniaOp2.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+
+    }
+  )
+}
 </script>
 
 <template>
@@ -398,14 +411,17 @@ const searchcardid = () => {
                 emit-value
                 map-options
                 option-label="name"
-                :options="DataStore.insigniaOp2"
+                :options="filterinsigniaOp2"
                 option-value="id"
                 :readonly="false"
+                use-input
                 :borderless="false"
                 style="min-width: 150px"
                 :rules="[
                   (val) => !!val || 'กรุณากรอกชื่อชั้นตราเครื่องราชอิสริยาภรณ์',
                 ]"
+                @filter="(inputValue:any,doneFn:Function) => 
+                filterSelector(inputValue, doneFn,'insigniaOp2') "
               />
             </div>
             <div class="col-xs-12 col-sm-6">
diff --git a/src/modules/07_insignia/components/3_result/Dialogbody.vue b/src/modules/07_insignia/components/3_result/Dialogbody.vue
index 201f817be..e2ac73af1 100644
--- a/src/modules/07_insignia/components/3_result/Dialogbody.vue
+++ b/src/modules/07_insignia/components/3_result/Dialogbody.vue
@@ -124,18 +124,21 @@ onMounted(()=>{
   <q-dialog v-model="props.modal" persistent>
     <q-card style="min-width: 900px">
       <q-toolbar>
-        <q-toolbar-title v-if="props.fileCheck === null" class="text-subtitle2 text-bold">รับเครื่องราชฯ</q-toolbar-title>
-        <q-toolbar-title v-else class="text-subtitle2 text-bold">คืนเครื่องราชฯ</q-toolbar-title>
+        <q-toolbar-title  class="text-subtitle2 text-bold">รับ-คืนเครื่องราชฯ</q-toolbar-title>
         <q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
       </q-toolbar>
       <q-separator />
 
       <q-form ref="myForm">
         <div class="q-pa-md bg-grey-1">
-          <div v-if="props.fileCheck === null" class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+          <div  class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-12 text-weight-bold text-grey-7">
+                รับเครื่องราชฯ
+              </div>
               <div class="col-xs-12 col-sm-4">
+                
                 <datepicker menu-class-name="modalfix" v-model="Datereceive" :locale="'th'" autoApply borderless
-                  :enableTimePicker="false" week-start="0">
+                  :enableTimePicker="false" week-start="0" :readonly="fileCheck !== null">
                   <template #year="{ year }">
                     {{ year + 543 }}
                   </template>
@@ -145,7 +148,7 @@ onMounted(()=>{
                   <template #trigger>
                     <q-input dense borderless outlined lazy-rules :rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
                       hide-bottom-space :model-value="Datereceive != null ? date2Thai(Datereceive) : undefined
-                        " :label="`${'วันที่ได้รับ'}`" clearable @clear="clearReceiveDate">
+                        " :label="`${'วันที่ได้รับ'}`" clearable @clear="clearReceiveDate" :disable="fileCheck !== null">
                       <template v-slot:prepend>
                         <q-icon name="event" class="cursor-pointer" color="primary">
                         </q-icon>
@@ -158,7 +161,7 @@ onMounted(()=>{
               <div class="col-xs-12 col-sm-4">
 
                 <q-file outlined dense v-model="files" label="ไฟล์หลักฐานการรับ" lazy-rules
-                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']" hide-bottom-space>
+                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']" hide-bottom-space :disable="fileCheck !== null">
                   <template v-slot:prepend>
                     <q-icon name="attach_file" color="primary" />
                   </template>
@@ -167,10 +170,15 @@ onMounted(()=>{
               <div class="col-xs-12 col-sm-4">
                 <q-select  hide-bottom-space :options="OrgList" dense borderless option-label="name" option-value="id"
                   emit-value map-options outlined v-model="OrganazationId" lazy-rules :label="`หน่วยงานที่รับ`"
-                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']" />
+                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']" :disable="fileCheck !== null"/>
               </div>
             </div>
-            <div v-if="props.fileCheck !== null" class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-12 q-my-sm">            <q-separator/></div>
+
+            <div  class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+              <div class="col-12 text-weight-bold text-grey-7">
+                คืนเครื่องราชฯ
+              </div>
               <div class="col-xs-12 col-sm-4">
                 
                 <datepicker menu-class-name="modalfix" v-model="Datereturn" :locale="'th'" autoApply borderless
diff --git a/src/modules/07_insignia/components/4_Allocate/DialogForm.vue b/src/modules/07_insignia/components/4_Allocate/DialogForm.vue
index 52342e6a8..0d0c23346 100644
--- a/src/modules/07_insignia/components/4_Allocate/DialogForm.vue
+++ b/src/modules/07_insignia/components/4_Allocate/DialogForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch,onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -14,6 +14,7 @@ const routeName = router.currentRoute.value.name;
 const amount = ref<number | null>();
 const Org = ref<string | null>("");
 const grandCross = ref<string | null>("");
+const filterInsigniaOp = ref<any>()
 const closeModal = () => {
   props.close();
 };
@@ -41,7 +42,22 @@ watch(props, () => {
     amount.value = null;
   }
 });
+watch(() => props.insigniaList, (newVal) => {
+      filterInsigniaOp.value = newVal;
+    });
+    const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'filterInsigniaOp') {
+      grandCross.value = null
+      filterInsigniaOp.value = props.insigniaList.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
 
+    }
+  )
+}
 const clickSave = () => {
   if (myForm.value !== null) {
     myForm.value.validate().then(async (success) => {
@@ -67,12 +83,14 @@ const clickSave = () => {
             <div class="col-6">
               <q-select
                 hide-bottom-space
-                :options="insigniaList"
+                :options="filterInsigniaOp"
                 dense
                 borderless
+                use-input
+                lazy-rules
                 option-label="name"
                 option-value="id"
-                emit-value
+                emit-valuez
                 map-options
                 outlined
                 options-cover
@@ -83,6 +101,8 @@ const clickSave = () => {
                     ? `เครื่องราชฯ`
                     : `เลือกหน่วยงาน`
                 "
+                @filter="(inputValue:any,doneFn:Function) => 
+                filterSelector(inputValue, doneFn,'filterInsigniaOp') "
               />
             </div>
             <div class="col-xs-12 col-sm-6">
diff --git a/src/modules/07_insignia/components/4_Allocate/Main.vue b/src/modules/07_insignia/components/4_Allocate/Main.vue
index 2bcce1acc..5f59ec1da 100644
--- a/src/modules/07_insignia/components/4_Allocate/Main.vue
+++ b/src/modules/07_insignia/components/4_Allocate/Main.vue
@@ -176,7 +176,7 @@ watch(tab, () => {
   if (!a) {
     DataStore.insignia = "";
   }
-  filterInsigniaOp.value = insigniaOp.value
+   filterInsigniaOp.value = insigniaOp.value
   fecthlistInsignia();
 });
 
diff --git a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue b/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
index 0e27b7b63..93d667871 100644
--- a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
+++ b/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch,onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
@@ -30,8 +30,10 @@ const returndate = ref<Date | null>();
 const reason = ref<string>("");
 const listPerson = ref<any>([]);
 const OrgList = ref<DataOption[]>([]);
+const filterOrgList = ref<any>([]);
 const insigniaNoteProfileId = ref<string>("");
-
+const filterSelectRound = ref<any>()
+const selectRound = ref<any>()
 // เคลียร์ข้อมูลในฟอร์ม
 const clearData = () => {
   receivedate.value = null;
@@ -68,7 +70,10 @@ const props = defineProps({
     type: String,
   },
   selectRoundOption: {
-    type: Array,
+    type: Array, 
+  },
+  filterSelectRoundOption: {
+    type: Array, 
   },
   profileId: {
     type: String,
@@ -92,7 +97,8 @@ watch(props, () => {
 
 // ดึงข้อมูลรายการเครื่องราช
 const fecthlistInsignia = async () => {
-  showLoader();
+  if(roundNo.value !== ''&& roundNo.value !== null){
+    showLoader();
   let data = {
     insigniaTypeId: props.typeId,
     insigniaNoteId: roundNo.value,
@@ -115,6 +121,8 @@ const fecthlistInsignia = async () => {
       hideLoader();
     });
 };
+  }
+ 
 
 // ดึงข้อมูลรายการหน่วยงาน
 const fetchOrgList = async () => {
@@ -136,6 +144,7 @@ const fetchOrgList = async () => {
       //   ];
       // } else {
       OrgList.value = orgArr;
+      filterOrgList.value = OrgList.value
       // }
     })
     .catch((err) => {
@@ -240,6 +249,31 @@ const clearReceiveDate = () => {
 const clearReturnDate = () => {
   returndate.value = null;
 };
+const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'filterOrgList') {
+      OrganazationId.value = ''
+      filterOrgList.value = OrgList.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    if (name === 'filterSelectRoundOption') {
+      roundNo.value = ''
+      filterSelectRound.value = selectRound.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    }
+  )
+}
+const setValue = () => {
+  filterSelectRound.value = props.filterSelectRoundOption
+  selectRound.value = props.selectRoundOption
+}
+onMounted(() => {
+      setValue();
+    });
 </script>
 
 <template>
@@ -267,14 +301,18 @@ const clearReturnDate = () => {
                   :label="`${'รอบการขอเครื่องราชฯ'}`"
                   emit-value
                   map-options
+                  use-input
                   option-label="name"
-                  :options="selectRoundOption"
+                  :options="filterSelectRound"
                   option-value="id"
                   :readonly="false"
                   :borderless="false"
                   style="min-width: 150px"
                   :rules="[(val) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ']"
                   @update:model-value="fecthlistInsignia()"
+                  @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundOption'
+                      ) "
                 />
               </div>
               <div class="col-12 q-mt-md text-weight-bold text-grey-7">
@@ -382,18 +420,22 @@ const clearReturnDate = () => {
               <div class="col-xs-12 col-sm-6">
                 <q-select
                   hide-bottom-space
-                  :options="OrgList"
+                  :options="filterOrgList"
                   dense
                   borderless
                   option-label="name"
                   option-value="id"
                   emit-value
+                  use-input
                   map-options
                   outlined
                   v-model="OrganazationId"
                   lazy-rules
                   :label="`เลือกหน่วยงาน`"
                   :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงาน']"
+                  @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
+                      ) "
                 />
               </div>
             </div>
@@ -452,7 +494,7 @@ const clearReturnDate = () => {
               <div class="col-xs-12 col-sm-6">
                 <q-select
                   hide-bottom-space
-                  :options="OrgList"
+                  :options="filterOrgList"
                   dense
                   lazy-rules
                   borderless
@@ -461,9 +503,13 @@ const clearReturnDate = () => {
                   emit-value
                   map-options
                   outlined
+                  use-input
                   v-model="OrganazationId"
                   :label="`เลือกหน่วยงานที่ส่งคืน`"
                   :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
+                  @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
+                      ) "
                 />
               </div>
 
diff --git a/src/modules/07_insignia/components/5_Borrow/Main.vue b/src/modules/07_insignia/components/5_Borrow/Main.vue
index bc3365e52..bea7ee40f 100644
--- a/src/modules/07_insignia/components/5_Borrow/Main.vue
+++ b/src/modules/07_insignia/components/5_Borrow/Main.vue
@@ -19,15 +19,18 @@ const tab = ref<string>("");
 
 const selectRound = ref<string>();
 const selectRoundOption = ref<OptionDataYear[]>([]);
+const filterSelectRoundOption = ref<any>([]);
 const selectRoundAllOption = ref<OptionDataYear[]>([]);
+const filterSelectRoundAllOption = ref<OptionDataYear[]>([]);
 
 const modal = ref<boolean>(false);
 const action = ref<string>("");
 const profileId = ref<string>("");
 const roundYear = ref<any>();
 const insigniaList = ref<any>([]);
+const fileterInsigniaList = ref<any>([]);
 const loadView = ref<boolean>(false);
-
+const employeeClassOps = ref<any>(DataStore.employeeClassOps)
 onMounted(async () => {
   await fecthRound();
 });
@@ -58,8 +61,10 @@ const fecthRound = async () => {
             year: e.year,
           });
         });
-
+        filterSelectRoundAllOption.value = selectRoundAllOption.value
         selectRound.value = data[0].id;
+        filterSelectRoundOption.value = selectRoundOption.value
+        console.log(filterSelectRoundOption.value)
         yearRound.value = data[0].year;
         roundYear.value = data[0].year;
         if (roundYear.value) {
@@ -326,6 +331,7 @@ watch(tab, async () => {
     (x: any) => x.type == tab.value || x.type == ""
   );
   DataStore.insignia = "";
+  fileterInsigniaList.value = insigniaList.value
   fecthlistInsignia();
 });
 
@@ -392,6 +398,44 @@ const paginationLabel = (start: number, end: number, total: number) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'employeeClassOps') {
+      DataStore.employeeClass = ''
+        employeeClassOps.value = DataStore.employeeClassOps.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    else if (name === 'fileterInsigniaList') {
+      DataStore.insignia = null as any
+      fileterInsigniaList.value = insigniaList.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    else if (name === 'filterSelectRoundAllOption') {
+      yearRound.value = null as any
+      filterSelectRoundAllOption.value = selectRoundAllOption.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    }
+  )
+}
+
+const clearInsigniaFilters = (name: string) => {
+  if (name === "employeeClassOps") {
+    DataStore.employeeClass = "all";
+    employeeClassOps.value = DataStore.employeeClassOps;
+  }
+  else if (name === "fileterInsigniaList") {
+    DataStore.insignia = "";
+    fileterInsigniaList.value = insigniaList.value;
+  }
+  //  else if (name === 'employeeClassOps') {
+
+  // }
+};
 </script>
 
 <template>
@@ -426,7 +470,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
       >
         <div class="q-pa-md">
           <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
-            <div>
+
               <q-select
                 v-model="yearRound"
                 dense
@@ -436,26 +480,30 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 :label="`${'รอบการเสนอขอเครื่องราชฯ'}`"
                 emit-value
                 map-options
+                use-input
                 option-label="name"
-                :options="selectRoundAllOption"
+                :options="filterSelectRoundAllOption"
                 option-value="year"
                 :borderless="false"
                 style="min-width: 150px"
                 @update:model-value="selectorRound"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundAllOption'
+                      ) "
               />
-            </div>
             <div>
               <q-select
                 v-model="DataStore.insignia"
                 dense
                 outlined
+                use-input
                 lazy-rules
                 hide-bottom-space
                 :label="`${'เครื่องราชฯ'}`"
                 emit-value
                 map-options
                 option-label="name"
-                :options="insigniaList"
+                :options="fileterInsigniaList"
                 option-value="id"
                 :readonly="false"
                 :borderless="false"
@@ -466,31 +514,68 @@ const paginationLabel = (start: number, end: number, total: number) => {
                     DataStore.employeeClass
                   )
                 "
-              />
+          @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'fileterInsigniaList'
+                      ) "
+        >
+          <template v-if="DataStore.insignia !== ''" v-slot:append>
+            <q-icon
+              name="cancel"
+              @click.stop.prevent="
+                clearInsigniaFilters('fileterInsigniaList'),
+                  DataStore.searchDatatable(
+                    DataStore.insignia,
+                    DataStore.employeeClass
+                  )
+              "
+              class="cursor-pointer"
+            />
+          </template>
+        </q-select>
             </div>
             <div>
+
               <q-select
-                v-model="DataStore.employeeClass"
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                :label="`${'สถานภาพ'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="DataStore.employeeClassOps"
-                option-value="id"
-                :readonly="false"
-                :borderless="false"
-                style="min-width: 150px"
-                @update:model-value="
-                  DataStore.searchDatatable(
-                    DataStore.insignia,
-                    DataStore.employeeClass
-                  )
+          class="col-2"
+            v-model="DataStore.employeeClass"
+            dense
+            outlined
+            lazy-rules
+            hide-bottom-space
+            :label="`${'สถานภาพ'}`"
+            emit-value
+            use-input
+            map-options
+            option-label="name"
+            :options="employeeClassOps"
+            option-value="id"
+            :readonly="false"
+            :borderless="false"
+            style="min-width: 150px"
+            @update:model-value="
+              DataStore.searchDatatable(
+                DataStore.insignia,
+                DataStore.employeeClass
+              )
+            "
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
+                      ) "
+          >
+            <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  clearInsigniaFilters('employeeClassOps'),
+                    DataStore.searchDatatable(
+                      DataStore.insignia,
+                      DataStore.employeeClass
+                    )
                 "
+                class="cursor-pointer"
               />
+            </template>
+          </q-select>
             </div>
 
             <div>
@@ -600,7 +685,8 @@ const paginationLabel = (start: number, end: number, total: number) => {
       :round-id="selectRound == '0' ? 'all' : selectRound"
       :action="action"
       :profile-id="profileId"
-      :select-round-option="selectRoundOption"
+      v-model:selectRoundOption="selectRoundOption"
+      v-model:filterSelectRoundOption="filterSelectRoundOption"
       :type-id="tab"
     />
   </q-card>
diff --git a/src/modules/07_insignia/components/report/Report_02.vue b/src/modules/07_insignia/components/report/Report_02.vue
index ade731d87..d9fa6f39e 100644
--- a/src/modules/07_insignia/components/report/Report_02.vue
+++ b/src/modules/07_insignia/components/report/Report_02.vue
@@ -40,6 +40,7 @@ onMounted(async () => {
 const splitterModel = ref(14);
 const selectList = ref<any>();
 const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
+const filterOtion = ref<any>([]);
 
 const nextPage = () => {
   if (page.value < numOfPages.value) {
@@ -65,6 +66,7 @@ const fecthlistRound = async () => {
         year: e.period_year,
         name: e.period_name,
       }));
+   filterOtion.value = optionsList.value
     })
     .catch((err) => {
       messageError($q, err);
@@ -130,6 +132,18 @@ const downloadReport = async (
       hideLoader();
     });
 };
+const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'selectList') {
+      filterOtion.value = optionsList.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+
+    }
+  )
+}
 </script>
 
 <template>
@@ -152,19 +166,23 @@ const downloadReport = async (
         <q-toolbar style="padding: 0">
           <q-form ref="myForm" class="row items-center">
             <q-select
+              style="width: 400px;"
               class="q-pa-none"
               use-input
               fill-input
               hide-selected
               dense
+              lazy-rules
               outlined
               v-model="selectList"
-              :options="optionsList"
+              :options="filterOtion"
               label="เลือกรอบ"
               option-value="id"
               option-label="name"
               :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
               @update:model-value="updateSelect"
+              @filter="(inputValue:any,doneFn:Function) => 
+                filterSelector(inputValue, doneFn,'selectList') "
             />
           </q-form>
           <q-space />