393 lines
11 KiB
Vue
393 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useQuasar } from 'quasar';
|
|
import {
|
|
getName,
|
|
getRole,
|
|
getUserId,
|
|
getUsername,
|
|
logout,
|
|
} from 'src/services/keycloak';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import useLoader from 'stores/loader';
|
|
import DrawerComponent from 'components/DrawerComponent.vue';
|
|
import GlobalDialog from 'components/GlobalDialog.vue';
|
|
import useUserStore from 'src/stores/user';
|
|
|
|
interface NotificationButton {
|
|
item: string;
|
|
color: string;
|
|
active: boolean;
|
|
}
|
|
|
|
interface Notification {
|
|
id: string;
|
|
title: string;
|
|
content: string;
|
|
read: boolean;
|
|
}
|
|
|
|
const $q = useQuasar();
|
|
const loaderStore = useLoader();
|
|
|
|
const { visible } = storeToRefs(loaderStore);
|
|
const { locale } = useI18n({ useScope: 'global' });
|
|
|
|
const logoutModal = ref(false);
|
|
const leftDrawerOpen = ref(false);
|
|
const filterUnread = ref(false);
|
|
const unread = ref<number>(1);
|
|
|
|
const currentLanguage = ref<string>('ไทย');
|
|
const language: {
|
|
value: string;
|
|
label: string;
|
|
}[] = [
|
|
{ value: 'th-th', label: 'ไทย' },
|
|
{ value: 'en-US', label: 'English' },
|
|
];
|
|
|
|
const notiOpen = ref(false);
|
|
const notiMenu = ref<NotificationButton[]>([
|
|
{
|
|
item: 'ทั้งหมด',
|
|
color: 'noti-switch-on',
|
|
active: true,
|
|
},
|
|
{
|
|
item: 'ยังไม่ได้อ่าน',
|
|
color: 'noti-switch-off',
|
|
active: false,
|
|
},
|
|
]);
|
|
const notification = ref<Notification[]>([
|
|
{
|
|
id: '1',
|
|
title: 'Unread',
|
|
content: 'Unread',
|
|
read: false,
|
|
},
|
|
{
|
|
id: '2',
|
|
title: 'test',
|
|
content: 'test',
|
|
read: false,
|
|
},
|
|
{
|
|
id: '3',
|
|
title: 'Read',
|
|
content: 'Already read',
|
|
read: true,
|
|
},
|
|
]);
|
|
|
|
const userImage = ref<string>();
|
|
|
|
function setActive(button: NotificationButton) {
|
|
notiMenu.value = notiMenu.value.map((current) => ({
|
|
item: current.item,
|
|
color: current.item !== button.item ? 'noti-switch-off' : 'noti-switch-on',
|
|
active: current.item === button.item,
|
|
}));
|
|
if (button.item === 'ยังไม่ได้อ่าน') {
|
|
// noti.value?.result &&
|
|
filterUnread.value = true;
|
|
}
|
|
if (button.item === 'ทั้งหมด') {
|
|
filterUnread.value = false;
|
|
}
|
|
}
|
|
|
|
function doLogout(confirm: boolean = false) {
|
|
logoutModal.value = true;
|
|
if (confirm) {
|
|
logoutModal.value = false;
|
|
logout();
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const user = getUsername();
|
|
const uid = getUserId();
|
|
|
|
if (user === 'admin') return;
|
|
if (uid) {
|
|
const res = await useUserStore().fetchById(uid);
|
|
|
|
if (res && res.profileImageUrl) userImage.value = res.profileImageUrl;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-layout view="lHh Lpr lFf">
|
|
<q-header style="background-color: var(--background)">
|
|
<div class="row items-center justify-between q-py-md q-px-lg">
|
|
<q-btn
|
|
round
|
|
unelevated
|
|
id="drawer-toggler"
|
|
:icon="leftDrawerOpen ? 'mdi-backburger' : 'mdi-forwardburger'"
|
|
:class="{ bordered: $q.dark.isActive }"
|
|
class="surface-2"
|
|
style="color: var(--gray-6)"
|
|
@click="leftDrawerOpen = !leftDrawerOpen"
|
|
/>
|
|
|
|
<!-- notification -->
|
|
<div class="q-gutter-x-md row items-end">
|
|
<q-btn
|
|
round
|
|
dense
|
|
flat
|
|
class="noti-circle"
|
|
:class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
|
|
style="color: var(--surface-1)"
|
|
@click="notiOpen = !notiOpen"
|
|
>
|
|
<q-icon name="mdi-bell" size="20px" />
|
|
<q-badge v-if="unread !== 0" rounded floating color="negative">
|
|
{{ unread }}
|
|
</q-badge>
|
|
|
|
<q-menu
|
|
:offset="[0, 10]"
|
|
anchor="bottom middle"
|
|
self="top middle"
|
|
style="width: 300px"
|
|
@before-hide="notiOpen = false"
|
|
>
|
|
<div class="q-px-md q-py-sm row col-12 items-center">
|
|
<div class="text-subtitle1 text-weight-bold">แจ้งเตือน</div>
|
|
<q-space />
|
|
</div>
|
|
<div class="q-px-md q-pb-md q-gutter-x-md">
|
|
<q-btn
|
|
rounded
|
|
padding="0px 10px"
|
|
class="text-weight-medium"
|
|
v-for="(btn, index) in notiMenu"
|
|
:flat="!btn.active"
|
|
:unelevated="btn.active"
|
|
:key="index"
|
|
:label="btn.item"
|
|
:class="btn.color"
|
|
@click="setActive(btn)"
|
|
/>
|
|
</div>
|
|
<q-infinite-scroll :offset="250">
|
|
<div class="caption cursor-pointer">
|
|
<q-item
|
|
dense
|
|
clickable
|
|
class="q-py-sm"
|
|
v-ripple
|
|
v-for="item in !filterUnread
|
|
? notification
|
|
: notification.filter((v) => !v.read)"
|
|
:key="item.id"
|
|
>
|
|
<q-avatar
|
|
color="positive"
|
|
style="height: 30px; width: 30px"
|
|
>
|
|
<q-icon color="white" name="mdi-check" />
|
|
</q-avatar>
|
|
|
|
<div class="col-6 column text-caption q-pl-md ellipsis">
|
|
<span class="block ellipsis full-width text-weight-bold">
|
|
{{ item.title }}
|
|
</span>
|
|
<span class="block ellipsis full-width text-stone">
|
|
{{ item.content }}
|
|
</span>
|
|
</div>
|
|
<span align="right" class="col text-caption text-stone">
|
|
<!-- {{ moment(item.createdAt).fromNow() }} -->
|
|
5 s
|
|
</span>
|
|
<q-tooltip
|
|
anchor="top middle"
|
|
self="bottom middle"
|
|
:delay="1000"
|
|
:offset="[10, 10]"
|
|
>
|
|
{{ item.content }}
|
|
</q-tooltip>
|
|
</q-item>
|
|
</div>
|
|
<!-- <template v-slot:loading>
|
|
<div
|
|
class="text-center q-my-md"
|
|
v-if="noti && noti?.result.length < noti?.total"
|
|
>
|
|
<q-spinner-dots color="primary" size="40px" />
|
|
</div>
|
|
</template> -->
|
|
</q-infinite-scroll>
|
|
</q-menu>
|
|
</q-btn>
|
|
|
|
<!-- User -->
|
|
<q-btn-dropdown
|
|
rounded
|
|
dense
|
|
flat
|
|
no-caps
|
|
:menu-offset="[0, 10]"
|
|
color="dark"
|
|
class="q-pa-none account-menu-down dropdown-menu"
|
|
>
|
|
<template v-slot:label>
|
|
<q-item dense class="q-pa-none">
|
|
<q-item-section
|
|
avatar
|
|
class="q-pa-none"
|
|
style="min-width: 30px"
|
|
>
|
|
<q-avatar class="bg-primary">
|
|
<img :src="userImage" />
|
|
</q-avatar>
|
|
</q-item-section>
|
|
<q-item-section
|
|
class="text-left q-pa-none q-px-md"
|
|
v-if="$q.screen.gt.xs"
|
|
>
|
|
<q-item-label class="text-caption column">
|
|
<span class="text-weight-bold q-pb-xs text-primary">
|
|
{{ getName() }}
|
|
</span>
|
|
<div style="font-size: 11px; color: var(--surface)">
|
|
{{ getRole()?.includes('admin') ? 'Admin' : 'User' }}
|
|
</div>
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
|
|
<q-list class="dropdown-menu">
|
|
<q-item clickable>
|
|
<q-item-section avatar style="min-width: 30px">
|
|
<q-icon
|
|
color="secondary"
|
|
size="18px"
|
|
name="mdi-lock-outline"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>เปลี่ยนรหัสผ่าน</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-close-popup @click="doLogout()">
|
|
<q-item-section avatar style="min-width: 30px">
|
|
<q-icon
|
|
color="primary"
|
|
size="18px"
|
|
name="mdi-logout-variant"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>ออกจากระบบ</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
|
|
<!-- theme -->
|
|
<q-btn
|
|
round
|
|
unelevated
|
|
id="drawer-toggler"
|
|
icon="mdi-switch"
|
|
:class="{ bordered: $q.dark.isActive }"
|
|
class="surface-2"
|
|
style="color: var(--gray-6)"
|
|
@click="$q.dark.toggle()"
|
|
/>
|
|
<!-- เปลี่นรภาษา -->
|
|
<q-btn
|
|
flat
|
|
color="grey"
|
|
v-model="currentLanguage"
|
|
:label="currentLanguage"
|
|
class="no-uppercase"
|
|
>
|
|
<q-menu fit anchor="bottom left" self="top left" auto-close>
|
|
<q-list
|
|
v-for="v in language"
|
|
:key="v.value"
|
|
style="min-width: 50px"
|
|
>
|
|
<q-item
|
|
v-if="!v.label.includes(currentLanguage)"
|
|
clickable
|
|
@click="
|
|
locale = v.value;
|
|
currentLanguage = v.label;
|
|
"
|
|
>
|
|
<q-item-section>
|
|
{{ v.label }}
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</q-header>
|
|
|
|
<q-page-container style="background-color: transparent">
|
|
<q-page class="q-px-lg q-pb-lg">
|
|
<router-view />
|
|
</q-page>
|
|
</q-page-container>
|
|
|
|
<drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />
|
|
|
|
<GlobalDialog
|
|
v-model="logoutModal"
|
|
title="ยืนยันการออกจากระบบ"
|
|
message="คุณต้องการออกจากระบบ ใช่หรือไม่"
|
|
icon="mdi-logout-variant"
|
|
:persistent="true"
|
|
:action="() => doLogout(true)"
|
|
/>
|
|
<global-loading :visibility="visible" />
|
|
</q-layout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.text-stone {
|
|
--_color: var(--stone-5);
|
|
color: var(--_color);
|
|
}
|
|
|
|
.noti-circle {
|
|
--_color: var(--stone-5);
|
|
background-color: var(--_color);
|
|
|
|
&.dark {
|
|
--_color: var(--stone-9);
|
|
}
|
|
}
|
|
|
|
.noti-switch-on {
|
|
--_color: var(--blue-6-hsl);
|
|
background-color: hsla(var(--_color) / 0.1) !important;
|
|
color: hsl(var(--_color));
|
|
}
|
|
|
|
.noti-switch-off {
|
|
--_color: var(--stone-6);
|
|
color: var(--_color);
|
|
}
|
|
|
|
.account-menu-down {
|
|
& ::before {
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
</style>
|