sort

src/components/Workflow/DialogSelectPerson.vue

@@ -7,9 +7,9 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
-import type { Pagination } from "@/components/Workflow/interface/index/Main";
 import type { DataQuery } from "@/components/Workflow/interface/request/Main";
 import type { DataCommander } from "@/components/Workflow/interface/response/Main";
+import type { PropsTable } from "@/interface/PropsTable";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -76,17 +76,19 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
-const total = ref<number>(0);
-const totalList = ref<number>(1);
+const pagination = ref<PropsTable.Pagination>({
+  sortBy: "",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 0,
+});
 
 const isAcceptSetting = ref<boolean>(false);
 const isApproveSetting = ref<boolean>(false);
 const isReasonSetting = ref<boolean>(false);
 
 const formDataQuery = reactive<DataQuery>({
-  page: 1,
-  pageSize: 10,
   isAct: false,
   keyword: "",
 });
@@ -97,12 +99,11 @@ async function fetchLists() {
     .put(config.API.workflow + `commander/${props.type}`, {
       ...formDataQuery,
       keycloakId: props.keycloakId,
+      page: pagination.value.page,
+      pageSize: pagination.value.rowsPerPage,
     })
     .then(async (res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / formDataQuery.pageSize
-      );
-      total.value = res.data.result.total;
+      pagination.value.rowsNumber = res.data.result.total;
       rows.value = res.data.result.data;
     })
     .catch((err) => {
@@ -139,7 +140,7 @@ function onSubmit() {
 }
 
 function onSearchData() {
-  formDataQuery.page = 1;
+  pagination.value.page = 1;
   fetchLists();
 }
 
@@ -150,32 +151,25 @@ function onCloseModal() {
   isAcceptSetting.value = false;
   isApproveSetting.value = false;
   isReasonSetting.value = false;
-  formDataQuery.page = 1;
-  formDataQuery.pageSize = 10;
   formDataQuery.isAct = false;
   formDataQuery.keyword = "";
 }
 
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+}
+
 watch(modal, (val) => {
   if (val) {
     fetchLists();
   }
 });
-
-// watch(
-//   () => [formDataQuery.isAct, formDataQuery.pageSize],
-//   () => {
-//     onSearchData();
-//   }
-// );
-
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: Pagination) {
-  formDataQuery.pageSize = newPagination.rowsPerPage;
-}
 </script>
 
 <template>
@@ -231,7 +225,8 @@ function updatePagination(newPagination: Pagination) {
             :rows-per-page-options="[10, 25, 50, 100]"
             selection="single"
             v-model:selected="selected"
-            @update:pagination="updatePagination"
+            v-model:pagination="pagination"
+            @request="onTableRequest"
           >
             <template v-slot:header-selection="scope">
               <q-checkbox
@@ -266,21 +261,6 @@ function updatePagination(newPagination: Pagination) {
                 </q-td>
               </q-tr>
             </template>
-
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ total }} รายการ
-              <q-pagination
-                v-model="formDataQuery.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(totalList)"
-                size="sm"
-                boundary-links
-                direction-links
-                :max-pages="5"
-                @update:model-value="fetchLists()"
-              ></q-pagination>
-            </template>
           </d-table>
           <div class="q-gutter-xs q-pt-sm">
             <div>