ปรับ filte Table ข้อมูลทะเบียนประวัติ

src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue

@@ -24,13 +24,12 @@ const {
   messageError,
   dialogConfirm,
   pathRegistryEmp,
+  onSearchDataTable,
 } = mixin;
 
 const id = ref<string>("");
 
-/**
- * props
- */
+/** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
@@ -50,6 +49,7 @@ const detail = ref<string>(""); //รายละเอียด
 
 //Table
 const rows = ref<RowList[]>([]);
+const rowsMain = ref<RowList[]>([]);
 const filterKeyword = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
@@ -80,15 +80,14 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * fetch รายการข้อมูลอื่นๆ
- */
+/** fetch รายการข้อมูลอื่นๆ*/
 async function getData() {
   showLoader();
   await http
     .get(config.API.profileNewOtherByProfileId(profileId.value, empType.value))
     .then((res) => {
       rows.value = res.data.result;
+      rowsMain.value = res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -98,9 +97,7 @@ async function getData() {
     });
 }
 
-/**
- * เปิด dialog ข้อมูลอื่นๆ
- */
+/** เปิด dialog ข้อมูลอื่นๆ*/
 function openDialogAdd() {
   modal.value = true;
 }
@@ -126,9 +123,7 @@ function openDialogHistory(idOrder: string) {
   modalHistory.value = true;
 }
 
-/**
- * ปิด dialog
- */
+/** ปิด dialog */
 function closeDialog() {
   modal.value = false;
   edit.value = false;
@@ -136,9 +131,7 @@ function closeDialog() {
   detail.value = "";
 }
 
-/**
- * validate check
- */
+/** validate check*/
 function validateForm() {
   dialogConfirm(
     $q,
@@ -154,9 +147,7 @@ function validateForm() {
   );
 }
 
-/**
- * บันทึกเพิ่มข้อมูล
- */
+/** บันทึกเพิ่มข้อมูล*/
 function saveData() {
   showLoader();
   http
@@ -179,9 +170,7 @@ function saveData() {
     });
 }
 
-/**
- * บันทึกแก้ไขข้อมูล
- */
+/** บันทึกแก้ไขข้อมูล*/
 function editData() {
   showLoader();
   http
@@ -202,6 +191,14 @@ function editData() {
     });
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(() => {
   getData();
 });
@@ -227,7 +224,7 @@ onMounted(() => {
       ref="filterRef"
       outlined
       placeholder="ค้นหา"
-      debounce="300"
+      @keydown.enter.pervent="serchDataTable"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -290,7 +287,6 @@ onMounted(() => {
     :grid="mode === 'card'"
     :paging="true"
     :visible-columns="visibleColumns"
-    :filter="filterKeyword.trim()"
     :rows-per-page-options="[10, 25, 50, 100]"
   >
     <template v-slot:header="props">

src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue

@@ -14,18 +14,23 @@ import DialogHeader from "@/components/DialogHeader.vue";
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
-  mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  pathRegistryEmp,
+  onSearchDataTable,
+} = mixin;
 
-/**
- * props
- */
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const id = defineModel<string>("id", { required: true });
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
 const rows = ref<RowList[]>([]); // data history
+const rowsMain = ref<RowList[]>([]); // data history
 const filterKeyword = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
@@ -80,9 +85,7 @@ const visibleColumns = ref<String[]>([
   "lastUpdatedAt",
 ]);
 
-/**
- * ฟังก์ชันดึงข้อมูลประวัติการแก่ไขข้อมูล
- */
+/** ฟังก์ชันดึงข้อมูลประวัติการแก่ไขข้อมูล*/
 function getHistory() {
   showLoader();
   http
@@ -99,6 +102,7 @@ function getHistory() {
           lastUpdatedAt: new Date(e.lastUpdatedAt),
         });
       });
+      rowsMain.value = rows.value;
     })
     .catch((e) => {
       messageError($q, e);
@@ -108,9 +112,16 @@ function getHistory() {
     });
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * ดูการเปลี่ยนแปลงของ modal
- *
  * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
  */
 watch(modal, (status) => {
@@ -141,7 +152,7 @@ watch(modal, (status) => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            debounce="300"
+            @keydown.enter.pervent="serchDataTable"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -171,7 +182,6 @@ watch(modal, (status) => {
           :paging="true"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
-          :filter="filterKeyword.trim()"
         >
           >
           <template v-slot:header="props">