fix load Table

src/modules/05_leave/components/Table.vue

@@ -2,8 +2,8 @@
 import { ref, useAttrs, watch } from "vue";
 import { useQuasar } from "quasar";
 
+import type { PropsTable } from "@/interface/PropsTable";
 import { useLeaveStore } from "@/modules/05_leave/store";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
@@ -54,13 +54,26 @@ const table = ref<any>(null);
 
 /** ตั้งค่า pagination*/
 const currentPage = ref<number>(1);
-const pagination = ref({
+
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "dateSendLeave",
   descending: true,
   page: 1,
   rowsPerPage: Number(props.pageSize),
+
+  rowsNumber: Number(props.total),
 });
 
+// Watch props เพื่ออัปเดต pagination เมื่อค่าเปลี่ยน (เฉพาะ props)
+watch(
+  () => [props.pageSize, props.total],
+  ([newPageSize, newTotal]) => {
+    pagination.value.rowsPerPage = Number(newPageSize);
+    pagination.value.rowsNumber = Number(newTotal);
+  },
+  { immediate: true }
+);
+
 /** filter */
 const year = ref<number>(new Date().getFullYear());
 const filter = ref<string>("");
@@ -86,18 +99,17 @@ function updatePagination(p: number, ps: number) {
   emit("update:Pagination", p, ps);
 }
 
-/** function updatePageSize*/
-function updatePageSize(newPageSize: any) {
-  pagination.value.rowsPerPage = newPageSize.rowsPerPage;
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  currentPage.value = newPagination.page;
+  pagination.value = { ...newPagination };
+  updatePagination(newPagination.page, newPagination.rowsPerPage);
 }
-
-watch(
-  () => pagination.value.rowsPerPage,
-  () => {
-    currentPage.value = 1;
-    updatePagination(currentPage.value, pagination.value.rowsPerPage);
-  }
-);
 </script>
 
 <template>
@@ -240,9 +252,7 @@ watch(
     </q-card>
   </div>
   <div>
-    <SkeletonTable v-if="isloadingData" :columns="leaveStore.columns" />
     <d-table
-      v-else
       ref="table"
       flat
       bordered
@@ -251,9 +261,11 @@ watch(
       :virtual-scroll-sticky-size-start="48"
       dense
       :rows-per-page-options="[10, 25, 50, 100]"
+      D
       v-model:pagination="pagination"
-      @update:pagination="updatePageSize"
+      @request="onTableRequest"
       :grid="$q.screen.gt.xs ? false : true"
+      :loading="isloadingData"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -262,21 +274,6 @@ watch(
           </q-th>
         </q-tr>
       </template>
-      <template v-slot:pagination="scope">
-        ทั้งหมด {{ props.total }} รายการ
-        <q-pagination
-          v-model="currentPage"
-          active-color="primary"
-          color="dark"
-          :max="Number(props.maxPage)"
-          size="sm"
-          boundary-links
-          direction-links
-          @update:model-value="
-            updatePagination(currentPage, pagination.rowsPerPage)
-          "
-        ></q-pagination>
-      </template>
       <template #body="props">
         <slot v-bind="props" name="columns"></slot>
       </template>