fix:sortBy ,descending

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

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

@@ -27,8 +27,8 @@ const props = defineProps({
 });
 
 const pagination = ref<PropsTable.Pagination>({
-  sortBy: "desc",
-  descending: false,
+  sortBy: formQuery.value.sortBy,
+  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",
-  descending: false,
+  sortBy: formQuery.value.sortBy,
+  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,11 +69,13 @@ interface FormQuery {
   pageSize: number;
   round: string;
   keyword: string;
+  sortBy?: string;
+  descending?: boolean;
 }
 
 interface ListTarget {
   id: string;
-  createdAt: string; 
+  createdAt: string;
   createdUserId: string;
   lastUpdatedAt: string;
   lastUpdateUserId: string;
@@ -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