fix load Table

src/modules/06_evaluate/components/viewstep/popupHistory.vue

@@ -9,12 +9,11 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 
 import HeaderDialog from "@/components/DialogHeader.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const route = useRoute();
 const mixins = useCounterMixin();
-const { showLoader, hideLoader, date2Thai, messageError } = mixins;
+const { date2Thai, messageError } = mixins;
 
 const isLoading = ref<boolean>(false);
 
@@ -127,9 +126,7 @@ watch(
       <q-card-section>
         <div class="col-xs-12 col-sm-12 col-md-12 row q-col-gutter-md">
           <div class="col-12">
-            <SkeletonTable v-if="isLoading" :columns="columns" />
             <d-table
-              v-else
               ref="table"
               flat
               bordered
@@ -138,6 +135,8 @@ watch(
               :rows="row"
               dense
               :rows-per-page-options="[10, 25, 50, 100]"
+              :pagination="{ page: 1, rowsPerPage: 10 }"
+              :loading="isLoading"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">

src/modules/06_evaluate/components/viewstep/tableStep1.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const props = defineProps({
   columns: {
     type: Array as () => any[],
@@ -19,9 +17,7 @@ const props = defineProps({
 
 <template>
   <div class="q-pa-sm row col-12">
-    <SkeletonTable class="col-12" v-if="isLoading" :columns="props.columns" />
     <d-table
-      v-else
       ref="table"
       flat
       bordered
@@ -32,6 +28,9 @@ const props = defineProps({
       virtual-scroll
       class="row col-12"
       :style="$q.screen.lt.sm ? 'width: 80vw' : 'width: 50vw;'"
+      :pagination="{ page: 1, rowsPerPage: 10 }"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props" class="bg-grey-2">
@@ -54,30 +53,4 @@ const props = defineProps({
   </div>
 </template>
 
-<style lang="scss" scoped>
-.custom-header-table {
-  height: auto;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/modules/06_evaluate/components/viewstep/viewStep1.vue

@@ -2,7 +2,7 @@ div
 <script setup lang="ts">
 import { reactive, onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
-import { is, useQuasar } from "quasar";
+import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -21,7 +21,6 @@ import type {
 /** importComponents*/
 import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";
 import HeaderDialog from "@/components/DialogHeader.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 /** use*/
 const mixin = useCounterMixin();
@@ -410,7 +409,7 @@ onMounted(async () => {
   >
     <div class="row col-12">
       <div class="col-12" v-if="isLoading.loadDetail">
-        <q-skeleton type="Qcard" height="200px" class="q-mb-md" />
+        <q-skeleton height="200px" class="q-mb-md" />
       </div>
       <q-card v-else class="col-12 cardSp1" bordered>
         <div class="text-weight-bold row items-center bg-grey-2 col-12">
@@ -516,7 +515,7 @@ onMounted(async () => {
       </q-card>
 
       <div class="col-12" v-if="isLoading.loadEducation">
-        <q-skeleton type="Qcard" height="200px" class="q-mb-md" />
+        <q-skeleton height="200px" class="q-mb-md" />
       </div>
       <q-card v-else class="col-12 cardSp1" bordered>
         <div class="text-weight-bold row items-center bg-grey-2 col-12">
@@ -668,14 +667,8 @@ onMounted(async () => {
           <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
         </div>
         <div class="col-12"><q-separator /></div>
-
-        <div class="col-10">
-          <SkeletonTable
-            v-if="isLoading.loadSalary"
-            :columns="columnSalaries"
-          />
+        <div class="col-10 q-pa-sm">
           <d-table
-            v-else
             ref="table"
             row-key="id"
             flat
@@ -685,6 +678,8 @@ onMounted(async () => {
             :rows="formDetail.salaries"
             :paging="true"
             :rows-per-page-options="[20, 50, 100]"
+            :pagination="{ page: 1, rowsPerPage: 20 }"
+            :loading="isLoading.loadSalary"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -768,13 +763,7 @@ onMounted(async () => {
         <div class="col-12"><q-separator /></div>
         <div class="col-10">
           <div class="q-pa-sm row col-12">
-            <SkeletonTable
-              v-if="isLoading.loadExperience"
-              :columns="columnAssessments"
-              class="col-12"
-            />
             <d-table
-              v-else
               flat
               bordered
               :columns="columnAssessments"
@@ -784,6 +773,8 @@ onMounted(async () => {
               virtual-scroll
               class="row col-12"
               :style="$q.screen.lt.sm ? 'width: 80vw' : 'width: 50vw;'"
+              :pagination="{ page: 1, rowsPerPage: 20 }"
+              :loading="isLoading.loadExperience"
             >
               <template v-slot:header="props">
                 <q-tr :props="props" class="bg-grey-2">