fix(Probation):sort

src/modules/05_placement/components/probation/MainProbation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -12,9 +12,9 @@ import {
 } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
+import { usePagination } from "@/composables/usePagination";
 
 import type { QTableProps } from "quasar";
-import type { Pagination } from "@/modules/05_placement/interface/index/Main";
 import type { OpfillterTypeSt } from "@/modules/05_placement/interface/request/Main";
 import type {
   ResListProbation,
@@ -30,10 +30,18 @@ const mixin = useCounterMixin();
 const router = useRouter();
 const { statusProbationMain } = storeFn;
 const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;
+const { pagination, params, onRequest } = usePagination(
+  "",
+  fetchProbationPersonalList
+);
+const {
+  pagination: pagination2,
+  params: params2,
+  onRequest: onRequest2,
+} = usePagination("", onclickAddProbation);
 
 const modalCommand = ref<boolean>(false); // ตัวแปร popup ออกคำสั่ง
 const modal = ref<boolean>(false);
-const paging2 = ref<boolean>(true);
 const fillterStatus = ref<ResListProbation[]>([]);
 const fillter = ref<string>("");
 const filterKeyword = ref<string>("");
@@ -43,8 +51,6 @@ const rows2 = ref<ResProfileProbation[]>([]);
 const dataUpdate = ref<ResListProbation[]>([]);
 const Opfillter = ref<OpfillterTypeSt[]>([]);
 const Opfillter2 = ref<OpfillterTypeSt[]>([]);
-const formProbation = reactive({ keyword: "", pageSize: 10, page: 1 });
-const maxPage = ref<number>(1);
 
 const modalAdd = ref<boolean>(false); //เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ
 const personId = ref<string>(""); //เก็บ id คน ตาม row
@@ -52,8 +58,6 @@ const topic = ref<string>(
   "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ"
 );
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
 /** columns ฟังก์ชันดดึงข้อมูลรายการผู้ทดลองปฏิบัติหน้าที่ราชการ */
 const columns = ref<QTableProps["columns"]>([
   {
@@ -106,7 +110,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "probation_no",
     align: "center",
     label: "ครั้งที่ทดลองปฏิบัติหน้าที่ราชการ",
-    sortable: true,
+    sortable: false,
     field: "probation_no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -130,7 +134,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "probation_status",
     align: "left",
     label: "สถานะ",
-    sortable: true,
+    sortable: false,
     field: "probation_status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -146,12 +150,6 @@ const visibleColumns = ref<string[]>([
   "order_number",
   "probation_status",
 ]);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
 
 /** columns หัวตารางเพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ */
 const columns2 = ref<QTableProps["columns"]>([
@@ -165,7 +163,7 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
@@ -198,11 +196,11 @@ const columns2 = ref<QTableProps["columns"]>([
     },
   },
   {
-    name: "organizationOrganization",
+    name: "orgRootName",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "organizationOrganization",
+    field: "orgRootName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -210,50 +208,39 @@ const columns2 = ref<QTableProps["columns"]>([
     name: "status",
     align: "left",
     label: "ทดลองปฏิบัติหน้าที่ราชการ",
-    sortable: true,
+    sortable: false,
     field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "refCommandNo",
+    name: "commandNo",
     align: "center",
     label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
     sortable: true,
-    field: "refCommandNo",
+    field: "commandNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
-const pagination2 = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
 
 /** ฟังก์ชันดดึงข้อมูลรายการผู้ทดลองปฏิบัติหน้าที่ราชการ*/
 async function fetchProbationPersonalList() {
-  rows.value = [];
   showLoader();
   await http
-    .get(
+    .get(config.API.probationPersonalList(), {
-      config.API.probationPersonalList() +
+      params: {
-        `?status=${!fillter.value ? "" : fillter.value}&page=${
+        ...params.value,
-          pagination.value.page
+        status: !fillter.value ? "" : fillter.value,
-        }&pageSize=${
+        keyword: filterKeyword.value.trim(),
-          pagination.value.rowsPerPage
+      },
-        }&keyword=${filterKeyword.value.trim()}`
+    })
-    )
     .then(async (res) => {
-      const data = await res.data.result.data;
+      const result = await res.data.result;
-      const resTotal = await res.data.result.total;
+      pagination.value.rowsNumber = result.total;
-
+      rows.value = result.data;
-      rows.value = data;
+      fillterStatus.value = result.data;
-      fillterStatus.value = data;
+      dataUpdate.value = result.data;
-      dataUpdate.value = data;
-      totalList.value = Math.ceil(resTotal / pagination.value.rowsPerPage);
-      total.value = resTotal;
 
       // option  filter
       Opfillter.value = storeFn.optionStatusProbation;
@@ -261,6 +248,7 @@ async function fetchProbationPersonalList() {
     })
     .catch((e) => {
       messageError($q, e);
+      rows.value = [];
     })
     .finally(() => {
       hideLoader();
@@ -269,43 +257,30 @@ async function fetchProbationPersonalList() {
 
 /* ฟังก์ชันดึงข้อมูลเพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ*/
 async function onclickAddProbation() {
-  rows2.value = [];
   modal.value = true;
   modal.value && showLoader();
   await http
-    .post(config.API.orgProfileProbation, formProbation)
+    .post(config.API.orgProfileProbation, {
+      ...params2.value,
+      keyword: filterKeyword2.value.trim(),
+    })
     .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / formProbation.pageSize);
+      const result = res.data.result;
-      rows2.value = res.data.result.data;
+      pagination2.value.rowsNumber = result.total;
+      rows2.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
+      rows2.value = [];
     })
     .finally(() => {
       hideLoader();
     });
 }
 
-/**
+function filterKeyword2Fn() {
- * function updatePagination
+  pagination2.value.page = 1;
- * @param newPagination ข้อมูล Pagination ใหม่
+  onclickAddProbation();
- */
-function updatePagination(newPagination: Pagination) {
-  formProbation.page = 1;
-  formProbation.pageSize = newPagination.rowsPerPage;
-}
-
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePaginationMain(newPagination: Pagination) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
-function filterKeyword2Fn(page: number) {
-  page !== 1 ? (formProbation.page = 1) : onclickAddProbation();
 }
 
 /**
@@ -377,11 +352,6 @@ async function onCloseDialog() {
   modal.value = false;
 }
 
-function paginationLabel2(start: string, end: string, total: string) {
-  if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-}
-
 /**
  * ค้นหาตาม text
  * @param val ค่าที่ค้นหา
@@ -441,25 +411,22 @@ function closeAdd() {
   modalAdd.value = false;
   personId.value = "";
   topic.value = "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ";
+  rows2.value = [];
+  filterKeyword2.value = "";
+  pagination2.value = {
+    page: 1,
+    rowsNumber: 0,
+    rowsPerPage: 10,
+    sortBy: "",
+    descending: false,
+  };
 }
 
 function getSearchMain() {
-  rows.value = [];
   pagination.value.page = 1;
   fetchProbationPersonalList();
 }
 
-watch([() => formProbation.page, () => formProbation.pageSize], () => {
-  onclickAddProbation();
-});
-
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearchMain();
-  }
-);
-
 /** get ค่า เมื่อโหลดหน้า */
 onMounted(() => {
   fetchProbationPersonalList();
@@ -564,7 +531,7 @@ onMounted(() => {
         />
       </div>
       <div class="col-12">
-        <d-table
+        <p-table
           :columns="columns"
           :rows="rows"
           row-key="personal_id"
@@ -575,7 +542,8 @@ onMounted(() => {
           class="custom-header-table"
           :visible-columns="visibleColumns"
           :rows-per-page-options="[10, 25, 50, 100]"
-          @update:pagination="updatePaginationMain"
+          @request="onRequest"
+          v-model:pagination="pagination"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
@@ -617,11 +585,7 @@ onMounted(() => {
               </q-td>
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
-                  {{
+                  {{ props.rowIndex + 1 }}
-                    (pagination.page - 1) * pagination.rowsPerPage +
-                    props.rowIndex +
-                    1
-                  }}
                 </div>
                 <div v-else-if="col.name == 'order_number'">
                   {{
@@ -649,27 +613,13 @@ onMounted(() => {
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
+        </p-table>
-            ทั้งหมด {{ total.toLocaleString() }} รายการ
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="Number(totalList)"
-              size="sm"
-              boundary-links
-              direction-links
-              :max-pages="5"
-              @update:model-value="fetchProbationPersonalList"
-            ></q-pagination>
-          </template>
-        </d-table>
       </div>
     </div>
   </q-card>
 
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 900px; max-width: 80vw">
+    <q-card style="min-width: 75%">
       <q-form ref="myForm">
         <DialogHeader
           tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
@@ -681,10 +631,10 @@ onMounted(() => {
             class="col-12"
             standout
             dense
-            v-model="formProbation.keyword"
+            v-model="filterKeyword2"
             outlined
             placeholder="ค้นหา"
-            @keydown.enter.prevent="filterKeyword2Fn(formProbation.page)"
+            @keydown.enter.prevent="filterKeyword2Fn()"
           >
             <template v-slot:append>
               <q-icon v-if="filterKeyword2 == ''" name="search" />
@@ -696,7 +646,7 @@ onMounted(() => {
             </template>
           </q-input>
           <div class="col-12">
-            <d-table
+            <p-table
               ref="table2"
               :columns="columns2"
               :rows="rows2"
@@ -706,10 +656,9 @@ onMounted(() => {
               :paging="true"
               dense
               class="custom-header-table"
-              :pagination-label="paginationLabel2"
               v-model:pagination="pagination2"
-              @update:pagination="updatePagination"
               :rows-per-page-options="[10, 25, 50, 100]"
+              @request="onRequest2"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
@@ -742,14 +691,10 @@ onMounted(() => {
                     :props="props"
                   >
                     <div v-if="col.name == 'no'">
-                      {{
+                      {{ props.rowIndex + 1 }}
-                        (formProbation.page - 1) * formProbation.pageSize +
-                        props.rowIndex +
-                        1
-                      }}
                     </div>
 
-                    <div v-else-if="col.name == 'fullname'">
+                    <div v-else-if="col.name == 'firstName'">
                       {{
                         (props.row.prefix ? props.row.prefix : "") +
                         props.row.firstName +
@@ -766,7 +711,7 @@ onMounted(() => {
                       />
                     </div>
                     <div
-                      v-else-if="col.name == 'organizationOrganization'"
+                      v-else-if="col.name == 'orgRootName'"
                       class="table_ellipsis"
                     >
                       <div
@@ -800,7 +745,7 @@ onMounted(() => {
                         }${props.row.orgRootName ? props.row.orgRootName : ""}`
                       }}
                     </div>
-                    <div v-else-if="col.name == 'refCommandNo'">
+                    <div v-else-if="col.name == 'commandNo'">
                       {{
                         props.row.commandNo
                           ? props.row.commandNo != "xx/2566"
@@ -815,20 +760,7 @@ onMounted(() => {
                   </q-td>
                 </q-tr>
               </template>
-              <template v-slot:pagination="scope">
+            </p-table>
-                ทั้งหมด {{ rows2.length.toLocaleString() }} รายการ
-                <q-pagination
-                  v-model="formProbation.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="maxPage"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  :max-pages="5"
-                ></q-pagination>
-              </template>
-            </d-table>
           </div>
         </q-card-section>
       </q-form>
@@ -836,7 +768,7 @@ onMounted(() => {
   </q-dialog>
 
   <q-dialog v-model="modalAdd" persistent>
-    <q-card style="width: 900px; max-width: 80vw">
+    <q-card style="width: 90%; max-width: 80vw">
       <q-form greedy @submit.prevent @validation-success="onSubmitAdd">
         <DialogHeader
           tittle="เพิ่มการแต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ"
@@ -866,5 +798,8 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
-  <DialogOrder v-model:modal="modalCommand" :fetch-data="fetchProbationPersonalList" />
+  <DialogOrder
+    v-model:modal="modalCommand"
+    :fetch-data="fetchProbationPersonalList"
+  />
 </template>

src/modules/05_placement/components/probation/MainSurvey.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { usePagination } from "@/composables/usePagination";
 
-import type { Pagination } from "@/modules/05_placement/interface/index/Main";
 import type { MainData } from "@/modules/05_placement/interface/index/Survey";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { pagination, params, onRequest } = usePagination("", getData);
 
 const year = ref<number | null>(new Date().getFullYear()); //ปีงบประมาณ
 
 const rows = ref<MainData[]>([]);
 const filterKeyword = ref<string>("");
-const total = ref<number>(0);
+
-const totalList = ref<number>(1);
 /** หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
@@ -97,31 +97,21 @@ const visibleColumns = ref<string[]>([
   "answer3",
   "createdAt",
 ]);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 10,
-  rowsPerPage: 10,
-});
 
 async function getData() {
   showLoader();
   await http
     .get(config.API.probationSurvey, {
       params: {
+        ...params.value,
         year: year.value,
-        keyword: filterKeyword.value,
+        keyword: filterKeyword.value.trim(),
-        page: pagination.value.page,
-        pageSize: pagination.value.rowsPerPage,
       },
     })
     .then(async (res) => {
-      const data = await res.data.result.data;
+      const result = res.data.result;
-      totalList.value = Math.ceil(
+      pagination.value.rowsNumber = result.total;
-        res.data.result.total / pagination.value.rowsPerPage
+      rows.value = result.data;
-      );
-      total.value = res.data.result.total;
-      rows.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -131,23 +121,11 @@ async function getData() {
     });
 }
 
-function updatePagination(newPagination: Pagination) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
   pagination.value.page = 1;
   getData();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 onMounted(async () => {
   await getData();
 });
@@ -166,7 +144,7 @@ onMounted(async () => {
               autoApply
               year-picker
               :enableTimePicker="false"
-              @update:model-value="getData()"
+              @update:model-value="getSearch()"
             >
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
@@ -193,7 +171,7 @@ onMounted(async () => {
             ref="filterRef"
             outlined
             placeholder="ค้นหาจากชื่อ - นามสกุล /ตำแหน่ง"
-            @keydown.enter.prevent="getData()"
+            @keydown.enter.prevent="getSearch()"
             style="width: 350px"
           >
             <template v-slot:append>
@@ -217,7 +195,7 @@ onMounted(async () => {
         </div>
       </div>
       <div class="col-12">
-        <d-table
+        <p-table
           ref="table"
           :columns="columns"
           :rows="rows"
@@ -228,23 +206,9 @@ onMounted(async () => {
           :paging="true"
           dense
           :rows-per-page-options="[10, 25, 50, 100]"
-          @update:pagination="updatePagination"
+          v-model:pagination="pagination"
+          @request="onRequest"
         >
-          <template v-slot:pagination="scope">
-            ทั้งหมด {{ total.toLocaleString() }} รายการ
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="Number(totalList)"
-              size="sm"
-              boundary-links
-              direction-links
-              :max-pages="5"
-              @update:model-value="getData()"
-            ></q-pagination>
-          </template>
-
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -256,11 +220,7 @@ onMounted(async () => {
             <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
-                  {{
+                  {{ props.rowIndex + 1 }}
-                    (pagination.page - 1) * pagination.rowsPerPage +
-                    props.rowIndex +
-                    1
-                  }}
                 </div>
 
                 <div v-else>
@@ -269,7 +229,7 @@ onMounted(async () => {
               </q-td>
             </q-tr>
           </template>
-        </d-table>
+        </p-table>
       </div>
     </div>
   </q-card>