fix(command): sort

src/modules/18_command/components/DialogCreateCommand.vue

@@ -7,6 +7,7 @@ import config from "@/app.config";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandMainStore } from "@/modules/18_command/store/Main";
+import { usePagination } from "@/composables/usePagination";
 
 import type { QTableProps } from "quasar";
 import type {
@@ -25,6 +26,7 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, messageError, dialogConfirm, hideLoader, date2Thai } =
   mixin;
+const { pagination, params, onRequest } = usePagination("", getListCommandDraf);
 
 /** props*/
 const modal = defineModel<boolean>("modal", { required: true });
@@ -52,8 +54,6 @@ const commandChapter = ref<string>(""); //ตอนที่
 const rows = ref<DataListCommand[]>([]); // รายการคำสั่ง
 const selected = ref<DataOrder[]>([]); // id คำสั่งที่เลือก
 const filter = ref<string>(""); // คำค้นหา
-const total = ref<number>(0); //จำนวนรายการ
-const totalList = ref<number>(1); //จำนวนหน้า
 const visibleColumns = ref<string[]>([
   "commandNo",
   "issue",
@@ -67,7 +67,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "commandNo",
     align: "left",
     label: "เลขที่คำสั่ง",
-    sortable: false,
+    sortable: true,
     field: "commandNo",
     format(val, row) {
       return val ? `${val}/${row.commandYear + 543}` : "-";
@@ -88,7 +88,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "commandAffectDate",
     align: "left",
     label: "วันที่ลงนาม",
-    sortable: false,
+    sortable: true,
     field: "commandAffectDate",
     format(val) {
       return val ? date2Thai(val) : "-";
@@ -100,7 +100,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "commandExcecuteDate",
     align: "left",
     label: "วันที่คำสั่งมีผล",
-    sortable: false,
+    sortable: true,
     field: "commandExcecuteDate",
     format(val) {
       return val ? date2Thai(val) : "-";
@@ -112,7 +112,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",
@@ -127,12 +127,6 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
 
 const selectCreate = ref<string | null>("NEW"); //ประเภทการออกคำสั่ง สร้างใหม่/คำสั่งแบบร่าง
 
@@ -140,16 +134,19 @@ const selectCreate = ref<string | null>("NEW"); //ประเภทการอ
 async function getListCommandDraf() {
   showLoader();
   await http
-    .get(
-      config.API.commandList +
-        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&year=${commandYear.value}&keyword=${filter.value}&status=DRAFT&commandTypeId=${commandType.value}`
-    )
+    .get(config.API.commandList, {
+      params: {
+        ...params.value,
+        year: commandYear.value,
+        keyword: filter.value.trim(),
+        status: "DRAFT",
+        commandTypeId: commandType.value,
+      },
+    })
     .then(async (res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      rows.value = res.data.result.data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -179,19 +176,6 @@ function createCommand(isRedirect: boolean) {
       posLevel: e.posLevel,
       ...(e.remarkVertical ? { remarkVertical: e.remarkVertical } : {}),
       ...(e.remarkHorizontal ? { remarkHorizontal: e.remarkHorizontal } : {}),
-
-      // ...(props.commandTypeCode == "C-PM-01" ||
-      // props.commandTypeCode == "C-PM-02"
-      //   ? { position: e.position ? e.position : null }
-      //   : {}),
-      // ...(props.commandTypeCode == "C-PM-01" ||
-      // props.commandTypeCode == "C-PM-02"
-      //   ? { posType: e.posType ? e.posType : null }
-      //   : {}),
-      // ...(props.commandTypeCode == "C-PM-01" ||
-      // props.commandTypeCode == "C-PM-02"
-      //   ? { posLevel: e.posLevel ? e.posLevel : null }
-      //   : {}),
     }));
 
     const body = {
@@ -310,15 +294,6 @@ async function fetchCommandType() {
   commandCode.value = commandOp.value[0].code;
 }
 
-/**
- * ฟังก์ชันอัปเดทจำนวนแถวต่อหน้า
- * @param newPagination จำนวนแถวที่ต้องการ
- */
-function updatePagination(newPagination: Pagination) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 const isHold = ref<boolean>(true); // true คือแสดงปุ่มบันทึกและเลือกรายชื่อต่อ / false คือซ่อนปุ่มบันทึกและเลือกรายชื่อต่อ
 // tab สร้างคำสั่งใหม่ และเลือกคำสั่งที่เป็นแบบร่าง
 const tabOptions = ref<TabOptions[]>([
@@ -340,14 +315,6 @@ async function displayTab() {
     : [{ label: "สร้างคำสั่งใหม่", value: "NEW" }];
 }
 
-/** ดูการเปลี่ยนแปลงของจำนวนแถวต่อหน้า*/
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    await getListCommandDraf();
-  }
-);
-
 /** ดูการเปลี่ยนแปลงของ modal*/
 watch(modal, () => {
   if (modal.value && props.persons?.length !== 0) {
@@ -561,7 +528,7 @@ watch(
             />
           </q-toolbar>
           <div class="col-12">
-            <d-table
+            <p-table
               :columns="columns"
               :rows="rows"
               row-key="id"
@@ -569,23 +536,9 @@ watch(
               selection="single"
               v-model:selected="selected"
               :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="getListCommandDraf"
-                ></q-pagination>
-              </template>
-
               <template v-slot:body="props">
                 <q-tr :props="props" class="cursor-pointer">
                   <q-td>
@@ -607,7 +560,7 @@ watch(
                   </q-td>
                 </q-tr>
               </template>
-            </d-table>
+            </p-table>
           </div>
         </div>
       </q-card-section>