แก้ฟิลเตอร์ สรรหา

src/modules/03_recruiting/views/02_qualify/DisableDetail.vue

@@ -17,7 +17,8 @@ const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
 const mixin = useCounterMixin();
-const { messageError, success, showLoader, hideLoader } = mixin;
+const { messageError, success, showLoader, hideLoader, onSearchDataTable } =
+  mixin;
 
 const year = ref<string>("2566");
 const round = ref<string>("1");
@@ -208,6 +209,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const rows = ref<RecruitDetailResponse[]>([]);
+const rowsData = ref<RecruitDetailResponse[]>([]);
 
 /**
  * ไปหน้ารายละเอียด จัดการรอบคัดเลือกคนพิการ
@@ -293,6 +295,7 @@ async function fetchData() {
       }
 
       rows.value = result;
+      rowsData.value = result;
       if (result.length > 0) name.value = result[0].exam_name as string;
       round.value = _data.round;
       year.value = _data.year;
@@ -335,6 +338,14 @@ async function candidateToPlacement() {
     .onDismiss(() => {});
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   hideLoader();
   await fetchData();
@@ -397,7 +408,8 @@ onMounted(async () => {
         :notpass="notpass"
         :rows="rows"
         :columns="columns"
-        :filter="filter"
+        v-model:filter="filter"
+        :onSearch="onSearch"
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"

src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue

@@ -24,8 +24,15 @@ import HistoryTable from "@/components/TableHistory.vue";
 const $q = useQuasar(); // show dialog
 const router = useRouter();
 const mixin = useCounterMixin();
-const { success, dateText, messageError, showLoader, hideLoader, date2Thai } =
-  mixin;
+const {
+  success,
+  dateText,
+  messageError,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  onSearchDataTable,
+} = mixin;
 
 const name = ref<string>("");
 const year = ref<number>(new Date().getFullYear() + 543);
@@ -41,6 +48,7 @@ const rowsHistory = ref<ResponseHistoryObject[]>([]); //select data history
 const tittleHistory = ref<string>("ประวัติการนำเข้าข้อมูล"); //
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const rows = ref<any[]>([]);
+const rowsData = ref<any[]>([]);
 const filter = ref<string>(""); //search data table
 const filterHistory = ref<string>(""); //search data table
 const textTittle = ref<string>("");
@@ -218,6 +226,7 @@ async function fetchData() {
       }
 
       rows.value = result;
+      rowsData.value = result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -405,6 +414,14 @@ async function checkSave() {
     });
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   hideLoader();
   await fetchData();
@@ -420,7 +437,8 @@ onMounted(async () => {
         style="max-height: 80vh"
         :rows="rows"
         :columns="columns"
-        :filter="filter"
+        v-model:filter="filter"
+        :onSearch="onSearch"
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"

src/modules/03_recruiting/views/02_qualify/Manage.vue

@@ -17,9 +17,11 @@ import type { ResponsePeriodExam } from "@/modules/03_recruiting/interface/respo
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
+  mixin;
 
 const rows = ref<ResponsePeriodExam[]>([]);
+const rowsData = ref<ResponsePeriodExam[]>([]);
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
@@ -123,50 +125,52 @@ async function fetchData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = [];
-      data.map((r: RequestPeriodExam) => {
-        rows.value.push({
-          id: r.id,
-          name: r.name,
-          checkDocument: r.checkDocument,
-          checkDisability: r.checkDisability,
-          round: r.round,
-          yearly: r.year,
-          fee: r.fee,
-          announcementExam: r.announcementExam,
-          dateAnnounce:
-            r.announcementDate !== null ? new Date(r.announcementDate) : null,
-          dateAnnouncement:
-            r.announcementStartDate !== null && r.announcementEndDate !== null
-              ? [
-                  new Date(r.announcementStartDate),
-                  new Date(r.announcementEndDate),
-                ]
-              : null,
-          dateRegister:
-            r.registerStartDate !== null && r.registerEndDate !== null
-              ? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
-              : null,
-          dateExam: r.examDate !== null ? new Date(r.examDate) : null,
-          datePayment:
-            r.paymentStartDate !== null && r.paymentEndDate !== null
-              ? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
-              : null,
-          organizationName: {
-            id: r.organizationId,
-            name: r.organizationName,
-          },
-          organizationShortName: {
-            id: r.organizationCodeId,
-            name: r.organizationCodeName,
-          },
-          positionExam: [],
-          pay: r.bankExam.length > 0 ? "payment2" : "payment1",
-          bankExam: [],
-          editor: r.detail,
-          note: r.note,
-          category: r.category,
-        });
-      });
+      rowsData.value = [];
+      const list = data.map((r: RequestPeriodExam) => ({
+        id: r.id,
+        name: r.name,
+        checkDocument: r.checkDocument,
+        checkDisability: r.checkDisability,
+        round: r.round,
+        yearly: r.year,
+        fee: r.fee,
+        announcementExam: r.announcementExam,
+        dateAnnounce:
+          r.announcementDate !== null ? new Date(r.announcementDate) : null,
+        dateAnnouncement:
+          r.announcementStartDate !== null && r.announcementEndDate !== null
+            ? [
+                new Date(r.announcementStartDate),
+                new Date(r.announcementEndDate),
+              ]
+            : null,
+        dateRegister:
+          r.registerStartDate !== null && r.registerEndDate !== null
+            ? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
+            : null,
+        dateExam: r.examDate !== null ? new Date(r.examDate) : null,
+        datePayment:
+          r.paymentStartDate !== null && r.paymentEndDate !== null
+            ? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
+            : null,
+        organizationName: {
+          id: r.organizationId,
+          name: r.organizationName,
+        },
+        organizationShortName: {
+          id: r.organizationCodeId,
+          name: r.organizationCodeName,
+        },
+        positionExam: [],
+        pay: r.bankExam.length > 0 ? "payment2" : "payment1",
+        bankExam: [],
+        editor: r.detail,
+        note: r.note,
+        category: r.category,
+      }));
+
+      rows.value = list;
+      rowsData.value = list;
     })
     .catch((e) => {
       messageError($q, e);
@@ -195,6 +199,14 @@ function dateThaiRange(val: [Date, Date]) {
   }
 }
 
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   hideLoader();
   await fetchData();
@@ -208,7 +220,8 @@ onMounted(async () => {
     <data-table
       :rows="rows"
       :columns="columns"
-      :filter="filter"
+      v-model:filter="filter"
+      :onSearch="onSearch"
       :visible-columns="visibleColumns"
       v-model:inputfilter="filter"
       v-model:inputvisible="visibleColumns"

src/modules/03_recruiting/views/02_qualify/Period.vue

@@ -33,12 +33,14 @@ const {
   messageError,
   showLoader,
   hideLoader,
+  onSearchDataTable
 } = mixin;
 const filter = ref<string>(""); //search data table
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
 const examData = ref<ResponsePeriodExam[]>([]);
+const examDataData = ref<ResponsePeriodExam[]>([]);
 const visibleColumns = ref<String[]>([
   "no",
   "announcementExam",
@@ -215,6 +217,7 @@ async function fetchData() {
         });
       }
       examData.value = result;
+      examDataData.value = result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -283,6 +286,14 @@ function openDetail(col: ResponsePeriodExam) {
   router.push(`/qualify/period-detail/${col.id}`);
 }
 
+function onSearch() {
+  examData.value = onSearchDataTable(
+    filter.value,
+    examDataData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
   hideLoader();
   await fetchData();
@@ -298,7 +309,8 @@ onMounted(async () => {
         style="max-height: 80vh"
         :rows="examData"
         :columns="columns"
-        :filter="filter"
+        v-model:filter="filter"
+        :onSearch="onSearch"
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"