Merge pull request #1465 from Frappet/SortLeave

SortLeave

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/composables/usePagination.ts

@@ -34,7 +34,11 @@ export function usePagination(
     if (!newPagination?.page || !newPagination?.rowsPerPage) return;
 
     pagination.value = { ...newPagination };
-    if (fetchFunction) {
+    if (
+      fetchFunction &&
+      pagination.value.rowsNumber &&
+      pagination.value.rowsNumber > 0
+    ) {
       await fetchFunction(); // เรียกฟังก์ชันที่ส่งเข้ามา
     }
   }

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

@@ -5,29 +5,32 @@ import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useRoute } from "vue-router";
 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 {
+import type { DataOption } from "@/modules/09_leave/interface/index/Main";
-  DataOption,
-  DataPagination,
-} from "@/modules/09_leave/interface/index/Main";
 import type {
   DataLeaveType,
   DataLeaveBeginning,
 } from "@/modules/09_leave/interface/response/leaveHistory";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import { max } from "moment";
 
 /** useStore*/
 const $q = useQuasar();
+const route = useRoute();
 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,18 +45,13 @@ const formFilter = reactive({
   citizenId: "",
   type: "citizenId",
   keyword: "",
-  page: 1,
-  pageSize: 10,
 });
 const searchTypeOption = ref<DataOption[]>([
   { id: "citizenId", name: "เลขประจำตัวประชาชน" },
-  { id: "firstName", name: "ชื่อ" },
+  { id: "fullName", name: "ชื่อ-นามสกุล" },
-  { id: "lastName", name: "นามสกุล" },
 ]);
 const rows = ref<DataLeaveBeginning[]>([]);
 const selected = ref<DataLeaveBeginning[]>([]);
-const total = ref<number>(0);
-const maxPage = ref<number>(0);
 const columns = ref<QTableColumn[]>([
   {
     name: "citizenId",
@@ -65,13 +63,16 @@ const columns = ref<QTableColumn[]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullName",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
     field: "fullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix || ""}${row.firstName || ""} ${row.lastName || ""}`;
+    },
   },
 ]);
 
@@ -96,9 +97,7 @@ async function onSubmit() {
       : `${config.API.leaveBeginning}/${rowId.value}`;
     const method = !isStatusEdit.value ? "post" : "put";
     await http[method](pathAPI, {
-      profileId: !isStatusEdit.value
+      profileId: !isStatusEdit.value ? selected.value[0].id : profileId.value,
-        ? selected.value[0].profileId
-        : profileId.value,
       leaveTypeId: formData.leaveTypeId,
       leaveYear: formData.leaveYear,
       leaveDays: formData.leaveDays ? Number(formData.leaveDays) : 0,
@@ -123,25 +122,24 @@ async function onSubmit() {
 
 /** ฟังก์ชันเรียกรายชื่อคน*/
 async function fetchDataPerson() {
-  await http
+  try {
-    .post(config.API.leaveSearch(), {
+    const res = await http.post(
-      citizenId:
+      config.API.orgSearchPersonal(),
-        formFilter.type === "citizenId" ? formFilter.keyword.trim() : "", //เลขประจำตัวประชาชน
+      {
-      firstname:
+        fieldName: formFilter.type,
-        formFilter.type === "firstName" ? formFilter.keyword.trim() : "", //ชื่อจริง
+        keyword: formFilter.keyword.trim(),
-      lastname: formFilter.type === "lastName" ? formFilter.keyword.trim() : "", //นามสกุล
+        system: (route.meta?.Key as string) || undefined,
-      page: formFilter.page, //หน้า
+      },
-      pageSize: formFilter.pageSize || 10, //จำนวนแถวต่อหน้า
+      {
-    })
+        params: params.value,
-    .then((res) => {
+      }
-      const data = res.data.result;
+    );
-      rows.value = data.data;
+    const result = res.data.result;
-      total.value = data.total;
+    pagination.value.rowsNumber = result.total;
-      maxPage.value = Math.ceil(data.total / formFilter.pageSize);
+    rows.value = result.data;
-    })
+  } catch (e) {
-    .catch((e) => {
     messageError($q, e);
-    });
+  }
 }
 
 /**
@@ -168,7 +166,7 @@ async function onSearchData(newSearch: boolean) {
   try {
     showLoader();
     if (newSearch) {
-      formFilter.page = 1;
+      pagination.value.page = 1;
     }
     await fetchDataPerson();
   } finally {
@@ -176,28 +174,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 +238,6 @@ function classInput(val: boolean) {
   };
 }
 
-/** Hook*/
-watch(
-  () => formFilter.pageSize,
-  () => {
-    modal.value && onSearchData(true);
-  }
-);
-
 watch(modal, async (val) => {
   if (val) {
     try {
@@ -259,8 +246,6 @@ watch(modal, async (val) => {
         filterLeaveTypeData(),
         isStatusEdit.value && defineDataLeaveBeginning(rowData.value),
       ]);
-    } catch (error) {
-      console.log(error);
     } finally {
       hideLoader();
     }
@@ -278,10 +263,14 @@ 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 col-12 no-wrap full-height">
             <!-- รายชื่อ -->
-            <div class="q-pa-md col-md-8 col-xs-12" v-if="!isStatusEdit">
+            <div class="col-8 overflow-auto q-pa-md" v-if="!isStatusEdit">
               <div class="row q-col-gutter-sm">
                 <div class="col-12 col-sm-6 col-md-3">
                   <q-select
@@ -321,11 +310,11 @@ watch(modal, async (val) => {
               </div>
 
               <div class="col-12 q-pt-sm">
-                <d-table
+                <p-table
                   ref="table"
                   :columns="columns"
                   :rows="rows"
-                  row-key="profileId"
+                  row-key="id"
                   flat
                   bordered
                   :paging="true"
@@ -333,7 +322,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,29 +359,14 @@ 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>
 
             <q-separator vertical />
 
             <!-- input -->
-            <div class="q-pa-md col">
+            <div class="col overflow-hidden q-pa-md">
               <div class="row q-col-gutter-sm">
                 <div class="col-12">
                   <datepicker

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,15 +218,15 @@ 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">
+            <div class="col-xs-12 col-sm-4 col-md-4">
               <datepicker
                 v-model="formFilter.year"
                 :locale="'th'"
                 autoApply
                 year-picker
                 :enableTimePicker="false"
-              style="width: 150px"
                 @update:model-value="onSearchData()"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
@@ -276,7 +252,8 @@ onMounted(async () => {
                   </q-input>
                 </template>
               </datepicker>
-
+            </div>
+            <div class="col-xs-12 col-sm-7 col-md-4">
               <q-select
                 emit-value
                 map-options
@@ -302,7 +279,8 @@ onMounted(async () => {
                   </q-item>
                 </template>
               </q-select>
-            <div>
+            </div>
+            <div class="col-xs-12 col-sm-1 col-md-4 items-center">
               <q-btn
                 v-if="checkPermission($route)?.attrIsCreate"
                 dense
@@ -318,7 +296,8 @@ 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">
+            <div class="col-xs-12 col-sm-7 col-md-8">
               <q-input
                 standout
                 dense
@@ -331,7 +310,8 @@ onMounted(async () => {
                   <q-icon name="search" />
                 </template>
               </q-input>
-
+            </div>
+            <div class="col-xs-12 col-sm-5 col-md-4">
               <q-select
                 v-model="visibleColumns"
                 multiple
@@ -348,9 +328,10 @@ onMounted(async () => {
             </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>