feat(language): selected language is now saved in account.user.lang and persists in navigation
gitea/salix-front/pipeline/head This commit looks good
Details
gitea/salix-front/pipeline/head This commit looks good
Details
This commit is contained in:
parent
913be03e94
commit
05272cbbb2
|
@ -1,8 +1,10 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useState } from 'src/composables/useState';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import UserPanel from 'src/components/UserPanel.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const session = useSession();
|
||||
const state = useState();
|
||||
const user = state.getUser();
|
||||
|
@ -16,12 +18,19 @@ function onToggleDrawer() {
|
|||
<template>
|
||||
<q-header class="bg-dark" color="white" elevated bordered>
|
||||
<q-toolbar class="q-py-sm q-px-md">
|
||||
<q-btn flat @click="onToggleDrawer()" round dense icon="menu" />
|
||||
<q-btn flat @click="onToggleDrawer()" round dense icon="menu">
|
||||
<q-tooltip bottom anchor="bottom right">
|
||||
{{ t('globals.collapseMenu') }}
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
<router-link to="/">
|
||||
<q-btn flat round class="q-ml-xs" v-if="$q.screen.gt.xs">
|
||||
<q-avatar square size="md">
|
||||
<q-img src="~/assets/logo_icon.svg" alt="Logo" />
|
||||
</q-avatar>
|
||||
<q-tooltip bottom>
|
||||
{{ t('globals.backToDashboard') }}
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</router-link>
|
||||
<q-toolbar-title shrink class="text-weight-bold">Salix</q-toolbar-title>
|
||||
|
@ -40,16 +49,23 @@ function onToggleDrawer() {
|
|||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications" />
|
||||
<q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications">
|
||||
<q-tooltip bottom>
|
||||
{{ t('globals.notifications') }}
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn dense flat no-wrap>
|
||||
<q-avatar size="lg">
|
||||
<q-img
|
||||
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
||||
spinner-color="white"
|
||||
/>
|
||||
>
|
||||
</q-img>
|
||||
</q-avatar>
|
||||
<q-tooltip>Account</q-tooltip>
|
||||
<q-icon name="arrow_drop_down" size="s" />
|
||||
<q-tooltip bottom>
|
||||
{{ t('globals.userPanel') }}
|
||||
</q-tooltip>
|
||||
<UserPanel />
|
||||
</q-btn>
|
||||
</div>
|
||||
|
|
|
@ -28,14 +28,13 @@ const darkMode = computed({
|
|||
const user = state.getUser();
|
||||
const token = session.getToken();
|
||||
|
||||
if (user.value.darkMode) darkMode.value = user.value.darkMode;
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const stateRoles = state.getRoles().value;
|
||||
if (stateRoles.length === 0) {
|
||||
await role.fetch();
|
||||
}
|
||||
updatePreferences();
|
||||
} catch (error) {
|
||||
quasar.notify({
|
||||
message: t('errors.statusUnauthorized'),
|
||||
|
@ -45,6 +44,15 @@ onMounted(async () => {
|
|||
}
|
||||
});
|
||||
|
||||
function updatePreferences() {
|
||||
if (user.value.darkMode) {
|
||||
darkMode.value = user.value.darkMode;
|
||||
}
|
||||
if (user.value.lang) {
|
||||
locale.value = user.value.lang;
|
||||
}
|
||||
}
|
||||
|
||||
async function saveDarkMode(value) {
|
||||
const query = `/api/UserConfigs/${user.value.id}`;
|
||||
await axios.patch(query, {
|
||||
|
@ -67,9 +75,9 @@ function logout() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-menu>
|
||||
<q-menu anchor="bottom left">
|
||||
<div class="row no-wrap q-pa-md">
|
||||
<div class="column">
|
||||
<div class="column panel">
|
||||
<div class="text-h6 q-mb-md">{{ t('components.userPanel.settings') }}</div>
|
||||
<q-toggle
|
||||
v-model="locale"
|
||||
|
@ -83,16 +91,16 @@ function logout() {
|
|||
<q-toggle
|
||||
v-model="darkMode"
|
||||
@update:model-value="saveDarkMode"
|
||||
:label="t(`globals.theme`)"
|
||||
checked-icon="dark_mode"
|
||||
color="orange"
|
||||
unchecked-icon="light_mode"
|
||||
/>
|
||||
<q-btn color="orange" outline size="sm" label="Settings" icon="settings" />
|
||||
</div>
|
||||
|
||||
<q-separator vertical inset class="q-mx-lg" />
|
||||
|
||||
<div class="column items-center" style="min-width: 150px">
|
||||
<div class="column items-center panel">
|
||||
<q-avatar size="80px">
|
||||
<q-img
|
||||
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
||||
|
@ -105,8 +113,22 @@ function logout() {
|
|||
</div>
|
||||
<div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.name }}</div>
|
||||
|
||||
<q-btn color="orange" flat label="Log Out" size="sm" icon="logout" @click="logout()" v-close-popup />
|
||||
<q-btn
|
||||
color="orange"
|
||||
flat
|
||||
:label="t('globals.logOut')"
|
||||
size="sm"
|
||||
icon="logout"
|
||||
@click="logout()"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-menu>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel {
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -4,6 +4,12 @@ export default {
|
|||
es: 'Spanish',
|
||||
en: 'English',
|
||||
},
|
||||
collapseMenu: 'Collapse left menu',
|
||||
backToDashboard: 'Return to dashboard',
|
||||
notifications: 'Notifications',
|
||||
userPanel: 'User panel',
|
||||
theme: 'Theme',
|
||||
logOut: 'Log out',
|
||||
},
|
||||
errors: {
|
||||
statusUnauthorized: 'Access denied',
|
||||
|
|
|
@ -4,6 +4,12 @@ export default {
|
|||
es: 'Español',
|
||||
en: 'Inglés',
|
||||
},
|
||||
collapseMenu: 'Contraer menú lateral',
|
||||
backToDashboard: 'Volver al tablón',
|
||||
notifications: 'Notificaciones',
|
||||
userPanel: 'Panel de usuario',
|
||||
theme: 'Tema',
|
||||
logOut: 'Cerrar sesión',
|
||||
},
|
||||
errors: {
|
||||
statusUnauthorized: 'Acceso denegado',
|
||||
|
|
Loading…
Reference in New Issue