updated kpi list & detail

src/modules/14_KPI/views/list.vue

@@ -9,11 +9,11 @@ import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 import type { QTableProps } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
-import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
 
 const $q = useQuasar();
 const router = useRouter();
-const store = useKPIDataStore();
+const store = useKpiDataStore();
 
 const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
   useCounterMixin();
@@ -22,7 +22,7 @@ const filterKeyword = ref<string>("");
 
 const rows = ref<any[]>([]);
 
-const year = ref<number>(new Date().getFullYear());
+const year = ref<number | null>(new Date().getFullYear());
 
 const round = ref<string>("");
 const roundOp = ref<DataOption[]>([]);
@@ -31,7 +31,7 @@ const visibleColumns = ref<string[]>([
   "name",
   "createdAt",
   "evaluationStatus",
-  "evaluationStatus",
+  "evaluationResults",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -65,16 +65,16 @@ const columns = ref<QTableProps["columns"]>([
     field: "evaluationStatus",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => store.convertResults(v),
+    format: (v) => store.convertStatus(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "evaluationStatus",
+    name: "evaluationResults",
     align: "left",
     label: "ผลการประเมิน",
     sortable: true,
-    field: "evaluationStatus",
+    field: "evaluationResults",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => store.convertResults(v),
@@ -97,20 +97,22 @@ function fetchRoundOption() {
       config.API.kpiPeriod +
         `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
     )
-    .then((res) => {
-      const data = res.data.result.data;
-      const list = data.map((e: any) => ({
-        id: e.id,
-        name:
-          e.durationKPI === "OCT"
-            ? "รอบตุลาคม"
-            : e.durationKPI === "APR"
-            ? "รอบเมษายน"
-            : "",
-      }));
-      roundOp.value = list;
-      round.value = "";
-      fetchList();
+    .then(async (res) => {
+      const data = await res.data.result.data;
+      if (res.data.result.data.length > 0) {
+        const list = await data.map((e: any) => ({
+          id: e.id,
+          name:
+            e.durationKPI === "OCT"
+              ? "รอบตุลาคม"
+              : e.durationKPI === "APR"
+              ? "รอบเมษายน"
+              : "",
+        }));
+        roundOp.value = list;
+        store.formQuery.round = list[0].id;
+        fetchList();
+      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -120,13 +122,19 @@ function fetchRoundOption() {
     });
 }
 
+// const status = ref<string>("");
 function fetchList() {
   showLoader();
+  const body = {
+    page: store.formQuery.page,
+    pageSize: store.formQuery.pageSize,
+    kpiPeriodId: store.formQuery.round,
+    keyword: store.formQuery.keyword,
+    // status: status.value,
+  };
+
   http
-    .get(
-      config.API.kpiUserEvaluation +
-        `/admin?page=${formQuery.page}&pageSize=${formQuery.pageSize}&kpiPeriodId=${round.value}&keyword=${filterKeyword.value}`
-    )
+    .post(config.API.kpiEvaluation + `/admin`, body)
     .then((res) => {
       const data = res.data.result;
       maxPage.value = Math.ceil(data.total / formQuery.pageSize);
@@ -150,6 +158,13 @@ function redirectViewDetail(id: string) {
   router.push(`KPI-list/${id}`);
 }
 
+function clearYear() {
+  year.value = null;
+  store.formQuery.round = "";
+  roundOp.value = [];
+  fetchList();
+}
+
 /**
  * function updatePagination
  * @param newPagination ข้อมูล Pagination ใหม่
@@ -190,6 +205,7 @@ onMounted(async () => {
             <datepicker
               menu-class-name="modalfix"
               v-model="year"
+              style="width: 150px"
               :locale="'th'"
               autoApply
               year-picker
@@ -208,6 +224,8 @@ onMounted(async () => {
                   hide-bottom-space
                   :model-value="!!year ? year + 543 : null"
                   :label="`${'ปีงบประมาณ'}`"
+                  clearable
+                  @clear="clearYear"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -222,18 +240,32 @@ onMounted(async () => {
             </datepicker>
 
             <q-select
-              v-model="round"
+              v-model="store.formQuery.round"
               outlined
               label="รอบการประเมิน"
               dense
               option-label="name"
               option-value="id"
               :options="roundOp"
-              style="min-width: 200px"
+              style="min-width: 150px"
               emit-value
               map-options
               @update:model-value="changRound"
             />
+
+            <!-- <q-select
+              v-model="status"
+              outlined
+              label="สถานะการประเมิน"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="store.statusOptions"
+              style="min-width: 180px"
+              emit-value
+              map-options
+              @update:model-value="changRound"
+            /> -->
           </div>
 
           <q-space />