แก้ไข paging สรรหา > รายชื่อคัดเลือก

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
+        <!-- @keydown.enter.prevent:model-value="updateInput" -->
-          debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
+        <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
+// search & get new data by keyword
-  if (value.length > 3) {
+const submitInput = () => {
+  setTimeout(() => {
     props.changePage(1, props.pageSize);
     currentPage.value = 1
-  }
+  }, 500);
 };
+
 const updateVisible = (value: any) => {
   emit("update:inputvisible", value);
 };

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"
+      v-model:inputvisibleFilter="status" v-model:optionsFilter="optionsStatus" :nornmalData="true" :paging="true"
-      :nornmalData="true" :paging="true" :titleText="''" :statusPayment="statusPayment" :setSeat="setSeat"
+      :titleText="''" :statusPayment="statusPayment" :setSeat="setSeat" :fetchData="fetchDataCom" :history="true"
-      :fetchData="fetchDataCom" :history="true" :page-size="page_size" :total="total" :page="page" :changePage="changePage" :max-page="maxPage">
+      :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 == 'checkPayment' ||
-                props.row.status == 'checkSeat' ||
+              props.row.status == 'checkSeat' ||
-                props.row.status == 'checkPoint'
+              props.row.status == 'checkPoint'
-                ? 'text-blue'
+              ? '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({