feat: Header => noti&account
This commit is contained in:
puriphatt
parent
dc4e045e11
commit
66857f1b71
3 changed files with 268 additions and 12 deletions
|
|
@ -39,7 +39,7 @@ function navigateTo(destination: string) {
|
|||
@click="navigateTo(v.value)"
|
||||
>
|
||||
<AppCircle
|
||||
:class="`q-pa-sm menu-icon menu-icon__${v.color}${($q.dark.isActive && ' dark') || ''}`"
|
||||
:class="`q-pa-md menu-icon menu-icon__${v.color}${($q.dark.isActive && ' dark') || ''}`"
|
||||
:bordered="$q.dark.isActive"
|
||||
>
|
||||
<q-icon size="3rem" :name="v.icon" />
|
||||
|
|
|
|||
|
|
@ -38,3 +38,7 @@ $separator-dark-color: var(--border-color);
|
|||
border-color: var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.q-menu {
|
||||
box-shadow: var(--shadow-2) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,78 @@
|
|||
import { ref } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { getName, getRole, logout } from 'src/services/keycloak';
|
||||
|
||||
import useLoader from 'stores/loader';
|
||||
import DrawerComponent from 'components/DrawerComponent.vue';
|
||||
|
||||
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 leftDrawerOpen = ref($q.screen.gt.sm);
|
||||
const filterUnread = ref(false);
|
||||
const unread = ref<number>(1);
|
||||
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: 'test',
|
||||
content: 'test',
|
||||
read: false,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'test',
|
||||
content: 'test',
|
||||
read: false,
|
||||
},
|
||||
]);
|
||||
|
||||
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() {
|
||||
logout();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -22,22 +84,178 @@ const leftDrawerOpen = ref($q.screen.gt.sm);
|
|||
round
|
||||
unelevated
|
||||
id="drawer-toggler"
|
||||
icon="mdi-backburger"
|
||||
:icon="leftDrawerOpen ? 'mdi-backburger' : 'mdi-forwardburger'"
|
||||
:class="{ bordered: $q.dark.isActive }"
|
||||
class="surface-2"
|
||||
style="color: var(--gray-6)"
|
||||
@click="leftDrawerOpen = !leftDrawerOpen"
|
||||
/>
|
||||
<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()"
|
||||
/>
|
||||
|
||||
<!-- 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)"
|
||||
>
|
||||
<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 notification"
|
||||
: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
|
||||
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" />
|
||||
</q-item-section>
|
||||
<q-item-section
|
||||
class="text-left text-dark 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(--foreground)">
|
||||
{{ 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()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-header>
|
||||
|
||||
|
|
@ -52,3 +270,37 @@ const leftDrawerOpen = ref($q.screen.gt.sm);
|
|||
<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 {
|
||||
--_bg-color: var(--blue-0);
|
||||
--_color: var(--blue-6);
|
||||
background-color: var(--_bg-color);
|
||||
color: var(--_color);
|
||||
}
|
||||
|
||||
.noti-switch-off {
|
||||
--_color: var(--stone-6);
|
||||
color: var(--_color);
|
||||
}
|
||||
|
||||
.account-menu-down {
|
||||
& ::before {
|
||||
color: var(--foreground);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue