fix:sortBy ,descending

- ทำ sortBy เฉพาะ API ที่มีการทำ paging

src/modules/05_leave/components/FormLeave/Form.vue

@@ -44,11 +44,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullName",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullName",
+    field: "firstName",
     format(val, row) {
       return `${row.prefix}${row.firstName} ${row.lastName}`;
     },
@@ -66,7 +66,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const pagination = ref<PropsTable.Pagination>({
-  sortBy: "createdAt",
+  sortBy: "",
   descending: true,
   page: 1,
   rowsPerPage: 10,
@@ -83,6 +83,10 @@ async function getCommander() {
       page: pagination.value.page,
       pageSize: pagination.value.rowsPerPage,
       keycloakId: storeData.formData.keycloakId,
+      ...(pagination.value.sortBy && {
+        sortBy: pagination.value.sortBy,
+        descending: pagination.value.descending,
+      }),
       type:
         storeData.officerType.toLocaleUpperCase() == "OFFICER"
           ? "officer"
@@ -117,7 +121,7 @@ function closeDialog() {
   rows.value = [];
   selected.value = [];
   pagination.value = {
-    sortBy: "createdAt",
+    sortBy: "",
     descending: true,
     page: 1,
     rowsPerPage: 10,

src/modules/05_leave/components/ListView.vue

@@ -37,6 +37,8 @@ const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const pageSize = ref<number>(10);
 const total = ref<number>(0);
+const sortBy = ref<string>("dateSendLeave");
+const descending = ref<boolean>(true);
 /** function เรียกข้อมูลการลา*/
 async function fetchDataTable() {
   isLoading.value = true;
@@ -47,6 +49,10 @@ async function fetchDataTable() {
     page: page.value.toString(), //*หน้า
     pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
     keyword: filter.value, //keyword ค้นหา
+    ...(sortBy.value && {
+      sortBy: sortBy.value,
+      descending: descending.value,
+    }),
   };
   await http
     .post(config.API.leaveTableList(), body)
@@ -141,9 +147,14 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
  * function updatePagination
  * @param p หน้า
  * @param ps แถวต่อหน้า
+ * @param s เรียงลำดับตาม
+ * @param d เรียงลำดับจากน้อยไปมาก
  */
-async function updatePagination(p: number, ps: number) {
+async function updatePagination(p: number, ps: number, s: string, d: boolean) {
-  (page.value = p), (pageSize.value = ps);
+  page.value = p;
+  pageSize.value = ps;
+  sortBy.value = s;
+  descending.value = d;
   await fetchDataTable();
 }
 
@@ -188,6 +199,8 @@ onMounted(async () => {
     :pageSize="pageSize"
     :leaveType="leaveType"
     :total="total"
+    :sortBy="sortBy"
+    :descending="descending"
     :isloadingData="isLoading"
   >
     <template #columns="props">
@@ -215,7 +228,7 @@ onMounted(async () => {
           }}
         </q-td>
         <q-td
-          key="dateLeave"
+          key="leaveStartDate"
           :props="props"
           @click="onClickView(props.row.id, props.row.status)"
         >

src/modules/05_leave/components/Table.vue

@@ -38,6 +38,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  sortBy: {
+    type: String,
+    default: "dateSendLeave",
+  },
+  descending: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 /**
@@ -56,11 +64,10 @@ const table = ref<any>(null);
 const currentPage = ref<number>(1);
 
 const pagination = ref<PropsTable.Pagination>({
-  sortBy: "dateSendLeave",
+  sortBy: props.sortBy,
-  descending: true,
+  descending: props.descending,
   page: 1,
   rowsPerPage: Number(props.pageSize),
-
   rowsNumber: Number(props.total),
 });
 
@@ -94,9 +101,20 @@ function filterTable() {
   );
 }
 
-/** function updatePagination*/
+/**
-function updatePagination(p: number, ps: number) {
+ * ฟังก์ชันอัปเดตการแบ่งหน้า
-  emit("update:Pagination", p, ps);
+ * @param p หน้า
+ * @param ps ขนาดหน้า
+ * @param sortBy เรียงลำดับตาม
+ * @param descending เรียงลำดับจากน้อยไปมาก
+ */
+function updatePagination(
+  p: number,
+  ps: number,
+  sortBy?: string,
+  descending?: boolean
+) {
+  emit("update:Pagination", p, ps, sortBy, descending);
 }
 
 /**
@@ -108,7 +126,12 @@ function onTableRequest(requestProps: PropsTable.RequestProps) {
   if (!newPagination?.page || !newPagination?.rowsPerPage) return;
   currentPage.value = newPagination.page;
   pagination.value = { ...newPagination };
-  updatePagination(newPagination.page, newPagination.rowsPerPage);
+  updatePagination(
+    newPagination.page,
+    newPagination.rowsPerPage,
+    newPagination.sortBy,
+    newPagination.descending
+  );
 }
 </script>
 

src/modules/05_leave/store.ts

@@ -200,7 +200,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     "leaveTypeName",
     "dateSendLeave",
     "status",
-    "dateLeave",
+    "leaveStartDate",
   ]);
 
   const columns = ref<QTableProps["columns"]>([
@@ -208,7 +208,7 @@ export const useLeaveStore = defineStore("Leave", () => {
       name: "no",
       align: "left",
       label: "ลำดับ",
-      sortable: true,
+      sortable: false,
       field: "no",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px; width:5%;",
@@ -223,7 +223,7 @@ export const useLeaveStore = defineStore("Leave", () => {
       style: "font-size: 14px; width:15%;",
     },
     {
-      name: "dateLeave",
+      name: "leaveStartDate",
       align: "left",
       label: "วันที่ลา",
       sortable: true,
@@ -259,7 +259,6 @@ export const useLeaveStore = defineStore("Leave", () => {
    */
   function typeConvert(item: string, subitem: any) {
     typeLeave.value = convertSubtitle(item);
-    // }
     typeId.value = convertId(item);
   }
 

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

@@ -35,13 +35,13 @@ const props = defineProps({
 const emit = defineEmits(["update:pagination"]);
 
 /** ค้นหาคอลัม */
-const visibleColumns = ref<string[]>(["no", "type_th", "dateSend", "status"]);
+const visibleColumns = ref<string[]>(["no", "type_th", "lastUpdatedAt", "status"]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
+    sortable: false,
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px; ",
@@ -50,13 +50,13 @@ const columns = ref<QTableProps["columns"]>([
     name: "type_th",
     align: "left",
     label: "ระดับที่ยื่นขอ",
-    sortable: true,
+    sortable: false,
     field: "type_th",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px; ",
   },
   {
-    name: "dateSend",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่ยื่นขอ",
     sortable: true,
@@ -68,7 +68,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",

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

@@ -56,7 +56,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
+    sortable: false,
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px; width:5px;",
@@ -74,7 +74,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "type",
     align: "left",
     label: "ประเภท",
-    sortable: true,
+    sortable: false,
     field: "type",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px; width:15%;",
@@ -83,7 +83,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "year",
     align: "left",
     label: "ปีงบประมาณ",
-    sortable: true,
+    sortable: false,
     field: "year",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",

src/modules/08_KPI/components/Evaluator/01_TabAll.vue

@@ -27,8 +27,8 @@ const props = defineProps({
 });
 
 const pagination = ref<PropsTable.Pagination>({
-  sortBy: "desc",
+  sortBy: formQuery.value.sortBy,
-  descending: false,
+  descending: formQuery.value.descending,
   page: formQuery.value.page,
   rowsPerPage: formQuery.value.pageSize,
   rowsNumber: total.value,
@@ -48,6 +48,8 @@ function onTableRequest(requestProps: PropsTable.RequestProps) {
   if (!newPagination?.page || !newPagination?.rowsPerPage) return;
   formQuery.value.page = newPagination.page;
   formQuery.value.pageSize = newPagination.rowsPerPage;
+  formQuery.value.sortBy = newPagination.sortBy;
+  formQuery.value.descending = newPagination.descending;
   props?.fetchList?.();
 }
 
@@ -96,7 +98,7 @@ watch(
             :key="col.id"
             @click="redirectViewDetail(props.row.id)"
           >
-            <div v-if="col.name === 'name'">
+            <div v-if="col.name === 'firstName'">
               {{
                 `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
               }}

src/modules/08_KPI/components/Evaluator/02_TabOther.vue

@@ -41,8 +41,8 @@ const props = defineProps({
 });
 
 const pagination = ref<PropsTable.Pagination>({
-  sortBy: "desc",
+  sortBy: formQuery.value.sortBy,
-  descending: false,
+  descending: formQuery.value.descending,
   page: formQuery.value.page,
   rowsPerPage: formQuery.value.pageSize,
   rowsNumber: total.value,
@@ -115,6 +115,8 @@ function onTableRequest(requestProps: PropsTable.RequestProps) {
   if (!newPagination?.page || !newPagination?.rowsPerPage) return;
   formQuery.value.page = newPagination.page;
   formQuery.value.pageSize = newPagination.rowsPerPage;
+  formQuery.value.sortBy = newPagination.sortBy;
+  formQuery.value.descending = newPagination.descending;
   props?.fetchList?.();
 }
 
@@ -128,6 +130,8 @@ watch(
     pagination.value.page = page;
     pagination.value.rowsPerPage = pageSize;
     pagination.value.rowsNumber = total;
+    pagination.value.sortBy = formQuery.value.sortBy;
+    pagination.value.descending = formQuery.value.descending;
   }
 );
 </script>
@@ -219,7 +223,7 @@ watch(
                   <q-item-label caption>{{ col.label }}</q-item-label>
 
                   <q-item-label>
-                    <div v-if="col.name === 'name'">
+                    <div v-if="col.name === 'firstName'">
                       {{
                         `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
                       }}

src/modules/08_KPI/interface/request/index.ts

@@ -69,6 +69,8 @@ interface FormQuery {
   pageSize: number;
   round: string;
   keyword: string;
+  sortBy?: string;
+  descending?: boolean;
 }
 
 interface ListTarget {
@@ -99,5 +101,5 @@ export type {
   FormComment,
   FormCommentByRole,
   FormQuery,
-  ListTarget
+  ListTarget,
 };

src/modules/08_KPI/store.ts

@@ -14,6 +14,8 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     pageSize: 10,
     round: "",
     keyword: "",
+    sortBy: "",
+    descending: false,
   });
   const selected = ref([]);
   const work = ref<boolean>(false);

src/modules/08_KPI/views/main.vue

@@ -50,8 +50,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "year",
@@ -62,8 +60,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => v + 543,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "durationKPI",
@@ -74,8 +70,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => (v == "OCT" ? "รอบที่ 2 ตุลาคม" : "รอบที่ 1 เมษายน"),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "evaluationStatus",
@@ -86,8 +80,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => store.convertStatus(v),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "evaluationResults",
@@ -98,8 +90,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => store.convertResults(v),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 
@@ -147,7 +137,7 @@ const formQuery = reactive({
 const isRoundClose = ref<boolean>(false);
 
 const pagination = ref<PropsTable.Pagination>({
-  sortBy: "desc",
+  sortBy: "",
   descending: false,
   page: 1,
   rowsPerPage: 10,
@@ -212,6 +202,10 @@ async function fetchList() {
     status: formQuery.status === "" ? undefined : formQuery.status,
     results: formQuery.results === "" ? undefined : formQuery.results,
     year: year.value,
+    ...(pagination.value.sortBy && {
+      sortBy: pagination.value.sortBy,
+      descending: pagination.value.descending,
+    }),
   };
   await http
     .get(config.API.kpiEvaluation, {

src/modules/08_KPI/views/mainEvaluator.vue

@@ -28,22 +28,20 @@ const dataListMain = ref<ResEvaluatorAssessor[]>([]);
 const roundOp = ref<DataOptions[]>([]);
 
 const visibleColumns = ref<string[]>([
-  "name",
+  "firstName",
   "createdAt",
   "evaluationStatus",
   "evaluationResults",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "name",
+    name: "firstName",
     align: "left",
     label: "ผู้ขอรับการประเมิน",
     sortable: true,
-    field: "name",
+    field: "firstName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "createdAt",
@@ -54,8 +52,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "evaluationStatus",
@@ -66,8 +62,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => store.convertStatus(v),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "evaluationResults",
@@ -78,8 +72,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => store.convertResults(v),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 
@@ -147,6 +139,10 @@ async function fetchList() {
         ? "SUMMARY"
         : undefined,
     reqedit: store.tabMainevaluator === "3" ? "NEW" : undefined,
+    ...(store.formQuery.sortBy && {
+      sortBy: store.formQuery.sortBy,
+      descending: store.formQuery.descending,
+    }),
   };
 
   await http

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

@@ -59,21 +59,13 @@ const columns = ref<QTableProps["columns"]>([
     name: "detail",
     align: "left",
     label: "รายละเอียด",
-    sortable: false,
+    sortable: true,
     field: "detail",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  // {
+
-  //   name: "document",
-  //   align: "center",
-  //   label: "หลักฐานอ้างอิง",
-  //   sortable: false,
-  //   field: "document",
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  // },
   {
     name: "status",
     align: "left",
@@ -88,7 +80,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "remark",
     align: "left",
     label: "หมายเหตุ ",
-    sortable: false,
+    sortable: true,
     field: "remark",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",