hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

กล่องข้อความ

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-01-19 11:22:41 +07:00
parent 015d2d9857
commit e8d1b5eaaf
2 changed files with 30 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/views/Dashboard.vue
View file

@ -32,7 +32,9 @@ onMounted(async () => {
await getData(1); await getData(1);
}); });
const isLoadInbox = ref<boolean>(false);
const getData = async (index: number) => { const getData = async (index: number) => {
isLoadInbox.value = false;
index === 1 && showLoader(); index === 1 && showLoader();
index != 0 && index != 0 &&
(await http (await http
@ -67,6 +69,7 @@ const getData = async (index: number) => {
messageError($q, e); messageError($q, e);
}) })
.finally(() => { .finally(() => {
isLoadInbox.value = true;
hideLoader(); hideLoader();
})); }));
}; };
@ -122,10 +125,10 @@ const totalInbox = ref<number>(0);
function onLoad(index: number, done: any) { function onLoad(index: number, done: any) {
const num = index === 1 ? 0 : index++; const num = index === 1 ? 0 : index++;
if (inboxList.value.length < totalInbox.value) { if (inboxList.value.length < totalInbox.value) {
setTimeout(() => { // setTimeout(() => {
getData(num); getData(num);
done(); done();
}, 1000); // }, );
} }
} }
const thaiOptions: Intl.DateTimeFormatOptions = { const thaiOptions: Intl.DateTimeFormatOptions = {
@ -225,7 +228,10 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
/> />
</q-list> </q-list>
<template v-slot:loading v-if="inboxList.length < totalInbox"> <template
:v-slot:isLoadInbox?loading:null
v-if="inboxList.length < totalInbox"
>
<div class="row justify-center q-my-md"> <div class="row justify-center q-my-md">
<q-spinner-dots color="primary" size="40px" /> <q-spinner-dots color="primary" size="40px" />
</div> </div>

25
src/views/MainLayout.vue
View file

@ -87,7 +87,9 @@ async function fetchmsgNoread() {
}); });
} }
const isLoad = ref<boolean>(false);
const getDataNotification = async (index: number, type: string) => { const getDataNotification = async (index: number, type: string) => {
isLoad.value = false;
const thaiOptions: Intl.DateTimeFormatOptions = { const thaiOptions: Intl.DateTimeFormatOptions = {
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",
@ -123,6 +125,7 @@ const getDataNotification = async (index: number, type: string) => {
messageError($q, e); messageError($q, e);
}) })
.finally(() => { .finally(() => {
isLoad.value = true;
// hideLoader(); // hideLoader();
}); });
}; };
@ -452,8 +455,8 @@ const round = ref<number>(0);
function onLoad(index: any, done: any) { function onLoad(index: any, done: any) {
if (notiList.value.length < totalInbox.value) { if (notiList.value.length < totalInbox.value) {
setTimeout(() => { setTimeout(() => {
getDataNotification(index + 1, "NOMAL");
done(); done();
getDataNotification(index + 1, "NOMAL");
}, 1000); }, 1000);
} }
} }
@ -521,12 +524,16 @@ watch(
size="13px" size="13px"
class="q-mx-md bg-grey-3" class="q-mx-md bg-grey-3"
:color="totalNoti === 0 ? 'grey-6' : 'grey-8'" :color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
:disable="totalNoti === 0"
> >
<q-icon name="mdi-bell" size="18px" color="grey-7" /> <q-icon name="mdi-bell" size="18px" color="grey-7" />
<q-badge rounded color="negative" text-color="white" floating>{{ <q-badge
totalNoti rounded
}}</q-badge> color="negative"
text-color="white"
floating
v-if="totalNoti !== 0"
>{{ totalNoti }}</q-badge
>
<q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]"> <q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
<div <div
class="q-px-md q-py-sm row col-12 items-center" class="q-px-md q-py-sm row col-12 items-center"
@ -577,7 +584,13 @@ watch(
</q-item> </q-item>
<q-separator color="grey-2" /> <q-separator color="grey-2" />
</q-list> </q-list>
<template v-slot:loading v-if="notiList.length < totalInbox"> <template
:v-slot:isLoad?
loading
:
null,
v-if="notiList.length < totalInbox"
>
<div class="row justify-center q-my-md"> <div class="row justify-center q-my-md">
<q-spinner-dots color="primary" size="40px" /> <q-spinner-dots color="primary" size="40px" />
</div> </div>