fix(investigatefacts)sort

src/modules/11_discipline/components/1_Complaint/MainPage.vue

@@ -158,7 +158,7 @@ onMounted(async () => {
               </div>
 
               <div
-                class="col-xs-1"
+                class="col-xs"
                 v-if="checkPermission($route)?.attrIsCreate"
               >
                 <q-btn
@@ -176,14 +176,14 @@ onMounted(async () => {
             </div>
           </div>
 
-          <div class="col-xs-12 col-sm-3 col-md-2 col-lg-6"></div>
+          <q-space />
 
-          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
+          <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
             <div class="row q-col-gutter-sm items-center">
-              <div class="col-1">
+              <div class="col">
                 <DialogSearchAdvanced :get-data="() => getSearch()" />
               </div>
-              <div class="col-6">
+              <div class="col-7">
                 <q-input
                   for="#search"
                   standout
@@ -200,7 +200,7 @@ onMounted(async () => {
                 </q-input>
               </div>
 
-              <div class="col-5">
+              <div class="col-4">
                 <q-select
                   id="visibleColumns"
                   for="visibleColumns"

src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue

@@ -9,39 +9,30 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
 import { checkPermission } from "@/utils/permissions";
+import { usePagination } from "@/composables/usePagination";
 
 import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
 
+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
+
 const $q = useQuasar(); //ใช้ noti quasar
 const store = useDisciplineMainStore();
 const mixin = useCounterMixin();
 const dataInvestigate = useInvestigateFactStore();
 const { messageError, showLoader, hideLoader, convertDateToAPI } = mixin;
+const { pagination, params, onRequest } = usePagination("", getList);
 
-const option = ref<any[]>(dataInvestigate.statusOptions);
+const attrs = ref<any>(useAttrs());
+const option = ref<DataOption[]>(dataInvestigate.statusOptions);
 
 /** ค้นหาข้อมูลในตาราง */
 const filterKeyword = ref<string>("");
-const filterRef = ref<HTMLInputElement | null>(null);
 const statusFilter = ref<string>("NEW");
-const toptitle = ref<number>(0);
-
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const attrs = ref<any>(useAttrs());
 
 /** ดึงข้อมูลบสวน */
-async function getList(page?: number) {
+async function getList() {
   const body = {
-    page: page ? page : pagination.value.page,
-    pageSize: pagination.value.rowsPerPage,
+    ...params.value,
     keyword: filterKeyword.value.trim(),
     status: statusFilter.value,
     ...(store.formInvestigateFacts.respondentType && {
@@ -82,14 +73,9 @@ async function getList(page?: number) {
   await http
     .post(config.API.investigateMain(), body)
     .then(async (res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      toptitle.value = res.data.result.total;
-
-      const data = res.data.result.data;
-      await dataInvestigate.fecthList(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await dataInvestigate.fecthList(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -104,7 +90,7 @@ async function getList(page?: number) {
  * @param id ไอดีเฉพาะ รายบุคคล
  */
 async function editPage(id: string) {
-  dataInvestigate.tabMenu = await "investigatefacts";
+  dataInvestigate.tabMenu = "investigatefacts";
   router.push(`/discipline/investigatefacts/${id}`);
 }
 /**
@@ -112,7 +98,7 @@ async function editPage(id: string) {
  * @param id ไอดีเฉพาะ รายบุคคล
  */
 async function detailPage(id: string) {
-  dataInvestigate.tabMenu = await "investigatefacts";
+  dataInvestigate.tabMenu = "investigatefacts";
   router.push(`/discipline-detail/investigatefacts/${id}`);
 }
 
@@ -129,27 +115,12 @@ function filterOptionFn(val: string, update: Function) {
   });
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
-function getSerach() {
+function getSearch() {
   pagination.value.page = 1;
   getList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSerach();
-  }
-);
-
-/**เมื่อเริ่มโหลดหน้า
- * ส่งข้อมูลจำลองไปยัง store
- */
-onMounted(async () => {
+onMounted(() => {
   getList();
 });
 </script>
@@ -158,173 +129,175 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการสืบสวนข้อเท็จจริง
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row col-12 q-col-gutter-sm q-mb-sm items-center">
-      <q-select
-        v-model="statusFilter"
-        label="สถานะ"
-        dense
-        outlined
-        emit-value
-        map-options
-        hide-selected
-        fill-input
-        option-label="name"
-        option-value="id"
-        :options="option"
-        @update:model-value="getSerach()"
-        use-input
-        @filter="filterOptionFn"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-          </q-item>
-        </template>
-        <template v-if="statusFilter !== 'ALL'" v-slot:append>
-          <q-icon
-            name="cancel"
-            @click.stop.prevent="
-              (option = dataInvestigate.statusOptions),
-                (statusFilter = 'ALL'),
-                getSerach()
-            "
-            class="cursor-pointer"
-          />
-        </template>
-      </q-select>
 
-      <q-space />
-      <DialogSearchAdvanced :get-data="(value:number)=> getList(value)" />
-      <q-input
-        for="#search"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        placeholder="ค้นหาเรื่องร้องเรียน"
-        @keydown.enter.prevent="getSerach()"
-      >
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
-
-      <q-select
-        for="#select"
-        v-model="dataInvestigate.visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="dataInvestigate.columns"
-        option-value="name"
-        style="min-width: 140px"
-      />
-    </div>
-
-    <div class="col-12">
-      <d-table
-        ref="table"
-        :columns="dataInvestigate.columns"
-        :rows="dataInvestigate.rows"
-        row-key="interrogated"
-        flat
-        bordered
-        :paging="true"
-        dense
-        class="custom-header-table"
-        v-bind="attrs"
-        :visible-columns="dataInvestigate.visibleColumns"
-        :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th auto-width></q-th>
-            <q-th
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              style="color: #000000; font-weight: 500"
+  <q-card flat bordered>
+    <div class="row col-12 q-col-gutter-sm q-pa-md">
+      <div class="col-12">
+        <div class="row q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
+            <q-select
+              v-model="statusFilter"
+              label="สถานะ"
+              dense
+              outlined
+              emit-value
+              map-options
+              hide-selected
+              fill-input
+              option-label="name"
+              option-value="id"
+              :options="option"
+              @update:model-value="getSearch()"
+              use-input
+              @filter="filterOptionFn"
             >
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-            <q-th auto-width />
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props">
-            <q-td auto-width>
-              <q-btn
-                v-if="checkPermission($route)?.attrIsGet"
-                flat
-                dense
-                round
-                color="info"
-                icon="mdi-eye"
-                @click="detailPage(props.row.id)"
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+              <template v-if="statusFilter !== 'ALL'" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="
+                    (option = dataInvestigate.statusOptions),
+                      (statusFilter = 'ALL'),
+                      getSearch()
+                  "
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-select>
+          </div>
+
+          <q-space />
+          <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col">
+                <DialogSearchAdvanced :get-data="() => getSearch()" />
+              </div>
+
+              <div class="col-7">
+                <q-input
+                  for="#search"
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  ref="filterRef"
+                  outlined
+                  placeholder="ค้นหาเรื่องร้องเรียน"
+                  @keydown.enter.prevent="getSearch()"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+              </div>
+
+              <div class="col-4">
+                <q-select
+                  for="#select"
+                  v-model="dataInvestigate.visibleColumns"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
+                  emit-value
+                  map-options
+                  :options="dataInvestigate.columns"
+                  option-value="name"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12">
+        <p-table
+          ref="table"
+          :columns="dataInvestigate.columns"
+          :rows="dataInvestigate.rows"
+          row-key="interrogated"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="dataInvestigate.visibleColumns"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          @request="onRequest"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width></q-th>
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                style="color: #000000; font-weight: 500"
               >
-                <q-tooltip>รายละเอียด</q-tooltip>
-              </q-btn>
-              <q-btn
-                v-if="
-                  checkPermission($route)?.attrIsGet &&
-                  checkPermission($route)?.attrIsUpdate
-                "
-                flat
-                dense
-                round
-                color="edit"
-                icon="edit"
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsGet"
+                  flat
+                  dense
+                  round
+                  color="info"
+                  icon="mdi-eye"
+                  @click="detailPage(props.row.id)"
+                >
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsGet &&
+                    checkPermission($route)?.attrIsUpdate
+                  "
+                  flat
+                  dense
+                  round
+                  color="edit"
+                  icon="edit"
+                  @click="editPage(props.row.id)"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else-if="col.name === 'title'" class="table_ellipsis">
+                  {{ props.row.title }}
+                </div>
+                <div v-else>
+                  {{ col.value ?? "-" }}
+                </div>
+              </q-td>
+              <q-td
+                auto-width
+                style="font-size: 14px; width: 10%"
                 @click="editPage(props.row.id)"
               >
-                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-              </q-btn>
-            </q-td>
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name == 'no'">
-                {{
-                  (pagination.page - 1) * pagination.rowsPerPage +
-                  props.rowIndex +
-                  1
-                }}
-              </div>
-              <div v-else-if="col.name === 'title'" class="table_ellipsis">
-                {{ props.row.title }}
-              </div>
-              <div v-else>
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td
-              auto-width
-              style="font-size: 14px; width: 10%"
-              @click="editPage(props.row.id)"
-            >
-              {{ props.row.active }}
-            </q-td>
-          </q-tr>
-        </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total }} รายการ
-          <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="getList()"
-          ></q-pagination>
-        </template>
-      </d-table>
+                {{ props.row.active }}
+              </q-td>
+            </q-tr>
+          </template>
+        </p-table>
+      </div>
     </div>
   </q-card>
 </template>

src/modules/11_discipline/components/DialogSearchAdvanced.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watchEffect } from "vue";
+import { ref, watchEffect } from "vue";
 import { useRoute } from "vue-router";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -12,7 +12,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 
 const route = useRoute();
 const mixin = useCounterMixin();
-const { dateThaiRange, convertDateToAPI } = mixin;
+const { dateThaiRange } = mixin;
 const store = useDisciplineMainStore();
 const complainstStore = useComplainstDataStore();
 const investigateStore = useInvestigateFactStore();
@@ -34,7 +34,7 @@ function onClose() {
 }
 
 function fnSearch() {
-  props.getData?.(1);
+  props.getData?.();
   onClose();
 }
 

src/modules/11_discipline/store/InvestigateFactStore.ts

@@ -67,7 +67,7 @@ export const useInvestigateFactStore = defineStore(
       "respondentType",
       "offenseDetails",
       "investigationDetail",
-      "dateInvestigate",
+      "investigationDateStart",
       "investigationStatusResult",
       "dateReceived",
       "status",
@@ -101,8 +101,6 @@ export const useInvestigateFactStore = defineStore(
         field: "respondentType",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "offenseDetails",
@@ -112,8 +110,6 @@ export const useInvestigateFactStore = defineStore(
         field: "offenseDetails",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "investigationDetail",
@@ -123,19 +119,15 @@ export const useInvestigateFactStore = defineStore(
         field: "investigationDetail",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
-        name: "dateInvestigate",
+        name: "investigationDateStart",
         align: "left",
         label: "วันที่สืบสวน",
         sortable: true,
         field: "dateInvestigate",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "investigationStatusResult",
@@ -145,8 +137,6 @@ export const useInvestigateFactStore = defineStore(
         field: "investigationStatusResult",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "dateReceived",
@@ -156,8 +146,6 @@ export const useInvestigateFactStore = defineStore(
         field: "dateReceived",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "status",