new loader

This commit is contained in:
Thanit Konmek 2023-06-09 14:25:41 +07:00
parent fd7aae2f5d
commit fe6c712a18
95 changed files with 1189 additions and 950 deletions

View file

@ -25,7 +25,10 @@
label="ชื่อรอบการสอบแข่งขัน/ชื่อประกาศ"
dense
lazy-rules
:rules="[(val) => !!val || `${'กรุณากรอกชื่อรอบการสอบแข่งขัน/ชื่อประกาศ'}`]"
:rules="[
(val) =>
!!val || `${'กรุณากรอกชื่อรอบการสอบแข่งขัน/ชื่อประกาศ'}`,
]"
></q-input>
</div>
<div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
@ -83,7 +86,9 @@
dense
lazy-rules
input-class="text-right"
:rules="[(val) => val >= 0 || `${'กรุณากรอกค่าธรรมเนียมให้ถูกต้อง'}`]"
:rules="[
(val) => val >= 0 || `${'กรุณากรอกค่าธรรมเนียมให้ถูกต้อง'}`,
]"
></q-input>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
@ -295,7 +300,9 @@
@removed="fileRemoveImg"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs text-white">
<div
class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
>
<q-btn
v-if="scope.queuedFiles.length > 0"
icon="clear_all"
@ -316,7 +323,10 @@
>
<q-tooltip>ลบไฟลปโหลด</q-tooltip>
</q-btn>
<q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
<q-spinner
v-if="scope.isUploading"
class="q-uploader__spinner"
/>
<div class="col">
<div class="q-uploader__title">
{{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]" }}
@ -360,7 +370,11 @@
v-if="fileImgs.length != 0"
>
<q-list separator>
<q-item v-for="file in fileImgs" :key="file.id" class="q-my-xs">
<q-item
v-for="file in fileImgs"
:key="file.id"
class="q-my-xs"
>
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
@ -421,7 +435,9 @@
@removed="fileRemoveDoc"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs text-white">
<div
class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
>
<q-btn
v-if="scope.queuedFiles.length > 0"
icon="clear_all"
@ -442,7 +458,10 @@
>
<q-tooltip>ลบไฟลปโหลด</q-tooltip>
</q-btn>
<q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
<q-spinner
v-if="scope.isUploading"
class="q-uploader__spinner"
/>
<div class="col">
<div class="q-uploader__title">
{{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]" }}
@ -486,7 +505,11 @@
v-if="fileDocs.length != 0"
>
<q-list separator>
<q-item v-for="file in fileDocs" :key="file.id" class="q-my-xs">
<q-item
v-for="file in fileDocs"
:key="file.id"
class="q-my-xs"
>
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
@ -534,7 +557,9 @@
</div>
<div class="col-12">
<div class="text-bold text-subtitle2 q-pb-sm q-pt-md">รายละเอยด</div>
<div class="text-bold text-subtitle2 q-pb-sm q-pt-md">
รายละเอยด
</div>
<q-editor
v-model="editor"
:dense="$q.screen.lt.md"
@ -544,7 +569,14 @@
class="editor"
:toolbar="[
['left', 'center', 'right', 'justify'],
['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript'],
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['token', 'hr', 'link', 'custom_btn'],
['print', 'fullscreen'],
[
@ -637,7 +669,8 @@ const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const router = useRouter();
const route = useRoute();
const { date2Thai, success, dateToISO, notifyError } = mixin;
const { date2Thai, success, dateToISO, notifyError, showLoader, hideLoader } =
mixin;
const myForm = ref<QForm | null>(null); //form data input
const name = ref<string>("");
const note = ref<string>("");
@ -733,7 +766,7 @@ watch(organizationName, (count: DataOption, prevCount: DataOption) => {
});
onMounted(async () => {
loaderPage(false);
hideLoader();
if (route.params.id != undefined) {
edit.value = true;
id.value = route.params.id.toString();
@ -748,7 +781,7 @@ const clickBack = () => {
};
const fetchData = async () => {
loaderPage(true);
showLoader();
await http
.get(config.API.getPeriodById(id.value))
.then((res) => {
@ -785,7 +818,7 @@ const fetchData = async () => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
hideLoader();
});
};
@ -797,7 +830,9 @@ const fileUploadDoc = async (files: any) => {
const fileRemoveDoc = async (files: any) => {
files.forEach((file: any) => {
const index = fileDocDataUpload.value.findIndex((x: any) => x.__key == file.__key);
const index = fileDocDataUpload.value.findIndex(
(x: any) => x.__key == file.__key
);
if (index > -1) {
fileDocDataUpload.value.splice(index, 1);
}
@ -810,7 +845,7 @@ const uploadDocData = async () => {
fileDocDataUpload.value.forEach((file: any) => {
formData.append("", file);
});
loaderPage(true);
showLoader();
await http
.put(config.API.periodRecruitDoc(id.value), formData)
.then((res) => {})
@ -818,7 +853,7 @@ const uploadDocData = async () => {
messageError($q, e);
})
.finally(async () => {
loaderPage(false);
hideLoader();
success($q, "บันทึกข้อมูลสำเร็จ");
clickBack();
});
@ -834,7 +869,7 @@ const uploadImgData = async () => {
fileImgDataUpload.value.forEach((file: any) => {
formData.append("", file);
});
loaderPage(true);
showLoader();
await http
.put(config.API.periodRecruitImg(id.value), formData)
.then((res) => {})
@ -842,7 +877,7 @@ const uploadImgData = async () => {
messageError($q, e);
})
.finally(async () => {
loaderPage(false);
hideLoader();
});
}
};
@ -855,7 +890,9 @@ const fileUploadImg = async (files: any) => {
const fileRemoveImg = async (files: any) => {
files.forEach((file: any) => {
const index = fileImgDataUpload.value.findIndex((x: any) => x.__key == file.__key);
const index = fileImgDataUpload.value.findIndex(
(x: any) => x.__key == file.__key
);
if (index > -1) {
fileImgDataUpload.value.splice(index, 1);
}
@ -906,7 +943,7 @@ const sendData = () => {
};
const deleteDocData = async (docId: string) => {
loaderPage(true);
showLoader();
await http
.delete(config.API.periodDeleteDoc(docId))
.then(async () => {
@ -916,12 +953,12 @@ const deleteDocData = async (docId: string) => {
messageError($q, e);
})
.finally(async () => {
loaderPage(false);
hideLoader();
});
};
const deleteImgData = async (docId: string) => {
loaderPage(true);
showLoader();
await http
.delete(config.API.periodDeleteImg(docId))
.then(async () => {
@ -931,12 +968,12 @@ const deleteImgData = async (docId: string) => {
messageError($q, e);
})
.finally(async () => {
loaderPage(false);
hideLoader();
});
};
const addData = async () => {
loaderPage(true);
showLoader();
await http
.post(config.API.savePeriod, sendData())
.then(async (res) => {
@ -949,12 +986,12 @@ const addData = async () => {
messageError($q, e);
})
.finally(async () => {
loaderPage(false);
hideLoader();
});
};
const editData = async (id: string) => {
loaderPage(true);
showLoader();
await http
.put(config.API.editPeriod(id), sendData())
.then(async () => {
@ -965,7 +1002,7 @@ const editData = async (id: string) => {
messageError($q, e);
})
.finally(async () => {
loaderPage(false);
hideLoader();
});
};