From 6152fa3bef1f6f7def1fc8bbd1ba60925ffa401b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 12 Dec 2024 13:32:48 +0700
Subject: [PATCH] =?UTF-8?q?filter=20=3D=3D>=20=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B9=80=E0=B8=81=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=A7=E0=B8=81=E0=B8=B1=E0=B8=9A=E0=B8=9A=E0=B8=B8?=
 =?UTF-8?q?=E0=B8=84=E0=B8=84=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/personal/01_Prefix.vue         |  8 ++---
 .../components/personal/02_Rank.vue           |  6 ++--
 .../components/personal/03_Gender.vue         |  6 ++--
 .../components/personal/04_Relationship.vue   |  6 ++--
 .../components/personal/05_BloodGroup.vue     |  6 ++--
 .../components/personal/06_Religion.vue       |  6 ++--
 .../components/personal/07_Province.vue       |  6 ++--
 .../components/personal/08_EducationLevel.vue |  6 ++--
 .../personal/province/01_District.vue         | 32 +++++++++++++----
 .../personal/province/02_SubDistrict.vue      | 34 +++++++++++++++----
 .../01_metadata/stores/personalStore.ts       | 11 +++++-
 11 files changed, 82 insertions(+), 45 deletions(-)

diff --git a/src/modules/01_metadata/components/personal/01_Prefix.vue b/src/modules/01_metadata/components/personal/01_Prefix.vue
index eac09f75..887678ba 100644
--- a/src/modules/01_metadata/components/personal/01_Prefix.vue
+++ b/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
diff --git a/src/modules/01_metadata/components/personal/02_Rank.vue b/src/modules/01_metadata/components/personal/02_Rank.vue
index a7c810f7..4a3bf78b 100644
--- a/src/modules/01_metadata/components/personal/02_Rank.vue
+++ b/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
diff --git a/src/modules/01_metadata/components/personal/03_Gender.vue b/src/modules/01_metadata/components/personal/03_Gender.vue
index 18e290f9..cd880c0b 100644
--- a/src/modules/01_metadata/components/personal/03_Gender.vue
+++ b/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
diff --git a/src/modules/01_metadata/components/personal/04_Relationship.vue b/src/modules/01_metadata/components/personal/04_Relationship.vue
index 79cd9f61..965a2deb 100644
--- a/src/modules/01_metadata/components/personal/04_Relationship.vue
+++ b/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
diff --git a/src/modules/01_metadata/components/personal/05_BloodGroup.vue b/src/modules/01_metadata/components/personal/05_BloodGroup.vue
index a826f2de..ff7a8b73 100644
--- a/src/modules/01_metadata/components/personal/05_BloodGroup.vue
+++ b/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
diff --git a/src/modules/01_metadata/components/personal/06_Religion.vue b/src/modules/01_metadata/components/personal/06_Religion.vue
index 57252a5b..5eecb05d 100644
--- a/src/modules/01_metadata/components/personal/06_Religion.vue
+++ b/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
diff --git a/src/modules/01_metadata/components/personal/07_Province.vue b/src/modules/01_metadata/components/personal/07_Province.vue
index 3fdf5b68..1db8c9c4 100644
--- a/src/modules/01_metadata/components/personal/07_Province.vue
+++ b/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
diff --git a/src/modules/01_metadata/components/personal/08_EducationLevel.vue b/src/modules/01_metadata/components/personal/08_EducationLevel.vue
index 46d6a595..8e843ff7 100644
--- a/src/modules/01_metadata/components/personal/08_EducationLevel.vue
+++ b/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
diff --git a/src/modules/01_metadata/components/personal/province/01_District.vue b/src/modules/01_metadata/components/personal/province/01_District.vue
index e964a874..530a7eb3 100644
--- a/src/modules/01_metadata/components/personal/province/01_District.vue
+++ b/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 } =
-  useCounterMixin();
+const {
+  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
diff --git a/src/modules/01_metadata/components/personal/province/02_SubDistrict.vue b/src/modules/01_metadata/components/personal/province/02_SubDistrict.vue
index 9b1eda87..a6386a16 100644
--- a/src/modules/01_metadata/components/personal/province/02_SubDistrict.vue
+++ b/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 } =
-  useCounterMixin();
+const {
+  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
diff --git a/src/modules/01_metadata/stores/personalStore.ts b/src/modules/01_metadata/stores/personalStore.ts
index c853a38e..584a371b 100644
--- a/src/modules/01_metadata/stores/personalStore.ts
+++ b/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,
   };
 });