fix:load skeleton

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

@@ -37,6 +37,10 @@ const store = useKpiDataStore();
 
 const evaluationId = ref<string>(route.params.id.toString());
 
+const isLoad01 = ref<boolean>(false);
+const isLoad02 = ref<boolean>(false);
+const isLoad03 = ref<boolean>(false);
+
 const rows_01 = ref<EvaluationIndicatorType[]>();
 const rows_02 = ref<EvaluationIndicatorType[]>();
 const rows_03 = ref<EvaluationIndicatorType[]>();
@@ -53,6 +57,7 @@ const resultRole = ref<number>(0);
 const resultAssigned = ref<number>(0);
 
 function fetchListPlanned() {
+  isLoad01.value = true;
   http
     .get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -62,6 +67,7 @@ function fetchListPlanned() {
         evaluationResults: (e.point / 5) * e.weight,
       }));
       rows_01.value = newRow;
+      isLoad01.value = false;
 
       if (newRow.length > 0) {
         resultPlanned.value = newRow.reduce(
@@ -89,6 +95,7 @@ function fetchListPlanned() {
 }
 
 function fetchListRole() {
+  isLoad02.value = true;
   http
     .get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -98,7 +105,7 @@ function fetchListRole() {
         evaluationResults: (e.point / 5) * e.weight,
       }));
       rows_02.value = newRow;
-
+      isLoad02.value = false;
       if (newRow.length > 0) {
         resultRole.value = newRow.reduce(
           (sum: number, e: any) => sum + e.evaluationResults,
@@ -119,6 +126,7 @@ function fetchListRole() {
 }
 
 function fetchAssigned() {
+  isLoad03.value = true;
   http
     .get(config.API.kpiAchievement("special") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -129,7 +137,7 @@ function fetchAssigned() {
       }));
 
       rows_03.value = newRow;
-
+      isLoad03.value = false;
       if (newRow.length > 0) {
         resultAssigned.value = newRow.reduce(
           (sum: number, e: any) => sum + e.evaluationResults,
@@ -345,6 +353,7 @@ onMounted(() => {
       <div v-if="groupNo == 1">
         <Work
           v-model:data="rows_01"
+          v-model:isLoad="isLoad01"
           :title="`มิติที่ 1 ภารกิจตามนโยบายและยุทธศาสตร์ของกรุงเทพมหานคร`"
           :page="1"
           :fetchList="fetchListPlanned"
@@ -391,6 +400,7 @@ onMounted(() => {
 
         <Work
           v-model:data="rows_03"
+          v-model:isLoad="isLoad03"
           :title="`มิติที่ 2 วาระเร่งด่วนที่ได้รับมอบหมายพิเศษ (ถ้ามี)`"
           :page="3"
           :fetchList="fetchAssigned"
@@ -437,12 +447,16 @@ onMounted(() => {
                 คะแนน)</span
               >
               <div class="text-primary q-pl-md">
-                {{
-                  (
-                    store.excusiveIndicator1ScoreVal +
-                    store.excusiveIndicator2ScoreVal
-                  ).toFixed(2)
-                }}
+                <div v-if="!isLoad01">
+                  {{
+                    (
+                      store.excusiveIndicator1ScoreVal +
+                      store.excusiveIndicator2ScoreVal
+                    ).toFixed(2)
+                  }}
+                </div>
+
+                <q-skeleton v-else type="text" />
               </div>
             </div>
           </div>
@@ -452,6 +466,7 @@ onMounted(() => {
       <div v-else>
         <Work
           v-model:data="rows_01"
+          v-model:isLoad="isLoad01"
           :title="`1. งานตามแผนปฏิบัติราชการประจำปี`"
           :page="1"
           :fetchList="fetchListPlanned"
@@ -459,6 +474,7 @@ onMounted(() => {
         />
         <Work
           v-model:data="rows_02"
+          v-model:isLoad="isLoad02"
           :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`"
           :page="2"
           :fetchList="fetchListRole"
@@ -466,6 +482,7 @@ onMounted(() => {
         />
         <Work
           v-model:data="rows_03"
+          v-model:isLoad="isLoad03"
           :title="`3. งานอื่น ๆ ที่ได้รับมอบหมาย`"
           :page="3"
           :fetchList="fetchAssigned"
@@ -517,7 +534,10 @@ onMounted(() => {
                 คะแนน)</span
               >
               <div class="text-primary q-pl-md">
-                {{ store.indicatorScoreVal.toFixed(2) }}
+                <div v-if="!isLoad01">
+                  {{ store.indicatorScoreVal.toFixed(2) }}
+                </div>
+                <q-skeleton v-else type="text" />
               </div>
             </div>
           </div>