fix(leave-history):sort

src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue

@@ -8,6 +8,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveHistoryDataStore } from "@/modules/09_leave/stores/LeaveHistoryStore";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
 import type { QTableColumn } from "quasar";
 import type {
@@ -20,7 +21,7 @@ import type {
 } from "@/modules/09_leave/interface/response/leaveHistory";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import { max } from "moment";
+import { co } from "@fullcalendar/core/internal-common";
 
 /** useStore*/
 const $q = useQuasar();
@@ -28,6 +29,11 @@ const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore());
 const { findYear } = useLeaveHistoryDataStore();
 const { dialogConfirm, showLoader, success, messageError, hideLoader } =
   useCounterMixin();
+
+const { pagination, params, onRequest } = usePagination("", () =>
+  onSearchData(false)
+);
+
 const modal = defineModel<boolean>("modal", { required: true });
 const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
 const rowData = defineModel<DataLeaveBeginning>("rowData", {
@@ -42,8 +48,6 @@ const formFilter = reactive({
   citizenId: "",
   type: "citizenId",
   keyword: "",
-  page: 1,
-  pageSize: 10,
 });
 const searchTypeOption = ref<DataOption[]>([
   { id: "citizenId", name: "เลขประจำตัวประชาชน" },
@@ -130,14 +134,12 @@ async function fetchDataPerson() {
       firstname:
         formFilter.type === "firstName" ? formFilter.keyword.trim() : "", //ชื่อจริง
       lastname: formFilter.type === "lastName" ? formFilter.keyword.trim() : "", //นามสกุล
-      page: formFilter.page, //หน้า
-      pageSize: formFilter.pageSize || 10, //จำนวนแถวต่อหน้า
+      ...params.value,
     })
     .then((res) => {
-      const data = res.data.result;
-      rows.value = data.data;
-      total.value = data.total;
-      maxPage.value = Math.ceil(data.total / formFilter.pageSize);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -168,7 +170,7 @@ async function onSearchData(newSearch: boolean) {
   try {
     showLoader();
     if (newSearch) {
-      formFilter.page = 1;
+      pagination.value.page = 1;
     }
     await fetchDataPerson();
   } finally {
@@ -176,28 +178,25 @@ async function onSearchData(newSearch: boolean) {
   }
 }
 
-/**
- * ฟังก์ชันอัปเดทรายการแถวต่อหน้า
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: DataPagination) {
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
 /** ฟังก์ชันปิด Dialog*/
 function onClose() {
   modal.value = false;
   formFilter.citizenId = "";
   formFilter.type = "citizenId";
   formFilter.keyword = "";
-  formFilter.page = 1;
-  formFilter.pageSize = 10;
   formData.leaveTypeId = "";
   formData.leaveYear = calculateFiscalYear(new Date());
   formData.leaveDays = "";
   formData.leaveDaysUsed = "";
   rows.value = [];
   selected.value = [];
+  pagination.value = {
+    page: 1,
+    rowsPerPage: 10,
+    rowsNumber: 0,
+    sortBy: "",
+    descending: false,
+  };
 }
 
 /**
@@ -243,14 +242,6 @@ function classInput(val: boolean) {
   };
 }
 
-/** Hook*/
-watch(
-  () => formFilter.pageSize,
-  () => {
-    modal.value && onSearchData(true);
-  }
-);
-
 watch(modal, async (val) => {
   if (val) {
     try {
@@ -278,10 +269,17 @@ watch(modal, async (val) => {
         />
         <q-separator />
 
-        <q-card-section :horizontal="$q.screen.gt.md" style="padding: 0px">
-          <div class="row col-12 q-gutter-sm">
+        <q-card-section
+          :horizontal="$q.screen.gt.md"
+          class="q-pa-none"
+          style="height: 50vh"
+        >
+          <div class="row no-wrap full-height">
             <!-- รายชื่อ -->
-            <div class="q-pa-md col-md-8 col-xs-12" v-if="!isStatusEdit">
+            <div
+              class="q-pa-md overflow-auto col-md-8 col-xs-12"
+              v-if="!isStatusEdit"
+            >
               <div class="row q-col-gutter-sm">
                 <div class="col-12 col-sm-6 col-md-3">
                   <q-select
@@ -321,7 +319,7 @@ watch(modal, async (val) => {
               </div>
 
               <div class="col-12 q-pt-sm">
-                <d-table
+                <p-table
                   ref="table"
                   :columns="columns"
                   :rows="rows"
@@ -333,7 +331,8 @@ watch(modal, async (val) => {
                   :rows-per-page-options="[10, 25, 50, 100]"
                   selection="single"
                   v-model:selected="selected"
-                  @update:pagination="updatePagination"
+                  v-model:pagination="pagination"
+                  @request="onRequest"
                 >
                   <template v-slot:header="props">
                     <q-tr :props="props">
@@ -369,22 +368,7 @@ watch(modal, async (val) => {
                       </q-td>
                     </q-tr>
                   </template>
-
-                  <template v-slot:pagination="scope">
-                    ทั้งหมด {{ total.toLocaleString() }} รายการ
-                    <q-pagination
-                      v-model="formFilter.page"
-                      active-color="primary"
-                      color="dark"
-                      :max="Number(maxPage)"
-                      size="sm"
-                      boundary-links
-                      direction-links
-                      :max-pages="5"
-                      @update:model-value="onSearchData(false)"
-                    ></q-pagination>
-                  </template>
-                </d-table>
+                </p-table>
               </div>
             </div>