493 lines
14 KiB
Vue
493 lines
14 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
|
import { useQuasar } from 'quasar';
|
|
// import useOption from 'stores/option';
|
|
|
|
// const optionStore = useOption();
|
|
import { getName, getRealm, getRole, isLoggedIn } from 'src/services/keycloak';
|
|
|
|
const $q = useQuasar();
|
|
|
|
const filterRole = ref<string[]>();
|
|
|
|
defineProps<{
|
|
userImage?: string;
|
|
gender?: string;
|
|
}>();
|
|
|
|
const inputFile = document.createElement('input');
|
|
inputFile.type = 'file';
|
|
inputFile.accept = 'image/*';
|
|
// const profileFile = ref<File | undefined>(undefined);
|
|
|
|
const currentTheme = ref();
|
|
const options = ref([
|
|
{
|
|
icon: 'mdi-account',
|
|
label: 'menu.profile.editPersonalInfo',
|
|
value: 'op1',
|
|
color: 'grey',
|
|
},
|
|
{
|
|
icon: 'mdi-signature-freehand',
|
|
label: 'menu.profile.signature',
|
|
value: 'op2',
|
|
color: 'grey',
|
|
},
|
|
{
|
|
icon: 'mdi-brightness-6',
|
|
label: 'menu.profile.mode',
|
|
value: 'op3',
|
|
color: 'grey',
|
|
},
|
|
]);
|
|
|
|
const themeMode = ref([
|
|
{
|
|
label: 'light',
|
|
value: 'light',
|
|
isActive: false,
|
|
},
|
|
{
|
|
label: 'dark',
|
|
value: 'dark',
|
|
isActive: false,
|
|
},
|
|
{
|
|
label: 'baseOnDevice',
|
|
value: 'baseOnDevice',
|
|
isActive: false,
|
|
},
|
|
]);
|
|
|
|
// inputFile.addEventListener('change', async (e) => {
|
|
// profileFile.value = await (e.currentTarget as HTMLInputElement).files?.[0];
|
|
// if (profileFile.value) {
|
|
// await storageStore.uploadProfile(profileFile.value);
|
|
// }
|
|
// userImage.value = (await storageStore.getProfile()) ?? '';
|
|
// });
|
|
|
|
function changeMode(mode: string) {
|
|
if (mode === 'light') {
|
|
localStorage.setItem('currentTheme', 'light');
|
|
themeMode.value[0].isActive = true;
|
|
themeMode.value[1].isActive = false;
|
|
themeMode.value[2].isActive = false;
|
|
currentTheme.value = 'light';
|
|
$q.dark.set(false);
|
|
return;
|
|
}
|
|
|
|
if (mode === 'dark') {
|
|
localStorage.setItem('currentTheme', 'dark');
|
|
themeMode.value[0].isActive = false;
|
|
themeMode.value[1].isActive = true;
|
|
themeMode.value[2].isActive = false;
|
|
currentTheme.value = 'dark';
|
|
$q.dark.set(true);
|
|
return;
|
|
}
|
|
|
|
if (mode === 'baseOnDevice') {
|
|
localStorage.setItem('currentTheme', 'baseOnDevice');
|
|
themeMode.value[0].isActive = false;
|
|
themeMode.value[1].isActive = false;
|
|
themeMode.value[2].isActive = true;
|
|
currentTheme.value = 'baseOnDevice';
|
|
|
|
if (
|
|
window.matchMedia &&
|
|
window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
) {
|
|
$q.dark.set(true);
|
|
} else {
|
|
$q.dark.set(false);
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
function themeChange() {
|
|
if (themeMode.value[2].isActive) changeMode('baseOnDevice');
|
|
}
|
|
|
|
onUnmounted(() => {
|
|
window
|
|
.matchMedia('(prefers-color-scheme: dark)')
|
|
.removeEventListener('change', themeChange);
|
|
});
|
|
|
|
onMounted(async () => {
|
|
window
|
|
.matchMedia('(prefers-color-scheme: dark)')
|
|
.addEventListener('change', themeChange);
|
|
// if (isLoggedIn()) {
|
|
// userImage.value = (await storageStore.getProfile()) ?? '';
|
|
// }
|
|
currentTheme.value = localStorage.getItem('currentTheme');
|
|
if (
|
|
currentTheme.value === 'light' ||
|
|
currentTheme.value === 'dark' ||
|
|
currentTheme.value === 'baseOnDevice'
|
|
) {
|
|
changeMode(currentTheme.value);
|
|
} else {
|
|
changeMode('light');
|
|
}
|
|
|
|
const userRoles = getRole();
|
|
if (userRoles) {
|
|
filterRole.value = userRoles
|
|
.filter(
|
|
(role) =>
|
|
!role.includes('default-roles') &&
|
|
role !== 'offline_access' &&
|
|
role !== 'uma_authorization',
|
|
)
|
|
.map((role) =>
|
|
role
|
|
.replace(/_/g, ' ')
|
|
.toLowerCase()
|
|
.split(' ')
|
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
.join(' '),
|
|
);
|
|
}
|
|
});
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<q-btn
|
|
rounded
|
|
dense
|
|
flat
|
|
no-caps
|
|
color="dark"
|
|
class="q-pa-none account-menu-down dropdown-menu"
|
|
>
|
|
<div class="row items-center">
|
|
<div class="q-pa-none">
|
|
<q-avatar
|
|
class="surface-1 bordered"
|
|
:size="$q.screen.lt.sm ? '30px' : '40px'"
|
|
>
|
|
<q-img
|
|
:ratio="1"
|
|
class="text-center"
|
|
:src="userImage"
|
|
v-if="userImage"
|
|
>
|
|
<template #error>
|
|
<div
|
|
class="no-padding full-width full-height flex items-center justify-center"
|
|
style="
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(43, 137, 223, 1) 0%,
|
|
rgba(230, 51, 81, 1) 100%
|
|
);
|
|
"
|
|
>
|
|
<q-img
|
|
v-if="gender"
|
|
:ratio="1"
|
|
:src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
|
|
></q-img>
|
|
<q-icon
|
|
v-else
|
|
name="mdi-account-outline"
|
|
color="white"
|
|
:size="$q.screen.lt.sm ? 'xs' : 'sm'"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</q-img>
|
|
<q-icon
|
|
v-else
|
|
name="mdi-account-outline"
|
|
:size="$q.screen.lt.sm ? 'xs' : 'sm'"
|
|
/>
|
|
</q-avatar>
|
|
</div>
|
|
|
|
<div
|
|
class="text-left q-px-md"
|
|
v-if="$q.screen.gt.sm"
|
|
style="color: var(--foreground)"
|
|
>
|
|
<div class="text-caption column">
|
|
<span
|
|
v-if="isLoggedIn()"
|
|
class="text-weight-bold ellipsis"
|
|
style="max-width: 9vw"
|
|
>
|
|
{{ getName() }}
|
|
<q-tooltip>
|
|
{{ getName() }}
|
|
</q-tooltip>
|
|
</span>
|
|
<span
|
|
v-else
|
|
class="text-weight-bold q-pb-xs ellipsis"
|
|
style="max-width: 9vw"
|
|
>
|
|
{{ 'Guest' }}
|
|
<q-tooltip>
|
|
{{ 'Guest' }}
|
|
</q-tooltip>
|
|
</span>
|
|
|
|
<div style="font-size: 11px">
|
|
{{ filterRole?.join(' | ') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="$q.screen.gt.sm" class="text-right">
|
|
<q-icon name="mdi-chevron-down" />
|
|
</div>
|
|
</div>
|
|
|
|
<q-menu :offset="[5, 10]" max-width="300px">
|
|
<div
|
|
no-padding
|
|
class="row justify-center bordered rounded"
|
|
style="overflow: hidden"
|
|
>
|
|
<div class="column col-12 items-center">
|
|
<div
|
|
class="full-width row justify-center"
|
|
style="position: relative"
|
|
>
|
|
<div
|
|
class="full-width account-cover"
|
|
:class="{ dark: $q.dark.isActive }"
|
|
></div>
|
|
<div class="avartar-border">
|
|
<q-avatar
|
|
id="changeAvatar"
|
|
size="72px"
|
|
class="surface-1 bordered"
|
|
:class="{ 'hover-profile': isLoggedIn() }"
|
|
@click="
|
|
() => {
|
|
isLoggedIn() ? inputFile.click() : '';
|
|
}
|
|
"
|
|
>
|
|
<q-img
|
|
:ratio="1"
|
|
class="text-center"
|
|
:src="userImage"
|
|
v-if="userImage"
|
|
>
|
|
<template #error>
|
|
<div
|
|
class="no-padding full-width full-height flex items-center justify-center"
|
|
style="
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(43, 137, 223, 1) 0%,
|
|
rgba(230, 51, 81, 1) 100%
|
|
);
|
|
"
|
|
>
|
|
<q-img
|
|
v-if="gender"
|
|
:ratio="1"
|
|
:src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
|
|
></q-img>
|
|
<q-icon
|
|
v-else
|
|
name="mdi-account-outline"
|
|
color="white"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</q-img>
|
|
<q-icon name="mdi-account-outline" v-else />
|
|
</q-avatar>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="text-subtitle2 q-mb-xs text-center full-width ellipsis q-px-md"
|
|
style="margin-top: 58px"
|
|
>
|
|
<span v-if="isLoggedIn()">
|
|
{{ getName() }}
|
|
</span>
|
|
<span v-else>{{ 'Guest' }}</span>
|
|
<q-tooltip>
|
|
<span v-if="isLoggedIn()">
|
|
{{ getName() }}
|
|
</span>
|
|
<span v-else>{{ 'Guest' }}</span>
|
|
</q-tooltip>
|
|
</div>
|
|
<div
|
|
class="badge q-px-sm q-mb-md text-caption"
|
|
:class="{ dark: $q.dark.isActive }"
|
|
>
|
|
{{ filterRole?.join(' | ') }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column col-12">
|
|
<q-separator />
|
|
<div class="column justify-center">
|
|
<q-list
|
|
:dense="true"
|
|
v-for="op in options"
|
|
:key="op.label"
|
|
:id="op.label"
|
|
>
|
|
<q-item
|
|
v-if="op.label !== 'menu.profile.mode'"
|
|
clickable
|
|
:id="`btn-${op.label}`"
|
|
@click="$emit(op.label)"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
|
</q-item-section>
|
|
<q-item-section class="q-py-sm">
|
|
{{ $t(op.label) }}
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator v-if="op.label === 'menu.profile.mode'" />
|
|
<q-item
|
|
v-if="op.label === 'menu.profile.mode'"
|
|
clickable
|
|
:id="`btn-${op.label}`"
|
|
@click="$emit(op.label)"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
|
</q-item-section>
|
|
<q-item-section class="q-py-sm">
|
|
<div class="row justify-between">
|
|
<span>
|
|
{{ $t(op.label) }}
|
|
</span>
|
|
<span class="app-text-muted-2">
|
|
{{ $t(`general.${currentTheme}`) }}
|
|
<q-icon name="mdi-chevron-right" />
|
|
</span>
|
|
</div>
|
|
</q-item-section>
|
|
|
|
<q-menu
|
|
class="bordered rounded"
|
|
anchor="top right"
|
|
self="top left"
|
|
max-width="200"
|
|
:offset="[10, 0]"
|
|
style="width: 160px"
|
|
>
|
|
<div v-for="(mode, index) in themeMode" :key="index">
|
|
<q-item
|
|
clickable
|
|
@click="
|
|
() => {
|
|
changeMode(mode.value);
|
|
}
|
|
"
|
|
>
|
|
<q-item-section>
|
|
<div class="row justify-between">
|
|
<span>
|
|
{{ $t(`general.${mode.label}`) }}
|
|
</span>
|
|
<q-icon v-if="mode.isActive" name="mdi-check" />
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
</q-menu>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
<q-separator />
|
|
<q-btn
|
|
v-if="isLoggedIn()"
|
|
no-caps
|
|
dense
|
|
unelevated
|
|
class="q-ma-md app-text-negative"
|
|
:class="{ dark: $q.dark.isActive }"
|
|
:label="$t('general.logout')"
|
|
@click="$emit('logout')"
|
|
id="btn-logout"
|
|
style="background-color: hsla(var(--negative-bg) / 0.1)"
|
|
v-close-popup
|
|
/>
|
|
<q-btn
|
|
v-else
|
|
no-caps
|
|
dense
|
|
color="primary"
|
|
unelevated
|
|
class="q-ma-md app-text-negative"
|
|
:label="$t('general.login')"
|
|
@click="$emit('login')"
|
|
id="btn-login"
|
|
v-close-popup
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-menu>
|
|
</q-btn>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.account-menu-down {
|
|
& ::before:not(.q-icon) {
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
|
|
.avartar-border {
|
|
margin-top: 24px;
|
|
border: 5px solid var(--surface-1);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
}
|
|
|
|
.account-cover {
|
|
height: 65px;
|
|
background-color: var(--indigo-0);
|
|
|
|
&.dark {
|
|
background-color: var(--surface-3);
|
|
}
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
border-radius: var(--radius-6);
|
|
background-color: var(--indigo-0);
|
|
text-wrap: nowrap;
|
|
|
|
&.dark {
|
|
background-color: var(--surface-3);
|
|
}
|
|
}
|
|
|
|
.logout-btn {
|
|
color: hsl(var(--negative-bg));
|
|
background-color: hsl(var(--stone-3-hsl));
|
|
|
|
&.dark {
|
|
background-color: transparent;
|
|
border: 1px solid hsl(var(--negative-bg));
|
|
}
|
|
}
|
|
|
|
.hover-profile:hover {
|
|
opacity: 0.7;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|