ปรับ paging ประวัติการลงเวลา

src/components/TableHistory.vue

@@ -77,25 +77,34 @@ 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)
-})
+const emit = defineEmits(['update:change-page'])
 
 // Pagination - initial pagination
 const initialPagination = ref<any>({
   sortBy: null,
   descending: false,
   page: 1,
-  rowsPerPage: 1,
+  rowsPerPage: props.pageSize, // set ตาม page หลักส่งมา
 })
 
+// Pagination - page & change page & get new data
+const currentPage = ref<number>(1)
+watch(
+  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  () => {
+    emit(
+      'update:change-page',
+      currentPage.value,
+      initialPagination.value.rowsPerPage,
+      true
+    )
+  }
+)
+
 // Pagination - update rowsPerPage
 async function updatePagination(newPagination: any) {
-  props.changePage(1, newPagination.rowsPerPage, true)
   initialPagination.value = newPagination
+  currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
 }
 
 /** column history table */

src/views/HistoryView.vue

@@ -18,15 +18,15 @@ const { fetchHistoryList } = stores
 const $q = useQuasar() //ใช้ noti quasar
 
 onMounted(() => {
-  // fetchlistHistory()
+  fetchlistHistory()
 })
 
 // paging
 const page = ref<number>(1)
 const year = ref<number>(2023)
-const pageSize = ref<number>(5)
+const pageSize = ref<number>(2)
 const total = ref<number>(0)
-const maxPage = ref<number>(5)
+const maxPage = ref<number>(1)
 const filter = ref<string>('') //search data table
 
 /**
@@ -45,7 +45,10 @@ async function changePage(
   fetchlistHistory(loading)
 }
 
-//นำข้อมูลมาแสดง
+/**
+ * ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลาจาก api มาแสดง
+ * @param loading แสดง loading ไหม true คือแสดง, false คือไม่แสดง 
+ */
 const fetchlistHistory = async (loading = true) => {
   loading === true ?? showLoader()
   await http
@@ -55,9 +58,11 @@ const fetchlistHistory = async (loading = true) => {
     )
     .then(async (res) => {
       const data = res.data.result
-      total.value = data.total
-      // maxPage.value = await Math.ceil(data.total / pageSize.value)
-      fetchHistoryList(data)
+      total.value = data.total ? data.total : 5
+      maxPage.value = await Math.ceil(total.value / pageSize.value)
+      maxPage.value = maxPage.value < 1 ? 1 : maxPage.value
+      fetchHistoryList(data) // ปิดกรณีมี total
+      // fetchHistoryList(data.data) // เปิดกรณีมี total
     })
     .catch((err) => {
       messageError($q, err)
@@ -65,7 +70,6 @@ const fetchlistHistory = async (loading = true) => {
     .finally(() => {
       hideLoader()
     })
-  console.log(maxPage.value)
 }
 </script>
 <template>
@@ -98,7 +102,7 @@ const fetchlistHistory = async (loading = true) => {
             :total="total"
             :page="page"
             :paging="true"
-            :changePage="changePage"
+            @update:change-page="changePage"
             :max-page="maxPage"
           />
         </div>