fix: layout change lang btn & profile menu
This commit is contained in:
puriphatt
parent
d9913e9903
commit
c4c7fd0b16
3 changed files with 337 additions and 168 deletions
253
src/components/ProfileMenu.vue
Normal file
253
src/components/ProfileMenu.vue
Normal file
|
|
@ -0,0 +1,253 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
// import useOption from 'src/stores/option';
|
||||
|
||||
// const optionStore = useOption();
|
||||
import { getName, getRealm, getRole, isLoggedIn } from 'src/services/keycloak';
|
||||
|
||||
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',
|
||||
},
|
||||
]);
|
||||
|
||||
// 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()) ?? '';
|
||||
// });
|
||||
|
||||
onMounted(async () => {
|
||||
// if (isLoggedIn()) {
|
||||
// userImage.value = (await storageStore.getProfile()) ?? '';
|
||||
// }
|
||||
|
||||
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-mb-md">
|
||||
<div v-for="op in options" :key="op.label">
|
||||
<q-list :dense="true">
|
||||
<q-separator v-if="op.label === 'option'" />
|
||||
<q-item
|
||||
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-list>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
v-if="isLoggedIn()"
|
||||
no-caps
|
||||
dense
|
||||
color="negative"
|
||||
unelevated
|
||||
class="q-ma-sm 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-sm app-text-negative"
|
||||
:label="$t('login')"
|
||||
@click="$emit('login')"
|
||||
id="btn-login"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-btn-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue