fix(registry): sort data

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(
-      config.API.developMentPlan(empType.value) +
-        `/${profileId.value}?page=${paginationIdp.value.page}&pageSize=${
-          paginationIdp.value.rowsPerPage
-        }&searchKeyword=${filterSearchPlan.value.trim()}
-`
-    )
+    .get(config.API.developMentPlan(empType.value) + `/${profileId.value}`, {
+      params: queryParams,
+    })
     .then((res) => {
-      const data = res.data.result.data;
-      totalListIdp.value = Math.ceil(
-        res.data.result.total / paginationIdp.value.rowsPerPage
-      );
-      totalIdp.value = res.data.result.total;
-      rowsPlan.value = data;
-
-      isLoad && hideLoader();
+      const data = res.data.result;
+      pagination.value.rowsNumber = data.total;
+      rowsPlan.value = data.data;
     })
     .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="
-                (paginationIdp.page = 1), getDevelop(true)
-              "
+              @keydown.enter.prevent="(pagination.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'">
-                    {{
-                      (paginationIdp.page - 1) * paginationIdp.rowsPerPage +
-                      props.rowIndex +
-                      1
-                    }}
+                    {{ 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>