fix(disciplinary):sort

src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue

@@ -2,25 +2,16 @@
 import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { usePagination } from "@/composables/usePagination";
 
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const $q = useQuasar(); //ใช้ noti quasar
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -28,14 +19,18 @@ const store = useDisciplineMainStore();
 const dataInvestigateDis = useInvestigateDisStore();
 const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
 const { fetchList } = dataInvestigateDis;
+const { pagination, params, onRequest } = usePagination(
+  "",
+  fetchListDisciplinary
+);
 
 const filter = ref<string>(""); //search data table
 
 const status = ref<string>("NEW");
-async function fetchListDisciplinary(page?: number) {
+
+async function fetchListDisciplinary() {
   const body = {
-    page: page ? page : pagination.value.page,
-    pageSize: pagination.value.rowsPerPage,
+    ...params.value,
     keyword: filter.value.trim(),
     status: status.value,
     ...(store.formInvestigateDisciplinary.respondentType && {
@@ -77,12 +72,9 @@ async function fetchListDisciplinary(page?: number) {
   await http
     .post(config.API.disciplineDisciplinary(), body)
     .then(async (res) => {
-      const data = res.data.result.data;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      await fetchList(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await fetchList(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -112,18 +104,11 @@ function filterStatus(statusReturn: string) {
   getSearch();
 }
 
-function getSearch(page?: number) {
+function getSearch() {
   pagination.value.page = 1;
-  fetchListDisciplinary(page);
+  fetchListDisciplinary();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -136,29 +121,26 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการสอบสวนความผิดทางวินัย
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-    <div>
-      <Table
-        style="max-height: 80vh"
-        :rows="dataInvestigateDis.rows"
-        :columns="dataInvestigateDis.columns"
-        :visible-columns="dataInvestigateDis.visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="dataInvestigateDis.visibleColumns"
-        :nornmalData="true"
-        :paging="true"
-        :titleText="''"
-        v-model:pagination="pagination"
-        v-model:total="total"
-        v-model:total-list="totalList"
-        :fetchListDisciplinary="fetchListDisciplinary"
-        v-model:open-edit="openEdit"
-        :open-detail="openDetail"
-        :filterStatus="filterStatus"
-        :get-search="getSearch"
-      >
-      </Table>
-    </div>
+  <q-card flat bordered>
+    <Table
+      style="max-height: 80vh"
+      :rows="dataInvestigateDis.rows"
+      :columns="dataInvestigateDis.columns"
+      :visible-columns="dataInvestigateDis.visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="dataInvestigateDis.visibleColumns"
+      :nornmalData="true"
+      :paging="true"
+      :titleText="''"
+      v-model:pagination="pagination"
+      :fetchListDisciplinary="fetchListDisciplinary"
+      v-model:open-edit="openEdit"
+      :open-detail="openDetail"
+      :filterStatus="filterStatus"
+      :get-search="getSearch"
+      :on-request="onRequest"
+    >
+    </Table>
   </q-card>
 </template>