test Filter

src/modules/05_placement/views/02_transferMain.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRouter } from "vue-router";
@@ -184,6 +184,28 @@ function resetFilter() {
 onMounted(async () => {
   await fetchData();
 });
+
+const filter = ref("");
+
+const filterAndApply = () => {
+  const searchText = filter.value.trim().toLowerCase();
+
+  if (!searchText) {
+    rows.value = dataTransfer.value; // คืนค่าทั้งหมดถ้าไม่มีข้อความค้นหา
+    return;
+  }
+
+  rows.value = dataTransfer.value.filter((row: any) => {
+    return columns.value?.some((col: any) => {
+      const rawValue = row[col.field];
+      const formattedValue = col.format
+        ? col.format(rawValue, row) // ใช้ `format` ถ้ามี
+        : rawValue;
+
+      return String(formattedValue).toLowerCase().includes(searchText);
+    });
+  });
+};
 </script>
 
 <template>
@@ -208,11 +230,12 @@ onMounted(async () => {
             class="col-xs-12 col-sm-3 col-md-2"
             standout
             dense
-            v-model="filterMain"
+            v-model="filter"
             ref="filterRef"
             outlined
             debounce="300"
             placeholder="ค้นหา"
+            @keyup.enter="filterAndApply"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -242,10 +265,10 @@ onMounted(async () => {
         </div>
 
         <div class="col-12 q-pt-sm">
+          <!-- :filter="filterMain" -->
           <d-table
             :columns="columns"
             :rows="rows"
-            :filter="filterMain"
             row-key="id"
             :visible-columns="visibleColumns"
           >