Refactoring code module 14_KPI

src/modules/14_KPI/components/Tab/Topic/03_Develop.vue

@@ -1,28 +1,25 @@
 <script setup lang="ts">
-import { onMounted, ref, computed, watch, reactive } from "vue";
+import { onMounted, ref, computed } from "vue";
+
+import { useQuasar, type QTableProps } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
+
+import type { DevelopListType } from "@/modules/14_KPI/interface/response/KPI";
+
 import DialogDevelop from "@/modules/14_KPI/components/Tab/Dialog/DialogDevelop.vue";
 import DialogEvalutionDevelop from "@/modules/14_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue";
 import DialogProgress from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
 import DialogProblem from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
 
-import { useQuasar, type QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useKpiDataStore } from "@/modules/14_KPI/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRoute } from "vue-router";
-
-const store = useKpiDataStore();
-const route = useRoute();
-const evaluationId = ref<string>(route.params.id.toString());
-const modalEvaluate = ref<boolean>(false);
-const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
-const rows = ref<any[]>([]);
-const modalDevelop = ref<boolean>(false);
-const idEditDevelop = ref<string>("");
-
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const store = useKpiDataStore();
+const route = useRoute();
 const {
   date2Thai,
   messageError,
@@ -32,11 +29,13 @@ const {
   success,
 } = mixin;
 
-const formData = reactive({
-  isDevelopment70: false,
-  isDevelopment20: false,
-  isDevelopment10: false,
-});
+const evaluationId = ref<string>(route.params.id.toString());
+const modalEvaluate = ref<boolean>(false);
+const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
+const rows = ref<DevelopListType[]>([]);
+const modalDevelop = ref<boolean>(false);
+const idEditDevelop = ref<string>("");
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -110,68 +109,10 @@ const visibleColumns = ref<string[]>(
     : ["no", "name", "develop", "target"]
 );
 
-function onAdd() {
-  modalDevelop.value = true;
-}
-
-function onEdit(id: string) {
-  modalDevelop.value = true;
-  idEditDevelop.value = id;
-}
-
-function getDevelop() {
-  http
-    .get(config.API.kpiAchievementDevelop + `?id=${evaluationId.value}`)
-    .then((res) => {
-      const data = res.data.result;
-      rows.value = data;
-
-      store.devScoreVal = rows.value.reduce(
-        (sum: number, e: any) => sum + e.summary,
-        0
-      );
-    });
-}
-
-function onEvaluate() {
-  modalEvaluate.value = true;
-}
-
-function onDelete(id: string) {
-  dialogRemove($q, () => {
-    showLoader();
-    http
-      .delete(config.API.kpiAchievementDevelop + `/${id}`)
-      .then(async () => {
-        await getDevelop();
-        await success($q, "ลบข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-}
-
 const modalProgress = ref<boolean>(false);
 const modalProblem = ref<boolean>(false);
 const type = ref<string>("");
 const idList = ref<string>("");
-function openPopupProgress(id: string) {
-  modalProgress.value = true;
-  type.value = "development";
-  idList.value = id;
-}
-
-function openPopupProblem(id: string) {
-  modalProblem.value = true;
-
-  type.value = "development";
-  idList.value = id;
-}
-
 const isEditStep1 = computed(() => {
   return (
     (store.dataEvaluation.evaluationStatus === "NEW" &&
@@ -194,6 +135,58 @@ const isEditStep3 = computed(() => {
   );
 });
 
+function openPopupProgress(id: string) {
+  modalProgress.value = true;
+  type.value = "development";
+  idList.value = id;
+}
+
+function onAdd() {
+  modalDevelop.value = true;
+}
+
+function onEdit(id: string) {
+  modalDevelop.value = true;
+  idEditDevelop.value = id;
+}
+
+function getDevelop() {
+  http
+    .get(config.API.kpiAchievementDevelop + `?id=${evaluationId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+      store.devScoreVal = rows.value.reduce(
+        (sum: number, e: any) => sum + e.summary,
+        0
+      );
+    });
+}
+
+/** เปิด popup ประเมิน */
+function onEvaluate() {
+  modalEvaluate.value = true;
+}
+
+/** ลบข้อมูล */
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.kpiAchievementDevelop + `/${id}`)
+      .then(async () => {
+        await getDevelop();
+        await success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
 onMounted(() => {
   getDevelop();
 });
@@ -337,18 +330,6 @@ onMounted(() => {
                 >
                   <q-tooltip>บันทึกเหตุการณ์/พฤติกรรม</q-tooltip>
                 </q-btn>
-                <!-- <q-btn
-                  flat
-                  round
-                  icon="warning"
-                  color="red-5"
-                  size="12px"
-                  dense
-                  main="problem"
-                  @click="openPopupProblem(props.row.id)"
-                >
-                  <q-tooltip>รายงานปัญหา</q-tooltip>
-                </q-btn> -->
               </div>
 
               <div v-if="isEditStep1 && !checkRoutePermisson">