fix(development):sort

src/modules/15_development/views/History.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar, type QTableProps } from "quasar";
 
@@ -10,39 +10,31 @@ import { useDevelopmentDataStore } from "@/modules/15_development/store/developm
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
-/**
- * importType
- */
+/** importType*/
 import type {
   DataOption,
   DataHistory,
-  NewPagination,
   ItemsMenu,
 } from "@/modules/15_development/interface/index/Main";
-import type { ResHistory } from "@/modules/15_development/interface/response/Main";
 
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
 const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", getData);
 
 const formFilter = reactive({
   root: null,
-  page: 1,
-  pageSize: 10,
   keyword: "",
   year: calculateFiscalYear(new Date()), //ปีงบประมาณ
 });
 const agencyOp = ref<DataOption[]>([]); // หน่วยงาน
 
-/**
- * ข้อมูล Table
- */
+/** ข้อมูล Table*/
 const rows = ref<DataHistory[]>([]);
-const maxPage = ref<number>(1); //จำนวนหน้าสูงสุด
-const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -64,11 +56,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "fullName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "name",
+    field: "fullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -83,29 +75,29 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "type",
+    name: "posType",
     align: "left",
     label: "ตำแหน่งประเภท",
     sortable: true,
-    field: "type",
+    field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "level",
+    name: "posLevel",
     align: "left",
     label: "ระดับตำแหน่ง",
     sortable: true,
-    field: "level",
+    field: "posLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "positionSide",
+    name: "posExecutive",
     align: "left",
     label: "ตําแหน่งทางการบริหาร",
     sortable: true,
-    field: "positionSide",
+    field: "posExecutive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -119,18 +111,14 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});
 const visibleColumns = ref<string[]>([
   "year",
   "citizenId",
-  "name",
+  "fullName",
   "position",
-  "type",
-  "level",
-  "positionSide",
+  "posType",
+  "posLevel",
+  "posExecutive",
   "projectName",
 ]);
 
@@ -150,16 +138,14 @@ const itemMenu = ref<ItemsMenu[]>([
   },
 ]);
 
-/**
- * function เรียกข้อมูหน่วยงาน
- */
+/** function เรียกข้อมูหน่วยงาน*/
 function fetchListOrg() {
   showLoader();
   http
     .get(config.API.developmentHistoryListOrg("officer", formFilter.year))
     .then(async (res) => {
       formFilter.root = null;
-      formFilter.page = 1;
+      pagination.value.page = 1;
       rows.value = [];
       const option = [{ name: "ทั้งหมด", id: null }];
       const optionNew = await res.data.result.map((e: string) => ({
@@ -178,29 +164,20 @@ function fetchListOrg() {
     });
 }
 
-/**
- * function เรียกข้อมูลรายการประวัติการฝึกอบรม/ดูงาน ข้าราชการกรุงเทพมหานครสามัญ
- */
+/** function เรียกข้อมูลรายการประวัติการฝึกอบรม/ดูงาน ข้าราชการกรุงเทพมหานครสามัญ*/
 async function getData() {
   showLoader();
   formFilter.keyword = formFilter.keyword.trim();
   await http
-    .post(config.API.developmentHistoryList("officer"), formFilter)
+    .post(config.API.developmentHistoryList("officer"), {
+      ...params.value,
+      ...formFilter,
+      keyword: formFilter.keyword.trim(),
+    })
     .then((res) => {
-      const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      totalList.value = res.data.result.total;
-      rows.value = data.map((item: ResHistory) => ({
-        id: item.id ? item.id : null,
-        citizenId: item.citizenId ? item.citizenId : null,
-        name: item.fullName ? item.fullName : null,
-        position: item.position ? item.position : null,
-        type: item.posType ? item.posType : null,
-        level: item.posLevel ? item.posLevel : null,
-        projectName: item.projectName ? item.projectName : null,
-        positionSide: item.posExecutive ? item.posExecutive : null,
-        year: item.year ? item.year : null,
-      }));
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -246,25 +223,12 @@ function onEdit(id: string) {
   router.push(`/development/history/${id}`);
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
+/** ฟังก์ชันเรียกข้อมูลใหม่ */
+function onfetchNewData() {
+  pagination.value.page = 1;
+  getData();
 }
 
-/**
- * callbackFunction ทำเมื่อมีการอัปเดท pageSize
- */
-watch(
-  () => formFilter.pageSize,
-  () => {
-    getData();
-  }
-);
-
 /** ดึงข้อมูลเมื่ออยู่ในหน้า */
 onMounted(() => {
   fetchListOrg();
@@ -329,7 +293,7 @@ onMounted(() => {
           :options="agencyOp"
           option-value="id"
           option-label="name"
-          @update:model-value="(formFilter.page = 1), getData()"
+          @update:model-value="onfetchNewData()"
           style="min-width: 150px"
           map-options
           emit-value
@@ -382,7 +346,7 @@ onMounted(() => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            @keydown.enter.prevent="(formFilter.page = 1), getData()"
+            @keydown.enter.prevent="onfetchNewData()"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -406,7 +370,7 @@ onMounted(() => {
       </q-toolbar>
     </div>
     <div class="col-12">
-      <d-table
+      <p-table
         for="table"
         ref="table"
         :columns="columns"
@@ -419,7 +383,7 @@ onMounted(() => {
         :visible-columns="visibleColumns"
         v-model:pagination="pagination"
         :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
+        @request="onRequest"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -452,22 +416,7 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
-
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ totalList }} รายการ
-          <q-pagination
-            v-model="formFilter.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="getData"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 </template>