fix load Table

src/modules/07_appealComplain/views/Main.vue

@@ -10,16 +10,15 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
 
+import type { PropsTable } from "@/interface/PropsTable";
 import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType";
 import type { DataOption } from "@/modules/07_appealComplain/interface/index/main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
 const dataStore = useAppealComplainStore();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 
 const filterKeyword = ref<string>("");
 const type = ref<DataOption[]>([
@@ -28,25 +27,18 @@ const type = ref<DataOption[]>([
 ]);
 
 const isload = ref<boolean>(false);
-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 formData = reactive<FormType>({
   type: "ALL",
   status: "ALL",
   year: new Date().getFullYear(),
 });
-
 const visibleColumns = ref<string[]>([
   "no",
   "title",
@@ -59,7 +51,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "status",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -170,19 +161,16 @@ async function getData() {
       )
     )
     .then(async (res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      let data = res.data.result.data;
-      await dataStore.fetchAppealComplain(data);
-      isload.value = false;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      dataStore.fetchAppealComplain(result.data);
     })
     .catch((e: any) => {
       messageError($q, e);
-      isload.value = false;
     })
-    .finally(() => {});
+    .finally(() => {
+      isload.value = false;
+    });
 }
 
 /**
@@ -214,22 +202,21 @@ function redirectToPageadd() {
   router.push(`/appeal-complain/add`);
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
   pagination.value.page = 1;
   getData();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  getData();
+}
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
@@ -241,6 +228,7 @@ onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
@@ -377,36 +365,18 @@ onMounted(async () => {
             />
 
             <div class="col-12">
-              <SkeletonTable v-if="isload" :columns="dataStore.columns" />
               <d-table
-                v-else
                 flat
                 bordered
                 dense
-                class="custom-table2"
-                style="max-height: 80vh"
                 :rows="dataStore.rows"
                 :columns="dataStore.columns"
                 :visible-columns="dataStore.visibleColumns"
                 :rows-per-page-options="[10, 25, 50, 100]"
-                @update:pagination="updatePagination"
+                @request="onTableRequest"
                 v-model:pagination="pagination"
+                :loading="isload"
               >
-                <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="getData()"
-                  ></q-pagination>
-                </template>
-
                 <template v-slot:header="props">
                   <q-tr :props="props">
                     <q-th
@@ -425,7 +395,7 @@ onMounted(async () => {
                       v-for="col in props.cols"
                       :key="col.name"
                       :props="props"
-                      @click="editPage(props.row.id)"
+                      @click.stop.prevent="editPage(props.row.id)"
                     >
                       <div v-if="col.name == 'no'">
                         {{
@@ -445,7 +415,7 @@ onMounted(async () => {
                 <template #item="props">
                   <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
                     <q-card bordered flat>
-                      <q-list @click="editPage(props.row.id)">
+                      <q-list @click.stop.prevent="editPage(props.row.id)">
                         <q-item v-for="col in props.cols" :key="col.name">
                           <q-item-section>
                             <q-item-label caption>{{ col.label }}</q-item-label>
@@ -469,49 +439,5 @@ onMounted(async () => {
     </div>
   </div>
 </template>
-<style lang="scss">
-.icon-color {
-  color: #4154b3;
-}
 
-.custom-table2 {
-  max-height: 64vh;
-
-  .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;
-  }
-
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
-
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
-
-  /* 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"></style>