fix loading Skeleton
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
ff6101067e
commit
016132096e
63 changed files with 3468 additions and 3452 deletions
|
|
@ -26,7 +26,7 @@ import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
|
|||
const $q = useQuasar();
|
||||
const store = useLeaveStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
|
||||
const { messageError, monthYear2Thai } = mixin;
|
||||
const emit = defineEmits(["update:dateYear"]);
|
||||
|
||||
const mainData = ref<DataCalendar[]>([]);
|
||||
|
|
@ -37,10 +37,10 @@ const leaveId = ref<string>("");
|
|||
/** filter calendar left */
|
||||
const filterLists = ref<any>([]);
|
||||
const filterVal = ref<any>([keycloakId.value]);
|
||||
const isLoading = ref<boolean>(false);
|
||||
const isLoadingHoliday = ref<boolean>(false);
|
||||
|
||||
/**
|
||||
* Option ของปฏิทิน
|
||||
*/
|
||||
/** Option ของปฏิทิน */
|
||||
const fullCalendar = ref<any>(); //ref calendar
|
||||
const calendarOptions = ref<any>({
|
||||
plugins: [
|
||||
|
|
@ -76,6 +76,7 @@ const dateMonth = ref<DataDateMonthObject>({
|
|||
|
||||
/** function เรียกข้อมูล calendar*/
|
||||
async function fetchDataCalendar() {
|
||||
isLoading.value = true;
|
||||
await http
|
||||
.post(config.API.leaveCalendar(), {
|
||||
year: dateMonth.value.year,
|
||||
|
|
@ -119,6 +120,9 @@ async function fetchDataCalendar() {
|
|||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -126,6 +130,7 @@ async function fetchDataCalendar() {
|
|||
* fetch วันหยุดในปฏิทิน
|
||||
*/
|
||||
async function fetchData() {
|
||||
isLoadingHoliday.value = true;
|
||||
await http
|
||||
.get(
|
||||
config.API.listHolidayHistoryYearMonth(
|
||||
|
|
@ -154,6 +159,9 @@ async function fetchData() {
|
|||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoadingHoliday.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -193,7 +201,6 @@ async function updateMonth() {
|
|||
} catch (error) {
|
||||
messageError($q, error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -215,7 +222,6 @@ async function onClickClose() {
|
|||
watch(
|
||||
() => filterVal.value,
|
||||
async () => {
|
||||
showLoader();
|
||||
const eventData = filterVal.value.map((item: any) => {
|
||||
return mainData.value
|
||||
.filter(
|
||||
|
|
@ -236,14 +242,13 @@ watch(
|
|||
const allEventData = [].concat(...eventData);
|
||||
calendarOptions.value.events = allEventData;
|
||||
await fetchData();
|
||||
hideLoader();
|
||||
}
|
||||
);
|
||||
|
||||
/**Hook */
|
||||
onMounted(async () => {
|
||||
try {
|
||||
showLoader();
|
||||
isLoading.value = true;
|
||||
// เรียกข้อมูล keycloakId
|
||||
const user = await tokenParsed();
|
||||
keycloakId.value = await (user ? user.sub : "");
|
||||
|
|
@ -253,7 +258,7 @@ onMounted(async () => {
|
|||
} catch (error) {
|
||||
messageError($q, error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
isLoading.value = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -262,7 +267,8 @@ onMounted(async () => {
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-md-3 q-mt-sm q-pr-sm row">
|
||||
<q-card class="col-12" flat bordered>
|
||||
<q-scroll-area style="height: 38vw">
|
||||
<q-skeleton height="100%" square v-if="isLoading" />
|
||||
<q-scroll-area style="height: 38vw" v-else>
|
||||
<div class="q-gutter-sm col-12">
|
||||
<q-list class="rounded-borders q-pt-sm" dense>
|
||||
<q-item
|
||||
|
|
@ -333,7 +339,13 @@ onMounted(async () => {
|
|||
</q-card>
|
||||
|
||||
<div class="main-content">
|
||||
<q-skeleton
|
||||
height="100%"
|
||||
square
|
||||
v-if="isLoading || isLoadingHoliday"
|
||||
/>
|
||||
<FullCalendar
|
||||
v-else
|
||||
ref="fullCalendar"
|
||||
class="demo-app-calendar"
|
||||
:options="calendarOptions"
|
||||
|
|
|
|||
|
|
@ -164,6 +164,7 @@ const formDataCancle = reactive<FromCancelDetail>({
|
|||
leaveRangeEnd: "",
|
||||
leaveDirectorComment: "",
|
||||
});
|
||||
const isLoading = ref<boolean>(false);
|
||||
|
||||
/** form ขอยกเลิก*/
|
||||
const formDelete = reactive<FormDelete>({
|
||||
|
|
@ -187,7 +188,7 @@ const formDeleteRef: FormDeleteRef = {
|
|||
* @param id การลา
|
||||
*/
|
||||
async function fetchDataDetail(id: string) {
|
||||
showLoader();
|
||||
isLoading.value = true;
|
||||
await http
|
||||
.get(config.API.leaveUserId(id), {})
|
||||
.then((res) => {
|
||||
|
|
@ -280,7 +281,7 @@ async function fetchDataDetail(id: string) {
|
|||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -308,10 +309,7 @@ function checkLeaveType(leaveTypeId: string) {
|
|||
checkForm.value = "FormHajj";
|
||||
} else if (type === "LV-007") {
|
||||
checkForm.value = "FormCheckSelect";
|
||||
} else if (
|
||||
type === "LV-008" &&
|
||||
formData.leaveSubTypeName === "ศึกษาต่อ"
|
||||
) {
|
||||
} else if (type === "LV-008" && formData.leaveSubTypeName === "ศึกษาต่อ") {
|
||||
checkForm.value = "FormStudy";
|
||||
} else if (
|
||||
(type === "LV-008" && formData.leaveSubTypeName === "ฝึกอบรม") ||
|
||||
|
|
@ -334,7 +332,7 @@ function checkLeaveType(leaveTypeId: string) {
|
|||
* @param id ยกเลิกการลา
|
||||
*/
|
||||
async function fetchDataCancelDetail(id: string) {
|
||||
showLoader();
|
||||
isLoading.value = true;
|
||||
await http
|
||||
.get(config.API.leaveCancelById(id))
|
||||
.then((res) => {
|
||||
|
|
@ -362,7 +360,7 @@ async function fetchDataCancelDetail(id: string) {
|
|||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -401,7 +399,8 @@ async function onSubmit() {
|
|||
formData.append("doc", formDelete.doc);
|
||||
await http
|
||||
.post(config.API.leaveCancelById(id), formData)
|
||||
.then(() => {
|
||||
.then(async () => {
|
||||
await props.fetchDataTable?.();
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.onClickClose?.();
|
||||
})
|
||||
|
|
@ -409,7 +408,6 @@ async function onSubmit() {
|
|||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
props.fetchDataTable?.();
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
|
@ -445,7 +443,9 @@ watch(
|
|||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 60vh">
|
||||
<div class="row">
|
||||
<q-skeleton height="400px" square v-if="isLoading" />
|
||||
|
||||
<div class="row" v-else>
|
||||
<div
|
||||
flat
|
||||
:class="
|
||||
|
|
@ -571,6 +571,7 @@ watch(
|
|||
label="ยืนยัน"
|
||||
unelevated
|
||||
color="secondary"
|
||||
:loading="isLoading"
|
||||
@click="onClickSave"
|
||||
/>
|
||||
</q-card-section>
|
||||
|
|
@ -584,7 +585,8 @@ watch(
|
|||
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-md row q-gutter-y-md">
|
||||
<div flat class="col-12">
|
||||
<q-skeleton height="400px" width="100%" square v-if="isLoading" />
|
||||
<div flat class="col-12" v-else>
|
||||
<div class="col-12 q-col-gutter-sm row items-center"></div>
|
||||
<FormCancel :data="formDataCancle" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ const year = ref<number>(new Date().getFullYear());
|
|||
const type = ref<string>("00000000-0000-0000-0000-000000000000");
|
||||
const status = ref<string>("ALL");
|
||||
const filter = ref<string>("");
|
||||
const isLoading = ref<boolean>(false);
|
||||
|
||||
/** pagination*/
|
||||
const maxPage = ref<number>(1);
|
||||
|
|
@ -38,7 +39,7 @@ const pageSize = ref<number>(10);
|
|||
const total = ref<number>(0);
|
||||
/** function เรียกข้อมูลการลา*/
|
||||
async function fetchDataTable() {
|
||||
showLoader();
|
||||
isLoading.value = true;
|
||||
const body = {
|
||||
year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
|
||||
type: LeaveData.type, //*Id ประเภทการลา
|
||||
|
|
@ -59,7 +60,7 @@ async function fetchDataTable() {
|
|||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -128,10 +129,10 @@ async function onClickClose() {
|
|||
*/
|
||||
async function updateFilterTable(y: number, t: string, s: string, k: string) {
|
||||
if (t && s) {
|
||||
year.value = await y;
|
||||
type.value = await t;
|
||||
status.value = await s;
|
||||
filter.value = await k;
|
||||
year.value = y;
|
||||
type.value = t;
|
||||
status.value = s;
|
||||
filter.value = k;
|
||||
await fetchDataTable();
|
||||
}
|
||||
}
|
||||
|
|
@ -142,7 +143,7 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
|
|||
* @param ps แถวต่อหน้า
|
||||
*/
|
||||
async function updatePagination(p: number, ps: number) {
|
||||
(page.value = await p), (pageSize.value = await ps);
|
||||
(page.value = p), (pageSize.value = ps);
|
||||
await fetchDataTable();
|
||||
}
|
||||
|
||||
|
|
@ -168,15 +169,8 @@ function convert(val: any) {
|
|||
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||
*/
|
||||
onMounted(async () => {
|
||||
try {
|
||||
showLoader();
|
||||
await fectOptionType();
|
||||
await fetchDataTable();
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
await fectOptionType();
|
||||
await fetchDataTable();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -194,6 +188,7 @@ onMounted(async () => {
|
|||
:pageSize="pageSize"
|
||||
:leaveType="leaveType"
|
||||
:total="total"
|
||||
:isloadingData="isLoading"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { ref, useAttrs, watch } from "vue";
|
|||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
import SkeletonTable from "@/components/SkeletonTable.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const attrs = ref<any>(useAttrs());
|
||||
|
|
@ -15,7 +16,6 @@ const props = defineProps({
|
|||
pass: Number,
|
||||
notpass: Number,
|
||||
total: Number,
|
||||
|
||||
name: String,
|
||||
icon: String,
|
||||
inputvisible: Array,
|
||||
|
|
@ -34,6 +34,10 @@ const props = defineProps({
|
|||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
isloadingData: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -48,9 +52,7 @@ const emit = defineEmits([
|
|||
|
||||
const table = ref<any>(null);
|
||||
|
||||
/**
|
||||
* ตั้งค่า pagination
|
||||
*/
|
||||
/** ตั้งค่า pagination*/
|
||||
const currentPage = ref<number>(1);
|
||||
const pagination = ref({
|
||||
sortBy: "dateSendLeave",
|
||||
|
|
@ -235,7 +237,9 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
|
|||
</q-card>
|
||||
</div>
|
||||
<div>
|
||||
<SkeletonTable v-if="isloadingData" :columns="leaveStore.columns" />
|
||||
<d-table
|
||||
v-else
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
|
|
|
|||
|
|
@ -118,11 +118,11 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
]);
|
||||
|
||||
const isloading = ref<boolean>(false);
|
||||
const isloadingSummary = ref<boolean>(false);
|
||||
|
||||
/** function เรียกข้อมูลตารางสถิติการลา*/
|
||||
async function fetchStatsTable() {
|
||||
isloading.value = true;
|
||||
isloadingSummary.value = true;
|
||||
await http
|
||||
.get(config.API.leaveStats())
|
||||
.then((res) => {
|
||||
|
|
@ -171,11 +171,12 @@ async function fetchStatsTable() {
|
|||
leaveCountReject: e.leaveCountReject,
|
||||
leaveCountDelete: e.leaveCountDelete,
|
||||
}));
|
||||
isloading.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
isloading.value = true;
|
||||
})
|
||||
.finally(() => {
|
||||
isloadingSummary.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -215,7 +216,7 @@ onMounted(async () => {
|
|||
<div class="col-xs-12 col-sm-12 col-md-11 row">
|
||||
<!-- สถิติการลา -->
|
||||
<div class="col-12 row q-pb-sm">
|
||||
<q-card bordered class="col-12 row" v-if="!isloading">
|
||||
<q-card bordered class="col-12 row" v-if="!isloadingSummary">
|
||||
<div class="row col-12 items-center q-px-md q-py-sm">
|
||||
<div class="text-weight-bold">สถิติการลา</div>
|
||||
<q-space />
|
||||
|
|
@ -278,6 +279,7 @@ onMounted(async () => {
|
|||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-6 row">
|
||||
<div
|
||||
bordered
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue