fix load Table

src/modules/09_scholarship/views/main.vue

@@ -13,10 +13,8 @@ import type {
   Scholarship,
 } from "@/modules/09_scholarship/interface/index/Main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError } = mixin;
+const { messageError } = mixin;
 const router = useRouter();
 
 const $q = useQuasar();
@@ -88,7 +86,7 @@ const visibleColumns = ref<string[]>(["scholarshipYear", "scholarshipType"]);
 
 /** ดึงข้อมูล */
 async function getData() {
-  
+  isLoad.value = true;
   await http
     .get(
       config.API.developmentScholarship +
@@ -96,13 +94,12 @@ async function getData() {
     )
     .then(async (res) => {
       rows.value = res.data.result;
-      isLoad.value = false
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      isLoad.value = false
+      isLoad.value = false;
     });
 }
 
@@ -110,42 +107,22 @@ function onEdit(id: string) {
   router.push(`/scholarship/${id}`);
 }
 
-// watch(
-//   () => currentPage.value,
-//   () => {
-//     rowsPerPage.value = pagination.value.rowsPerPage;
-//     getData();
-//   }
-// );
-
-// watch(
-//   () => pagination.value.rowsPerPage,
-//   () => {
-//     rowsPerPage.value = pagination.value.rowsPerPage;
-//     currentPage.value = 1;
-//     getData();
-//   }
-// );
-
 async function getProfileId() {
-  isLoad.value = true
+  isLoad.value = true;
   if (dataStore.profileId) {
     profilId.value = dataStore.profileId;
   } else {
-    
     try {
       const res = await http.get(config.API.profilePosition());
       dataStore.profileId = res.data.result.profileId;
       profilId.value = dataStore.profileId;
-      
+      await getData();
     } catch (e) {
       messageError($q, e);
     } finally {
-      
+      isLoad.value = false;
     }
   }
-
-  await getData();
 }
 
 function convertType(val: string) {
@@ -259,9 +236,8 @@ onMounted(async () => {
             />
           </div>
 
-          <div>
+          <div class="col-12">
             <d-table
-              v-if="!isLoad"
               flat
               bordered
               dense
@@ -270,21 +246,9 @@ onMounted(async () => {
               :columns="columns"
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
-              v-model:pagination="pagination"
+              :pagination="pagination"
+              :loading="isLoad"
             >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ rows.length }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
               <template v-slot:header="props">
                 <q-tr :props="props">
                   <q-th
@@ -346,7 +310,6 @@ onMounted(async () => {
                 </div>
               </template>
             </d-table>
-            <SkeletonTable v-else :columns="columns" />
           </div>
         </q-card>
       </div>