filter ==> ข้อมูลตำแหน่งข้าราชการ ฯ

src/modules/01_metadata/components/position/01_Position.vue

@@ -344,7 +344,8 @@ onMounted(async () => {
         </div>
         <div class="col-xs-12 col-md-2">
           <q-btn
-            class="full-width"
+            outline
+            class="full-width full-height"
             color="primary"
             icon="search"
             label="ค้นหา"

src/modules/01_metadata/components/position/02_Type.vue

@@ -15,8 +15,14 @@ import dialogHeader from "@/components/DialogHeader.vue";
 const $q = useQuasar();
 const router = useRouter();
 const store = usePositionTypeDataStore();
-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 posTypeRank = ref<number | null>(null); // ระดับตำแหน
 
 /**
  * ดึงข้อมูลรายการประเภทตำแหน่ง
- *
  * บันทึกข้อมูลรายการประเภทตำแหน่งใน Store positionTypeStore
  */
 async function fetchData() {
@@ -113,7 +118,6 @@ async function fetchData() {
 
 /**
  * ยืนยันการบันทึกข้อมูลประเภทตำแหน่ง
- *
  * ุ ถ้า dialogStatus เป็น 'create' จะทำการเพิ่มข้อมูลรายการประเภทตำแหน่ง ถ่้าไม่จะทำการแก้ไขข้อมูล
  * เมื่อบันทึกข้อมูลเสร็จจะเรียก function fetchData() เพื่อดึงข้อมูลรายการประเภทตำแหน่งใหม่
  *
@@ -152,7 +156,6 @@ function onSubmit() {
 
 /**
  * ปืด popup ฟอร์มประเภทตำแหน่ง
- *
  * และเคลียร์ตัวแปรในฟอร์มประเภทตำแหน่ง
  */
 function closeDialog() {
@@ -169,6 +172,14 @@ function onclickDetail(id: string) {
   router.push(`/master-data/position/level/${id}`);
 }
 
+function serchDataTable() {
+  store.row = onSearchDataTable(
+    filterKeyword.value,
+    store.rowMain,
+    columns ? columns : []
+  );
+}
+
 /**
  * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
  */
@@ -198,12 +209,11 @@ onMounted(async () => {
       <q-input
         dense
         outlined
-        clearable
         v-model="filterKeyword"
         placeholder="ค้นหา"
-        @clear="filterKeyword = ''"
+        @keydown.enter.pervent="serchDataTable"
       >
-        <template v-slot:append v-if="filterKeyword === ''">
+        <template v-slot:append>
           <q-icon name="search" />
         </template>
       </q-input>
@@ -227,7 +237,6 @@ onMounted(async () => {
     ref="table"
     :columns="columns"
     :rows="store.row"
-    :filter="filterKeyword"
     row-key="name"
     flat
     bordered

src/modules/01_metadata/components/position/03_Executive.vue

@@ -12,10 +12,12 @@ import type { RowListForm } from "@/modules/01_metadata/interface/request/positi
 import DialogAdd from "@/modules/01_metadata/components/position/DialogFormExecutive.vue";
 
 const $q = useQuasar();
-const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
 
 // Table
 const rows = ref<RowListForm[]>([]); // รายากรข้อมูลตำแหน่งทางการบริหาร
+const rowsMain = ref<RowListForm[]>([]); // รายากรข้อมูลตำแหน่งทางการบริหาร
 const filterKeyword = ref<string>(""); // คำค้นหา
 const visibleColumns = ref<string[]>([
   "no",
@@ -104,6 +106,7 @@ async function getData() {
     .then(async (res) => {
       const data = await res.data.result;
       rows.value = data;
+      rowsMain.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -130,6 +133,14 @@ function editPopUp(data: RowListForm) {
   isEdit.value = true;
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
  */
@@ -157,12 +168,11 @@ onMounted(async () => {
     <q-input
       dense
       outlined
-      clearable
       v-model="filterKeyword"
       placeholder="ค้นหา"
-      @clear="filterKeyword = ''"
+      @keydown.enter.pervent="serchDataTable"
     >
-      <template v-slot:append v-if="filterKeyword === ''">
+      <template v-slot:append>
         <q-icon name="search" />
       </template>
     </q-input>
@@ -185,7 +195,6 @@ onMounted(async () => {
       ref="table"
       :columns="columns"
       :rows="rows"
-      :filter="filterKeyword"
       row-key="id"
       flat
       bordered

src/modules/01_metadata/components/position/TypeDetail.vue

@@ -25,6 +25,7 @@ const {
   hideLoader,
   messageError,
   success,
+  onSearchDataTable,
 } = useCounterMixin();
 
 //table
@@ -236,6 +237,14 @@ function closeDialog() {
   dialog.value = false;
 }
 
+function serchDataTable() {
+  store.row = onSearchDataTable(
+    filterKeyword.value,
+    store.rowMain,
+    columns ? columns : []
+  );
+}
+
 /**
  * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
  */
@@ -284,12 +293,11 @@ onMounted(async () => {
           <q-input
             dense
             outlined
-            clearable
             v-model="filterKeyword"
             placeholder="ค้นหา"
-            @clear="filterKeyword = ''"
+            @keydown.enter.pervent="serchDataTable"
           >
-            <template v-slot:append v-if="filterKeyword === ''">
+            <template v-slot:append>
               <q-icon name="search" />
             </template>
           </q-input>
@@ -313,7 +321,6 @@ onMounted(async () => {
         ref="table"
         :columns="columns"
         :rows="store.row"
-        :filter="filterKeyword"
         row-key="name"
         flat
         bordered

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

@@ -13,6 +13,8 @@ const { date2Thai } = useCounterMixin();
 export const usePositionDataStore = defineStore("PositionData", () => {
   const pathLocation = ref<string>("list_position");
   const row = ref<DataRow[]>([]);
+  const rowMain = ref<DataRow[]>([]);
+
   function save(data: DataResponse[], posTypeName: string) {
     const list = data.map((e) => ({
       ...e,
@@ -29,11 +31,13 @@ export const usePositionDataStore = defineStore("PositionData", () => {
         : "-",
     })) satisfies DataRow[];
     row.value = list;
+    rowMain.value = list;
   }
 
   return {
     save,
     row,
+    rowMain,
     pathLocation,
   };
 });

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

@@ -12,6 +12,7 @@ const { date2Thai } = useCounterMixin();
 
 export const usePositionTypeDataStore = defineStore("PositionTypeData", () => {
   const row = ref<DataRow[]>([]);
+  const rowMain = ref<DataRow[]>([]);
 
   /**
    * บันทึกข้อมูลลงใน  row.value
@@ -28,9 +29,11 @@ export const usePositionTypeDataStore = defineStore("PositionTypeData", () => {
         : "-",
     })) satisfies DataRow[];
     row.value = list;
+    rowMain.value = list;
   }
   return {
     save,
     row,
+    rowMain,
   };
 });