fix(development):sort

src/modules/15_development/views/Scholarship.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -7,21 +7,17 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
-import genReportXLSX from "@/plugins/genreportxlsx";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
-import type {
-  DataOption,
-  NewPagination,
-} from "@/modules/15_development/interface/index/Main";
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
 import type { ListSholarship } from "@/modules/15_development/interface/response/Scholarship";
-/** importStore*/
 
-/** use*/
+/** use */
 const $q = useQuasar();
 const router = useRouter();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
-
+const { pagination, params, onRequest } = usePagination("", fetchList);
 /** หัวตาราง */
 const rows = ref<ListSholarship[]>([]);
 const columns = ref<QTableProps["columns"]>([
@@ -142,32 +138,27 @@ const scholarshipTypeOp = ref<DataOption[]>([
 ]);
 
 const formQuery = reactive({
-  page: 1,
-  pageSize: 10,
   year: calculateFiscalYear(new Date()), //ปีงบประมาณ
   type: "DOMESTICE",
   keyword: "",
 });
-const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
-const maxPage = ref<number>(1);
 
 /** ดึงข้อมูล */
-function fetchList() {
+async function fetchList() {
   showLoader();
-  http
-    .get(
-      config.API.devScholarship +
-        `?page=${formQuery.page}&pageSize=${
-          formQuery.pageSize
-        }&keyword=${formQuery.keyword.trim()}&year=${
-          formQuery.year
-        }&scholarshipType=${formQuery.type}`
-    )
+  await http
+    .get(config.API.devScholarship, {
+      params: {
+        ...params.value,
+        keyword: formQuery.keyword.trim(),
+        year: formQuery.year,
+        scholarshipType: formQuery.type,
+      },
+    })
     .then((res) => {
-      const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
-      totalList.value = res.data.result.total;
-      rows.value = data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -179,7 +170,7 @@ function fetchList() {
 
 /** ฟังชั่นดึงข้อมูล รายการ ใหม่ */
 function fetchNewList() {
-  formQuery.page = 1;
+  pagination.value.page = 1;
   fetchList();
 }
 
@@ -190,15 +181,12 @@ function onClickAddOrView(status: boolean = false, id: string = "") {
     : router.push("/development/scholarship/add");
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
+/** ฟังชั่นดูรายละเอียด */
+function onDetail(id: string) {
+  router.push(`/development/scholarship-detail/${id}`);
 }
 
+/** ฟังก์ชั่นแปลงสถานะ */
 function conventStatus(val: string) {
   switch (val) {
     case "PENDING":
@@ -212,35 +200,6 @@ function conventStatus(val: string) {
   }
 }
 
-// /** download file */
-// function onDownload() {
-//   showLoader();
-//   http
-//     .get(config.API.developmentReportScholarship())
-//     .then((res) => {
-//       const dataList = res.data.result;
-//       genReportXLSX(dataList, "รายการข้าราชการ ฯ ที่ได้รับทุนการศึกษา/ฝึกอบรม");
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// }
-
-/** เช็ค เมื่อมีการเปลี่ยนค่าของ ข้อมูลในเเถว */
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchNewList();
-  }
-);
-
-function onDetail(id: string) {
-  router.push(`/development/scholarship-detail/${id}`);
-}
-
 /** ดึงข้อมูลเมื่ออยู่ในหน้า */
 onMounted(() => {
   fetchList();
@@ -251,6 +210,7 @@ onMounted(() => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการข้าราชการฯ ที่ได้รับทุนการศึกษา/ฝึกอบรม
   </div>
+
   <q-card flat bordered class="q-pa-md">
     <q-toolbar class="q-pa-none">
       <div class="row q-gutter-sm">
@@ -360,7 +320,7 @@ onMounted(() => {
     </q-toolbar>
 
     <div class="col-12">
-      <d-table
+      <p-table
         for="table"
         ref="table"
         :columns="columns"
@@ -372,7 +332,8 @@ onMounted(() => {
         class="custom-header-table"
         :visible-columns="visibleColumns"
         :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
+        v-model:pagination="pagination"
+        @request="onRequest"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -419,21 +380,7 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ totalList }} รายการ
-          <q-pagination
-            v-model="formQuery.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="fetchList"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 </template>