แก้ฟิลเตอร์

src/modules/02_transfer/views/Main.vue

@@ -20,7 +20,8 @@ const mixin = useCounterMixin();
 const transferData = useTransferDataStore();
 
 const { statusText } = transferData;
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
+  mixin;
 
 const pagination = ref({
   sortBy: "desc",
@@ -30,6 +31,7 @@ const pagination = ref({
 });
 
 const rows = ref<TransferMain[]>([]);
+const rowsData = ref<TransferMain[]>([]);
 const filter = ref<string>("");
 const visibleColumns = ref<String[]>([
   "no",
@@ -123,7 +125,7 @@ async function fecthListTransfer() {
     .get(config.API.listUserTransfer())
     .then((res) => {
       let data = res.data.result;
-      rows.value = data.map((e: TransferList) => ({
+      const listData = data.map((e: TransferList) => ({
         id: e.id,
         date: date2Thai(e.createdAt),
         status: e.status,
@@ -135,6 +137,8 @@ async function fecthListTransfer() {
         salary: e.salary,
         transfer: e.organization,
       }));
+      rows.value = listData;
+      rowsData.value = listData;
     })
     .catch((e: any) => {
       messageError($q, e);
@@ -158,6 +162,14 @@ function clickBack() {
   router.push(`/`);
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
@@ -207,15 +219,10 @@ onMounted(async () => {
                 debounce="300"
                 placeholder="ค้นหา"
                 style="max-width: 200px"
+                @keydown.enter="onSearch"
               >
                 <template v-slot:append>
-                  <q-icon v-if="filter == ''" name="search" />
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
+                  <q-icon name="search" />
                 </template>
               </q-input>
               <!-- แสดงคอลัมน์ใน table -->
@@ -251,7 +258,6 @@ onMounted(async () => {
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
               v-model:pagination="pagination"
-              :filter="filter"
             >
               <template v-slot:pagination="scope">
                 ทั้งหมด {{ rows.length }} รายการ