updated competency

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 rows = defineModel<any>('data',{required:true})
-const numpage = defineModel<number>('page',{required:true})
+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;
@@ -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){
-    modalAssigned.value = true
+  } else if (numpage.value == 3) {
+    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"/>
-  <Dialog03 v-model:modal="modalAssigned" :numpage="numpage"/>
+  <Dialog v-model:modal="modal" :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;