Refactoring code module 08_KPI

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

@@ -2,17 +2,25 @@
 import { ref, onMounted, reactive, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
-import config from "@/app.config";
-import http from "@/plugins/http";
-
-import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
 import type { QTableProps } from "quasar";
 
-import DialogHeader from "@/components/DialogHeader.vue";
-
+import config from "@/app.config";
+import http from "@/plugins/http";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import type {
+  DataOptions,
+  MainListKpi,
+  PaginationType,
+} from "@/modules/08_KPI/interface/index/Main";
+import type {
+  RoundKpiResponse,
+  EvaOptionType,
+} from "@/modules/08_KPI/interface/response/index";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useKpiDataStore();
@@ -21,7 +29,7 @@ const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
   mixin;
 
 /** Table*/
-const rows = ref<any[]>([]);
+const rows = ref<MainListKpi[]>([]);
 const visibleColumns = ref<string[]>([
   "createdAt",
   "year",
@@ -134,6 +142,17 @@ const total = ref<number>(0);
 const totalList = ref<number>(1);
 const isRoundClose = ref<boolean>(false);
 
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+/**
+ * ดึงข้อมูลรอบการประเมิน
+ * @param type 
+ */
 async function fetchRoundOption(type: string) {
   const y = type === "main" ? year.value : yearDialog.value;
   showLoader();
@@ -143,7 +162,7 @@ async function fetchRoundOption(type: string) {
     )
     .then(async (res) => {
       const data = res.data.result.data;
-      const list = data.map((e: any) => ({
+      const list = data.map((e: RoundKpiResponse) => ({
         id: e.id,
         name:
           e.durationKPI === "OCT"
@@ -194,28 +213,32 @@ async function fetchList() {
     });
 }
 
+/** เลือกรอบการประเมิน */
 function changRound() {
   formQuery.page = 1;
   fetchList();
 }
 
+/** ไปหน้ารายละเอียด */
 function redirectViewDetail(id: string) {
   store.tabMain = "1";
-
   router.push(`/KPI/${id}`);
 }
 
+/** สร้างแบบประเมิน */
 async function onClickAddList() {
   await getProfile();
   modalDialog.value = true;
 }
 
+/** ปิด Dialog  */
 function onCloseDialog() {
   modalDialog.value = false;
   formRound.kpiPeriodId = { id: "", name: "", isClosed: false };
   yearDialog.value = null;
 }
 
+/** บันทึกข้อมูลที่สร้าง */
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
@@ -250,6 +273,7 @@ function onSubmit() {
   });
 }
 
+/** ดึงข้อมูล */
 function getProfile() {
   http
     .get(config.API.profilePosition())
@@ -268,57 +292,43 @@ function getProfile() {
     })
     .catch((e) => {
       messageError($q, e);
-    });
-  // .finally(() => {
-  //   hideLoader();
-  // });
+    })
+    .finally(() => {});
 }
 
+/** เช็ครอบการประเมิน ปิด */
 function checkClosed() {
   isRoundClose.value = formRound.kpiPeriodId.isClosed;
 }
 
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 /**
  * function updatePagination
  * @param newPagination ข้อมูล Pagination ใหม่
  */
-function updatePagination(newPagination: any) {
+function updatePagination(newPagination: PaginationType) {
   formQuery.page = 1;
   formQuery.pageSize = newPagination.rowsPerPage;
 }
 
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchList();
-  }
-);
-
+/** ดึงข้อมูล option */
 function getOrgOp() {
   http
     .get(config.API.Kpiorg)
     .then((res) => {
       const data = res.data.result;
-      evaluatorIdMainOp.value = data.caregiver.map((i: any) => ({
+      evaluatorIdMainOp.value = data.caregiver.map((i: EvaOptionType) => ({
         id: i.id,
         name: `${i.prefix ? i.prefix : ""}${i.firstName ? i.firstName : ""} ${
           i.lastName ? i.lastName : ""
         }`,
       }));
-      commanderIdMainOp.value = data.commander.map((i: any) => ({
+      commanderIdMainOp.value = data.commander.map((i: EvaOptionType) => ({
         id: i.id,
         name: `${i.prefix ? i.prefix : ""}${i.firstName ? i.firstName : ""} ${
           i.lastName ? i.lastName : ""
         }`,
       }));
-      commanderHighMainOp.value = data.chairman.map((i: any) => ({
+      commanderHighMainOp.value = data.chairman.map((i: EvaOptionType) => ({
         id: i.id,
         name: `${i.prefix ? i.prefix : ""}${i.firstName ? i.firstName : ""} ${
           i.lastName ? i.lastName : ""
@@ -330,26 +340,32 @@ function getOrgOp() {
     });
 }
 
-function filterOption(val: any, update: Function, refData: string) {
+/**
+ * ฟังชั่น ฟิลเตอร์ จาก ค่า input
+ * @param val ค่าที่รับมาจาก input
+ * @param update
+ * @param refData
+ */
+function filterOption(val: string, update: Function, refData: string) {
   switch (refData) {
     case "evaluatorIdOp":
       update(() => {
         evaluatorIdOp.value = evaluatorIdMainOp.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "commanderIdOp":
       update(() => {
         commanderIdOp.value = commanderIdMainOp.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "commanderHighOp":
       update(() => {
         commanderHighOp.value = commanderHighMainOp.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1
         );
       });
       break;
@@ -358,6 +374,13 @@ function filterOption(val: any, update: Function, refData: string) {
   }
 }
 
+watch(
+  () => formQuery.pageSize,
+  () => {
+    fetchList();
+  }
+);
+
 onMounted(async () => {
   await Promise.all([fetchRoundOption("main"), getOrgOp()]);
 });
@@ -508,10 +531,7 @@ onMounted(async () => {
                 <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
                   <q-card bordered flat>
                     <q-list @click="redirectViewDetail(props.row.id)">
-                      <q-item
-                        v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
-                        :key="col.name"
-                      >
+                      <q-item v-for="col in props.cols" :key="col.name">
                         <q-item-section>
                           <q-item-label caption>{{ col.label }}</q-item-label>
 
@@ -607,7 +627,7 @@ onMounted(async () => {
                 :options="roundDialgOp"
                 hide-bottom-space
                 lazy-rules
-                :rules="[(val:any) => !!val.id || `${'กรุณาเลือกรอบการประเมิน'}`]"
+                :rules="[(val:DataOptions) => !!val.id || `${'กรุณาเลือกรอบการประเมิน'}`]"
                 @update:model-value="checkClosed"
               />
             </div>
@@ -636,7 +656,7 @@ onMounted(async () => {
                     !!val || `${'กรุณาเลือกผู้ประเมิน'}`,
                 ]"
                 use-input
-                @filter="(inputValue:any,
+                @filter="(inputValue:string,
                     doneFn:Function) => filterOption(inputValue, doneFn,'evaluatorIdOp'
                     ) "
               >
@@ -667,7 +687,7 @@ onMounted(async () => {
                 emit-value
                 map-options
                 use-input
-                @filter="(inputValue:any,
+                @filter="(inputValue:string,
                     doneFn:Function) => filterOption(inputValue, doneFn,'commanderIdOp'
                     ) "
               >
@@ -705,7 +725,7 @@ onMounted(async () => {
                 emit-value
                 map-options
                 use-input
-                @filter="(inputValue:any,
+                @filter="(inputValue:string,
                     doneFn:Function) => filterOption(inputValue, doneFn,'commanderHighOp'
                     ) "
               >