แก้ฟิลเตอร์

src/modules/13_portfolio/views/Main.vue

@@ -12,7 +12,14 @@ import type { PortfolioRowsType } from "@/modules/13_portfolio/interface/Main";
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
+const {
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogRemove,
+  success,
+  onSearchDataTable,
+} = mixin;
 
 const pagination = ref({
   sortBy: "desc",
@@ -25,6 +32,7 @@ const pagination = ref({
  */
 const filter = ref<string>("");
 const rows = ref<PortfolioRowsType[]>([]);
+const rowsData = ref<PortfolioRowsType[]>([]);
 const visibleColumns = ref<String[]>(["no", "name", "detail"]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -63,6 +71,7 @@ async function fecthList() {
     .get(config.API.portfolio)
     .then((res) => {
       rows.value = res.data.result;
+      rowsData.value = res.data.result;
     })
     .catch((e: any) => {
       messageError($q, e);
@@ -106,6 +115,14 @@ function onDelete(id: string) {
   });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
@@ -156,15 +173,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="clear" />
                 </template>
               </q-input>
               <!-- แสดงคอลัมน์ใน table -->
@@ -200,7 +212,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 }} รายการ