filter รายการสอบแข่งขัน / คัดเลือก

src/modules/05_placement/components/Main.vue

@@ -168,6 +168,7 @@ const fetchYearOptions = async () => {
       }, "");
       searchYear.value = maxNumber;
       DataStore.DataMainYearSet(searchYear.value);
+      yearOptionsFn.value = yearOptions;
       searchYear.value && fetchPlacementData(searchYear.value);
     })
     .catch((e) => {
@@ -175,7 +176,9 @@ const fetchYearOptions = async () => {
     });
 };
 const filterYear = () => {
-  fetchPlacementData(searchYear.value);
+  if (searchYear.value !== null) {
+    fetchPlacementData(searchYear.value);
+  }
 };
 
 // ดูรายการสอบแข่งขัน หน้าต่อไป
@@ -283,7 +286,6 @@ function filterFnexamTime(val: string, update: any) {
   if (val === "") {
     update(() => {
       examTimeOP2.value = examTimeOP;
-      examTime.value = "";
     });
   } else {
     update(() => {
@@ -298,7 +300,6 @@ function filterFnExamtype(val: string, update: any) {
   if (val === "") {
     update(() => {
       examTypeOP2.value = examTypeOP.value;
-      examType.value = "";
     });
   } else {
     update(() => {
@@ -308,6 +309,20 @@ function filterFnExamtype(val: string, update: any) {
     });
   }
 }
+const yearOptionsFn = ref<any>([]);
+function filterFnYear(val: string, update: any) {
+  if (val === "") {
+    update(() => {
+      yearOptionsFn.value = yearOptions;
+    });
+  } else {
+    update(() => {
+      yearOptionsFn.value = yearOptions.filter(
+        (e: any) => e.name.toString().search(val) !== -1
+      );
+    });
+  }
+}
 </script>
 
 <template>
@@ -324,7 +339,7 @@ function filterFnExamtype(val: string, update: any) {
           dense
           emit-value
           map-options
-          :options="yearOptions"
+          :options="yearOptionsFn"
           option-value="id"
           option-label="name"
           lazy-rules
@@ -334,7 +349,14 @@ function filterFnExamtype(val: string, update: any) {
           :outlined="true"
           :hide-dropdown-icon="false"
           @update:model-value="filterYear"
-        />
+          use-input
+          @filter="filterFnYear"
+          ><template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
         <q-space />
         <q-input
           class="col-xs-12 col-sm-3 col-md-2"
@@ -394,7 +416,6 @@ function filterFnExamtype(val: string, update: any) {
               @filter="filterFnexamTime"
               use-input
               input-debounce="0"
-              behavior="menu"
               ><template v-slot:no-option>
                 <q-item>
                   <q-item-section class="text-grey">
@@ -422,7 +443,6 @@ function filterFnExamtype(val: string, update: any) {
               @update:model-value="searchFilterTable"
               @filter="filterFnExamtype"
               use-input
-              behavior="menu"
             >
               <template v-slot:no-option>
                 <q-item>