updated competency

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

@@ -2,8 +2,8 @@
 import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
 
-import Work from "@/modules/08_KPI/components/Tab/Topic/01_Template.vue";
+import Work from "@/modules/08_KPI/components/Tab/Topic/01_Indicator.vue";
-import Capacity from "@/modules/08_KPI/components/Tab/Topic/02_Template.vue";
+import Competency from "@/modules/08_KPI/components/Tab/Topic/02_Competency.vue";
 
 const rows_01 = ref<any[]>();
 const rows_02 = ref<any[]>();
@@ -35,6 +35,7 @@ onMounted(() => {
   getList();
 });
 </script>
+
 <template>
   <q-scroll-area
     style="height: 56vh"
@@ -82,12 +83,7 @@ onMounted(() => {
         <span class="q-ml-sm"> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
       </div>
 
-      <Capacity v-model:data="rows_04" :title="`1. สมรรถนะหลัก`" :page="1" />
+      <Competency />
-      <Capacity
-        v-model:data="rows_05"
-        :title="`2. สมรรถนะประจำกลุ่ม`"
-        :page="2"
-      />
 
       <div class="row text-body2 text-weight-bold justify-center">
         <span>ผลการประเมินสมรรถนะ (20 คะแนน)</span>
@@ -96,6 +92,7 @@ onMounted(() => {
     </div>
   </q-scroll-area>
 </template>
+
 <style scoped>
 .txt-under {
   text-decoration: underline;

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

@@ -2,17 +2,19 @@
 import { ref, reactive, onMounted, watch } from "vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+const store = useKpiDataStore();
+
 const { showLoader, hideLoader } = useCounterMixin();
 const modal = defineModel<boolean>("modal", { required: true });
 const competencyType = defineModel<string>("competencyType", {
   required: true,
 });
-const numpage = defineModel<number>("numpage", { required: true });
 const splitterModel = ref<number>(30);
 const search = ref<string>("");
 
@@ -52,35 +54,14 @@ const fieldLabels = {
   score5: "5",
 };
 
-const competencyTypeOp = ref<DataOptions[]>([
+const competencyTypeOp = ref<DataOptions[]>(store.competencyType);
-  {
-    id: "HEAD",
-    name: "สมรรถนะหลัก",
-  },
-  {
-    id: "GROUP",
-    name: "สมรรถนะประจำกลุ่มงาน",
-  },
-  {
-    id: "EXECUTIVE",
-    name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
-  },
-  {
-    id: "DIRECTOR",
-    name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
-  },
-  {
-    id: "INSPECTOR",
-    name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
-  },
-]);
 
 function clickList(index: number, data: any) {
   listCheck.value = index;
 
-  formDetail.type = data.type
+  formDetail.type = data.type;
-  formDetail.name = data.name
+  formDetail.name = data.name;
-  formDetail.definition = data.description
+  formDetail.definition = data.description;
   formScore.score1 = data.capacityDetails[0].description;
   formScore.score2 = data.capacityDetails[1].description;
   formScore.score3 = data.capacityDetails[2].description;
@@ -140,23 +121,6 @@ function filterTxt(val: any) {
   console.log(listTarget.value.length);
 }
 
-function statusTothai(val: string) {
-  switch (val) {
-    case "HEAD":
-      return "สมรรถนะหลัก";
-    case "GROUP":
-      return "สมรรถนะประจำกลุ่มงาน";
-    case "EXECUTIVE":
-      return "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร";
-    case "DIRECTOR":
-      return "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต";
-    case "INSPECTOR":
-      return "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ";
-    default:
-      return "-";
-  }
-}
-
 watch(
   () => modal.value,
   () => {
@@ -283,9 +247,18 @@ watch(
                           }}
                         </div>
                         <div class="col-8">
-                          <span v-if="field == 'type'">{{ formDetail[field] ? statusTothai(formDetail[field]) : "-" }}</span>
+                          <span v-if="field == 'type'">{{
-                          <span v-else-if="field == 'definition'" v-html="formDetail[field]"></span>
+                            formDetail[field]
-                          <span v-else>{{ formDetail[field] ? formDetail[field] : "-" }}</span>
+                              ? store.convertCompetencyType(formDetail[field])
+                              : "-"
+                          }}</span>
+                          <span
+                            v-else-if="field == 'definition'"
+                            v-html="formDetail[field]"
+                          ></span>
+                          <span v-else>{{
+                            formDetail[field] ? formDetail[field] : "-"
+                          }}</span>
                         </div>
                       </div>
                     </div>

src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue

@@ -5,9 +5,9 @@ import Dialog03 from "@/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
-const title = defineModel<string>('title',{required:true})
+const title = defineModel<string>("title", { required: true });
-const rows = defineModel<any>('data',{required:true})
+const rows = defineModel<any>("data", { required: true });
-const numpage = defineModel<number>('page',{required:true})
+const numpage = defineModel<number>("page", { required: true });
 
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
@@ -94,10 +94,10 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 function onAdd() {
-  if(numpage.value !== 3){
+  if (numpage.value !== 3) {
     modal.value = true;
-  }else if(numpage.value == 3){
+  } else if (numpage.value == 3) {
-    modalAssigned.value = true
+    modalAssigned.value = true;
   }
 }
 </script>
@@ -118,7 +118,7 @@ function onAdd() {
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
     </q-card-section>
-    <q-separator/>
+    <q-separator />
     <q-card-section class="q-pa-sm">
       <q-table
         ref="table"
@@ -133,7 +133,7 @@ function onAdd() {
         hide-pagination
         class="custom-table2"
         :visible-columns="visibleColumns"
-        no-data-label="ยังไม่มีข้อมูลแสดงในตารางนี้"
+        no-data-label="ไม่มีข้อมูล"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -159,8 +159,8 @@ function onAdd() {
     </q-card-section>
   </q-card>
 
-  <Dialog v-model:modal="modal" :numpage="numpage"/>
+  <Dialog v-model:modal="modal" :numpage="numpage" />
-  <Dialog03 v-model:modal="modalAssigned" :numpage="numpage"/>
+  <Dialog03 v-model:modal="modalAssigned" :numpage="numpage" />
 </template>
 <style scoped>
 .custom-table2 {

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

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Card from "@/modules/08_KPI/components/Tab/Topic/02_CompetencyCard.vue";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+const store = useKpiDataStore();
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const modal = ref<boolean>(false);
+
+function onAdd() {
+  modal.value = true;
+}
+</script>
+
+<template>
+  <Card
+    v-for="(item, index) in store.competencyType"
+    :key="index"
+    v-model:type="item.id"
+    v-model:name="item.name"
+  />
+</template>
+
+<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>

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

@@ -5,17 +5,18 @@ import Dialog from "@/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
-const title = defineModel<string>('title',{required:true})
-const rows = defineModel<any>('data',{required:true})
-const numpage = defineModel<number>('page',{required:true})
-
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
+
+const type = defineModel<string>("type", { required: true });
+const name = defineModel<any>("name", { required: true });
+
 const filterKeyword = ref<string>("");
 const modal = ref<boolean>(false);
+
 const modalAssigned = ref<boolean>(false);
 
-const competencyType = ref<string>('HEAD')
+const competencyType = ref<string>("HEAD");
 const visibleColumns = ref<string[]>([
   "capacity",
   "level",
@@ -83,13 +84,17 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 function onAdd() {
-    modal.value = true;
+  modal.value = true;
 }
+
+const rows = ref<any>([]);
+function fetchList() {}
 </script>
+
 <template>
   <q-card bordered style="border-radius: 5px" class="no-shadow">
     <q-card-section class="bg-grey-3 q-py-sm">
-      <span class="text-weight-medium">{{ title }}</span>
+      <span class="text-weight-medium">{{ name }}</span>
       <q-btn
         class="q-ml-xs"
         flat
@@ -117,7 +122,7 @@ function onAdd() {
         hide-pagination
         class="custom-table2"
         :visible-columns="visibleColumns"
-        no-data-label="ยังไม่มีข้อมูลแสดงในตารางนี้"
+        no-data-label="ไม่มีข้อมูล"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -143,8 +148,9 @@ function onAdd() {
     </q-card-section>
   </q-card>
 
-  <Dialog v-model:modal="modal" :numpage="numpage" v-model:competency-type="competencyType"/>
+  <Dialog v-model:modal="modal" v-model:competency-type="type" />
 </template>
+
 <style scoped>
 .custom-table2 {
   max-height: 64vh;

src/modules/08_KPI/store.ts

@@ -1,10 +1,46 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+import type { DataOptions } from "./interface/index/Main";
 
 export const useKpiDataStore = defineStore("KPIDate", () => {
   const tabMain = ref<string>("1");
   const dataProfile = ref<any>();
   const dataEvaluation = ref<any>();
+  const competencyType = ref<DataOptions[]>([
+    {
+      id: "HEAD",
+      name: "สมรรถนะหลัก",
+    },
+    {
+      id: "GROUP",
+      name: "สมรรถนะประจำกลุ่มงาน",
+    },
+    {
+      id: "EXECUTIVE",
+      name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
+    },
+    {
+      id: "DIRECTOR",
+      name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
+    },
+    {
+      id: "INSPECTOR",
+      name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
+    },
+  ]);
 
-  return { tabMain, dataProfile, dataEvaluation };
+  function convertCompetencyType(val: string) {
+    const competency = competencyType.value.find(
+      (x: DataOptions) => x.id == "val"
+    );
+    return competency?.name;
+  }
+
+  return {
+    tabMain,
+    dataProfile,
+    dataEvaluation,
+    competencyType,
+    convertCompetencyType,
+  };
 });