From 5d361bcbfc34005d34de0fe2bb8c4bb17eb12ee6 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 27 Oct 2023 11:01:13 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=20paging=20=E0=B8=AA=E0=B8=A3=E0=B8=A3=E0=B8=AB=E0=B8=B2=20>?=
 =?UTF-8?q?=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=84=E0=B8=B1=E0=B8=94=E0=B9=80=E0=B8=A5=E0=B8=B7?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TableCandidate.vue             | 21 ++++++++++++------
 .../views/02_qualify/manageDetail.vue         | 22 +++++++++----------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/modules/03_recruiting/components/TableCandidate.vue b/src/modules/03_recruiting/components/TableCandidate.vue
index 27c3e23f9..c8bb3e30a 100644
--- a/src/modules/03_recruiting/components/TableCandidate.vue
+++ b/src/modules/03_recruiting/components/TableCandidate.vue
@@ -67,8 +67,10 @@
       <q-space />
       <div class="items-center gt-xs" style="display: flex">
         <!-- ค้นหาข้อความใน table -->
-        <q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined
-          debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
+        <!-- @keydown.enter.prevent:model-value="updateInput" -->
+        <q-input :model-value="inputfilter" @keydown.enter.prevent="submitInput" @update:model-value="updateInput"
+          ref="filterRef" standout dense outlined debounce="300" placeholder="ค้นหา" style="max-width: 200px"
+          class="q-ml-sm">
           <template v-slot:append>
             <q-icon v-if="inputfilter == ''" name="search" />
             <q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
@@ -84,10 +86,11 @@
     <q-table ref="table" flat bordered class="custom-header-table" v-bind="attrs" virtual-scroll
       :virtual-scroll-sticky-size-start="48" dense :pagination="initialPagination"
       :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []" row-key="id" selection="multiple"
-      v-model:selected="selected" @update:pagination="updatePagination">
+      v-model:selected="selected" @update:pagination="updatePagination" :filter="false">
       <template v-slot:pagination="scope">
         ทั้งหมด {{ props.total }} รายการ
-        <q-pagination v-model="currentPage" active-color="primary" color="dark" :max-pages="5" size="sm" boundary-links direction-links :max="props.maxPage < 1 ? 1 : props.maxPage"></q-pagination>
+        <q-pagination v-model="currentPage" active-color="primary" color="dark" :max-pages="5" size="sm" boundary-links
+          direction-links :max="props.maxPage < 1 ? 1 : props.maxPage"></q-pagination>
       </template>
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -238,6 +241,7 @@ const props = defineProps({
 // Pagination - page & change page & get new data
 const currentPage = ref<number>(1)
 watch(currentPage, () => {
+  console.log(currentPage.value)
   props.changePage(currentPage.value, props.pageSize, true);
 });
 
@@ -265,13 +269,16 @@ const emit = defineEmits([
 
 const updateInput = async (value: any) => {
   await emit("update:inputfilter", value);
+};
 
-  // search & get new data by keyword
-  if (value.length > 3) {
+// search & get new data by keyword
+const submitInput = () => {
+  setTimeout(() => {
     props.changePage(1, props.pageSize);
     currentPage.value = 1
-  }
+  }, 500);
 };
+
 const updateVisible = (value: any) => {
   emit("update:inputvisible", value);
 };
diff --git a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
index ef9998c41..17e66b1d8 100644
--- a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
@@ -48,9 +48,9 @@
   <q-card flat bordered class="col-12 q-pt-sm">
     <TableCandidate style="max-height: 80vh" :rows="rows" :columns="columns" :filter="filter"
       :visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
-      v-model:inputvisibleFilter="status" v-model:optionsFilter="optionsStatus"
-      :nornmalData="true" :paging="true" :titleText="''" :statusPayment="statusPayment" :setSeat="setSeat"
-      :fetchData="fetchDataCom" :history="true" :page-size="page_size" :total="total" :page="page" :changePage="changePage" :max-page="maxPage">
+      v-model:inputvisibleFilter="status" v-model:optionsFilter="optionsStatus" :nornmalData="true" :paging="true"
+      :titleText="''" :statusPayment="statusPayment" :setSeat="setSeat" :fetchData="fetchDataCom" :history="true"
+      :page-size="page_size" :total="total" :page="page" :changePage="changePage" :max-page="maxPage">
       <template #columns="props">
         <q-tr :props="props" class="cursor-pointer">
           <q-td auto-width>
@@ -100,11 +100,11 @@
               </div>
             </div>
             <div v-else-if="col.name == 'status'" :class="props.row.status == 'checkRegister' ||
-                props.row.status == 'checkPayment' ||
-                props.row.status == 'checkSeat' ||
-                props.row.status == 'checkPoint'
-                ? 'text-blue'
-                : ''
+              props.row.status == 'checkPayment' ||
+              props.row.status == 'checkSeat' ||
+              props.row.status == 'checkPoint'
+              ? 'text-blue'
+              : ''
               ">
               {{ statusCandidate(props.row.status) }}
             </div>
@@ -395,7 +395,7 @@ const fetchDataCom = async () => {
 
 // paging
 const page = ref<number>(1)
-const page_size = ref<number>(5)
+const page_size = ref<number>(25)
 const total = ref<number>(0)
 const maxPage = ref<number>(1)
 
@@ -409,10 +409,10 @@ const fetchData = async (loading: boolean = true) => {
   loading === true ?? showLoader()
   await http
     .get(config.API.candidateOfPeriodExam(status.value, examId.value) + `?page=${page.value}&pageSize=${page_size.value}&keyword=${filter.value}`)
-    .then((res) => {
+    .then(async (res) => {
       const data = res.data.result;
       total.value = data.total
-      maxPage.value = Math.ceil(data.total / page_size.value)
+      maxPage.value = await Math.ceil(data.total / page_size.value)
       rows.value = [];
       data.data.map((r: any) => {
         rows.value.push({