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,105 +168,91 @@ onMounted(() => {
     />
   </div>
 
-  <!-- <q-card flast bordered class="q-pa-md"> -->
+  <div class="items-center col-12 row q-col-gutter-sm">
-    <!-- toolbar -->
+    <q-btn
-    <div class="items-center col-12 row q-col-gutter-sm">
+      class="q-ml-sm"
-      <q-btn
+      flat
-        class="q-ml-sm"
+      round
-        flat
+      dense
-        round
+      color="primary"
-        dense
+      icon="add"
-        color="primary"
+      @click.pervent="modalApiKey = true"
-        icon="add"
+    >
-        @click.pervent="modalApiKey = true"
+      <q-tooltip>สร้าง API Key </q-tooltip>
-      >
+    </q-btn>
-        <q-tooltip>สร้าง API Key </q-tooltip>
+    <q-space />
-      </q-btn>
+    <q-input
-      <q-space />
+      borderless
-      <q-input
+      dense
-        borderless
+      outlined
-        dense
+      v-model="keyword"
-        outlined
+      placeholder="ค้นหา"
-        clearable
+      @keydown.enter.pervent="serchDataTable"
-        v-model="keyword"
+    >
-        placeholder="ค้นหา"
+      <template v-slot:append>
-        @clear="keyword = ''"
+        <q-icon name="search" />
-      >
+      </template>
-        <template v-slot:append v-if="keyword === ''">
+    </q-input>
-          <q-icon name="search" />
+    <q-select
-        </template>
+      v-model="visibleColumns"
-      </q-input>
+      multiple
-      <q-select
+      outlined
-        v-model="visibleColumns"
+      dense
-        multiple
+      options-dense
-        outlined
+      :display-value="$q.lang.table.columns"
-        dense
+      emit-value
-        options-dense
+      map-options
-        :display-value="$q.lang.table.columns"
+      :options="columns"
-        emit-value
+      option-value="name"
-        map-options
+      style="min-width: 140px"
-        :options="columns"
+    />
-        option-value="name"
+  </div>
-        style="min-width: 140px"
-      />
-    </div>
 
-    <!-- Table -->
+  <!-- Table -->
-    <div class="col-12 q-pt-sm">
+  <div class="col-12 q-pt-sm">
-      <d-table
+    <d-table
-        ref="table"
+      ref="table"
-        :columns="columns"
+      :columns="columns"
-        :rows="rows"
+      :rows="rows"
-        row-key="id"
+      row-key="id"
-        :filter="keyword"
+      flat
-        flat
+      bordered
-        bordered
+      :paging="true"
-        :paging="true"
+      dense
-        dense
+      :rows-per-page-options="[10, 25, 50, 100]"
-        :rows-per-page-options="[10, 25, 50, 100]"
+      :visible-columns="visibleColumns"
-        :visible-columns="visibleColumns"
+    >
-      >
+      <template v-slot:header="props">
-        <template v-slot:header="props">
+        <q-tr :props="props">
-          <q-tr :props="props">
+          <q-th auto-width />
-            <q-th auto-width />
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
-              <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
-            </q-th>
+        </q-tr>
-          </q-tr>
+      </template>
-        </template>
+      <template v-slot:body="props">
-        <template v-slot:body="props">
+        <q-tr :props="props">
-          <q-tr :props="props">
+          <q-td auto-width>
-            <q-td auto-width>
+            <q-btn
-              <q-btn
+              dense
-                dense
+              flat
-                flat
+              round
-                round
+              color="red"
-                color="red"
+              @click="onDeleteData(props.row.id)"
-                @click="onDeleteData(props.row.id)"
+              icon="delete"
-                icon="delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn></q-td
             >
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <q-tooltip>ลบข้อมูล</q-tooltip>
-              <!-- <div v-if="col.name === 'apiNames'">
+            </q-btn></q-td
-                <q-list dense>
+          >
-                  <q-item v-for="(item, key) in col.value">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                    <q-item-section>- {{ item.name }}</q-item-section>
+            <div v-html="col.value ? col.value : '-'"></div>
-                  </q-item>
-                </q-list>
-              </div> -->
-              <div v-html="col.value ? col.value : '-'"></div>
 
-              <div>
+            <div></div>
-                <!-- {{ col.value ? col.value : "-" }} -->
+          </q-td>
-              </div>
+        </q-tr>
-            </q-td>
+      </template>
-          </q-tr>
+    </d-table>
-        </template>
+  </div>
-      </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,
   };
 });