From 6797177b01fa50afc7696feddc3a0fde03eb2a16 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 27 Aug 2024 15:28:06 +0700
Subject: [PATCH] =?UTF-8?q?KPI=20=3D=3D>=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=20load?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../14_KPI/components/Tab/01_Assessment.vue   |  26 +-
 src/modules/14_KPI/components/Tab/TabMain.vue |   5 -
 .../components/Tab/Topic/01_Indicator.vue     |   8 +-
 .../components/Tab/Topic/02_Competency.vue    |  10 +-
 .../components/Tab/Topic/03_Develop.vue       |   6 +-
 src/modules/14_KPI/views/detailView.vue       | 224 ++++++------------
 6 files changed, 91 insertions(+), 188 deletions(-)

diff --git a/src/modules/14_KPI/components/Tab/01_Assessment.vue b/src/modules/14_KPI/components/Tab/01_Assessment.vue
index b5a7b41a4..fcc0573ee 100644
--- a/src/modules/14_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/14_KPI/components/Tab/01_Assessment.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, watch, reactive } from "vue";
-import { useQuasar, type QTableProps } from "quasar";
+import { ref, onMounted, computed, watch } from "vue";
+import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 
 import DialogListCriteria from "@/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue";
@@ -21,8 +21,7 @@ const dataListCriteria = ref<ListCriteria[]>([]);
 const modalCriteria = ref<boolean>(false);
 const $q = useQuasar();
 const route = useRoute();
-const { hideLoader, messageError, success, showLoader, dialogRemove } =
-  useCounterMixin();
+const { messageError } = useCounterMixin();
 const store = useKpiDataStore();
 
 const evaluationId = ref<string>(route.params.id.toString());
@@ -206,18 +205,13 @@ watch(
   }
 );
 
-onMounted(() => {
-  showLoader(),
-    Promise.all([
-      getCriteria(),
-      fetchListPlanned(),
-      fetchListRole(),
-      fetchAssigned(),
-    ]).finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2500);
-    });
+onMounted(async () => {
+  await Promise.all([
+    getCriteria(),
+    fetchListPlanned(),
+    fetchListRole(),
+    fetchAssigned(),
+  ]);
 });
 </script>
 
diff --git a/src/modules/14_KPI/components/Tab/TabMain.vue b/src/modules/14_KPI/components/Tab/TabMain.vue
index 78e97ad3b..af596dd39 100644
--- a/src/modules/14_KPI/components/Tab/TabMain.vue
+++ b/src/modules/14_KPI/components/Tab/TabMain.vue
@@ -1,16 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
-import { useRoute } from "vue-router";
 
 import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
-import Evaluator from "@/modules/14_KPI/components/Tab/02_Evaluator.vue";
-import CommanderAbove from "@/modules/14_KPI/components/Tab/03_CommanderAbove.vue";
-import CommanderAboveOneStep from "@/modules/14_KPI/components/Tab/04_CommanderAboveOneStep.vue";
 import File from "@/modules/14_KPI/components/Tab/05_File.vue";
 
 const store = useKpiDataStore();
-const route = useRoute();
 
 const itemsTab = ref<any>([
   {
diff --git a/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
index 7410a026d..913af37fb 100644
--- a/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
@@ -160,8 +160,8 @@ function onDelete(id: string) {
           ? config.API.kpiAchievement("special") + `/${id}`
           : "";
       await http.delete(url);
-      success($q, "ลบข้อมูลสำเร็จ");
-      props.fetchList?.();
+      await props.fetchList?.();
+      await success($q, "ลบข้อมูลสำเร็จ");
     } catch (err) {
       messageError($q, err);
     } finally {
@@ -304,7 +304,7 @@ const isEditStep3 = computed(() => {
           <q-tr :props="props" class="cursor-pointer">
             <q-td>
               <q-btn
-              v-if="isEditStep1"
+                v-if="isEditStep1"
                 flat
                 round
                 icon="mdi-eye"
@@ -374,7 +374,7 @@ const isEditStep3 = computed(() => {
                   <q-tooltip>รายงานความก้าวหน้า</q-tooltip>
                 </q-btn>
                 <q-btn
-                v-if="!checkRoutePermisson"
+                  v-if="!checkRoutePermisson"
                   flat
                   round
                   icon="warning"
diff --git a/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
index 68474fe0d..73bb4f235 100644
--- a/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
@@ -220,9 +220,9 @@ function onDelete(id: string, type: string) {
     showLoader();
     http
       .delete(config.API.kpiUserCapacity + `/${id}`)
-      .then((res) => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        getData(type);
+      .then(async () => {
+        await getData(type);
+        await success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
@@ -363,7 +363,9 @@ onMounted(() => {
         <d-table
           ref="table"
           :columns="columns"
-          :rows="rows[item.id] && rows[item.id].length !== 0 ? rows[item.id] : []"
+          :rows="
+            rows[item.id] && rows[item.id].length !== 0 ? rows[item.id] : []
+          "
           row-key="id"
           flat
           bordered
diff --git a/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue b/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
index 42aea7964..5e7d0dd95 100644
--- a/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
@@ -142,9 +142,9 @@ function onDelete(id: string) {
     showLoader();
     http
       .delete(config.API.kpiAchievementDevelop + `/${id}`)
-      .then((res) => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        getDevelop();
+      .then(async () => {
+        await getDevelop();
+        await success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
diff --git a/src/modules/14_KPI/views/detailView.vue b/src/modules/14_KPI/views/detailView.vue
index bd6c39bd8..5cc4bf28c 100644
--- a/src/modules/14_KPI/views/detailView.vue
+++ b/src/modules/14_KPI/views/detailView.vue
@@ -1,23 +1,17 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, computed, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import Avatar from "@/assets/!avatar_user.jpg";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
 import Result from "@/modules/14_KPI/components/Tab/04_Result.vue";
 import File from "@/modules/14_KPI/components/Tab/05_File.vue";
 import DialogGovernment from "@/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue";
-import DialogStatus from "@/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue";
 
-import type {
-  DataOption,
-  ItemsTab,
-} from "@/modules/14_KPI/interface/index/Main";
-import type { ResUserEvaluation } from "@/modules/14_KPI/interface/response/KPI";
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 import { useCounterMixin } from "@/stores/mixin";
@@ -47,19 +41,13 @@ const itemsTab = ref<any[]>([
 
 const splitterModel = ref<number>(12);
 const modalGovernment = ref<boolean>(false);
-const modalStatus = ref<boolean>(false);
-// const modalScore = ref<boolean>(false);
+
 const modalEdit = ref<boolean>(false);
 const route = useRoute();
 const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
 const id = ref<string>(route.params.id as string);
 const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
 
-// const plannedPoint = ref<string>("");
-// const rolePoint = ref<string>("");
-// const specialPoint = ref<string>("");
-// const capacityPoint = ref<string>("");
-
 const store = useKpiDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -83,6 +71,7 @@ const commanderHighMainOp = ref<DataOption[]>([]);
 const evaluatorId = ref<any>(null);
 const commanderId = ref<any>(null);
 const commanderHighId = ref<any>(null);
+const avartar = ref<string>("");
 
 const formProfile = reactive<any>({
   fullName: "",
@@ -98,45 +87,49 @@ const formProfile = reactive<any>({
 const router = useRouter();
 
 async function fetchEvaluation() {
+  showLoader();
   await http
     .get(config.API.kpiEvaluationUser + `/${id.value}`)
     .then(async (res) => {
       const data = res.data.result;
       store.dataEvaluation = await data;
-      formProfile.status = store.convertStatus(data.evaluationStatus);
-      formProfile.result = store.convertResults(data.evaluationResults);
-      store.checkCompetency();
-      store.checkCompetencyDefaultCompetencyLevel();
+      formProfile.status = await store.convertStatus(data.evaluationStatus);
+      formProfile.result = await store.convertResults(data.evaluationResults);
 
-      fetchProfile(data.profileId);
+      await Promise.all([
+        store.checkCompetency(),
+        store.checkCompetencyDefaultCompetencyLevel(),
+        fetchProfile(data.profileId),
+        getProfile(),
+      ]);
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 1200);
     });
 }
 
 async function fetchProfile(id: string) {
-  await http
-    .get(config.API.orgCheckAvatar(id))
-    .then(async (res) => {
-      if (res.data.result.avatarName) {
-        http
-          .get(
-            config.API.fileByFile(
-              "ทะเบียนประวัติ",
-              "โปรไฟล์",
-              id,
-              res.data.result.avatarName
-            )
+  await http.get(config.API.orgCheckAvatar(id)).then(async (res) => {
+    if (res.data.result.avatarName) {
+      http
+        .get(
+          config.API.fileByFile(
+            "ทะเบียนประวัติ",
+            "โปรไฟล์",
+            id,
+            res.data.result.avatarName
           )
-          .then(async (res) => {
-            store.dataEvaluation.avartar = res.data.downloadUrl;
-          });
-      }
-    })
-    .catch(() => {
-      // profilePicture.value = avatar;
-    });
+        )
+        .then(async (res) => {
+          avartar.value = res.data.downloadUrl;
+        });
+    }
+  });
 }
 
 function close() {
@@ -155,10 +148,10 @@ function onSubmit() {
             ? commanderHighId.value.id
             : null,
         })
-        .then((res) => {
-          fetchEvaluation();
+        .then(async () => {
+          await fetchEvaluation();
+          await success($q, "บันทึกสำเร็จ");
           close();
-          success($q, "บันทึกสำเร็จ");
         })
         .catch((e) => {
           messageError($q, e);
@@ -169,6 +162,7 @@ function onSubmit() {
     }
   });
 }
+
 async function getOrgOp() {
   http
     .get(config.API.Kpiorg + `/${store.dataProfile.profileId}`)
@@ -248,15 +242,15 @@ async function getProfile() {
       store.dataProfile = await data;
       await setTimeout(() => {
         store.checkStep();
-      }, 800);
+      }, 1000);
     })
     .catch((e) => {
       messageError($q, e);
     });
 }
+
 async function getAll() {
   await fetchEvaluation();
-  await getProfile();
 }
 
 function sendToEvaluatore() {
@@ -269,9 +263,9 @@ function sendToEvaluatore() {
           .put(config.API.kpiEvaluationUser + `/status/${id.value}`, {
             status: "NEW_EVALUATOR",
           })
-          .then((res) => {
-            success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
-            fetchEvaluation();
+          .then(async () => {
+            await fetchEvaluation();
+            await success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
           })
           .catch((e) => {
             messageError($q, e);
@@ -296,9 +290,9 @@ function sendToEvaluateEvaluatore() {
           .put(config.API.kpiSendToStatus(id.value), {
             status: "EVALUATING_EVALUATOR",
           })
-          .then((res) => {
-            success($q, "ส่งให้ผู้ประเมินรายงานผลสำเร็จของงานสำเร็จ");
-            fetchEvaluation();
+          .then(async () => {
+            await fetchEvaluation();
+            await success($q, "ส่งให้ผู้ประเมินรายงานผลสำเร็จของงานสำเร็จ");
           })
           .catch((e) => {
             messageError($q, e);
@@ -323,9 +317,9 @@ function requireEdit() {
           .put(config.API.kpiReqEditUser(id.value), {
             status: "EVALUATOR",
           })
-          .then((res) => {
-            success($q, "ขอแก้ไขสำเร็จ");
-            fetchEvaluation();
+          .then(async () => {
+            await fetchEvaluation();
+            await success($q, "ขอแก้ไขสำเร็จ");
           })
           .catch((e) => {
             messageError($q, e);
@@ -345,7 +339,6 @@ function openGovernment() {
 }
 function openStatus() {
   router.push(`/probation-detail/${store.dataEvaluation.profileId}`);
-  // modalStatus.value = true;
 }
 
 function sendToEvauator() {
@@ -356,7 +349,7 @@ function sendToEvauator() {
         status: "EVALUATING",
         id: [store.dataEvaluation.id],
       })
-      .then(async (res) => {
+      .then(async () => {
         await getAll();
         store.tabMain = "3";
       })
@@ -416,6 +409,7 @@ const evaluator = ref<any>({
   isPosmasterAct: false,
   posmasterAct: [],
 });
+
 async function fetchProfileEvaluator(id: string) {
   showLoader();
   http
@@ -465,10 +459,7 @@ onMounted(async () => {
   <q-card bordered flat class="relative-position">
     <div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
       <q-avatar size="80px">
-        <q-img
-          :src="store.dataEvaluation.avartar"
-          v-if="store.dataEvaluation.avartar !== undefined"
-        />
+        <q-img :src="avartar" v-if="avartar !== undefined && avartar !== ''" />
         <q-img src="@/assets/avatar_user.jpg" v-else />
       </q-avatar>
     </div>
@@ -479,10 +470,7 @@ onMounted(async () => {
       style="left: 2%; top: 50%; transform: translateY(-50%)"
     >
       <q-avatar size="80px">
-        <q-img
-          :src="store.dataEvaluation.avartar"
-          v-if="store.dataEvaluation.avartar !== undefined"
-        />
+        <q-img :src="avartar" v-if="avartar !== undefined && avartar !== ''" />
         <q-img src="@/assets/avatar_user.jpg" v-else />
       </q-avatar>
     </div>
@@ -860,6 +848,7 @@ onMounted(async () => {
         </q-expansion-item> </q-list
     ></q-card-section>
   </q-card>
+
   <q-dialog v-model="modalEdit" persistent>
     <q-card bordered style="width: 50vh">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
@@ -878,7 +867,8 @@ onMounted(async () => {
             <div class="row">
               <div class="col-10">
                 <q-select
-                  :readonly="checkRoutePermisson||
+                  :readonly="
+                    checkRoutePermisson ||
                     !(
                       store.dataEvaluation.evaluationStatus === 'NEW' &&
                       store.rolePerson === 'USER'
@@ -919,7 +909,8 @@ onMounted(async () => {
             <div class="row">
               <div class="col-10">
                 <q-select
-                  :readonly="checkRoutePermisson||
+                  :readonly="
+                    checkRoutePermisson ||
                     !(
                       store.dataEvaluation.evaluationStatus === 'NEW' &&
                       store.rolePerson === 'USER'
@@ -971,7 +962,8 @@ onMounted(async () => {
             <div class="row">
               <div class="col-10">
                 <q-select
-                  :readonly="checkRoutePermisson||
+                  :readonly="
+                    checkRoutePermisson ||
                     !(
                       store.dataEvaluation.evaluationStatus === 'NEW' &&
                       store.rolePerson === 'USER'
@@ -1026,9 +1018,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card-section>
-        <q-separator v-if="!checkRoutePermisson"/>
+        <q-separator v-if="!checkRoutePermisson" />
         <q-card-actions
-          v-if="!checkRoutePermisson&&
+          v-if="
+            !checkRoutePermisson &&
             store.dataEvaluation.evaluationStatus === 'NEW' &&
             store.rolePerson === 'USER'
           "
@@ -1095,13 +1088,13 @@ onMounted(async () => {
                 <div class="col-12">รักษาการในตำแหน่ง/การรักษาราชการแทน</div>
               </div>
               <div class="row">
-              <div class="col-12" v-if="evaluator.isPosmasterAct">
-                {{
-                  `${evaluator.posmasterAct.prefix}${evaluator.posmasterAct.firstName} ${evaluator.posmasterAct.lastName} (${evaluator.posmasterAct.posNo})`
-                }}
+                <div class="col-12" v-if="evaluator.isPosmasterAct">
+                  {{
+                    `${evaluator.posmasterAct.prefix}${evaluator.posmasterAct.firstName} ${evaluator.posmasterAct.lastName} (${evaluator.posmasterAct.posNo})`
+                  }}
+                </div>
+                <div class="col-12" v-else>-</div>
               </div>
-              <div class="col-12" v-else>-</div>
-            </div>
             </div>
           </div>
         </q-card-section>
@@ -1109,88 +1102,7 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <!-- <q-dialog v-model="modalScore" persistent>
-    <q-card bordered style="width: 50vh">
-      <q-form greedy @submit.prevent @validation-success="onSubmitScore">
-        <DialogHeader tittle="แก้ไขคะแนนเต็ม" :close="clearScore" />
-        <q-separator />
-        <q-card-section>
-          <div class="column q-gutter-sm">
-            <q-input
-              v-model="plannedPoint"
-              label="งานตามแผนปฏิบัติราชการประจำปี"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[
-                (val) =>
-                  !!val ||
-                  val == '0' ||
-                  'กรุณากรอกคะเเนนงานตามแผนปฏิบัติราชการประจำปี หรือ 0',
-              ]"
-              hide-bottom-space
-              lazy-rules
-            />
-            <q-input
-              v-model="rolePoint"
-              label="งานตามหน้าที่ความรับผิดชอบหลัก"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[(val:string) => !!val || val == '0' || `${'กรุณากรอกคะเเนนงานตามหน้าที่ความรับผิดชอบหลัก หรือ 0'}`,]"
-              hide-bottom-space
-              lazy-rules
-            />
-            <q-input
-              v-model="specialPoint"
-              label="งานที่ได้รับมอบหมายพิเศษ"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนงานที่ได้รับมอบหมายพิเศษ หรือ 0'}`,]"
-              hide-bottom-space
-              lazy-rules
-            />
-            <q-input
-              v-model="capacityPoint"
-              label="สมรรถนะ"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนสมรรถนะ หรือ 0'}`,]"
-              hide-bottom-space
-              lazy-rules
-            />
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions class="bg-white row justify-between">
-          <div class="col-8 text-red q-px-sm">
-            <span v-if="scoreTotal == true"
-              >คะแนนเต็มรวมกันต้องเท่ากับ 100 คะแนน</span
-            >
-          </div>
-          <q-btn
-            label="บันทึก"
-            color="secondary"
-            type="submit"
-            :disable="totalScore !== 100"
-            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-          >
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog> -->
   <DialogGovernment v-model:modal="modalGovernment" />
-
-  <!-- <DialogStatus
-    v-model:modal="modalStatus"
-    v-model:is-probation="store.dataProfile.isProbation"
-  /> -->
 </template>
 <style>
 .bg-toolbar {