fix: pagination

src/components/TableHistory.vue

@@ -13,20 +13,15 @@ import SkeletonTable from '@/components/SkeletonTable.vue' // skeleton table
 const { date2Thai } = useCounterMixin()
 const stores = useCheckIn()
 
+const page = defineModel<number>('page', { required: true })
+const pageSize = defineModel<number>('pageSize', { required: true })
+
 /** props ข้อมูลจาก Components Page HistoryView */
 const props = defineProps({
   paging: {
     type: Boolean,
     default: false,
   },
-  pageSize: {
-    type: Number,
-    default: 10,
-  },
-  page: {
-    type: Number,
-    default: 1,
-  },
   maxPage: {
     type: Number,
     default: 1,
@@ -194,31 +189,20 @@ const visibleColumns = ref<string[]>([
   'checkOutLocation',
   'checkOutStatus',
 ])
-
-const currentPage = ref<number>(1) //หน้าปัจจุบัน
-// Pagination - initial pagination
-const initialPagination = ref<Pagination>({
-  sortBy: null,
-  descending: false,
-  page: 1,
-  rowsPerPage: props.pageSize, // set ตาม page หลักส่งมา
+const pagination = ref({
+  page: page.value,
+  rowsPerPage: pageSize.value,
 })
 
 // Pagination - update rowsPerPage
 async function updatePagination(newPagination: Pagination) {
-  initialPagination.value = newPagination
-  currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
+  pageSize.value = newPagination.rowsPerPage
 }
 
 async function filterFn() {
-  // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
-  emit(
-    'update:change-page',
-    1,
-    initialPagination.value.rowsPerPage,
-    keyword.value
-  )
+  emit('update:change-page', 1, pageSize.value, keyword.value)
 }
+
 const modalPopup = ref<boolean>(false) //  popup แก้ไขลงเวลา
 const titlePopup = ref<string>('') //  หัวขข้อ popup แก้ไขลงเวลา
 const dataRow = ref<DataCheckIn>() // ข้อมูลการลงเวลา
@@ -276,17 +260,15 @@ function onClickOpenPopupRejrct(data: DataCheckIn) {
   }
 }
 
-/** watch currentPage และ rowsPerPage*/
+function onUpdatePage(val: number) {
+  emit('update:change-page', val, pageSize.value, keyword.value)
+}
+
+/** watch pageSize*/
 watch(
-  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  () => pageSize.value,
   () => {
-    // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
-    emit(
-      'update:change-page',
-      currentPage.value,
-      initialPagination.value.rowsPerPage,
-      keyword.value
-    )
+    emit('update:change-page', 1, pageSize.value, keyword.value)
   }
 )
 </script>
@@ -340,10 +322,10 @@ watch(
     v-model:selected="selected"
     :virtual-scroll-sticky-size-start="48"
     :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
-    :rows-per-page-options="[10, 25, 50, 100]"
+    :rows-per-page-options="[1, 10, 25, 50, 100]"
     :grid="$q.screen.gt.xs ? false : true"
-    :pagination="initialPagination"
     @update:pagination="updatePagination"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -476,10 +458,11 @@ watch(
         </q-card>
       </div>
     </template>
+
     <template v-slot:pagination>
       ทั้งหมด {{ props.total }} รายการ
       <q-pagination
-        v-model="currentPage"
+        v-model="page"
         active-color="primary"
         color="dark"
         :max-pages="5"
@@ -487,6 +470,7 @@ watch(
         boundary-links
         direction-links
         :max="Number(props.maxPage)"
+        @update:model-value="onUpdatePage"
       ></q-pagination>
     </template>
   </q-table>

src/interface/index/Main.ts

@@ -29,7 +29,7 @@ interface Pagination {
   sortBy: string | null
   descending: boolean
   page: number
-  rowsPerPage: number | undefined
+  rowsPerPage: number
 }
 interface DataCheckIn {
   checkInDate: string

src/views/HistoryView.vue

@@ -115,6 +115,7 @@ async function fetchlistTime() {
 async function updateYear(y: number, m: number) {
   stores.tab === 'history' ? (year.value = y) : (year2.value = y)
   month.value = m
+  page.value = 1 // รีเซ็ตหน้าเป็นหน้าแรกเมื่อปีหรือเดือนเปลี่ยนแปลง
   await functionFetch() // เรียกใช้งานฟังก์ชัน functionFetch เพื่อดึงข้อมูลใหม่
 }
 
@@ -177,9 +178,9 @@ watch(
               />
               <TableHistory
                 :fetch-data="functionFetch"
-                :page-size="pageSize"
+                v-model:page-size="pageSize"
                 :total="total"
-                :page="page"
+                v-model:page="page"
                 :paging="true"
                 @update:change-page="changePage"
                 :max-page="maxPage"
@@ -196,9 +197,9 @@ watch(
               />
               <TableHistory
                 :fetch-data="functionFetch"
-                :page-size="pageSize"
+                v-model:page-size="pageSize"
                 :total="total"
-                :page="page"
+                v-model:page="page"
                 :paging="true"
                 @update:change-page="changePage"
                 :max-page="maxPage"