filter ==> ข้อมูลเครื่องราชอิสริยาภรณ์

src/modules/01_metadata/components/insignia/InsigniaDetail.vue

@@ -179,7 +179,6 @@ async function fetchData(id: string) {
 
 /**
  * ยืนยันการบันทึกข้อมูลเครื่องราชอิสริยาภรณ์
- *
  *  dialogStatus.value เป็น "create"  จะเพิ่มข้อมูล ถ้าไม่จะเป็นการแก้ไขข้อมูล
  */
 async function onSubmit() {
@@ -219,7 +218,6 @@ async function onSubmit() {
 
 /**
  * ปืด popup เพิ่ม,แก้ไข ข้อมูล
- *
  * และ กำหนดฟอร์ม เพิ่มข้อมูล,แก้ไขข้อมูลเป็น defult
  */
 function closeDialog() {
@@ -232,7 +230,6 @@ function closeDialog() {
 
 /**
  * hook จำทำเมื่อมีการเรียกใช้ components
- *
  * ทำการดึงรายการข้อมูลเครื่องราชอิสริยาภรณ์ตามลำดับชั้นเครื่องราชอิสริยาภรณ์
  */
 onMounted(async () => {
@@ -294,12 +291,13 @@ onMounted(async () => {
               <q-input
                 dense
                 outlined
-                clearable
                 v-model="filterKeyword"
                 placeholder="ค้นหา"
-                @clear="filterKeyword = ''"
+                @keydown.enter.pervent="
+                  store.onSearchData(filterKeyword, columns)
+                "
               >
-                <template v-slot:append v-if="filterKeyword === ''">
+                <template v-slot:append>
                   <q-icon name="search" />
                 </template>
               </q-input>
@@ -325,7 +323,6 @@ onMounted(async () => {
             ref="table"
             :columns="columns"
             :rows="store.row"
-            :filter="filterKeyword"
             row-key="name"
             flat
             bordered

src/modules/01_metadata/stores/InsigniaStore.ts

@@ -6,10 +6,11 @@ import type {
 } from "../interface/response/insignia/Insignia";
 import { useCounterMixin } from "@/stores/mixin";
 
-const { date2Thai } = useCounterMixin();
+const { date2Thai, onSearchDataTable } = useCounterMixin();
 
 export const useInsigniaDataStore = defineStore("insigniaData", () => {
   const row = ref<DataRow[]>([]);
+  const rowMain = ref<DataRow[]>([]);
 
   async function fetchData(data: DataResponse[], insigniaType?: string) {
     const list = data.map((e) => ({
@@ -20,12 +21,18 @@ export const useInsigniaDataStore = defineStore("insigniaData", () => {
         ? date2Thai(e.lastUpdatedAt, false, true)
         : "-",
     }));
-    list;
+
     row.value = list;
+    rowMain.value = list;
+  }
+
+  function onSearchData(keyword: string, columns: any = []) {
+    row.value = onSearchDataTable(keyword, rowMain.value, columns);
   }
 
   return {
     fetchData,
     row,
+    onSearchData,
   };
 });

src/modules/01_metadata/views/05_insignia.vue

@@ -15,8 +15,14 @@ import dialogHeader from "@/components/DialogHeader.vue";
 const $q = useQuasar();
 const router = useRouter();
 const store = useInsigniaDataStore();
-const { dialogConfirm, success, messageError, showLoader, hideLoader } =
+const {
-  useCounterMixin();
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  onSearchDataTable,
+} = useCounterMixin();
 
 // Table
 const filterKeyword = ref<string>("");
@@ -93,7 +99,6 @@ const editId = ref<string>(""); // id รายการที่จะแก้
 
 /**
  * ดึงข้อมูลเครื่องราชอิสริยาภรณ์
- *
  * และบันทึกใน store.fetchData
  */
 async function fetchData() {
@@ -113,7 +118,6 @@ async function fetchData() {
 
 /**
  * ยืนยันการบันทึกข้อมูลเครื่องราชอิสริยาภรณ์
- *
  *  dialogStatus.value เป็น "create"  จะเพิ่มข้อมูล ถ้าไม่จะเป็นการแก้ไขข้อมูล
  */
 function onSubmit() {
@@ -147,7 +151,6 @@ function onSubmit() {
 
 /**
  * ปืด popup เพิ่ม,แก้ไข ข้อมูล
- *
  * และ กำหนดลำดับชั้นเครื่องราช เป็นค่าว่าง  สถานะการใช้งาน เป็น false
  */
 function closeDialog() {
@@ -166,7 +169,6 @@ function onclickDetail(id: string) {
 
 /**
  * hook จำทำเมื่อมีการเรียกใช้ components
- *
  * ทำการดึงข้อมูลเครื่องราชอิสริยาภรณ์
  */
 onMounted(async () => {
@@ -200,12 +202,11 @@ onMounted(async () => {
           <q-input
             dense
             outlined
-            clearable
             v-model="filterKeyword"
             placeholder="ค้นหา"
-            @clear="filterKeyword = ''"
+            @keydown.enter.pervent="store.onSearchData(filterKeyword, columns)"
           >
-            <template v-slot:append v-if="filterKeyword === ''">
+            <template v-slot:append>
               <q-icon name="search" />
             </template>
           </q-input>
@@ -230,7 +231,6 @@ onMounted(async () => {
           ref="table"
           :columns="columns"
           :rows="store.row"
-          :filter="filterKeyword"
           row-key="name"
           flat
           bordered