fix(leave-history):sort

src/components/TablePagination.vue

@@ -11,7 +11,6 @@
     :pagination-label="paginationLabel"
     v-model:pagination="pagination"
     @request="onRequest"
-    :grid="!$q.screen.gt.xs"
     :rows-per-page-options="[10, 25, 50, 100]"
     :loading="loading"
   >

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, //หน้า
+      ...params.value,
-      pageSize: formFilter.pageSize || 10, //จำนวนแถวต่อหน้า
     })
     .then((res) => {
-      const data = res.data.result;
+      const result = res.data.result;
-      rows.value = data.data;
+      pagination.value.rowsNumber = result.total;
-      total.value = data.total;
+      rows.value = result.data;
-      maxPage.value = Math.ceil(data.total / formFilter.pageSize);
     })
     .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">
+        <q-card-section
-          <div class="row col-12 q-gutter-sm">
+          :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>
-
+                </p-table>
-                  <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>
               </div>
             </div>
 

src/modules/09_leave/views/07_LeaveHistoryMain.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, watch } from "vue";
+import { reactive, ref, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { checkPermission } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
 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 { DataPagination } from "@/modules/09_leave/interface/index/Main";
 import type {
   DataLeaveType,
   DataLeaveBeginning,
@@ -22,22 +21,21 @@ import DialogForm from "@/modules/09_leave/components/07_LeaveHistory/DialogForm
 
 const $q = useQuasar();
 const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore());
-const { findYear } = useLeaveHistoryDataStore();
 const { showLoader, hideLoader, messageError, dialogRemove, success } =
   useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  () => onSearchData(false)
+);
 
 const formFilter = reactive({
   year: calculateFiscalYear(new Date()),
   type: "00000000-0000-0000-0000-000000000000",
-  page: 1,
-  pageSize: 10,
   keyword: "",
 });
 const leaveTypeOptions = ref<DataLeaveType[]>([]);
 
 const rows = ref<DataLeaveBeginning[]>([]);
-const total = ref<number>(0);
-const maxPage = ref<number>(0);
 const columns = ref<QTableColumn[]>([
   {
     name: "fullName",
@@ -122,13 +120,13 @@ async function fetchDataLeaveBeginning() {
   await http
     .post(config.API.leaveBeginning + `/list`, {
       ...formFilter,
+      ...params.value,
       keyword: formFilter.keyword.trim(),
     })
     .then((res) => {
-      const data = res.data.result;
+      const result = res.data.result;
-      rows.value = data.data;
+      pagination.value.rowsNumber = result.total;
-      total.value = data.total;
+      rows.value = result.data;
-      maxPage.value = Math.ceil(data.total / formFilter.pageSize);
     })
     .catch((err) => {
       messageError($q, err);
@@ -143,7 +141,7 @@ async function onSearchData(newSearch: boolean = true) {
   try {
     showLoader();
     if (newSearch) {
-      formFilter.page = 1;
+      pagination.value.page = 1;
     }
     await fetchDataLeaveBeginning();
   } finally {
@@ -188,11 +186,7 @@ function onDeleteLeaveBeginning(id: string) {
     await http
       .delete(config.API.leaveBeginning + `/${id}`)
       .then(async () => {
-        formFilter.page = await updateCurrentPage(
+        await checkAndUpdatePage(rows.value.length);
-          formFilter.page,
-          maxPage.value,
-          rows.value.length
-        );
         await fetchDataLeaveBeginning();
         success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -205,29 +199,11 @@ function onDeleteLeaveBeginning(id: string) {
   });
 }
 
-/**
- * ฟังก์ชันอัปเดทรายการแถวต่อหน้า
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: DataPagination) {
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
-/** Hook*/
-watch(
-  () => formFilter.pageSize,
-  () => {
-    onSearchData(true);
-  }
-);
-
 onMounted(async () => {
   try {
     showLoader();
     await fetchLeaveType();
     await fetchDataLeaveBeginning();
-  } catch (error) {
-    console.log(error);
   } finally {
     hideLoader();
   }
@@ -242,67 +218,69 @@ onMounted(async () => {
   <q-card flat bordered class="q-pa-md">
     <div class="row q-col-gutter-sm">
       <div class="col-12">
-        <div class="row q-col-gutter-y-sm">
+        <div class="row q-col-gutter-sm">
-          <div class="row q-col-gutter-sm items-center">
+          <div class="row q-col-gutter-sm col-xs-12 col-sm-6 col-md-6">
-            <datepicker
+            <div class="col-xs-12 col-sm-4 col-md-4">
-              v-model="formFilter.year"
+              <datepicker
-              :locale="'th'"
+                v-model="formFilter.year"
-              autoApply
+                :locale="'th'"
-              year-picker
+                autoApply
-              :enableTimePicker="false"
+                year-picker
-              style="width: 150px"
+                :enableTimePicker="false"
-              @update:model-value="onSearchData()"
+                @update:model-value="onSearchData()"
-            >
+              >
-              <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
+                <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
+                  parseInt(value + 543)
-              }}</template>
+                }}</template>
-              <template #trigger>
+                <template #trigger>
-                <q-input
+                  <q-input
-                  dense
+                    dense
-                  outlined
+                    outlined
-                  :model-value="Number(formFilter.year) + 543"
+                    :model-value="Number(formFilter.year) + 543"
-                  :label="`${'ปีงบประมาณ'}`"
+                    :label="`${'ปีงบประมาณ'}`"
-                  bg-color="white"
+                    bg-color="white"
-                >
+                  >
-                  <template v-slot:prepend>
+                    <template v-slot:prepend>
-                    <q-icon
+                      <q-icon
-                      name="event"
+                        name="event"
-                      class="cursor-pointer"
+                        class="cursor-pointer"
-                      style="color: var(--q-primary)"
+                        style="color: var(--q-primary)"
-                    >
+                      >
-                    </q-icon>
+                      </q-icon>
-                  </template>
+                    </template>
-                </q-input>
+                  </q-input>
-              </template>
+                </template>
-            </datepicker>
+              </datepicker>
-
+            </div>
-            <q-select
+            <div class="col-xs-12 col-sm-7 col-md-4">
-              emit-value
+              <q-select
-              map-options
+                emit-value
-              outlined
+                map-options
-              dense
+                outlined
-              option-value="id"
+                dense
-              option-label="name"
+                option-value="id"
-              label="ประเภทการลา"
+                option-label="name"
-              use-input
+                label="ประเภทการลา"
-              v-model="formFilter.type"
+                use-input
-              hide-selected
+                v-model="formFilter.type"
-              fill-input
+                hide-selected
-              :options="leaveTypeOptions"
+                fill-input
-              @update:model-value="onSearchData()"
+                :options="leaveTypeOptions"
-              @filter="(inputValue:string,
+                @update:model-value="onSearchData()"
-                      doneFn:Function) => filterOptionFn(inputValue,doneFn)"
+                @filter="(inputValue:string,
-            >
+              doneFn:Function) => filterOptionFn(inputValue,doneFn)"
-              <template v-slot:no-option>
+              >
-                <q-item>
+                <template v-slot:no-option>
-                  <q-item-section class="text-grey">
+                  <q-item>
-                    ไม่มีข้อมูล
+                    <q-item-section class="text-grey">
-                  </q-item-section>
+                      ไม่มีข้อมูล
-                </q-item>
+                    </q-item-section>
-              </template>
+                  </q-item>
-            </q-select>
+                </template>
-            <div>
+              </q-select>
+            </div>
+            <div class="col-xs-12 col-sm-1 col-md-4 items-center">
               <q-btn
                 v-if="checkPermission($route)?.attrIsCreate"
                 dense
@@ -318,39 +296,42 @@ onMounted(async () => {
           </div>
 
           <q-space />
-          <div class="row q-col-gutter-sm">
+          <div class="row q-col-gutter-sm col-xs-12 col-sm-6 col-md-6">
-            <q-input
+            <div class="col-xs-12 col-sm-7 col-md-8">
-              standout
+              <q-input
-              dense
+                standout
-              v-model="formFilter.keyword"
+                dense
-              outlined
+                v-model="formFilter.keyword"
-              placeholder="ค้นหา"
+                outlined
-              @keydown.enter.prevent="onSearchData()"
+                placeholder="ค้นหา"
-            >
+                @keydown.enter.prevent="onSearchData()"
-              <template v-slot:append>
+              >
-                <q-icon name="search" />
+                <template v-slot:append>
-              </template>
+                  <q-icon name="search" />
-            </q-input>
+                </template>
-
+              </q-input>
-            <q-select
+            </div>
-              v-model="visibleColumns"
+            <div class="col-xs-12 col-sm-5 col-md-4">
-              multiple
+              <q-select
-              outlined
+                v-model="visibleColumns"
-              dense
+                multiple
-              options-dense
+                outlined
-              :display-value="$q.lang.table.columns"
+                dense
-              emit-value
+                options-dense
-              map-options
+                :display-value="$q.lang.table.columns"
-              :options="columns"
+                emit-value
-              option-value="name"
+                map-options
-              style="min-width: 140px"
+                :options="columns"
-            />
+                option-value="name"
+                style="min-width: 140px"
+              />
+            </div>
           </div>
         </div>
       </div>
 
       <div class="col-12">
-        <d-table
+        <p-table
           ref="table"
           :columns="columns"
           :rows="rows"
@@ -360,7 +341,8 @@ onMounted(async () => {
           dense
           class="custom-header-table"
           :visible-columns="visibleColumns"
-          @update:pagination="updatePagination"
+          v-model:pagination="pagination"
+          @request="onRequest"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
@@ -409,21 +391,7 @@ onMounted(async () => {
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
+        </p-table>
-            ทั้งหมด {{ 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>
       </div>
     </div>
   </q-card>