เพิ่ม Skeleton popup info

2025-07-29 15:14:23 +07:00 · 2025-07-29 15:14:23 +07:00 · c94e3964fc
commit c94e3964fc
parent ee9470182f
7 changed files with 187 additions and 145 deletions
--- a/src/components/SkeletonTable.vue
+++ b/src/components/SkeletonTable.vue
@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+
+const columns = defineModel<QTableProps["columns"]>("columns", {
+  required: true,
+});
+
+/** จำนวนคอลัมน์ */
+const skeletonColumns = computed(() => columns.value?.length || 5);
+</script>
+
+<template>
+  <q-markup-table flat bordered>
+    <thead>
+      <tr>
+        <th v-for="(n, idx) in skeletonColumns" :key="idx" style="width: 150px">
+          <q-skeleton type="text" />
+        </th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr v-for="n in 5" :key="n" :class="n % 2 === 0 ? 'bg-grey-2' : ''">
+        <td v-for="(col, idx) in skeletonColumns" :key="idx">
+          <q-skeleton type="text" width="80px" />
+        </td>
+      </tr>
+    </tbody>
+  </q-markup-table>
+</template>
--- a/src/modules/07_insignia/components/2_Manage/InfoAssessments.vue
+++ b/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>
--- a/src/modules/07_insignia/components/2_Manage/InfoInsignia.vue
+++ b/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
--- a/src/modules/13_salary/components/DialogInfoMain.vue
+++ b/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>
--- a/src/modules/13_salary/components/InfoDiscipline.vue
+++ b/src/modules/13_salary/components/InfoDiscipline.vue
@ -1,33 +1,28 @@
 <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();
-
-/**
- *  props
- */
+const { date2Thai, messageError, onSearchDataTable } = useCounterMixin();

+/**  props*/
 const profileId = defineModel<string>("profileId", { required: true });
 const employeeClass = defineModel<string>("employeeClass", { required: true });

-/**
- * Table
- */
+const isLoading = ref<boolean>(true);
+
+/** Table*/
 const keyword = ref<string>("");
 const rows = ref<DataDiscipline[]>([]);
 const rowsData = ref<DataDiscipline[]>([]);
@ -98,22 +93,20 @@ const visibleColumns = ref<string[]>([
  "date",
 ]);

-/**
- * function fetch ข้อมูลวินัย
- */
+/** function fetch ข้อมูลวินัย*/
 function fetchListDiscipline() {
-  showLoader();
+  isLoading.value = true;
  http
    .get(config.API.disciplineListCard(profileId.value, employeeClass.value))
    .then((res) => {
-      rows.value = res.data.result;
      rowsData.value = res.data.result;
+      onSearch();
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
-      hideLoader();
+      isLoading.value = false;
    });
 }

@ -161,8 +154,11 @@ 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
--- a/src/modules/13_salary/components/InfoLeave.vue
+++ b/src/modules/13_salary/components/InfoLeave.vue
@ -1,34 +1,28 @@
 <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 { DataLeave } 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();
-
-/**
- *  props
- */
+const { date2Thai, messageError, onSearchDataTable } = useCounterMixin();

+/** props*/
 const profileId = defineModel<string>("profileId", { required: true });
 const employeeClass = defineModel<string>("employeeClass", { required: true });

-/**
- * Table
- */
+const isLoading = ref<boolean>(true);
+
+/** Table*/
 const keyword = ref<string>("");
 const rows = ref<DataLeave[]>([]);
 const rowsData = ref<DataLeave[]>([]);
@ -104,22 +98,20 @@ const visibleColumns = ref<string[]>([
  "reason",
 ]);

-/**
- * function fetch ข้อมูลการลา
- */
+/** function fetch ข้อมูลการลา*/
 function fetchListSalary() {
-  showLoader();
+  isLoading.value = true;
  http
    .get(config.API.leaveListCard(profileId.value, employeeClass.value))
    .then((res) => {
-      rows.value = res.data.result;
      rowsData.value = res.data.result;
+      onSearch();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
-      hideLoader();
+      isLoading.value = false;
    });
 }

@ -196,7 +188,10 @@ onMounted(() => {
      />
    </div>
    <div class="col-12">
+      <SkeletonTable v-if="isLoading" :columns="columns" />
+
      <d-table
+        v-else
        ref="table"
        row-key="id"
        flat
--- a/src/modules/13_salary/components/InfoSalary.vue
+++ b/src/modules/13_salary/components/InfoSalary.vue
@ -1,48 +1,38 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
+import { is, useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
-import type { QTableColumn } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";

-/**
- * importType
- */
-import type { QTableProps } from "quasar";
+/** importType*/
+import type { QTableColumn } from "quasar";
 import type { DataPosSalary } from "@/modules/13_salary/interface/response/Main";
 import type { ResListSalary } from "@/modules/04_registryPerson/interface/response/Salary";

-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";

 const $q = useQuasar();
 const {
  date2Thai,
-  showLoader,
-  hideLoader,
  messageError,
  onSearchDataTable,
  findOrgName,
  findOrgNameHtml,
 } = useCounterMixin();

-/**
- *  props
- */
-
+/** props*/
 const profileId = defineModel<string>("profileId", { required: true });
 const employeeClass = defineModel<string>("employeeClass", { required: true });

-/**
- * Table
- */
 const modalCommand = ref<boolean>(false);
 const command = ref<string>("");
 const commandId = ref<string>("");
+const isLoading = ref<boolean>(true);

+/** Table*/
 const keyword = ref<string>("");
 const rows = ref<DataPosSalary[]>([]);
 const rowsData = ref<DataPosSalary[]>([]);
@ -343,22 +333,20 @@ const visibleColumns = ref<string[]>([
  "lastUpdatedAt",
 ]);

-/**
- * function fetch ข้อมูลเงินเดือน / ค่าจ้าง
- */
+/** function fetch ข้อมูลเงินเดือน / ค่าจ้าง */
 function fetchListSalary() {
-  showLoader();
+  isLoading.value = true;
  http
    .get(config.API.salaryListCard(profileId.value, employeeClass.value))
    .then((res) => {
-      rows.value = res.data.result;
      rowsData.value = res.data.result;
+      onSearch();
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
-      hideLoader();
+      isLoading.value = false;
    });
 }

@ -413,7 +401,10 @@ onMounted(() => {
      />
    </div>
    <div class="col-12">
+      <SkeletonTable v-if="isLoading" :columns="columns" />
+
      <d-table
+        v-else
        ref="table"
        row-key="id"
        flat