From 5825f72e26a024ce724e16b2547025636911274e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 8 Oct 2025 16:59:13 +0700
Subject: [PATCH] fix(complaints):sort

---
 .../components/1_Complaint/MainPage.vue       | 271 +++++++++---------
 .../components/1_Complaint/TableComplaint.vue |  60 +---
 .../components/DialogSearchAdvanced.vue       |  23 +-
 3 files changed, 167 insertions(+), 187 deletions(-)

diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index c7fab72c0..cda75e312 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -11,6 +11,7 @@ import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
+import { usePagination } from "@/composables/usePagination";
 
 import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
 
@@ -25,51 +26,51 @@ const mixin = useCounterMixin();
 const complainstStore = useComplainstDataStore();
 const { fetchComplainst } = complainstStore;
 const { showLoader, messageError, hideLoader, convertDateToAPI } = mixin;
+const { pagination, params, onRequest } = usePagination("", getList);
 
-const filterRef = ref<HTMLInputElement | null>(null);
-const filterTable = ref<string>("");
 const filterKeyword = ref<string>("");
-
-const toptitle = ref<number>(0);
 const statusFilter = ref<string>("NEW");
 const option = ref<DataOption[]>(complainstStore.statusOptions);
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 /** ดึงข้อมูล เรื่องร้องเรียน */
-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.formComplaint.dateReceived?.[0] && { dateReceivedStart: convertDateToAPI(store.formComplaint.dateReceived[0])}),
-    ...(store.formComplaint.dateReceived?.[1] && { dateReceivedEnd: convertDateToAPI(store.formComplaint.dateReceived[1])}),
-    ...(store.formComplaint.respondentType && { respondentType: store.formComplaint.respondentType}),
-    ...(store.formComplaint.offenseDetails && { offenseDetails: store.formComplaint.offenseDetails}),
-    ...(store.formComplaint.levelConsideration && { levelConsideration: store.formComplaint.levelConsideration}),
-    ...(store.formComplaint.dateConsideration?.[0] && { dateConsiderationStart: convertDateToAPI( store.formComplaint.dateConsideration[0])}),
-    ...(store.formComplaint.dateConsideration?.[1] && { dateConsiderationEnd: convertDateToAPI( store.formComplaint.dateConsideration[1])}),
+    ...(store.formComplaint.dateReceived?.[0] && {
+      dateReceivedStart: convertDateToAPI(store.formComplaint.dateReceived[0]),
+    }),
+    ...(store.formComplaint.dateReceived?.[1] && {
+      dateReceivedEnd: convertDateToAPI(store.formComplaint.dateReceived[1]),
+    }),
+    ...(store.formComplaint.respondentType && {
+      respondentType: store.formComplaint.respondentType,
+    }),
+    ...(store.formComplaint.offenseDetails && {
+      offenseDetails: store.formComplaint.offenseDetails,
+    }),
+    ...(store.formComplaint.levelConsideration && {
+      levelConsideration: store.formComplaint.levelConsideration,
+    }),
+    ...(store.formComplaint.dateConsideration?.[0] && {
+      dateConsiderationStart: convertDateToAPI(
+        store.formComplaint.dateConsideration[0]
+      ),
+    }),
+    ...(store.formComplaint.dateConsideration?.[1] && {
+      dateConsiderationEnd: convertDateToAPI(
+        store.formComplaint.dateConsideration[1]
+      ),
+    }),
   };
   showLoader();
   await http
     .post(config.API.complaintList(), 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 fetchComplainst(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await fetchComplainst(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -102,13 +103,6 @@ function getSearch() {
   getList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(async () => {
   await getList();
@@ -119,99 +113,120 @@ 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
-        option-label="name"
-        option-value="id"
-        hide-selected
-        fill-input
-        :options="option"
-        @update:model-value="getSearch()"
-        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 = complainstStore.statusOptions),
-                (statusFilter = 'ALL'),
-                getSearch()
-            "
-            class="cursor-pointer"
-          />
-        </template>
-      </q-select>
+  <q-card flat bordered>
+    <div class="row 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">
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col-xs-11">
+                <q-select
+                  v-model="statusFilter"
+                  label="สถานะ"
+                  dense
+                  outlined
+                  emit-value
+                  map-options
+                  option-label="name"
+                  option-value="id"
+                  hide-selected
+                  fill-input
+                  :options="option"
+                  @update:model-value="getSearch()"
+                  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 = complainstStore.statusOptions),
+                          (statusFilter = 'ALL'),
+                          getSearch()
+                      "
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-select>
+              </div>
 
-      <div>
-        <q-btn
-          v-if="checkPermission($route)?.attrIsCreate"
-          id="addComplaints"
-          for="addComplaints"
-          dense
-          flat
-          round
-          color="primary"
-          icon="mdi-plus"
-          @click="redirectToPageadd()"
-          ><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
-        >
+              <div
+                class="col-xs-1"
+                v-if="checkPermission($route)?.attrIsCreate"
+              >
+                <q-btn
+                  id="addComplaints"
+                  for="addComplaints"
+                  dense
+                  flat
+                  round
+                  color="primary"
+                  icon="mdi-plus"
+                  @click="redirectToPageadd()"
+                  ><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
+                >
+              </div>
+            </div>
+          </div>
+
+          <div class="col-xs-12 col-sm-3 col-md-2 col-lg-6"></div>
+
+          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col-1">
+                <DialogSearchAdvanced :get-data="() => getSearch()" />
+              </div>
+              <div class="col-6">
+                <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-5">
+                <q-select
+                  id="visibleColumns"
+                  for="visibleColumns"
+                  v-model="complainstStore.visibleColumns"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
+                  emit-value
+                  map-options
+                  :options="complainstStore.columns"
+                  option-value="name"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      <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="getSearch()"
-      >
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
 
-      <q-select
-        id="visibleColumns"
-        for="visibleColumns"
-        v-model="complainstStore.visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="complainstStore.columns"
-        option-value="name"
-        style="min-width: 140px"
-      />
-    </div>
-
-    <div class="col-12">
-      <TableComplaint
-        :filter-table="filterTable"
-        v-model:pagination="pagination"
-        v-model:total="total"
-        v-model:total-list="totalList"
-        :toptitle="toptitle"
-        :get-list="getList"
-      />
+      <div class="col-12">
+        <TableComplaint
+          v-model:pagination="pagination"
+          :on-request="onRequest"
+        />
+      </div>
     </div>
   </q-card>
 </template>
diff --git a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
index ff67a7b59..a0bccc8fd 100644
--- a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
+++ b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
@@ -1,28 +1,24 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useRouter } from "vue-router";
 
 import { checkPermission } from "@/utils/permissions";
+import type { PropsTable } from "@/interface/index/PropsTable";
 
 const router = useRouter();
 const complainstStore = useComplainstDataStore();
 
-const total = defineModel<number>("total", { required: true });
-const totalList = defineModel<number>("totalList", { required: true });
-const pagination = defineModel<any>("pagination", { required: true });
+const pagination = defineModel<PropsTable.Pagination>("pagination", {
+  required: true,
+});
 
 const emit = defineEmits(["update:pagination"]);
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  getList: Function,
-  filterTable: {
-    type: String,
-    default: "",
-  },
-  toptitle: {
-    type: Number,
+  onRequest: {
+    type: Function,
     require: true,
   },
 });
@@ -39,8 +35,6 @@ const visibleColumns = ref<string[]>([
   "dateConsideration",
   "status",
 ]);
-
-/** หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -109,7 +103,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "status",
     align: "left",
     label: "สถานะ",
-    sortable: true,
+    sortable: false,
     field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -124,12 +118,6 @@ function OpenEdit(id: string) {
   router.push(`/discipline/complaints/${id}`);
 }
 
-/** ส่งค่ากลับไปหน้าหลัก */
-function updateProp(newPagination: any, page: number) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, page);
-}
-
 /**
  * ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
  * @param id ไอดีระบุ
@@ -138,11 +126,6 @@ function onDetail(id: string) {
   router.push(`/discipline/complaints-detail/${id}`);
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 /** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
 onMounted(() => {
   complainstStore.columns = columns.value;
@@ -151,7 +134,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <d-table
+  <p-table
     id="table"
     ref="table"
     :columns="columns"
@@ -164,7 +147,8 @@ onMounted(() => {
     class="custom-header-table"
     :visible-columns="complainstStore.visibleColumns"
     :rows-per-page-options="[10, 25, 50, 100]"
-    @update:pagination="updatePagination"
+    v-model:pagination="pagination"
+    @request="props.onRequest"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -207,11 +191,7 @@ onMounted(() => {
         </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
-            }}
+            {{ props.rowIndex + 1 }}
           </div>
           <div v-else-if="col.name === 'title'" class="table_ellipsis">
             {{ props.row.title }}
@@ -222,21 +202,7 @@ onMounted(() => {
         </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="props.getList?.()"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/11_discipline/components/DialogSearchAdvanced.vue b/src/modules/11_discipline/components/DialogSearchAdvanced.vue
index 760575f16..73ab9ab3f 100644
--- a/src/modules/11_discipline/components/DialogSearchAdvanced.vue
+++ b/src/modules/11_discipline/components/DialogSearchAdvanced.vue
@@ -75,18 +75,17 @@ watchEffect(() => {
 });
 </script>
 <template>
-  <div>
-    <q-btn
-      size="12px"
-      flat
-      round
-      color="blue"
-      icon="mdi-filter-variant"
-      @click="onSearch"
-    >
-      <q-tooltip>ค้นหาขั้นสูง</q-tooltip>
-    </q-btn>
-  </div>
+  <q-btn
+    size="12px"
+    flat
+    round
+    color="blue"
+    icon="mdi-filter-variant"
+    @click="onSearch"
+  >
+    <q-tooltip>ค้นหาขั้นสูง</q-tooltip>
+  </q-btn>
+
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 400px">
       <q-form greedy @submit.prevent @validation-success="fnSearch">