filter ==> จัดการ web services

src/modules/06_webservices/view/historyView.vue

@@ -305,6 +305,8 @@ onMounted(async () => {
         use-input
         hide-selected
         fill-input
+        :clearable="apiNameId !==''"
+        @clear="(apiNameId = ''), (options = dataApiName)"
         @update:modelValue="onSelectType"
         @filter="(inputValue: string,doneFn: Function) => filterSelector(inputValue, doneFn )"
       >

src/modules/06_webservices/view/listView.vue

@@ -24,10 +24,12 @@ const {
   messageError,
   success,
   date2Thai,
+  onSearchDataTable,
 } = useCounterMixin();
 
 /** Table*/
 const rows = ref<ListWebServices[]>([]); //รายการ webservices
+const rowsMain = ref<ListWebServices[]>([]); //รายการ webservices
 const keyword = ref<string>(""); //คำค้นหา รายการ webservices
 const visibleColumns = ref<string[]>([
   "name",
@@ -107,6 +109,7 @@ async function fetchListWebServices() {
     .then(async (res) => {
       const data = await res.data.result;
       rows.value = data;
+      rowsMain.value = data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -140,6 +143,14 @@ function onDeleteData(id: string) {
   });
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**  hook เมื่อเรียก Components จะเรียกฟังก์ชัน 'fetchListWebServices' เรียกข้อมูลรายการ webservices*/
 onMounted(() => {
   fetchListWebServices();
@@ -148,9 +159,6 @@ onMounted(() => {
 
 <template>
   <div class="row items-center">
-    <!-- <div class="toptitle text-dark row items-center q-py-xs">
-      รายการ web services
-    </div> -->
     <q-space />
     <q-btn
       flat
@@ -160,8 +168,6 @@ onMounted(() => {
     />
   </div>
 
-  <!-- <q-card flast bordered class="q-pa-md"> -->
-    <!-- toolbar -->
   <div class="items-center col-12 row q-col-gutter-sm">
     <q-btn
       class="q-ml-sm"
@@ -179,12 +185,11 @@ onMounted(() => {
       borderless
       dense
       outlined
-        clearable
       v-model="keyword"
       placeholder="ค้นหา"
-        @clear="keyword = ''"
+      @keydown.enter.pervent="serchDataTable"
     >
-        <template v-slot:append v-if="keyword === ''">
+      <template v-slot:append>
         <q-icon name="search" />
       </template>
     </q-input>
@@ -210,7 +215,6 @@ onMounted(() => {
       :columns="columns"
       :rows="rows"
       row-key="id"
-        :filter="keyword"
       flat
       bordered
       :paging="true"
@@ -241,24 +245,14 @@ onMounted(() => {
             </q-btn></q-td
           >
           <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <!-- <div v-if="col.name === 'apiNames'">
-                <q-list dense>
-                  <q-item v-for="(item, key) in col.value">
-                    <q-item-section>- {{ item.name }}</q-item-section>
-                  </q-item>
-                </q-list>
-              </div> -->
             <div v-html="col.value ? col.value : '-'"></div>
 
-              <div>
+            <div></div>
-                <!-- {{ col.value ? col.value : "-" }} -->
-              </div>
           </q-td>
         </q-tr>
       </template>
     </d-table>
   </div>
-  <!-- </q-card> -->
 
   <!-- สร้าง API Key -->
   <DialogApiKey

src/modules/06_webservices/view/main.vue

@@ -3,7 +3,7 @@ import { ref } from "vue";
 
 /** importComponents*/
 import ListView from "@/modules/06_webservices/view/listView.vue";
-import LogView from "@/modules/06_webservices/view/logView.vue";
+import LogView from "@/modules/06_webservices/view/historyView.vue";
 
 const tabs = ref<string>("list");
 </script>

src/stores/mixin.ts

@@ -1058,6 +1058,26 @@ export const useCounterMixin = defineStore("mixin", () => {
     }
   }
 
+  function onSearchDataTable(keyword: string, data: any[], columns: any[]) {
+    const searchText = keyword.trim().toLowerCase();
+
+    if (!searchText) {
+      return data; // คืนค่าทั้งหมดถ้าไม่มีข้อความค้นหา
+    }
+
+    // คืนค่าข้อมูลที่กรองแล้ว
+    return data.filter((row: any) => {
+      return columns.some((col: any) => {
+        const rawValue = row[col.field];
+        const formattedValue = col.format
+          ? col.format(rawValue, row) // ใช้ `format` ถ้ามี
+          : rawValue;
+
+        return String(formattedValue).toLowerCase().includes(searchText);
+      });
+    });
+  }
+
   return {
     calAge,
     date2Thai,
@@ -1099,5 +1119,7 @@ export const useCounterMixin = defineStore("mixin", () => {
     findOrgNameOld,
     findPosMasterNo,
     findPosMasterNoOld,
+
+    onSearchDataTable,
   };
 });