filter ==> ข้อมูลเกี่ยวกับบุคคล

src/modules/01_metadata/components/personal/01_Prefix.vue

@@ -173,12 +173,13 @@ onMounted(async () => {
         borderless
         dense
         outlined
-        clearable
         v-model="filterKeyword"
         placeholder="ค้นหา"
-        @clear="filterKeyword = ''"
+        @keydown.enter.pervent="
+          store.onSearchData(filterKeyword, TABLE_COLUMNS)
+        "
       >
-        <template v-slot:append v-if="filterKeyword === ''">
+        <template v-slot:append>
           <q-icon name="search" />
         </template>
       </q-input>
@@ -202,7 +203,6 @@ onMounted(async () => {
     ref="table"
     :columns="TABLE_COLUMNS"
     :rows="store.row"
-    :filter="filterKeyword"
     row-key="name"
     flat
     bordered

src/modules/01_metadata/components/personal/02_Rank.vue

@@ -172,12 +172,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>
@@ -201,7 +200,6 @@ onMounted(async () => {
     ref="table"
     :columns="columns"
     :rows="store.row"
-    :filter="filterKeyword"
     row-key="name"
     flat
     bordered

src/modules/01_metadata/components/personal/03_Gender.vue

@@ -172,12 +172,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>
@@ -201,7 +200,6 @@ onMounted(async () => {
     ref="table"
     :columns="columns"
     :rows="store.row"
-    :filter="filterKeyword"
     row-key="name"
     flat
     bordered

src/modules/01_metadata/components/personal/04_Relationship.vue

@@ -172,12 +172,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>
@@ -201,7 +200,6 @@ onMounted(async () => {
     ref="table"
     :columns="columns"
     :rows="store.row"
-    :filter="filterKeyword"
     row-key="name"
     flat
     bordered

src/modules/01_metadata/components/personal/05_BloodGroup.vue

@@ -171,12 +171,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>
@@ -200,7 +199,6 @@ onMounted(async () => {
     ref="table"
     :columns="columns"
     :rows="store.row"
-    :filter="filterKeyword"
     row-key="name"
     flat
     bordered

src/modules/01_metadata/components/personal/06_Religion.vue

@@ -172,12 +172,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>
@@ -201,7 +200,6 @@ onMounted(async () => {
     ref="table"
     :columns="columns"
     :rows="store.row"
-    :filter="filterKeyword"
     row-key="name"
     flat
     bordered

src/modules/01_metadata/components/personal/07_Province.vue

@@ -183,12 +183,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>
@@ -212,7 +211,6 @@ onMounted(async () => {
     ref="table"
     :columns="columns"
     :rows="store.row"
-    :filter="filterKeyword"
     row-key="name"
     flat
     bordered

src/modules/01_metadata/components/personal/08_EducationLevel.vue

@@ -186,12 +186,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>
@@ -215,7 +214,6 @@ onMounted(async () => {
     ref="table"
     :columns="columns"
     :rows="store.row"
-    :filter="filterKeyword"
     row-key="name"
     flat
     bordered

src/modules/01_metadata/components/personal/province/01_District.vue

@@ -15,8 +15,14 @@ import DialogForm from "@/modules/01_metadata/components/personal/DialogForm.vue
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
-const { messageError, showLoader, hideLoader, success, date2Thai } =
+const {
-  useCounterMixin();
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  date2Thai,
+  onSearchDataTable,
+} = useCounterMixin();
 
 /**
  * Table
@@ -82,6 +88,7 @@ const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก
 const dialogStatus = ref<string>(""); // สถานะ เพิ่มข้อมูล,แก้ไขข้อมูล
 const personalName = ref<string>("เขต/อำเภอ"); //label input
 const rows = ref<FormDistrict[]>([]); // ข้อมูลรายการเขต/อำเภอ
+const rowsMain = ref<FormDistrict[]>([]); // ข้อมูลรายการเขต/อำเภอ
 const provinceName = ref<string>(""); //ชื่อจังหวัด
 
 /**
@@ -99,12 +106,13 @@ async function fetchData() {
 
       const list = data.map((e: FormDistrict) => ({
         ...e,
-        createdAt: e.createdAt ? date2Thai(new Date(e.createdAt)) : "",
+        createdAt: e.createdAt ? date2Thai(new Date(e.createdAt),false,true) : "",
         lastUpdatedAt: e.lastUpdatedAt
-          ? date2Thai(new Date(e.lastUpdatedAt))
+          ? date2Thai(new Date(e.lastUpdatedAt),false,true)
           : "",
       }));
       rows.value = list;
+      rowsMain.value = list;
     })
     .catch((err) => {
       messageError($q, err);
@@ -168,6 +176,14 @@ function nextPage(idSub: string) {
   router.push(`/master-data/personal/sub-district/${id.value}/${idSub}`);
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns ? columns : []
+  );
+}
+
 /**
  * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
  * แล้วเรียก function fetch ข้อมูลรายการระดับการเขต/อำเภอ
@@ -217,7 +233,12 @@ onMounted(async () => {
             dense
             v-model="filterKeyword"
             label="ค้นหา"
-          ></q-input>
+            @keydown.enter.pervent="serchDataTable"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
           <q-select
             v-model="visibleColumns"
             multiple
@@ -238,7 +259,6 @@ onMounted(async () => {
         ref="table"
         :columns="columns"
         :rows="rows"
-        :filter="filterKeyword"
         row-key="name"
         flat
         bordered

src/modules/01_metadata/components/personal/province/02_SubDistrict.vue

@@ -15,8 +15,14 @@ import DialogForm from "@/modules/01_metadata/components/personal/DialogForm.vue
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
-const { messageError, showLoader, hideLoader, success, date2Thai } =
+const {
-  useCounterMixin();
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  date2Thai,
+  onSearchDataTable,
+} = useCounterMixin();
 
 /**
  * Table
@@ -88,6 +94,7 @@ const visibleColumns = ref<string[]>([
 
 const id = ref<string>(route.params.id as string); // เขต/อำเภอ
 const rows = ref<FormSubDistrict[]>([]); // ข้อมูลรายการแขวง/ตำบล
+const rowsMain = ref<FormSubDistrict[]>([]); // ข้อมูลรายการแขวง/ตำบล
 const editId = ref<string>(""); // id รายากรแขวง/ตำบล
 const filterKeyword = ref<string>(""); // คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -111,12 +118,15 @@ async function fetchData() {
       subdistrict.value = await res.data.result.name;
       const list = data.map((e: FormSubDistrict) => ({
         ...e,
-        createdAt: e.createdAt ? date2Thai(new Date(e.createdAt)) : "",
+        createdAt: e.createdAt
+          ? date2Thai(new Date(e.createdAt), false, true)
+          : "",
         lastUpdatedAt: e.lastUpdatedAt
-          ? date2Thai(new Date(e.lastUpdatedAt))
+          ? date2Thai(new Date(e.lastUpdatedAt), false, true)
           : "",
       }));
       rows.value = list;
+      rowsMain.value = list;
     })
     .catch((err) => {
       messageError($q, err);
@@ -173,6 +183,14 @@ async function editData(idRow: string) {
     });
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns ? columns : []
+  );
+}
+
 /**
  * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
  * แล้วเรียก function fetch ข้อมูลรายการแขวง/ตำบล
@@ -223,7 +241,12 @@ onMounted(async () => {
             dense
             v-model="filterKeyword"
             label="ค้นหา"
-          ></q-input>
+            @keydown.enter.pervent="serchDataTable"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
           <q-select
             v-model="visibleColumns"
             multiple
@@ -244,7 +267,6 @@ onMounted(async () => {
         ref="table"
         :columns="columns"
         :rows="rows"
-        :filter="filterKeyword"
         row-key="name"
         flat
         bordered

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

@@ -7,10 +7,11 @@ import type {
   DataRow,
 } from "../interface/response/personal/personal";
 
-const { date2Thai } = useCounterMixin();
+const { date2Thai, onSearchDataTable } = useCounterMixin();
 
 export const usePersonalDataStore = defineStore("PersonalData", () => {
   const row = ref<DataRow[]>([]); // ข้อมูลในตาราง
+  const rowMain = ref<DataRow[]>([]); // ข้อมูลในตาราง
   const currentTab = ref<string>("list_prefix"); // Tab ปัจจุบัน
 
   /**
@@ -19,6 +20,7 @@ export const usePersonalDataStore = defineStore("PersonalData", () => {
    */
   async function save(data: DataResponse[]) {
     row.value = [];
+    rowMain.value = [];
     const list = data.map((e) => ({
       ...e,
       createdAt: e.createdAt ? date2Thai(e.createdAt, false, true) : "-",
@@ -26,12 +28,19 @@ export const usePersonalDataStore = defineStore("PersonalData", () => {
         ? date2Thai(e.lastUpdatedAt, false, true)
         : "-",
     }));
+
     row.value = list;
+    rowMain.value = list;
+  }
+
+  function onSearchData(keyword: string, columns: any = []) {
+    row.value = onSearchDataTable(keyword, rowMain.value, columns);
   }
 
   return {
     save,
     row,
     currentTab,
+    onSearchData,
   };
 });