412 lines
11 KiB
Vue
412 lines
11 KiB
Vue
<script lang="ts" setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { useQuasar } from 'quasar';
|
|
|
|
import { getName, getRole, isLoggedIn } from 'src/services/keycloak';
|
|
import { initTheme, setTheme, Theme } from 'src/utils/ui';
|
|
|
|
const $q = useQuasar();
|
|
|
|
const filterRole = ref<string[]>();
|
|
|
|
defineProps<{
|
|
userImage?: string;
|
|
gender?: string;
|
|
}>();
|
|
|
|
const inputFile = document.createElement('input');
|
|
inputFile.type = 'file';
|
|
inputFile.accept = 'image/*';
|
|
|
|
const options = [
|
|
{
|
|
icon: 'mdi-account',
|
|
label: 'menu.profile.editPersonalInfo',
|
|
value: 'updateProfile',
|
|
color: 'grey',
|
|
disabled: true,
|
|
},
|
|
{
|
|
icon: 'mdi-signature-freehand',
|
|
label: 'menu.profile.signature',
|
|
value: 'signature',
|
|
color: 'grey',
|
|
disabled: true,
|
|
},
|
|
{
|
|
icon: 'mdi-brightness-6',
|
|
label: 'menu.profile.mode',
|
|
value: 'mode',
|
|
color: 'grey',
|
|
disabled: false,
|
|
},
|
|
];
|
|
|
|
const themeMode = ref([
|
|
{
|
|
label: 'light',
|
|
value: Theme.Light,
|
|
},
|
|
{
|
|
label: 'dark',
|
|
value: Theme.Dark,
|
|
},
|
|
{
|
|
label: 'baseOnDevice',
|
|
value: Theme.Auto,
|
|
},
|
|
]);
|
|
|
|
const theme = ref<Theme>();
|
|
|
|
onMounted(async () => {
|
|
theme.value = initTheme();
|
|
|
|
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>
|
|
<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.value"
|
|
:id="op.value"
|
|
>
|
|
<q-item
|
|
v-if="op.value !== 'mode'"
|
|
clickable
|
|
:disable="op.disabled"
|
|
:id="`btn-${op.value}`"
|
|
@click="$emit(op.value)"
|
|
>
|
|
<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.value === 'mode'" />
|
|
<q-item
|
|
v-if="op.value === 'mode'"
|
|
clickable
|
|
:id="`btn-${op.value}`"
|
|
@click="$emit(op.value)"
|
|
>
|
|
<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.${theme === Theme.Auto ? 'baseOnDevice' : theme}`,
|
|
)
|
|
}}
|
|
<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"
|
|
:touch-position="$q.screen.lt.sm"
|
|
>
|
|
<div v-for="(mode, index) in themeMode" :key="index">
|
|
<q-item clickable @click="theme = setTheme(mode.value)">
|
|
<q-item-section>
|
|
<div class="row justify-between">
|
|
<span>
|
|
{{ $t(`general.${mode.label}`) }}
|
|
</span>
|
|
<q-icon
|
|
v-if="mode.value === theme"
|
|
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>
|
|
</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>
|