ฟิลเตอร์ วินัย/การลา

src/modules/11_discipline/components/4_Result/Table.vue

@@ -8,6 +8,9 @@ const filterRef = ref<any>(null);
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const statusFilter = ref<string>("DONE");
+
+const option = ref<any[]>(store.statusOptions);
+
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   count: Number,
@@ -110,6 +113,20 @@ function updateInput(value: string | number | null) {
 function filterFn() {
   props.fetchListResult?.();
 }
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  statusFilter.value = "";
+  update(() => {
+    option.value = store.statusOptions.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
 </script>
 
 <template>
@@ -125,13 +142,20 @@ function filterFn() {
         map-options
         option-label="name"
         option-value="id"
-        :options="store.statusOptions"
+        :options="option"
         @update:model-value="dataUpdate"
+        use-input
+        @filter="filterOptionFn"
       >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
         <template v-if="statusFilter !== 'ALL'" v-slot:append>
           <q-icon
             name="cancel"
-            @click.stop.prevent="(statusFilter = 'ALL'), dataUpdate()"
+            @click.stop.prevent="(option = store.statusOptions),(statusFilter = 'ALL'), dataUpdate()"
             class="cursor-pointer"
           />
         </template>