fix load Table

src/modules/14_IDP/views/main.vue

@@ -8,10 +8,9 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store"; // ดึง store IDP
 
+import type { PropsTable } from "@/interface/PropsTable";
 import type { DataOption, RowsListMain } from "@/modules/14_IDP/interface/Main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -23,13 +22,12 @@ const filterKeyword = ref<string>("");
 const status = ref<string>("ALL"); // สถานะคำร้อง
 const statusOptions = ref<DataOption[]>(store.optionStatus);
 const rows = ref<RowsListMain[]>([]);
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "createdAt",
   descending: true,
   page: 1,
   rowsPerPage: 10,
+  rowsNumber: 0,
 });
 const visibleColumns = ref<string[]>([
   "no",
@@ -186,11 +184,9 @@ async function getListData() {
   `
     )
     .then(async (res) => {
-      const data = await res.data.result.data;
-      const dataTotal = await res.data.result.total;
-      totalList.value = Math.ceil(dataTotal / pagination.value.rowsPerPage);
-      total.value = dataTotal;
-      rows.value = data;
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -245,10 +241,15 @@ async function downloadUrl(id: string, fileName: string) {
     });
 }
 
-/** เมื่อมีการเปลี่ยน แถว ดึงข้อมูลใหม่ */
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  getListData();
 }
 
 /**
@@ -264,13 +265,6 @@ function getSerach() {
   getListData();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    await getListData();
-  }
-);
-
 onMounted(async () => {
   await getListData();
 });
@@ -366,17 +360,16 @@ onMounted(async () => {
           </div>
 
           <div class="col-12">
-            <SkeletonTable v-if="isLoading" :columns="columns" />
             <d-table
-              v-else
               :columns="columns"
               :rows="rows"
               row-key="id"
               :paging="true"
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
-              @update:pagination="updatePagination"
+              @request="onTableRequest"
               v-model:pagination="pagination"
+              :loading="isLoading"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
@@ -459,20 +452,6 @@ onMounted(async () => {
                   </q-td>
                 </q-tr>
               </template>
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ total }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="Number(totalList)"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  :max-pages="5"
-                  @update:model-value="getListData()"
-                ></q-pagination>
-              </template>
             </d-table>
           </div>
         </q-card>