fix(registry): sort data

src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
+import { usePagination } from "@/composables/usePagination";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -12,7 +13,6 @@ import http from "@/plugins/http";
 import type { QTableProps } from "quasar";
 import type {
   DataOption,
-  Pagination,
   Request,
 } from "@/modules/04_registryPerson/interface/index/Main";
 import type { DataRequest } from "@/modules/04_registryPerson/interface/response/Main";
@@ -22,14 +22,11 @@ const router = useRouter();
 const route = useRoute();
 const store = useRequestEditStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchListRequset);
 
 const routerName = ref<string>(route.name as string);
 //Table
 const rows = ref<DataRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
-const page = ref<number>(1); //หน้า
-const pageSize = ref<number>(10); //จำนวนต่อหน้า
-const rowsTotal = ref<number>(0); //จำนวนรายการ
-const maxPage = ref<number>(0); //จำนวนหน้า
 const columns = ref<QTableProps["columns"]>([
   {
     name: "createdAt",
@@ -45,7 +42,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "fullname",
     align: "left",
     label: "ชื่อ-นามสกุล",
-    sortable: false,
+    sortable: true,
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -54,7 +51,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "topic",
     align: "left",
     label: "ชื่อเรื่อง",
-    sortable: false,
+    sortable: true,
     field: "topic",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -64,7 +61,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "detail",
     align: "left",
     label: "รายละเอียด",
-    sortable: false,
+    sortable: true,
     field: "detail",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -84,7 +81,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "remark",
     align: "left",
     label: "หมายเหตุ",
-    sortable: false,
+    sortable: true,
     field: "remark",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -116,8 +113,7 @@ async function fetchListRequset() {
       ) + `admin`,
       {
         params: {
-          page: page.value,
-          pageSize: pageSize.value,
+          ...params.value,
           status: status.value,
           keyword: keyword.value.trim(),
         },
@@ -125,8 +121,7 @@ async function fetchListRequset() {
     )
     .then((res) => {
       const data = res.data.result;
-      maxPage.value = Math.ceil(data.total / pageSize.value);
-      rowsTotal.value = data.total;
+      pagination.value.rowsNumber = data.total;
       rows.value = data.data;
     })
     .catch((err) => {
@@ -139,7 +134,7 @@ async function fetchListRequset() {
 
 /** function เลือกสถานะคำร้อง*/
 function updateStatusValue() {
-  page.value = 1;
+  pagination.value.page = 1;
   // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
   fetchListRequset();
 }
@@ -177,26 +172,6 @@ function onclickEdit(data: Request) {
   }
 }
 
-/**
- * function เลือกแถวต่อหน้า
- * @param newPagination
- */
-function updatePageSizePagination(newPagination: Pagination) {
-  page.value = 1;
-  pageSize.value = newPagination.rowsPerPage;
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ pageSize
- * เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
- */
-watch(
-  () => pageSize.value,
-  () => {
-    fetchListRequset();
-  }
-);
-
 /**  HooK lifecycle ทำงานเมื่อมีการเรียกใช้งาน Componenets */
 onMounted(() => {
   fetchListRequset();
@@ -265,14 +240,15 @@ onMounted(() => {
     </div>
 
     <div class="col-12">
-      <d-table
+      <p-table
         :columns="columns"
         :rows="rows"
         row-key="id"
         :rows-per-page-options="[10, 25, 50, 100]"
         :paging="true"
         :visible-columns="visibleColumns"
-        @update:pagination="updatePageSizePagination"
+        @request="onRequest"
+        v-model:pagination="pagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -302,21 +278,7 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ rowsTotal.toLocaleString() }} รายการ
-          <q-pagination
-            v-model="page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="fetchListRequset()"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 </template>