เพิ่ม Skeleton popup info

src/modules/13_salary/components/DialogInfoMain.vue

@@ -6,27 +6,19 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { checkPermissionGet } from "@/utils/permissions";
 import avatarMain from "@/assets/avatar_user.jpg";
+import { useCounterMixin } from "@/stores/mixin";
 
-/**
- * importCOmponents
- */
+/** importComponents */
 import InfoSalary from "@/modules/13_salary/components/InfoSalary.vue";
 import InfoDiscipline from "@/modules/13_salary/components/InfoDiscipline.vue";
 import InfoLeave from "@/modules/13_salary/components/InfoLeave.vue";
 import InfoAssessments from "@/modules/07_insignia/components/2_Manage/InfoAssessments.vue";
 import InfoInsignia from "@/modules/07_insignia/components/2_Manage/InfoInsignia.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
-/**
- * use
- */
+/** use */
 const $q = useQuasar();
 const router = useRouter();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { messageError } = useCounterMixin();
 
 /**
  *  props
@@ -44,11 +36,11 @@ const props = defineProps({
 const avatar = ref<string>("");
 const fullName = ref<string>("");
 const position = ref<string>("");
-const isSkeleton = ref<boolean>(false);
+const isLoading = ref<boolean>(true);
 
 /** function เรียกข้อมูลส่วนตัว*/
 function fetchInformation() {
-  isSkeleton.value = false;
+  isLoading.value = true;
   http
     .get(config.API.orgProfileById(profileId.value, props.employeeClass))
     .then(async (res) => {
@@ -65,7 +57,9 @@ function fetchInformation() {
     })
     .catch((err) => {
       messageError($q, err);
-      isSkeleton.value = true;
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
@@ -121,7 +115,33 @@ watch(
       </q-toolbar>
       <q-card-section class="col q-pt-none bg-grey-12" style="height: 100%">
         <div class="q-gutter-md">
-          <q-card bordered class="text-center bg-grey-12">
+          <div v-if="isLoading">
+            <q-skeleton
+              type="QAvatar"
+              size="120px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-md"
+            />
+            <q-skeleton
+              type="text"
+              width="150px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-md"
+            />
+            <q-skeleton
+              type="text"
+              width="100px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-sm"
+            />
+            <q-skeleton
+              type="QBtn"
+              width="150px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-sm"
+            />
+          </div>
+          <q-card v-else bordered class="text-center bg-grey-12">
             <div class="q-mt-md">
               <q-avatar size="120px" color="grey-4">
                 <img
@@ -191,39 +211,41 @@ watch(
                 </div>
               </q-card-section>
 
-              <q-scroll-area
+              <q-scroll-are
                 :thumb-style="thumbStyle"
                 style="height: 55vh; max-width: 100%"
               >
-                <InfoSalary
-                  v-if="type === 'posSalary'"
-                  v-model:profileId="profileId"
-                  :employeeClass="employeeClass"
-                />
-                <InfoDiscipline
-                  v-if="type === 'discipline'"
-                  v-model:profileId="profileId"
-                  :employeeClass="employeeClass"
-                />
+                <div style="min-width: 1200px; overflow-x: auto">
+                  <InfoSalary
+                    v-if="type === 'posSalary'"
+                    v-model:profileId="profileId"
+                    :employeeClass="employeeClass"
+                  />
+                  <InfoDiscipline
+                    v-if="type === 'discipline'"
+                    v-model:profileId="profileId"
+                    :employeeClass="employeeClass"
+                  />
 
-                <InfoLeave
-                  v-if="type === 'leave'"
-                  v-model:profileId="profileId"
-                  :employeeClass="employeeClass"
-                />
+                  <InfoLeave
+                    v-if="type === 'leave'"
+                    v-model:profileId="profileId"
+                    :employeeClass="employeeClass"
+                  />
 
-                <InfoAssessments
-                  v-if="type === 'assessments'"
-                  v-model:profileId="profileId"
-                  :employeeClass="employeeClass"
-                />
+                  <InfoAssessments
+                    v-if="type === 'assessments'"
+                    v-model:profileId="profileId"
+                    :employeeClass="employeeClass"
+                  />
 
-                <InfoInsignia
-                  v-if="type === 'insignia'"
-                  v-model:profileId="profileId"
-                  :employeeClass="employeeClass"
-                />
-              </q-scroll-area>
+                  <InfoInsignia
+                    v-if="type === 'insignia'"
+                    v-model:profileId="profileId"
+                    :employeeClass="employeeClass"
+                  />
+                </div>
+              </q-scroll-are>
             </q-card>
           </div>
         </div>