fix(registry): sort data

src/components/TablePagination.vue

@@ -0,0 +1,234 @@
+<template>
+  <q-table
+    ref="table"
+    flat
+    bordered
+    class="custom-header-table"
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :pagination-label="paginationLabel"
+    v-model:pagination="pagination"
+    @request="onRequest"
+    :grid="!$q.screen.gt.xs"
+    :rows-per-page-options="[10, 25, 50, 100]"
+    :loading="loading"
+  >
+    <template v-slot:pagination="scope">
+      ทั้งหมด {{ pagination.rowsNumber || attrs.rows.length }} รายการ
+      <q-pagination
+        v-model="pagination.page"
+        @update:model-value="handlePageChange"
+        active-color="primary"
+        color="dark"
+        :max="scope.pagesNumber"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+
+    <template v-for="(_, slot) in slots" v-slot:[slot]="scope" :key="slot">
+      <slot :name="slot" v-bind="scope || {}" />
+    </template>
+
+    <template v-slot:loading>
+      <q-inner-loading showing class="q-mt-lg">
+        <q-spinner-dots color="primary" size="40px" />
+      </q-inner-loading>
+    </template>
+
+    <template v-slot:no-data>
+      <div
+        v-if="!loading && attrs.rows.length === 0"
+        class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+      >
+        <span> ไม่พบข้อมูล </span>
+      </div>
+    </template>
+
+    <!-- <template #item="props">
+      <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+        <q-card bordered flat>
+          <q-list>
+            <q-item
+              v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+              :key="col.name"
+            >
+              <q-item-section>
+                <q-item-label caption>{{ col.label }}</q-item-label>
+
+                <q-item-label v-if="col.name === 'no'">
+                  {{ props.rowIndex + 1 }}
+                </q-item-label>
+
+                <q-item-label v-else>{{ col.value }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template> -->
+  </q-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs, useSlots, computed, watch } from "vue";
+
+const attrs = ref<any>(useAttrs());
+const slots = ref<any>(useSlots());
+
+const emit = defineEmits(["update:pagination", "request"]);
+
+const props = defineProps({
+  paging: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  pagination: {
+    type: Object,
+    default: () => ({
+      sortBy: "desc",
+      descending: false,
+      page: 1,
+      rowsPerPage: 10,
+      // rowsNumber: 0,
+    }),
+  },
+});
+
+// Internal pagination state ที่จะจัดการเอง
+const internalPagination = ref({
+  ...props.pagination,
+});
+
+// ใช้ computed เพื่อ sync กับ props และ internal state
+const pagination = computed({
+  get: () => internalPagination.value,
+  set: (value) => {
+    internalPagination.value = { ...value };
+    emit("update:pagination", value);
+  },
+});
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (props.paging == true)
+    return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
+  else return start + "-" + end + " ใน " + total;
+};
+
+function onRequest(requestProp: any) {
+  if (!requestProp || !requestProp.pagination) {
+    return;
+  }
+
+  const { pagination: newPagination } = requestProp;
+
+  internalPagination.value = {
+    ...internalPagination.value,
+    ...newPagination,
+  };
+
+  // if (isPageChange) {
+  emit("request", requestProp);
+  // }
+}
+
+function handlePageChange(newPage: number) {
+  if (!newPage || newPage < 1) {
+    return;
+  }
+
+  internalPagination.value = {
+    ...internalPagination.value,
+    page: newPage,
+  };
+
+  // สร้าง request object เหมือนกับ onRequest
+  const requestProp = {
+    pagination: internalPagination.value,
+    filter: null,
+    getCellValue: () => {},
+  };
+
+  emit("request", requestProp);
+}
+
+// Watch props เพื่ออัปเดต internal state เมื่อ parent เปลี่ยน
+watch(
+  () => props.pagination,
+  (newPagination) => {
+    internalPagination.value = { ...newPagination };
+  },
+  { deep: true, immediate: true }
+);
+</script>
+
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+.custom-header-table {
+  height: auto;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+  .q-table__middle {
+    margin-bottom: 0 !important;
+    min-height: 0px !important;
+  }
+
+  // Loading styles
+  .loading-overlay {
+    width: 100%;
+  }
+
+  .loading-row {
+    background: white;
+  }
+
+  .loading-cell {
+    text-align: center;
+    padding: 60px 20px;
+    border: none;
+  }
+
+  .loading-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .loading-text {
+    color: #666;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+</style>

src/composables/usePagination.ts

@@ -0,0 +1,47 @@
+import { ref, computed } from "vue";
+import type { PropsTable } from "@/interface/index/PropsTable";
+
+export function usePagination(
+  defaultSort = "",
+  fetchFunction?: () => Promise<any>
+) {
+  const pagination = ref<PropsTable.Pagination>({
+    sortBy: defaultSort,
+    descending: true,
+    page: 1,
+    rowsPerPage: 10,
+    rowsNumber: 0,
+  });
+
+  const params = computed(() => {
+    const queryParams: Record<string, string> = {
+      page: pagination.value.page.toString(),
+      pageSize: pagination.value.rowsPerPage.toString(),
+    };
+
+    if (pagination.value.sortBy) {
+      queryParams.sortBy = pagination.value.sortBy;
+      queryParams.descending = (
+        pagination.value.descending ?? false
+      ).toString();
+    }
+
+    return queryParams;
+  });
+
+  async function onRequest(props: PropsTable.RequestProps) {
+    const newPagination = props?.pagination || props;
+    if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+
+    pagination.value = { ...newPagination };
+    if (fetchFunction) {
+      await fetchFunction(); // เรียกฟังก์ชันที่ส่งเข้ามา
+    }
+  }
+
+  return {
+    pagination,
+    params,
+    onRequest,
+  };
+}

src/interface/index/PropsTable.ts

@@ -0,0 +1,36 @@
+/** Namespace สำหรับ Table-related types */
+export namespace PropsTable {
+  /** Interface สำหรับ pagination object */
+  export interface Pagination {
+    /** หน้าปัจจุบัน (เริ่มจาก 1) */
+    page: number;
+    /** จำนวนแถวต่อหน้า */
+    rowsPerPage: number;
+    /** จำนวนแถวทั้งหมด */
+    rowsNumber?: number;
+    /** คอลัมน์ที่ใช้ sort */
+    sortBy?: string;
+    /** เรียงจากมากไปน้อย */
+    descending?: boolean;
+
+    rowsTotal?: number;
+  }
+
+  /** Interface สำหรับ request props จาก d-table */
+  export interface RequestProps {
+    /** ข้อมูล pagination */
+    pagination: Pagination;
+    /** ตัวกรองข้อมูล */
+    filter?: any;
+    /** function สำหรับดึงค่าจาก cell */
+    getCellValue?: (col: any, row: any) => any;
+  }
+
+  /** Union type สำหรับ handleRequest function */
+  export type HandleRequestProps = RequestProps;
+}
+
+// Export แบบเดิมเพื่อ backward compatibility
+export type TablePagination = PropsTable.Pagination;
+export type TableRequestProps = PropsTable.RequestProps;
+export type HandleRequestProps = PropsTable.HandleRequestProps;

src/main.ts

@@ -73,5 +73,10 @@ app.component(
   defineAsyncComponent(() => import("@/components/Table.vue"))
 );
 
+app.component(
+  "p-table",
+  defineAsyncComponent(() => import("@/components/TablePagination.vue"))
+);
+
 app.config.globalProperties.$http = http;
 app.mount("#app");

src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue

@@ -6,6 +6,7 @@ import { useRoute } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/ResultsPerformance";
+import { usePagination } from "@/composables/usePagination";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -24,6 +25,9 @@ const $q = useQuasar();
 const route = useRoute();
 const store = useResultsPerformDataStore();
 const { textRangePoint, textPoint } = store;
+const { pagination, params, onRequest } = usePagination("", () =>
+  getDevelop(true)
+);
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -61,15 +65,6 @@ const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
 
-const totalIdp = ref<number>(0);
-const totalListIdp = ref<number>(1);
-const paginationIdp = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const resPerformForm = reactive<RequestItemsObject>({
   name: "",
   point1Total: 0, //ส่วนที่1 (น้ำหนัก)
@@ -273,9 +268,6 @@ const columns = ref<QTableColumn[]>(
 const visibleColumns = ref<string[]>(
   baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
 );
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
 
 //Table การพัฒนารายบุคคล (Individual Development Plan)
 const rowsPlan = ref<any[]>([]);
@@ -295,12 +287,10 @@ const columnsPlan = ref<QTableColumn[]>([
     name: "name",
     align: "left",
     label: "ความรู้/ทักษะ/สมรรถนะที่ต้องได้รับการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "developmentProjects",
@@ -310,44 +300,36 @@ const columnsPlan = ref<QTableColumn[]>([
     field: "developmentProjects",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "developmentTarget",
     align: "left",
     label: "เป้าหมายการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "developmentTarget",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "developmentResults",
     align: "left",
     label: "วิธีการวัดผลการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "developmentResults",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "developmentReport",
     align: "left",
     label: "รายงานผลการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "developmentReport",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumnsPlan = ref<String[]>([
+const visibleColumnsPlan = ref<string[]>([
   "no",
   "name",
   "developmentProjects",
@@ -357,8 +339,6 @@ const visibleColumnsPlan = ref<String[]>([
 ]);
 
 //Table ประวัติแก้ไข
-const rowsHistory = ref<ResponseObject[]>([]);
-const rowsHistoryMain = ref<ResponseObject[]>([]);
 const historyId = ref<string>("");
 const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
 const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
@@ -378,8 +358,8 @@ async function fetchData() {
     rowsMain.value = res.data.result;
   } catch (error) {
     messageError($q, error);
-    hideLoader();
   } finally {
+    hideLoader();
   }
 }
 
@@ -387,29 +367,25 @@ async function fetchData() {
 async function getDevelop(isLoad?: boolean) {
   if (!profileId.value) return;
   isLoad && showLoader();
+  const queryParams = {
+    ...params.value,
+    searchKeyword: filterSearchPlan.value.trim(),
+  };
   await http
-    .get(
+    .get(config.API.developMentPlan(empType.value) + `/${profileId.value}`, {
-      config.API.developMentPlan(empType.value) +
+      params: queryParams,
-        `/${profileId.value}?page=${paginationIdp.value.page}&pageSize=${
+    })
-          paginationIdp.value.rowsPerPage
-        }&searchKeyword=${filterSearchPlan.value.trim()}
-`
-    )
     .then((res) => {
-      const data = res.data.result.data;
+      const data = res.data.result;
-      totalListIdp.value = Math.ceil(
+      pagination.value.rowsNumber = data.total;
-        res.data.result.total / paginationIdp.value.rowsPerPage
+      rowsPlan.value = data.data;
-      );
-      totalIdp.value = res.data.result.total;
-      rowsPlan.value = data;
-
-      isLoad && hideLoader();
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoad && hideLoader();
+    });
 }
 
 /**
@@ -531,11 +507,6 @@ function openDialogDevelop(data: any) {
   typeIDP.value = data.type;
 }
 
-function updatePaginationIdp(newPagination: any) {
-  paginationIdp.value.page = 1;
-  paginationIdp.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function serchDataTable() {
   rows.value = onSearchDataTable(
     filterSearch.value,
@@ -544,13 +515,6 @@ function serchDataTable() {
   );
 }
 
-watch(
-  () => paginationIdp.value.rowsPerPage,
-  async () => {
-    await getDevelop(true);
-  }
-);
-
 onMounted(async () => {
   await fetchData();
   empType.value !== "-temp" && (await getDevelop());
@@ -647,7 +611,6 @@ onMounted(async () => {
             bordered
             :rows="rows"
             :columns="columns"
-            v-model:pagination="pagination"
             :grid="modeView === 'card'"
             :visible-columns="visibleColumns"
           >
@@ -769,9 +732,7 @@ onMounted(async () => {
               ref="filterPlanRef"
               outlined
               placeholder="ค้นหา"
-              @keydown.enter.prevent="
+              @keydown.enter.prevent="(pagination.page = 1), getDevelop(true)"
-                (paginationIdp.page = 1), getDevelop(true)
-              "
             >
               <template v-slot:append>
                 <q-icon name="search" />
@@ -825,7 +786,7 @@ onMounted(async () => {
         </div>
 
         <div class="col-12">
-          <d-table
+          <p-table
             flat
             dense
             bordered
@@ -837,23 +798,9 @@ onMounted(async () => {
             :card-container-class="
               modeViewPlan === 'card' ? 'q-col-gutter-md' : ''
             "
-            @update:pagination="updatePaginationIdp"
+            @request="onRequest"
+            v-model:pagination="pagination"
           >
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ totalIdp.toLocaleString() }} รายการ
-              <q-pagination
-                v-model="paginationIdp.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(totalListIdp)"
-                size="sm"
-                boundary-links
-                direction-links
-                :max-pages="5"
-                @update:model-value="getDevelop"
-              ></q-pagination>
-            </template>
-
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th auto-width />
@@ -880,11 +827,7 @@ onMounted(async () => {
                 >
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
                   <div v-if="col.name == 'no'">
-                    {{
+                    {{ props.rowIndex + 1 }}
-                      (paginationIdp.page - 1) * paginationIdp.rowsPerPage +
-                      props.rowIndex +
-                      1
-                    }}
                   </div>
                   <div v-else-if="col.name == 'developmentProjects'">
                     <div class="column">
@@ -996,7 +939,7 @@ onMounted(async () => {
                 </q-card>
               </div>
             </template>
-          </d-table>
+          </p-table>
         </div>
       </q-card>
     </div>

src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
+import { usePagination } from "@/composables/usePagination";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -12,7 +13,6 @@ import http from "@/plugins/http";
 import type { QTableProps } from "quasar";
 import type {
   DataOption,
-  Pagination,
   Request,
 } from "@/modules/04_registryPerson/interface/index/Main";
 import type { DataRequest } from "@/modules/04_registryPerson/interface/response/Main";
@@ -22,14 +22,11 @@ const router = useRouter();
 const route = useRoute();
 const store = useRequestEditStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchListRequset);
 
 const routerName = ref<string>(route.name as string);
 //Table
 const rows = ref<DataRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
-const page = ref<number>(1); //หน้า
-const pageSize = ref<number>(10); //จำนวนต่อหน้า
-const rowsTotal = ref<number>(0); //จำนวนรายการ
-const maxPage = ref<number>(0); //จำนวนหน้า
 const columns = ref<QTableProps["columns"]>([
   {
     name: "createdAt",
@@ -45,7 +42,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "fullname",
     align: "left",
     label: "ชื่อ-นามสกุล",
-    sortable: false,
+    sortable: true,
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -54,7 +51,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "topic",
     align: "left",
     label: "ชื่อเรื่อง",
-    sortable: false,
+    sortable: true,
     field: "topic",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -64,7 +61,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "detail",
     align: "left",
     label: "รายละเอียด",
-    sortable: false,
+    sortable: true,
     field: "detail",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -84,7 +81,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "remark",
     align: "left",
     label: "หมายเหตุ",
-    sortable: false,
+    sortable: true,
     field: "remark",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -116,8 +113,7 @@ async function fetchListRequset() {
       ) + `admin`,
       {
         params: {
-          page: page.value,
+          ...params.value,
-          pageSize: pageSize.value,
           status: status.value,
           keyword: keyword.value.trim(),
         },
@@ -125,8 +121,7 @@ async function fetchListRequset() {
     )
     .then((res) => {
       const data = res.data.result;
-      maxPage.value = Math.ceil(data.total / pageSize.value);
+      pagination.value.rowsNumber = data.total;
-      rowsTotal.value = data.total;
       rows.value = data.data;
     })
     .catch((err) => {
@@ -139,7 +134,7 @@ async function fetchListRequset() {
 
 /** function เลือกสถานะคำร้อง*/
 function updateStatusValue() {
-  page.value = 1;
+  pagination.value.page = 1;
   // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
   fetchListRequset();
 }
@@ -177,26 +172,6 @@ function onclickEdit(data: Request) {
   }
 }
 
-/**
- * function เลือกแถวต่อหน้า
- * @param newPagination
- */
-function updatePageSizePagination(newPagination: Pagination) {
-  page.value = 1;
-  pageSize.value = newPagination.rowsPerPage;
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ pageSize
- * เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
- */
-watch(
-  () => pageSize.value,
-  () => {
-    fetchListRequset();
-  }
-);
-
 /**  HooK lifecycle ทำงานเมื่อมีการเรียกใช้งาน Componenets */
 onMounted(() => {
   fetchListRequset();
@@ -265,14 +240,15 @@ onMounted(() => {
     </div>
 
     <div class="col-12">
-      <d-table
+      <p-table
         :columns="columns"
         :rows="rows"
         row-key="id"
         :rows-per-page-options="[10, 25, 50, 100]"
         :paging="true"
         :visible-columns="visibleColumns"
-        @update:pagination="updatePageSizePagination"
+        @request="onRequest"
+        v-model:pagination="pagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -302,21 +278,7 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
+      </p-table>
-          ทั้งหมด {{ rowsTotal.toLocaleString() }} รายการ
-          <q-pagination
-            v-model="page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="fetchListRequset()"
-          ></q-pagination>
-        </template>
-      </d-table>
     </div>
   </q-card>
 </template>

src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted,  } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+import { usePagination } from "@/composables/usePagination";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
 import type { QTableProps } from "quasar";
 import type {
   DataOption,
-  Pagination,
+  
 } from "@/modules/04_registryPerson/interface/index/Main";
 import type { DataListsIDP } from "@/modules/04_registryPerson/interface/response/Main";
 
@@ -22,6 +23,7 @@ const route = useRoute();
 const store = useRequestEditStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 const routerName = ref<string>(route.name as string);
+const { pagination, params, onRequest } = usePagination("", fetchData);
 //ตัวแปร
 const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
 const keyword = ref<string>(""); //คำค้นหา
@@ -29,16 +31,12 @@ const statusOption = ref<DataOption[]>(store.optionStatusIDP); //รายกา
 
 //Table
 const rows = ref<DataListsIDP[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
-const page = ref<number>(1); //หน้า
-const pageSize = ref<number>(10); //จำนวนต่อหน้า
-const rowsTotal = ref<number>(0); //จำนวนรายการ
-const maxPage = ref<number>(0); //จำนวนหน้า
 const columns = ref<QTableProps["columns"]>([
   {
     name: "createdAt",
     align: "left",
     label: "วันที่ยื่นขอ",
-    sortable: false,
+    sortable: true,
     field: "createdAt",
     format: (v) => (v ? date2Thai(v, false, true) : "-"),
     headerStyle: "font-size: 14px",
@@ -48,7 +46,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "createdFullName",
     align: "left",
     label: "ผู้ยื่นขอ",
-    sortable: false,
+    sortable: true,
     field: "createdFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -57,7 +55,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "name",
     align: "left",
     label: "ความรู้/ทักษะ/สมรรถนะที่ต้องได้รับการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -75,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentTarget",
     align: "left",
     label: "เป้าหมายการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "developmentTarget",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -84,7 +82,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentResults",
     align: "left",
     label: "วิธีการวัดผลการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "developmentResults",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -93,7 +91,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentReport",
     align: "left",
     label: "รายงานผลการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "developmentReport",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -121,7 +119,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "reason",
     align: "left",
     label: "หมายเหตุ",
-    sortable: false,
+    sortable: true,
     field: "reason",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -151,17 +149,15 @@ async function fetchData() {
       ) + `admin`,
       {
         params: {
-          page: page.value,
+          ...params.value,
-          pageSize: pageSize.value,
           status: status.value ? status.value : "",
-          keyword: keyword.value,
+          keyword: keyword.value.trim(),
         },
       }
     )
     .then(async (res) => {
       const data = await res.data.result;
-      maxPage.value = Math.ceil(data.total / pageSize.value);
+      pagination.value.rowsNumber = data.total;
-      rowsTotal.value = data.total;
       rows.value = data.data;
     })
     .catch((err) => {
@@ -174,7 +170,7 @@ async function fetchData() {
 
 /** function เลือกสถานะคำร้อง */
 function updateStatusValue() {
-  page.value = 1;
+  pagination.value.page = 1;
   // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
   fetchData();
 }
@@ -199,16 +195,7 @@ function filterOption(val: string, update: Function) {
 }
 
 /**
- * function เลือกแถวต่อหน้า
+ * function  แก้ไขคำร้อง
- * @param newPagination
- */
-function updatePageSizePagination(newPagination: Pagination) {
-  page.value = 1;
-  pageSize.value = newPagination.rowsPerPage;
-}
-
-/**
- * funciton  แก่ไขคำร้อง
  * @param id รายการคำร้อง
  */
 function onclickEdit(id: string) {
@@ -266,17 +253,6 @@ async function downloadUrl(id: string, fileName: string) {
     });
 }
 
-/**
- * ดูการเปลี่ยนแปลงของ pageSize
- * เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
- */
-watch(
-  () => pageSize.value,
-  () => {
-    fetchData();
-  }
-);
-
 /**  HooK lifecycle ทำงานเมื่อมีการเรียกใช้งาน Componenets */
 onMounted(() => {
   props.isIdp && fetchData();
@@ -344,14 +320,15 @@ onMounted(() => {
     </div>
 
     <div class="col-12">
-      <d-table
+      <p-table
         :columns="columns"
         :rows="rows"
         row-key="id"
         :rows-per-page-options="[10, 25, 50, 100]"
         :paging="true"
         :visible-columns="visibleColumns"
-        @update:pagination="updatePageSizePagination"
+        @request="onRequest"
+        v-model:pagination="pagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -413,21 +390,7 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
+      </p-table>
-          ทั้งหมด {{ rowsTotal.toLocaleString() }} รายการ
-          <q-pagination
-            v-model="page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="fetchData"
-          ></q-pagination>
-        </template>
-      </d-table>
     </div>
   </q-card>
 </template>

src/modules/08_registryEmployee/views/Main.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRouter } from "vue-router";
@@ -8,18 +8,16 @@ import {
   checkPermissionList,
   checkPermissionCreate,
 } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
+
 import { useCounterMixin } from "@/stores/mixin";
 import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
+import { usePagination } from "@/composables/usePagination";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
 import type { QInput, QTableProps } from "quasar";
-import type {
+import type { DataOption } from "@/modules/08_registryEmployee/interface/index/Main";
-  NewPagination,
-  DataOption,
-} from "@/modules/08_registryEmployee/interface/index/Main";
 import type { DataEmployee } from "@/modules/08_registryEmployee/interface/response/Employee";
 
 /** importComponents*/
@@ -39,6 +37,7 @@ const {
   findOrgNameHtml,
 } = useCounterMixin();
 const { statusText } = useRegistryEmp();
+const { pagination, params, onRequest } = usePagination("", fetchList);
 
 const modalAddEmployee = ref<boolean>(false); // popup เพิ่มข้อมูลลูกจ้างชั่วคราว
 const modalPos = ref<boolean>(false); //popup กำหนดตำแหน่ง
@@ -47,11 +46,7 @@ const dataRow = ref<DataEmployee>(); //ข้อมูลรายชื่อ
 
 /** Table */
 const rows = ref<DataEmployee[]>([]); //รายชื่อลูกจ้างชั่วคราว
-const maxPage = ref<number>(0); //จำนวนหน้า
-const total = ref<number>(0); //จำนวนข้อมูล
 const queryParams = reactive({
-  page: 1,
-  pageSize: 10,
   type: "temp",
   searchField: "fullName",
   searchKeyword: "",
@@ -67,12 +62,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ลำดับ",
     sortable: false,
-    field: (row) =>
+    field: "no",
-      (
-        (queryParams.page - 1) * queryParams.pageSize +
-        rows.value.indexOf(row) +
-        1
-      ).toLocaleString(),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -80,16 +70,16 @@ const columns = ref<QTableProps["columns"]>([
     name: "citizenId",
     align: "left",
     label: "เลขประจำตัวประชาชน",
-    sortable: false,
+    sortable: true,
     field: "citizenId",
     headerStyle: "font-size: 14px; min-width: 200px",
     style: "font-size: 14px; ",
   },
   {
-    name: "fullname",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
-    sortable: false,
+    sortable: true,
     field: "fullname",
     format(val, row) {
       return `${row.prefix}${row.firstName}  ${row.lastName}`;
@@ -98,29 +88,20 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px; ",
   },
   {
-    name: "draftOrganizationOrganization",
+    name: "positionTemp",
     align: "left",
     label: "ตำแหน่ง/สังกัดที่รับการบรรจุ",
-    sortable: false,
+    sortable: true,
-    field: "draftOrganizationOrganization",
+    field: "positionTemp",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  // {
-  //   name: "draftPositionEmployee",
-  //   align: "left",
-  //   label: "ตำแหน่งที่บรรจุ",
-  //   sortable: false,
-  //   field: "draftPositionEmployee",
-  //   headerStyle: "font-size: 14px; min-width: 200px",
-  //   style: "font-size: 14px; ",
-  // },
 
   {
     name: "govAge",
     align: "left",
     label: "อายุราชการ(ปี)",
-    sortable: false,
+    sortable: true,
     field: "govAge",
     format(val) {
       return val;
@@ -143,17 +124,17 @@ const columns = ref<QTableProps["columns"]>([
     name: "dateAppoint",
     align: "left",
     label: "วันที่แต่งตั้ง",
-    sortable: false,
+    sortable: true,
     field: "dateAppoint",
     headerStyle: "font-size: 14px",
     format: (val) => date2Thai(val),
     style: "font-size: 14px",
   },
   {
-    name: "age",
+    name: "birthDate",
     align: "left",
     label: "อายุ",
-    sortable: false,
+    sortable: true,
     field: "age",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -162,7 +143,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "createdAt",
     align: "left",
     label: "วันที่สร้าง",
-    sortable: false,
+    sortable: true,
     field: "createdAt",
     format(val) {
       return date2Thai(val);
@@ -174,7 +155,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "dateRetireLaw",
     align: "left",
     label: "วันที่พ้นราชการ",
-    sortable: false,
+    sortable: true,
     field: "dateRetireLaw",
     format(val) {
       return date2Thai(val);
@@ -198,12 +179,11 @@ const columns = ref<QTableProps["columns"]>([
 const visibleColumns = ref<String[]>([
   "no",
   "citizenId",
-  "fullname",
+  "firstName",
-  "draftOrganizationOrganization",
+  "positionTemp",
-  // "draftPositionEmployee",
   "govAge",
   "dateEmployment",
-  "age",
+  "birthDate",
   "createdAt",
   "dateRetireLaw",
   "statustext",
@@ -216,14 +196,15 @@ async function fetchList() {
   await http
     .get(config.API.registryNew("-temp"), {
       params: {
+        ...params.value,
         ...queryParams,
         searchKeyword: queryParams.searchKeyword.trim(),
       },
     })
     .then(async (res) => {
-      rows.value = await res.data.result.data;
+      const result = await res.data.result;
-      maxPage.value = Math.ceil(res.data.result.total / queryParams.pageSize);
+      pagination.value.rowsNumber = result.total;
-      total.value = res.data.result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -243,11 +224,9 @@ function onClickDelete(id: string) {
     await http
       .delete(config.API.registryNew("-employee") + `/${id}`)
       .then(async () => {
-        queryParams.page = await updateCurrentPage(
+        if (rows.value.length === 1 && pagination.value.page > 1) {
-          queryParams.page,
+          pagination.value.page = pagination.value.page - 1;
-          maxPage.value,
+        }
-          rows.value.length
-        );
         await fetchList();
         await success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -287,22 +266,22 @@ function onClickSendOrder() {
   modalSendOrder.value = true;
 }
 
-/**
+// /**
- * ฟังก์ชันอัพเดต Pagination
+//  * ฟังก์ชันอัพเดต Pagination
- * @param newPagination ข้อมูล Pagination ใหม่
+//  * @param newPagination ข้อมูล Pagination ใหม่
- */
+//  */
-function updatePagination(newPagination: NewPagination) {
+// function updatePagination(newPagination: NewPagination) {
-  queryParams.page = 1;
+//   queryParams.page = 1;
-  queryParams.pageSize = newPagination.rowsPerPage;
+//   queryParams.pageSize = newPagination.rowsPerPage;
-}
+// }
 
-/** ทำงานเมื่อมีการเปลี่่ยนจำนวนข้อมูลต่อหน้า */
+// /** ทำงานเมื่อมีการเปลี่่ยนจำนวนข้อมูลต่อหน้า */
-watch(
+// watch(
-  () => queryParams.pageSize,
+//   () => queryParams.pageSize,
-  () => {
+//   () => {
-    fetchList();
+//     fetchList();
-  }
+//   }
-);
+// );
 
 /** ทำงานเมื่อมีการเรียกใข้ Components */
 onMounted(async () => {
@@ -364,7 +343,12 @@ onMounted(async () => {
           placeholder="ค้นหา"
           style="max-width: 200px"
           class="q-ml-sm"
-          @keydown.enter.prevent="(queryParams.page = 1), fetchList()"
+          @keydown.enter.prevent="
+            () => {
+              pagination.page = 1;
+              fetchList();
+            }
+          "
         >
           <template v-slot:append>
             <q-icon name="search" />
@@ -388,13 +372,14 @@ onMounted(async () => {
       </div>
     </div>
     <div class="col-12 q-pt-sm">
-      <d-table
+      <p-table
         :rows="rows"
         :columns="columns"
         :visible-columns="visibleColumns"
         row-key="id"
         :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">
@@ -473,7 +458,7 @@ onMounted(async () => {
               </q-btn>
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <template v-if="col.name === 'draftOrganizationOrganization'">
+              <template v-if="col.name === 'positionTemp'">
                 <div v-if="props.row.draftPositionEmployee !== null">
                   <div class="col-4">
                     <div>
@@ -522,13 +507,16 @@ onMounted(async () => {
                   </div>
                 </div>
               </template>
+              <div v-else-if="col.name === 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
               <div v-else>
                 {{ col.value !== null && col.value !== "" ? col.value : "-" }}
               </div>
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
+        <!-- <template v-slot:pagination="scope">
           ทั้งหมด {{ total }} รายการ
           <q-pagination
             v-model="queryParams.page"
@@ -541,8 +529,8 @@ onMounted(async () => {
             :max-pages="5"
             @update:model-value="fetchList"
           ></q-pagination>
-        </template>
+        </template> -->
-      </d-table>
+      </p-table>
     </div>
   </q-card>