เพิ่ม Skeleton popup info

src/modules/07_insignia/components/2_Manage/InfoAssessments.vue

@@ -1,27 +1,30 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
+import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/ResultsPerformance";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
 import type { QTableProps } from "quasar";
 import type { DataDiscipline } from "@/modules/13_salary/interface/response/Main";
 
-/** importStore*/
-import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/ResultsPerformance";
-import { useCounterMixin } from "@/stores/mixin";
+/** importComponents*/
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const store = useResultsPerformDataStore();
 const { textRangePoint, textPoint } = store;
-const { date2Thai, showLoader, hideLoader, messageError, onSearchDataTable } =
-  useCounterMixin();
+const { date2Thai, messageError, onSearchDataTable } = useCounterMixin();
 
 /**  props*/
 const profileId = defineModel<string>("profileId", { required: true });
 const employeeClass = defineModel<string>("employeeClass", { required: true });
 
+const isLoading = ref<boolean>(true);
+
 /** Table*/
 const keyword = ref<string>("");
 const rows = ref<DataDiscipline[]>([]);
@@ -131,7 +134,7 @@ const visibleColumns = ref<String[]>([
 
 /** function fetch รายการข้อมูลผลการประเมินการปฏิบัติราชการ*/
 function fetchListAssessments() {
-  showLoader();
+  isLoading.value = true;
   http
     .get(
       config.API.profileNewAssessmentsByProfileId(
@@ -140,14 +143,14 @@ function fetchListAssessments() {
       )
     )
     .then((res) => {
-      rows.value = res.data.result;
       rowsData.value = res.data.result;
+      onSearch();
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -195,8 +198,12 @@ onMounted(() => {
         style="min-width: 140px"
       />
     </div>
+
     <div class="col-12">
+      <SkeletonTable v-if="isLoading" :columns="columns" />
+
       <d-table
+        v-else
         ref="table"
         row-key="id"
         flat
@@ -228,5 +235,3 @@ onMounted(() => {
     </div>
   </q-card-section>
 </template>
-
-<style scoped></style>

src/modules/07_insignia/components/2_Manage/InfoInsignia.vue

@@ -1,28 +1,27 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
 import { useQuasar } from "quasar";
 
-/**
- * importType
- */
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** importType*/
 import type { QTableProps } from "quasar";
 import type { DataDiscipline } from "@/modules/13_salary/interface/response/Main";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
+/** importComponents*/
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
-const { date2Thai, showLoader, hideLoader, messageError, onSearchDataTable } =
-  useCounterMixin();
+const { date2Thai, messageError, onSearchDataTable } = useCounterMixin();
 
 /** props*/
 const profileId = defineModel<string>("profileId", { required: true });
 const employeeClass = defineModel<string>("employeeClass", { required: true });
 
+const isLoading = ref<boolean>(true);
+
 /** Table*/
 const keyword = ref<string>("");
 const rows = ref<DataDiscipline[]>([]);
@@ -210,7 +209,6 @@ const insigniaData = ref<any[]>([]);
 
 /** fetch ข้อมูลรายการเครื่องราชอิสริยาภรณ์*/
 async function fetchListInsignia() {
-  showLoader();
   http
     .get(
       config.API.profileNewInsignByProfileId(
@@ -219,21 +217,18 @@ async function fetchListInsignia() {
       )
     )
     .then((res) => {
-      rows.value = res.data.result;
       rowsData.value = res.data.result;
+      onSearch();
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 /** fetch ข้อมูลเครื่องราชอิสริยาภรณ์*/
 async function fetchInsignia() {
-  showLoader();
-  http
+  isLoading.value = true;
+  await http
     .get(config.API.insigniaOrg)
     .then(async (res) => {
       insigniaData.value = res.data.result;
@@ -243,9 +238,10 @@ async function fetchInsignia() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
+
 function onSearch() {
   rows.value = onSearchDataTable(
     keyword.value,
@@ -290,8 +286,12 @@ onMounted(async () => {
         style="min-width: 140px"
       />
     </div>
+
     <div class="col-12">
+      <SkeletonTable v-if="isLoading" :columns="columns" />
+
       <d-table
+        v-else
         ref="table"
         row-key="id"
         flat