fix:load skeleton

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>