sort

src/api/appeal/api.appeal.ts

@@ -7,15 +7,7 @@ export default {
   profileBykeycloak: () => `${profile}`,
   // positionBykeycloak: () => `${env.API_URI}/org/profile/keycloak/position`,
 
-  appealMainList: (
+  appealMainList: () => `${appeal}/user`,
-    status: string,
-    type: string,
-    year: number,
-    page: number,
-    pageSize: number,
-    keyword: string
-  ) =>
-    `${appeal}/user?status=${status}&type=${type}&year=${year}&page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
   appealAdd: () => `${appeal}`,
 
   appealByID: (id: string) => `${appeal}/${id}`,

src/components/TableD.vue

@@ -138,9 +138,9 @@ function onRequest(requestProp: any) {
     ...newPagination,
   };
 
-  if (isPageChange) {
+  // if (isPageChange) {
-    emit("request", requestProp);
+  emit("request", requestProp);
-  }
+  // }
 }
 
 function handlePageChange(newPage: number) {

src/components/Workflow/DialogSelectPerson.vue

@@ -7,9 +7,9 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
-import type { Pagination } from "@/components/Workflow/interface/index/Main";
 import type { DataQuery } from "@/components/Workflow/interface/request/Main";
 import type { DataCommander } from "@/components/Workflow/interface/response/Main";
+import type { PropsTable } from "@/interface/PropsTable";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -76,17 +76,19 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
+const pagination = ref<PropsTable.Pagination>({
-const total = ref<number>(0);
+  sortBy: "",
-const totalList = ref<number>(1);
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 0,
+});
 
 const isAcceptSetting = ref<boolean>(false);
 const isApproveSetting = ref<boolean>(false);
 const isReasonSetting = ref<boolean>(false);
 
 const formDataQuery = reactive<DataQuery>({
-  page: 1,
-  pageSize: 10,
   isAct: false,
   keyword: "",
 });
@@ -97,12 +99,11 @@ async function fetchLists() {
     .put(config.API.workflow + `commander/${props.type}`, {
       ...formDataQuery,
       keycloakId: props.keycloakId,
+      page: pagination.value.page,
+      pageSize: pagination.value.rowsPerPage,
     })
     .then(async (res) => {
-      totalList.value = Math.ceil(
+      pagination.value.rowsNumber = res.data.result.total;
-        res.data.result.total / formDataQuery.pageSize
-      );
-      total.value = res.data.result.total;
       rows.value = res.data.result.data;
     })
     .catch((err) => {
@@ -139,7 +140,7 @@ function onSubmit() {
 }
 
 function onSearchData() {
-  formDataQuery.page = 1;
+  pagination.value.page = 1;
   fetchLists();
 }
 
@@ -150,32 +151,25 @@ function onCloseModal() {
   isAcceptSetting.value = false;
   isApproveSetting.value = false;
   isReasonSetting.value = false;
-  formDataQuery.page = 1;
-  formDataQuery.pageSize = 10;
   formDataQuery.isAct = false;
   formDataQuery.keyword = "";
 }
 
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+}
+
 watch(modal, (val) => {
   if (val) {
     fetchLists();
   }
 });
-
-// watch(
-//   () => [formDataQuery.isAct, formDataQuery.pageSize],
-//   () => {
-//     onSearchData();
-//   }
-// );
-
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: Pagination) {
-  formDataQuery.pageSize = newPagination.rowsPerPage;
-}
 </script>
 
 <template>
@@ -231,7 +225,8 @@ function updatePagination(newPagination: Pagination) {
             :rows-per-page-options="[10, 25, 50, 100]"
             selection="single"
             v-model:selected="selected"
-            @update:pagination="updatePagination"
+            v-model:pagination="pagination"
+            @request="onTableRequest"
           >
             <template v-slot:header-selection="scope">
               <q-checkbox
@@ -266,21 +261,6 @@ function updatePagination(newPagination: Pagination) {
                 </q-td>
               </q-tr>
             </template>
-
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ total }} รายการ
-              <q-pagination
-                v-model="formDataQuery.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(totalList)"
-                size="sm"
-                boundary-links
-                direction-links
-                :max-pages="5"
-                @update:model-value="fetchLists()"
-              ></q-pagination>
-            </template>
           </d-table>
           <div class="q-gutter-xs q-pt-sm">
             <div>

src/components/Workflow/interface/request/Main.ts

@@ -1,6 +1,4 @@
 interface DataQuery {
-  page: number;
-  pageSize: number;
   isAct: boolean;
   keyword: string;
 }

src/modules/06_evaluate/components/TableListEvaluate.vue

@@ -128,7 +128,7 @@ onMounted(() => {
   <d-table
     ref="table"
     flat
-    bordere
+    bordered
     :columns="columns"
     :rows="store.row"
     dense

src/modules/06_evaluate/views/EvaluateMain.vue

@@ -52,7 +52,7 @@ const listMenu = ref<ListMenu[]>([
 ]);
 
 const pagination = ref<PropsTable.Pagination>({
-  sortBy: "createdAt",
+  sortBy: "",
   descending: true,
   page: 1,
   rowsPerPage: 10,
@@ -81,7 +81,12 @@ async function fetchEvaluteList() {
     pageSize: pagination.value.rowsPerPage,
     keyword: store.filterKeyword,
     status: selectedStatus.value,
+    ...(pagination.value.sortBy && {
+      sortBy: pagination.value.sortBy,
+      descending: pagination.value.descending,
+    }),
   };
+
   await http
     .put(config.API.evaluationList(), body)
     .then(async (res) => {
@@ -216,6 +221,8 @@ onMounted(async () => {
       </div>
     </div>
 
+    
+
     <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
       <div class="col-12 row">
         <q-card bordered class="col-12 row caedNone q-pa-md">

src/modules/07_appealComplain/views/Main.vue

@@ -1,7 +1,7 @@
 useA
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -28,7 +28,7 @@ const type = ref<DataOption[]>([
 
 const isload = ref<boolean>(false);
 const pagination = ref<PropsTable.Pagination>({
-  sortBy: "createdAt",
+  sortBy: "",
   descending: true,
   page: 1,
   rowsPerPage: 10,
@@ -149,23 +149,28 @@ const columns = ref<QTableProps["columns"]>([
 //นำข้อมูลมาแสดง
 async function getData() {
   isload.value = true;
+  const params = new URLSearchParams({
+    status: formData.status,
+    type: formData.type,
+    year: String(formData.year),
+    page: String(pagination.value.page),
+    pageSize: String(pagination.value.rowsPerPage),
+    keyword: filterKeyword.value,
+  });
+
+  if (pagination.value.sortBy) {
+    params.append("sortBy", pagination.value.sortBy);
+    params.append("descending", String(pagination.value.descending));
+  }
+
   await http
-    .get(
+    .get(config.API.appealMainList() + `?${params.toString()}`)
-      config.API.appealMainList(
-        formData.status,
-        formData.type,
-        formData.year,
-        pagination.value.page,
-        pagination.value.rowsPerPage,
-        filterKeyword.value
-      )
-    )
     .then(async (res) => {
       const result = res.data.result;
       pagination.value.rowsNumber = result.total;
       dataStore.fetchAppealComplain(result.data);
     })
-    .catch((e: any) => {
+    .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {

src/modules/10_registry/views/requestEditMain.vue

@@ -49,7 +49,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "topic",
     align: "left",
     label: "ชื่อเรื่อง",
-    sortable: false,
+    sortable: true,
     field: "topic",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -106,6 +106,7 @@ const visibleColumns = ref<string[]>([
 const pagination = ref<PropsTable.Pagination>({
   descending: true,
   page: 1,
+  sortBy: "",
   rowsPerPage: 10,
   rowsNumber: 0,
 });
@@ -122,17 +123,26 @@ function onClickAdd() {
 
 /** function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล*/
 async function fetchListRequset() {
-  let queryParams = {
+  const queryParams = new URLSearchParams({
-    page: pagination.value.page,
+    page: pagination.value.page.toString(),
-    pageSize: pagination.value.rowsPerPage,
+    pageSize: pagination.value.rowsPerPage.toString(),
     status: status.value,
     keyword: keyword.value,
-  };
+  });
+
+  if (pagination.value.sortBy) {
+    queryParams.append("sortBy", pagination.value.sortBy);
+    queryParams.append(
+      "descending",
+      pagination.value.descending ? "true" : "false"
+    );
+  }
   isLoading.value = true;
   await http
-    .get(config.API.requestEditByType(link.value) + `user`, {
+    .get(
-      params: queryParams,
+      config.API.requestEditByType(link.value) +
-    })
+        `user?${queryParams.toString()}`
+    )
     .then((res) => {
       const result = res.data.result;
       pagination.value.rowsNumber = result.total;

src/modules/13_portfolio/views/Main.vue

@@ -122,10 +122,6 @@ function onSearch() {
   );
 }
 
-function onTableRequest() {
-  console.log(1111);
-}
-
 /** Hook Lifecycle */
 onMounted(async () => {
   await fecthList();
@@ -213,7 +209,6 @@ onMounted(async () => {
               :rows-per-page-options="[10, 25, 50, 100]"
               :pagination="pagination"
               :loading="isLoading"
-              @request="onTableRequest"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">

src/modules/14_IDP/views/main.vue

@@ -23,7 +23,7 @@ const status = ref<string>("ALL"); // สถานะคำร้อง
 const statusOptions = ref<DataOption[]>(store.optionStatus);
 const rows = ref<RowsListMain[]>([]);
 const pagination = ref<PropsTable.Pagination>({
-  sortBy: "createdAt",
+  sortBy: "",
   descending: true,
   page: 1,
   rowsPerPage: 10,
@@ -40,7 +40,7 @@ const visibleColumns = ref<string[]>([
   "detail",
   "document",
   "status",
-  "remark",
+  "reason",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -67,7 +67,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentProjects",
     align: "left",
     label: "วิธีการพัฒนา",
-    sortable: true,
+    sortable: false,
     field: "developmentProjects",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -120,18 +120,18 @@ const columns = ref<QTableProps["columns"]>([
     name: "status",
     align: "left",
     label: "สถานะคำร้อง",
-    sortable: true,
+    sortable: false,
     field: "status",
     format: (v) => store.convertStatus(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "remark",
+    name: "reason",
     align: "left",
     label: "หมายเหตุ ",
     sortable: true,
-    field: "remark",
+    field: "reason",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -177,12 +177,21 @@ function onDelete(id: string) {
 /** list รายการ */
 async function getListData() {
   isLoading.value = true;
+  const params = new URLSearchParams({
+    status: status.value,
+    keyword: filterKeyword.value,
+    page: pagination.value.page.toString(),
+    pageSize: pagination.value.rowsPerPage.toString(),
+  });
+
+  if (pagination.value.sortBy) {
+    params.append("sortBy", pagination.value.sortBy);
+    params.append("descending", pagination.value.descending ? "true" : "false");
+  }
+
   await http
-    .get(
+    .get(config.API.developmentRequest + `/user?${params.toString()}`)
-      config.API.developmentRequest +
+
-        `/user?status=${status.value}&keyword=${filterKeyword.value}&page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}
-  `
-    )
     .then(async (res) => {
       const result = await res.data.result;
       pagination.value.rowsNumber = result.total;
@@ -247,6 +256,7 @@ async function downloadUrl(id: string, fileName: string) {
  */
 function onTableRequest(requestProps: PropsTable.RequestProps) {
   const newPagination = requestProps?.pagination || requestProps;
+
   if (!newPagination?.page || !newPagination?.rowsPerPage) return;
   pagination.value = { ...newPagination };
   getListData();

src/views/MainLayout.vue

@@ -247,6 +247,14 @@ const landingPageUrl = ref<string>(configParam.landingPageUrl);
 function onViewDetailNoti(url: string) {
   window.open(url, "_blank");
 }
+
+/** ดูการเปลี่ยน route name เพื่อเปลี่ยน tab */
+watch(
+  () => route.name,
+  (newVal) => {
+    tab.value = newVal;
+  }
+);
 </script>
 
 <!-- โครงเว็บ -->