From 31c2f9974190038195499a004cf9796cb932cd4a Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Thu, 25 Apr 2024 16:53:07 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=A4=E0=B8=95=E0=B8=B4=E0=B8=81=E0=B8=A3=E0=B8=A3=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=8E=E0=B8=B4=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=20(=E0=B8=AA=E0=B8=A1=E0=B8=A3=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=96=E0=B8=99=E0=B8=B0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../08_KPI/components/Tab/01_Assessment.vue   | 25 +++++++++-
 .../Tab/Dialog/04_FormCompetency.vue          |  4 ++
 .../Tab/Dialog/DialogListCriteria.vue         | 48 +++++++------------
 .../Tab/DialogEvaluate/02_Competenct.vue      | 40 ++++++++--------
 .../components/Tab/Topic/02_Competency.vue    | 39 ++++++++-------
 src/modules/08_KPI/interface/request/index.ts |  8 +++-
 6 files changed, 94 insertions(+), 70 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index a0d67d4..d21ae3a 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -14,6 +14,11 @@ import Competency from "@/modules/08_KPI/components/Tab/Topic/02_Competency.vue"
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+
+import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
+
+const dataListCriteria = ref<ListCriteria[]>([]);
+
 const modalCriteria = ref<boolean>(false);
 const $q = useQuasar();
 const route = useRoute();
@@ -117,7 +122,23 @@ const resultWork = computed(() => {
   return parseFloat(((total * 80) ).toFixed(2));
 });
 
+function getCriteria() {
+  http
+    .get(config.API.KpiEvaluation)
+    .then((res) => {
+      const data = res.data.result.data;
+      dataListCriteria.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 onMounted(() => {
+  getCriteria()
   fetchListPlanned();
   fetchListRole();
   fetchAssigned();
@@ -187,11 +208,11 @@ onMounted(() => {
         </q-btn>
       </div>
 
-      <Competency />
+      <Competency v-model:dataListCriteria="dataListCriteria"/>
     </div>
   </q-scroll-area>
 
-  <DialogListCriteria v-model:modal="modalCriteria" />
+  <DialogListCriteria v-model:modal="modalCriteria" v-model:dataListCriteria="dataListCriteria"/>
 </template>
 
 <style scoped>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
index db01347..a3b8b0a 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
@@ -78,6 +78,10 @@ const fieldLabels = {
 const competencyTypeOp = ref<DataOptions[]>(store.competencyType);
 
 function clickList(index: string, data: any) {
+  showLoader()
+  setTimeout(()=>{
+    hideLoader()
+  },100)
   formScore.score1 = "";
   formScore.score2 = "";
   formScore.score3 = "";
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue
index 0b22d45..1904da9 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue
@@ -16,50 +16,36 @@ const $q = useQuasar();
 const dataList = ref<ListCriteria[]>([]);
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 const modal = defineModel<boolean>("modal", { required: true });
+const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", { required: true });
 
 function close() {
   modal.value = false;
 }
-
-watch(
-  () => modal.value,
-  (newValue, oldValue) => {
-    if (newValue == true) {
-      showLoader();
-      http
-        .get(config.API.KpiEvaluation)
-        .then((res) => {
-          const data = res.data.result.data;
-          dataList.value = data;
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    }
-  }
-);
 </script>
 
 <template>
   <q-dialog persistent v-model="modal">
-    <q-card style="min-width: 60%" >
+    <q-card style="min-width: 60%">
       <DialogHeader tittle="เกณฑ์การประเมินสมรรถนะ" :close="close" />
       <q-separator />
-      <q-card-section class="bg-grey-2">
+      <q-card-section class="">
         <q-card bordered>
-          <div class="column">
-            <div v-for="(item, index) in dataList" :key="item.id">
-              <div class="q-pa-sm">
-                <div class="row">
-                    <span v-html="item.description"></span>
-                </div>
-              </div>
-              <q-separator />
+          <div class="bg-grey-2 q-pa-sm">
+            <div class="row text-dark text-body2 text-weight-medium">
+              <div class="text-center col-8">เกณฑ์การประเมิน</div>
+              <div class="text-center col-4">ระดับคะแนน</div>
             </div>
           </div>
+          <q-separator />
+          <div v-for="(item, index) in dataListCriteria" :key="item.id">
+            <div :class="`row q-pa-sm ${index %2 !== 0 && 'bg-grey-2'}`">
+              <div class="col-8"><span v-html="item.description"></span></div>
+              <div class="col-4 text-center self-center text-body1 text-weight-bold">
+                <span>{{ item.level }}</span>
+              </div>
+            </div>
+            <q-separator />
+          </div>
         </q-card>
       </q-card-section>
     </q-card>
diff --git a/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue b/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
index f758d7a..86e645c 100644
--- a/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
+++ b/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -9,6 +9,16 @@ import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
+
+const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", {
+  required: true,
+});
+
+const sortedDataListCriteria = computed(() => {
+  return dataListCriteria.value.sort((a, b) => a.level - b.level);
+});
+
 const props = defineProps({
   getData: Function,
   default: () => console.log("not function"),
@@ -170,24 +180,16 @@ function onSubmit() {
                           :color-selected="store.ratingColors"
                           label="ระดับการประเมินพฤติกรรม"
                         >
-                          <template v-slot:tip-1>
-                            <q-tooltip>ต่ำกว่าระดับที่คาดหวังมาก (1)</q-tooltip>
-                          </template>
-                          <template v-slot:tip-2>
-                            <q-tooltip>ต่ำกว่าระดับที่คาดหวัง (2)</q-tooltip>
-                          </template>
-                          <template v-slot:tip-3>
-                            <q-tooltip>อยู่ในระดับที่คาดหวัง (3)</q-tooltip>
-                          </template>
-                          <template v-slot:tip-4>
-                            <q-tooltip
-                              >อยู่ในระดับสูงกว่าที่คาดหวัง (4)</q-tooltip
-                            >
-                          </template>
-                          <template v-slot:tip-5>
-                            <q-tooltip
-                              >เป็นแบบอย่างที่ดีให้กับผู้อื่น (5)</q-tooltip
-                            >
+                          <template
+                            v-for="(i, index) in sortedDataListCriteria"
+                            :key="i.level"
+                            v-slot:[`tip-${index+1}`]
+                          >
+                            <q-tooltip>
+                              <div class="text-body2">
+                                <span v-html="i.description"></span>
+                              </div>
+                            </q-tooltip>
                           </template>
                         </q-rating>
                       </div>
diff --git a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
index e486843..db0e00d 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
@@ -10,7 +10,16 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
 
-import type { FormCapacityList } from "@/modules/08_KPI/interface/request/index";
+import type {
+  FormCapacityList,
+  ListCriteria,
+} from "@/modules/08_KPI/interface/request/index";
+
+const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", { required: true, });
+
+const sortedDataListCriteria = computed(() => {
+  return dataListCriteria.value.sort((a, b) => a.level - b.level);
+});
 
 const modalEvaluate = ref<boolean>(false);
 const store = useKpiDataStore();
@@ -260,22 +269,16 @@ onMounted(() => {
                       label="ระดับการประเมินพฤติกรรม"
                       disable
                     >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าระดับที่คาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าระดับที่คาดหวัง (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>อยู่ในระดับที่คาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>อยู่ในระดับสูงกว่าที่คาดหวัง (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip
-                          >เป็นแบบอย่างที่ดีให้กับผู้อื่น (5)</q-tooltip
-                        >
+                      <template
+                        v-for="(i, index) in sortedDataListCriteria"
+                        :key="i.level"
+                        v-slot:[`tip-${index+1}`]
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span v-html="i.description"></span>
+                          </div>
+                        </q-tooltip>
                       </template>
                     </q-rating>
                   </div>
@@ -330,7 +333,9 @@ onMounted(() => {
     v-model:modal="modalEvaluate"
     v-model:data="rows[typeCompetency]"
     v-model:type="typeCompetency"
+    v-model:dataListCriteria="dataListCriteria"
     :get-data="getData"
+    
   />
 
   <div class="row text-body2 text-weight-bold justify-center">
diff --git a/src/modules/08_KPI/interface/request/index.ts b/src/modules/08_KPI/interface/request/index.ts
index f4f89bc..10de77f 100644
--- a/src/modules/08_KPI/interface/request/index.ts
+++ b/src/modules/08_KPI/interface/request/index.ts
@@ -36,4 +36,10 @@ interface FormCapacityList {
   summary: number;
 }
 
-export type { FormProfile, FormDataAssigned, FormCapacityList };
+interface ListCriteria {
+  id: string;
+  level: number;
+  description: string;
+}
+
+export type { FormProfile, FormDataAssigned, FormCapacityList,ListCriteria };