348 lines
9.4 KiB
Vue
348 lines
9.4 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, onMounted, ref, watch } from 'vue';
|
|
import { useQuasar } from 'quasar';
|
|
// import useOption from 'src/stores/option';
|
|
|
|
// const optionStore = useOption();
|
|
import { getName, getRealm, getRole, isLoggedIn } from 'src/services/keycloak';
|
|
|
|
const $q = useQuasar();
|
|
|
|
const themeRef = ref();
|
|
const userImage = ref<string>('');
|
|
const filterRole = ref<string[]>();
|
|
const inputFile = document.createElement('input');
|
|
inputFile.type = 'file';
|
|
inputFile.accept = 'image/*';
|
|
// const profileFile = ref<File | undefined>(undefined);
|
|
const options = ref([
|
|
{
|
|
icon: 'mdi-account',
|
|
label: 'editPersonalInfo',
|
|
value: 'op1',
|
|
color: 'grey',
|
|
},
|
|
{
|
|
icon: 'mdi-signature-freehand',
|
|
label: 'signature',
|
|
value: 'op2',
|
|
color: 'grey',
|
|
},
|
|
{
|
|
icon: 'mdi-brightness-6',
|
|
label: '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,
|
|
},
|
|
]);
|
|
|
|
const isDarkActive = computed(() => $q.dark.isActive);
|
|
// 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()) ?? '';
|
|
// });
|
|
watch(
|
|
() => isDarkActive.value,
|
|
() => {
|
|
if ($q.dark.isActive) {
|
|
themeMode.value[1].isActive = true;
|
|
themeMode.value[0].isActive = false;
|
|
} else {
|
|
themeMode.value[0].isActive = true;
|
|
themeMode.value[1].isActive = false;
|
|
}
|
|
},
|
|
);
|
|
|
|
onMounted(async () => {
|
|
// if (isLoggedIn()) {
|
|
// userImage.value = (await storageStore.getProfile()) ?? '';
|
|
// }
|
|
isDarkActive.value
|
|
? (themeMode.value[1].isActive = true)
|
|
: (themeMode.value[0].isActive = true);
|
|
|
|
const userRoles = getRole();
|
|
if (userRoles) {
|
|
filterRole.value = userRoles
|
|
.filter(
|
|
(role) =>
|
|
role !== 'default-roles-' + getRealm() &&
|
|
role !== 'offline_access' &&
|
|
role !== 'uma_authorization',
|
|
)
|
|
.map((role) =>
|
|
role.replace(/_/g, ' ').replace(/^./, (match) => match.toUpperCase()),
|
|
);
|
|
}
|
|
});
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<q-btn-dropdown
|
|
rounded
|
|
dense
|
|
flat
|
|
no-caps
|
|
content-style="border: 1px solid var(--border-color)"
|
|
: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="surface-1 bordered">
|
|
<img :src="userImage" v-if="userImage" />
|
|
<q-icon name="mdi-account" v-else size="sm" />
|
|
</q-avatar>
|
|
</q-item-section>
|
|
<q-item-section
|
|
v-if="$q.screen.gt.xs"
|
|
class="text-left q-pa-none q-px-md"
|
|
>
|
|
<q-item-label class="text-caption column">
|
|
<span
|
|
v-if="isLoggedIn()"
|
|
class="text-weight-bold q-pb-xs 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; color: var(--surface)">
|
|
{{ filterRole?.join(' | ') }}
|
|
</div>
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
|
|
<div no-padding class="row justify-center" style="width: 273.797px">
|
|
<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() : '';
|
|
}
|
|
"
|
|
>
|
|
<img :src="userImage" v-if="userImage" />
|
|
<q-icon name="mdi-account" v-else />
|
|
</q-avatar>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="text-subtitle2 q-mb-xs text-center"
|
|
style="margin-top: 58px"
|
|
>
|
|
<span v-if="isLoggedIn()">
|
|
{{ getName() }}
|
|
</span>
|
|
<span v-else>{{ 'Guest' }}</span>
|
|
</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">
|
|
<q-item
|
|
v-if="op.label !== '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 === 'mode'" />
|
|
<q-item
|
|
v-if="op.label === '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">
|
|
{{ isDarkActive ? $t('dark') : $t('light') }}
|
|
<q-icon name="mdi-chevron-right" />
|
|
</span>
|
|
</div>
|
|
</q-item-section>
|
|
|
|
<q-menu
|
|
ref="themeRef"
|
|
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="
|
|
() => {
|
|
mode.isActive ? '' : $q.dark.toggle();
|
|
}
|
|
"
|
|
>
|
|
<q-item-section>
|
|
<div class="row justify-between">
|
|
<span>
|
|
{{ $t(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
|
|
color="negative"
|
|
unelevated
|
|
class="q-ma-md app-text-negative"
|
|
:class="{ dark: $q.dark.isActive }"
|
|
:label="$t('logout')"
|
|
@click="$emit('logout')"
|
|
id="btn-logout"
|
|
v-close-popup
|
|
/>
|
|
<q-btn
|
|
v-else
|
|
no-caps
|
|
dense
|
|
color="primary"
|
|
unelevated
|
|
class="q-ma-md app-text-negative"
|
|
:label="$t('login')"
|
|
@click="$emit('login')"
|
|
id="btn-login"
|
|
v-close-popup
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-btn-dropdown>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.account-menu-down {
|
|
& ::before {
|
|
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>
|