fix:load skeleton

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

@@ -15,6 +15,8 @@ import DialogViewInfo from "@/modules/08_KPI/components/Tab/Dialog/DialogViewInf
 import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
 import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
 const store = useKpiDataStore();
 const { dialogRemove, showLoader, hideLoader, messageError, success } =
@@ -25,6 +27,7 @@ const title = defineModel<string>("title", { required: true });
 const rows = defineModel<any>("data", { required: true });
 const numpage = defineModel<number>("page", { required: true });
 
+const isLoad = defineModel<boolean>('isLoad',{required:true})
 const props = defineProps({
   fetchList: { type: Function, required: true },
 });
@@ -136,7 +139,7 @@ async function onEvaluate() {
 function onDelete(id: string) {
   dialogRemove($q, async () => {
     try {
-      showLoader();
+      isLoad.value = true
       const url =
         numpage.value === 1
           ? config.API.kpiAchievement("planned") + `/${id}`
@@ -151,7 +154,6 @@ function onDelete(id: string) {
     } catch (err) {
       messageError($q, err);
     } finally {
-      hideLoader();
     }
   });
 }
@@ -241,7 +243,9 @@ const isEditStep3 = computed(() => {
     </q-card-section>
     <q-separator />
     <q-card-section class="q-pa-sm">
+      
       <d-table
+      v-if="!isLoad"
         ref="table"
         :columns="columns"
         :rows="rows"
@@ -460,6 +464,7 @@ const isEditStep3 = computed(() => {
           </div>
         </template>
       </d-table>
+      <SkeletonTable v-else :columns="columns"/>
     </q-card-section>
   </q-card>
 

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

@@ -22,6 +22,8 @@ import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/02_Co
 import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
 import DialogCompetncyByRow from "@/modules/08_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const modalLevel = ref<boolean>(false);
 const modalCompetncyByRow = ref<boolean>(false);
 const dataCompetncyByRow = ref<any[]>([]);
@@ -123,6 +125,7 @@ const visibleColumns = ref<string[]>(
 const typeCompetency = ref<string>("");
 
 const rows = ref<any>([]);
+const isLoad = ref<any>([]);
 const lists = ref<any>([]);
 const modalProgress = ref<boolean>(false);
 const modalProblem = ref<boolean>(false);
@@ -161,9 +164,11 @@ function getData(type: string) {
     .get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type}`)
     .then(async (res) => {
       const data = res.data.result.data;
+      isLoad.value[type] = data ? true : false;
       rows.value[type] = data;
       lists.value = await lists.value.filter((x: any) => x.type != type);
       lists.value.push({ type: type, data });
+      isLoad.value[type] = false;
     })
     .catch((e) => {
       messageError($q, e);
@@ -232,7 +237,7 @@ function onEdit(data: FormCapacityList, type: string) {
  */
 function onDelete(id: string, type: string) {
   dialogRemove($q, () => {
-    showLoader();
+    isLoad.value[type] = true;
     http
       .delete(config.API.kpiUserCapacity + `/${id}`)
       .then((res) => {
@@ -293,7 +298,12 @@ function onLevel(num: number, list: any) {
 }
 
 watch(
-  () => [store.dataEvaluation.posTypeName, store.dataEvaluation.posExecutiveName, store.dataEvaluation.position, store.dataEvaluation.posLevelName], // ตรวจจับค่า posTypeName และ posExecutiveName
+  () => [
+    store.dataEvaluation.posTypeName,
+    store.dataEvaluation.posExecutiveName,
+    store.dataEvaluation.position,
+    store.dataEvaluation.posLevelName,
+  ], // ตรวจจับค่า posTypeName และ posExecutiveName
   (newValue) => {
     if (!newValue) return; // ถ้ายังไม่มีค่า ไม่ต้องทำอะไร
     const posTypeName = newValue[0];
@@ -326,26 +336,25 @@ watch(
 
     competencyType.value =
       position === "ผู้ตรวจราชการกรุงเทพมหานคร" || position === "ผู้ตรวจราชการ"
-      ? competencyTypeList.filter(
-          (x: DataOptions) => x.id === "HEAD" || x.id === "INSPECTOR"
-        )
-      : posExecutiveName === "ผู้อำนวยการเขต"
-      ? competencyTypeList.filter(
-          (x: DataOptions) => x.id === "HEAD" || x.id === "DIRECTOR"
-        )
-      : posTypeName === "อำนวยการ" ||
-        posTypeName === "บริหาร" ||
-        (posTypeName === "ทั่วไป" &&
-          posLevelName === "อาวุโส" &&
-          posExecutiveName != null) ||
-        (posTypeName === "วิชาการ" &&
-          posExecutiveName != null)
-      ? competencyTypeList.filter(
-          (x: DataOptions) => x.id === "HEAD" || x.id === "EXECUTIVE"
-        )
-      : competencyTypeList.filter(
-          (x: DataOptions) => x.id === "HEAD" || x.id === "GROUP"
-        );
+        ? competencyTypeList.filter(
+            (x: DataOptions) => x.id === "HEAD" || x.id === "INSPECTOR"
+          )
+        : posExecutiveName === "ผู้อำนวยการเขต"
+        ? competencyTypeList.filter(
+            (x: DataOptions) => x.id === "HEAD" || x.id === "DIRECTOR"
+          )
+        : posTypeName === "อำนวยการ" ||
+          posTypeName === "บริหาร" ||
+          (posTypeName === "ทั่วไป" &&
+            posLevelName === "อาวุโส" &&
+            posExecutiveName != null) ||
+          (posTypeName === "วิชาการ" && posExecutiveName != null)
+        ? competencyTypeList.filter(
+            (x: DataOptions) => x.id === "HEAD" || x.id === "EXECUTIVE"
+          )
+        : competencyTypeList.filter(
+            (x: DataOptions) => x.id === "HEAD" || x.id === "GROUP"
+          );
 
     for (let index = 0; index < competencyType.value.length; index++) {
       const element = competencyType.value[index];
@@ -393,6 +402,7 @@ watch(
       </q-card-section>
       <q-card-section class="q-pa-sm">
         <d-table
+          v-if="!isLoad[item.id]"
           ref="table"
           :columns="columns"
           :rows="rows[item.id]"
@@ -624,6 +634,7 @@ watch(
             </div>
           </template>
         </d-table>
+        <SkeletonTable v-else :columns="columns" />
       </q-card-section>
     </q-card>
   </div>

src/modules/08_KPI/components/Tab/Topic/03_Develop.vue

@@ -13,6 +13,8 @@ import DialogEvalutionDevelop from "@/modules/08_KPI/components/Tab/DialogEvalua
 import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
 import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const store = useKpiDataStore();
 const route = useRoute();
 const evaluationId = ref<string>(route.params.id.toString());
@@ -38,15 +40,16 @@ const isUpdate = defineModel("isUpdate", {
   default: false,
 });
 
+const isLoad = ref<boolean>(false);
 const modalProgress = ref<boolean>(false);
 const modalProblem = ref<boolean>(false);
 const type = ref<string>("");
 const idList = ref<string>("");
 const isEditStep1 = computed(() => {
   return (
-    (store.dataEvaluation.evaluationStatus === "NEW" &&
-      store.rolePerson === "USER" &&
-      store.tabMain === "1")
+    store.dataEvaluation.evaluationStatus === "NEW" &&
+    store.rolePerson === "USER" &&
+    store.tabMain === "1"
   );
 });
 
@@ -148,6 +151,7 @@ function onEdit(id: string) {
 
 /** ดึงข้อมูลพัฒนา */
 function getDevelop() {
+  isLoad.value = true;
   http
     .get(config.API.kpiAchievementDevelop + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -159,6 +163,7 @@ function getDevelop() {
         0
       );
 
+      isLoad.value = false;
       store.devScoreVal =
         data.length !== 0 ? totalSummary / rows.value.length : 0;
     });
@@ -173,7 +178,7 @@ function onEvaluate() {
  */
 function onDelete(id: string) {
   dialogRemove($q, () => {
-    showLoader();
+    isLoad.value = true;
     http
       .delete(config.API.kpiAchievementDevelop + `/${id}`)
       .then((res) => {
@@ -182,10 +187,9 @@ function onDelete(id: string) {
       })
       .catch((e) => {
         messageError($q, e);
+        isLoad.value = false;
       })
-      .finally(() => {
-        hideLoader();
-      });
+      .finally(() => {});
   });
 }
 
@@ -244,6 +248,7 @@ onMounted(() => {
     </q-card-section>
     <q-card-section class="q-pa-sm">
       <d-table
+        v-if="!isLoad"
         ref="table"
         :columns="columns"
         :rows="rows"
@@ -341,7 +346,11 @@ onMounted(() => {
                   dense
                   @click="openPopupProgress(props.row.id)"
                 >
-                  <q-tooltip>{{store.tabMain == '3' ? `บันทึกเหตุการณ์/พฤติกรรม/เหตุผล` :'บันทึกเหตุการณ์/พฤติกรรม'}}</q-tooltip>
+                  <q-tooltip>{{
+                    store.tabMain == "3"
+                      ? `บันทึกเหตุการณ์/พฤติกรรม/เหตุผล`
+                      : "บันทึกเหตุการณ์/พฤติกรรม"
+                  }}</q-tooltip>
                 </q-btn>
               </div>
 
@@ -498,6 +507,8 @@ onMounted(() => {
           </div>
         </template>
       </d-table>
+
+      <SkeletonTable v-else :columns="columns" />
     </q-card-section>
   </q-card>
 
@@ -505,6 +516,7 @@ onMounted(() => {
     v-model:modal="modalDevelop"
     v-model:id="idEditDevelop"
     :get-all="getDevelop"
+    v-model:isLoadMain="isLoad"
   />
 
   <DialogEvalutionDevelop