filter ==> retirement

src/modules/06_retirement/components/02_resign/DialogSendToCommand.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watchEffect, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -30,7 +30,7 @@ const dataMapToSend = computed(() => {
   }));
 });
 const mixin = useCounterMixin();
-const { dialogConfirm, date2Thai } = mixin;
+const { dialogConfirm, date2Thai, onSearchDataTable } = mixin;
 
 /** props*/
 const props = defineProps({
@@ -43,6 +43,8 @@ const props = defineProps({
 });
 
 //Table
+const rowsData = ref<ResponseItems[]>([]);
+const rowsDataMain = ref<ResponseItems[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -60,7 +62,10 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: (row) => `${row.prefix}${row.firstName} ${row.lastName}`,
+    field: "fullname",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -129,7 +134,10 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: (row) => statusText(row.status),
+    field: "status",
+    format(val, row) {
+      return statusText(row.status);
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -166,20 +174,31 @@ function updateInput(value: any) {
   emit("update:filterKeyword2", value);
 }
 
-/** รีเซ็ตค่าในช่องค้นหา */
-function Reset() {
-  emit("update:filterKeyword2", "");
+async function onSearch() {
+  rowsData.value = onSearchDataTable(
+    props.filterKeyword2 ? props.filterKeyword2 : "",
+    rowsDataMain.value,
+    columns.value ? columns.value : []
+  );
 }
 
-watchEffect(() => {
-  if (props.modal === true) {
-    selected.value = [];
+watch(
+  () => props.modal,
+  (val) => {
+    if (val) {
+      selected.value = [];
+      rowsData.value = props.rows ? props.rows : [];
+      rowsDataMain.value = props.rows ? props.rows : [];
+    } else {
+      rowsData.value = [];
+      rowsDataMain.value = [];
+    }
   }
-});
+);
 </script>
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 1200px; max-width: 80vw">
+    <q-card style="min-width: 80%">
       <DialogHeader tittle="ส่งไปออกคำสั่งลาออก" :close="closeModal" />
       <q-separator />
       <q-card-section>
@@ -192,6 +211,7 @@ watchEffect(() => {
               dense
               :model-value="filterKeyword2"
               @update:model-value="updateInput"
+              @keydown.enter="onSearch"
               placeholder="ค้นหา"
             >
               <template v-slot:append>
@@ -217,8 +237,7 @@ watchEffect(() => {
           <div class="col-12">
             <d-table
               :columns="columns"
-              :rows="rows"
-              :filter="filterKeyword2?.trim()"
+              :rows="rowsData"
               row-key="id"
               :visible-columns="visibleColumns"
               selection="multiple"

src/modules/06_retirement/components/03_resignEmp/DialogSendToCommand.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watchEffect, computed } from "vue";
+import { ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -30,7 +30,7 @@ const dataMapToSend = computed(() => {
   }));
 });
 const mixin = useCounterMixin();
-const { dialogConfirm, date2Thai } = mixin;
+const { dialogConfirm, date2Thai, onSearchDataTable } = mixin;
 
 /** props*/
 const props = defineProps({
@@ -43,6 +43,8 @@ const props = defineProps({
 });
 
 //Table
+const rowsData = ref<ResponseItems[]>([]);
+const rowsDataMain = ref<ResponseItems[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -60,7 +62,10 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: (row) => `${row.prefix}${row.firstName} ${row.lastName}`,
+    field: "fullname",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -129,7 +134,10 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: (row) => statusText(row.status),
+    field: "status",
+    format(val, row) {
+      return statusText(row.status);
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -166,15 +174,31 @@ function updateInput(value: any) {
   emit("update:filterKeyword2", value);
 }
 
-watchEffect(() => {
-  if (props.modal === true) {
-    selected.value = [];
+async function onSearch() {
+  rowsData.value = onSearchDataTable(
+    props.filterKeyword2 ? props.filterKeyword2 : "",
+    rowsDataMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+watch(
+  () => props.modal,
+  (val) => {
+    if (val) {
+      selected.value = [];
+      rowsData.value = props.rows ? props.rows : [];
+      rowsDataMain.value = props.rows ? props.rows : [];
+    } else {
+      rowsData.value = [];
+      rowsDataMain.value = [];
+    }
   }
-});
+);
 </script>
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 1200px; max-width: 80vw">
+    <q-card style="min-width: 80%">
       <DialogHeader tittle="ส่งไปออกคำสั่งลาออก" :close="closeModal" />
       <q-separator />
       <q-card-section>
@@ -188,6 +212,7 @@ watchEffect(() => {
               :model-value="filterKeyword2"
               @update:model-value="updateInput"
               placeholder="ค้นหา"
+              @keydown.enter="onSearch"
             >
               <template v-slot:append>
                 <q-icon name="search" />
@@ -212,8 +237,7 @@ watchEffect(() => {
           <div class="col-12">
             <d-table
               :columns="columns"
-              :rows="rows"
-              :filter="filterKeyword2?.trim()"
+              :rows="rowsData"
               row-key="id"
               :visible-columns="visibleColumns"
               selection="multiple"

src/modules/06_retirement/components/05_deceased/SendCircularPage.vue

@@ -28,6 +28,7 @@ const {
   hideLoader,
   success,
   dialogConfirm,
+  onSearchDataTable,
 } = mixin;
 
 /** props*/
@@ -52,6 +53,7 @@ const modalSelectOrg = ref<boolean>(false);
 
 const selectedModal = ref<any[]>([]);
 const rows = ref<DataCopyOrder[]>([]);
+const rowsMain = ref<DataCopyOrder[]>([]);
 const editRows = ref<DataCopyOrder[]>([]);
 
 /** selcet OPtion */
@@ -59,7 +61,6 @@ const optionSelect = ref<any>([
   { id: 1, name: "อีเมล" },
   { id: 2, name: "กล่องข้อความ" },
 ]);
-
 /** คอลัมน์ที่แสดง */
 const visibleColumns = ref<String[]>([
   "no",
@@ -158,6 +159,7 @@ async function getData() {
         });
       }
       rows.value = list;
+      rowsMain.value = list;
     })
     .catch((e) => {
       messageError($q, e);
@@ -189,12 +191,6 @@ async function saveData() {
     });
 }
 
-function resetFilter() {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  filter.value = "";
-  filterRef.value!.focus();
-}
-
 /**
  * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
  * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
@@ -257,7 +253,7 @@ async function saveDataCopyOrder() {
 //อัพเดทข้อมูลหลัง Save
 async function fetchSaveCopyOrder() {
   let list: requestSendNoti[] = [];
-  rows.value.map((r: DataCopyOrder) => {
+  rowsMain.value.map((r: DataCopyOrder) => {
     list.push({
       profileId: r.personalId,
       isSendMail: r.mutiselect.includes(1),
@@ -285,6 +281,14 @@ function updateData(row: DataCopyOrder) {
   editRows.value.push(row);
 }
 
+async function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /** Hook */
 onMounted(async () => {
   await getData();
@@ -322,6 +326,7 @@ onMounted(async () => {
             outlined
             placeholder="ค้นหา"
             class="q-ml-sm"
+            @keydown.enter="onSearch"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -349,7 +354,6 @@ onMounted(async () => {
           :rows="rows"
           :columns="columns"
           :visible-columns="visibleColumns"
-          :filter="filter.trim()"
           row-key="idCard"
         >
           <template v-slot:header="props">