updated competency cal

src/modules/08_KPI/components/Tab/01_Assessment.vue

@@ -30,7 +30,6 @@ const totalResults1 = ref<number>(0);
 const totalResults2 = ref<number>(0);
 const totalResults3 = ref<number>(0);
 // const resultWork = ref<number>(0);
-const resultEvaluation = ref<number>(0);
 
 function fetchListPlanned() {
   showLoader();
@@ -187,11 +186,6 @@ onMounted(() => {
       </div>
 
       <Competency />
-
-      <div class="row text-body2 text-weight-bold justify-center">
-        <span>สรุปผลการประเมินสมรรถนะ (คะแนนเต็ม 20 คะแนน)</span>
-        <div class="text-primary q-pl-md">{{ resultEvaluation }}</div>
-      </div>
     </div>
   </q-scroll-area>
 

src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue

@@ -11,8 +11,6 @@ import config from "@/app.config";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 
-import type { FormCapacityList } from "@/modules/08_KPI/interface/request/index";
-
 const route = useRoute();
 const idParam = ref<string>(route.params.id as string);
 
@@ -39,24 +37,15 @@ const idProps = defineModel<string | null>("id", { required: true });
 const competencyType = defineModel<string>("competencyType", {
   required: true,
 });
-const splitterModel = ref<number>(30);
 const search = ref<string>("");
 
-const define = ref<string>("");
-const formula = ref<string>("");
 const type = ref<string>("");
 
 const listCheck = ref<string>();
 const listTarget = ref<any>([]);
 const listTargetMain = ref<any>([]);
 
-const expectedLevelOp = ref<DataOptions[]>([
+const expectedLevelOp = ref<Object[]>(["1", "2", "3", "4", "5"]);
-  { id: "1", name: "1" },
-  { id: "2", name: "2" },
-  { id: "3", name: "3" },
-  { id: "4", name: "4" },
-  { id: "5", name: "5" },
-]);
 const formDetail = reactive<any>({
   id: "",
   type: "สมรรถนะหลัก",
@@ -153,7 +142,7 @@ function onSubmit() {
         .then((res) => {
           success($q, "บันทึกข้อมูลสำเร็จ");
           closeDialog();
-          props.getDataList?.();
+          props.getDataList?.(competencyType.value);
         })
         .catch((e) => {
           messageError($q, e);
@@ -166,21 +155,23 @@ function onSubmit() {
 }
 
 function getData() {
-  showLoader()
+  showLoader();
   http
     .get(config.API.KpiCapacity + `?type=${type.value}`)
     .then((res) => {
       const data = res.data.result.data;
       listTarget.value = data;
       listTargetMain.value = data;
-      formScore.score1 = data.capacityDetails[0].description;
+      if (data.capacityDetails) {
-      formScore.score2 = data.capacityDetails[1].description;
+        formScore.score1 = data.capacityDetails[0].description;
-      formScore.score3 = data.capacityDetails[2].description;
+        formScore.score2 = data.capacityDetails[1].description;
-      formScore.score4 = data.capacityDetails[3].description;
+        formScore.score3 = data.capacityDetails[2].description;
-      formScore.score5 = data.capacityDetails[4].description;
+        formScore.score4 = data.capacityDetails[3].description;
+        formScore.score5 = data.capacityDetails[4].description;
+      }
     })
     .finally(() => {
-      hideLoader()
+      hideLoader();
     });
 }
 
@@ -216,16 +207,17 @@ function getDataById() {
     .catch((e) => {})
     .finally(() => {});
 }
+
 watch(
   () => modal.value,
   () => {
-    if (modal.value == true) {
+    if (modal.value) {
       type.value = competencyType.value;
       getData();
       if (idProps.value) {
         setTimeout(() => {
           getDataById();
-        }, 1000);
+        }, 500);
       } else {
         if (type.value == "HEAD") {
           expectedLevel.value = store.defaultCompetencyCoreLevel;
@@ -239,6 +231,7 @@ watch(
   }
 );
 </script>
+
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 85%">
@@ -388,9 +381,6 @@ watch(
                           :options="expectedLevelOp"
                           dense
                           emit-value
-                          map-options
-                          option-label="id"
-                          option-value="name"
                           outlined
                           lazy-rules
                           :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับที่คาดหวัง'}`,]"

src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue

@@ -11,6 +11,7 @@ import config from "@/app.config";
 
 const props = defineProps({
   getData: Function,
+  default: () => console.log("not function"),
 });
 const {
   dialogConfirm,
@@ -93,7 +94,7 @@ const columns = ref<QTableProps["columns"]>([
 
 function closeDialog() {
   modal.value = false;
-  props.getData?.();
+  props.getData?.(type.value);
 }
 
 function onSubmit() {
@@ -122,13 +123,14 @@ function onSubmit() {
   }
 }
 </script>
+
 <template>
-  <q-dialog v-model="modal" persistent>
+  <q-dialog v-model="modal" persistent style="width: 60vw">
     <q-card style="width: 1200px; max-width: 80vw">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader :tittle="'ประเมิน'" :close="closeDialog" />
         <q-separator />
-        <q-card-section class="q-pt-none">
+        <q-card-section class="q-pt-none" style="min-height: 70vh">
           <div class="col-12 q-pa-sm">
             <q-table
               ref="table"
@@ -205,8 +207,8 @@ function onSubmit() {
         </q-card-section>
         <q-separator />
 
-        <q-card-actions align="right" class="bg-white text-teal">
+        <q-card-actions align="right" class="q-pa-md">
-          <q-btn label="บันทึก" color="secondary" type="submit"
+          <q-btn unelevated label="บันทึก" color="secondary" type="submit"
             ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
           >
         </q-card-actions>

src/modules/08_KPI/components/Tab/Topic/!02_CompetencyCard.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<!-- <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import Dialog from "@/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue";
 import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue";
@@ -32,6 +32,7 @@ const {
 
 const type = defineModel<string>("type", { required: true });
 const name = defineModel<any>("name", { required: true });
+const lists = defineModel<any>("lists", { required: true });
 
 const filterKeyword = ref<string>("");
 const modal = ref<boolean>(false);
@@ -115,6 +116,8 @@ function getData() {
     .then((res) => {
       const data = res.data.result.data;
       rows.value = data;
+      lists.value.push(res.data.result.data);
+      console.log("lists card===>", lists.value);
     })
     .catch((e) => {
       messageError($q, e);
@@ -339,4 +342,4 @@ onMounted(() => {
     top: 0;
   }
 }
-</style>
+</style> -->

src/modules/08_KPI/components/Tab/Topic/02_Competency.vue

@@ -1,18 +1,383 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref, computed } from "vue";
-import Card from "@/modules/08_KPI/components/Tab/Topic/02_CompetencyCard.vue";
+import Dialog from "@/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue";
-import { useKpiDataStore } from "@/modules/08_KPI/store";
+import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue";
 
+import { useQuasar, type QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+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";
+
+const modalEvaluate = ref<boolean>(false);
 const store = useKpiDataStore();
+
+const route = useRoute();
+const id = ref<string>(route.params.id as string);
+const idCapacity = ref<string | null>(null);
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogRemove,
+  success,
+} = mixin;
+
+const modal = ref<boolean>(false);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "รายการสมรรถนะ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับที่คาดหวัง",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point",
+    align: "left",
+    label: "ระดับคะแนนตามเกณฑ์การประเมิน",
+    sortable: true,
+    field: "point",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "weight",
+    align: "left",
+    label: "น้ำหนัก (ร้อยละ)",
+    sortable: true,
+    field: "weight",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "summary",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "summary",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const typeCompetency = ref<string>("");
+function onAdd(type: string) {
+  typeCompetency.value = type;
+  modal.value = true;
+}
+
+const rows = ref<any>([]);
+const lists = ref<any>([]);
+const resultEvaluation = ref<string | 0>(0);
+function getData(type: string) {
+  showLoader();
+  http
+    .get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type}`)
+    .then(async (res) => {
+      const data = res.data.result.data;
+      rows.value[type] = data;
+      lists.value = await lists.value.filter((x: any) => x.type != type);
+      lists.value.push({ type: type, data });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      // cal summary
+      let result = 0;
+      let weight = 0;
+      let total = 0;
+      for (let index = 0; index < store.competencyType.length; index++) {
+        const element = await store.competencyType[index];
+
+        const dataArr = await lists.value.find(
+          (x: any) => x.type == element.id
+        );
+
+        if (dataArr) {
+          result += dataArr.data.reduce(
+            (sum: number, e: any) => sum + (e.point / 5) * e.weight,
+            0
+          );
+          weight += dataArr.data.reduce(
+            (sum: number, e: any) => sum + e.weight,
+            0
+          );
+          total++;
+        }
+      }
+
+      if (total > 0) {
+        let weightAvg = weight / total;
+        let resultAvg = result / total;
+        let sum = weightAvg != 0 ? (resultAvg / weightAvg) * 20 : 0;
+        resultEvaluation.value = sum.toFixed(2);
+      }
+      // end cal summary
+
+      hideLoader();
+    });
+}
+
+function onEdit(data: FormCapacityList, type: string) {
+  idCapacity.value = data.id;
+  typeCompetency.value = type;
+  modal.value = true;
+}
+
+function onDelete(id: string, type: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.kpiUserCapacity + `/${id}`)
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        getData(type);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function onEvaluate(type: string) {
+  typeCompetency.value = type;
+  modalEvaluate.value = true;
+}
+
+onMounted(() => {
+  for (let index = 0; index < store.competencyType.length; index++) {
+    const element = store.competencyType[index];
+    getData(element.id);
+  }
+});
 </script>
 
 <template>
-  <Card
+  <div v-for="(item, index) in store.competencyType" :key="index">
-    v-for="(item, index) in store.competencyType"
+    <q-card bordered style="border-radius: 5px" class="no-shadow">
-    :key="index"
+      <q-card-section class="bg-grey-2 q-py-sm">
-    v-model:type="item.id"
+        <div class="row items-center">
-    v-model:name="item.name"
+          <div class="col">
+            <span class="text-weight-medium">{{ item.name }}</span>
+            <q-btn
+              class="q-ml-xs"
+              flat
+              round
+              icon="mdi-plus"
+              color="primary"
+              size="12px"
+              dense
+              @click="onAdd(item.id)"
+            >
+              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+            </q-btn>
+          </div>
+
+          <q-space />
+          <q-btn
+            flat
+            round
+            icon="mdi-clipboard-check-outline"
+            color="blue-5"
+            size="12px"
+            dense
+            @click="onEvaluate(item.id)"
+          >
+            <q-tooltip>ประเมิน</q-tooltip>
+          </q-btn>
+        </div>
+      </q-card-section>
+      <q-card-section class="q-pa-sm">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows[item.id]"
+          row-key="id"
+          flat
+          bordered
+          :paging="true"
+          dense
+          hide-pagination
+          class="custom-table2"
+          no-data-label="ไม่มีข้อมูล"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div v-if="col.name == 'createDate'">
+                  {{ col.value ? date2Thai(col.value) : "-" }}
+                </div>
+                <div v-else-if="col.name == 'point'">
+                  <div>
+                    <q-rating
+                      v-model="props.row.point"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      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>
+                    </q-rating>
+                  </div>
+                  <!-- <div v-else>รอ ทำ select</div> -->
+                </div>
+                <div v-else-if="col.name == 'summary'">
+                  {{
+                    props.row.point !== 0
+                      ? (props.row.point / 5) * props.row.weight
+                      : "-"
+                  }}
+                </div>
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  flat
+                  round
+                  icon="edit"
+                  color="edit"
+                  @click.stop.pervent="onEdit(props.row, item.id)"
+                >
+                  <q-tooltip>แก้ไข </q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  round
+                  icon="delete"
+                  color="red"
+                  @click.stop.pervent="onDelete(props.row.id, item.id)"
+                >
+                  <q-tooltip>ลบข้อมูล </q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </q-table>
+      </q-card-section>
+    </q-card>
+  </div>
+
+  <Dialog
+    v-model:modal="modal"
+    v-model:competency-type="typeCompetency"
+    v-model:id="idCapacity"
+    :get-data-list="getData"
   />
+
+  <DialogEvaluate
+    v-model:modal="modalEvaluate"
+    v-model:data="rows[typeCompetency]"
+    v-model:type="typeCompetency"
+    :get-data="getData"
+  />
+
+  <div class="row text-body2 text-weight-bold justify-center">
+    <span>สรุปผลการประเมินสมรรถนะ (คะแนนเต็ม 20 คะแนน)</span>
+    <div class="text-primary q-pl-md">{{ resultEvaluation }}</div>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>