fix(command): sort

src/modules/18_command/components/Main/TableMain.vue

@@ -6,7 +6,6 @@ import { useRouter } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandListStore } from "@/modules/18_command/store/ListStore";
-import { updateCurrentPage } from "@/utils/function";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -27,11 +26,11 @@ const {
   dialogConfirm,
 } = useCounterMixin();
 
-const page = defineModel<number>("page", { required: true });
-const pageSize = defineModel<number>("pageSize", { required: true });
-
+const pagination = defineModel<Pagination>("pagination", { required: true });
 const props = defineProps({
   fetchList: { type: Function, required: true },
+  onRequest: { type: Function, required: true },
+  checkAndUpdatePage: { type: Function, required: true },
 });
 
 const modalCopy = ref<boolean>(false);
@@ -82,11 +81,7 @@ function onReCommand(id: string) {
       await http
         .put(config.API.commandAction(id, "resume"))
         .then(async () => {
-          page.value = await updateCurrentPage(
-            page.value,
-            store.maxPage,
-            store.rows.length
-          );
+          await props.checkAndUpdatePage(store.rows.length);
           await fetchListCommand();
           success($q, "ดึงไปทำคำสั่งใหม่สำเร็จ");
         })
@@ -109,11 +104,7 @@ function onDeleteCommand(id: string) {
       await http
         .delete(config.API.command + `/${id}`)
         .then(async () => {
-          page.value = await updateCurrentPage(
-            page.value,
-            store.maxPage,
-            store.rows.length
-          );
+          await props.checkAndUpdatePage(store.rows.length);
           await fetchListCommand();
           success($q, "ลบรายการสำเร็จ");
         })
@@ -129,27 +120,13 @@ function onDeleteCommand(id: string) {
   );
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: Pagination) {
-  page.value = 1;
-  pageSize.value = newPagination.rowsPerPage;
-}
-
-watch(pageSize, () => {
-  isCheckPageSize.value = true;
-  fetchListCommand();
-});
-
 onMounted(() => {
   !isCheckPageSize.value && fetchListCommand();
 });
 </script>
 
 <template>
-  <d-table
+  <p-table
     ref="table"
     :columns="store.columns"
     :visible-columns="store.visibleColumns"
@@ -160,7 +137,8 @@ onMounted(() => {
     bordered
     :paging="true"
     :rows-per-page-options="[10, 25, 50, 100]"
-    @update:pagination="updatePagination"
+    @request="onRequest"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -332,21 +310,7 @@ onMounted(() => {
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ store.total.toLocaleString() }} รายการ
-      <q-pagination
-        v-model="page"
-        active-color="primary"
-        color="dark"
-        :max="Number(store.maxPage)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="fetchListCommand"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>
 
   <DialogFormCommand
     v-model:modal="modalCopy"