From 05272cbbb22a63acb9b95a0402638925fc85a24b Mon Sep 17 00:00:00 2001
From: carlosjr <carlosjr@verdnatura.es>
Date: Wed, 20 Apr 2022 16:23:03 +0200
Subject: [PATCH] feat(language): selected language is now saved in
 account.user.lang and persists  in navigation

---
 src/components/Navbar.vue    | 24 ++++++++++++++++++++----
 src/components/UserPanel.vue | 36 +++++++++++++++++++++++++++++-------
 src/i18n/en/index.js         |  6 ++++++
 src/i18n/es/index.js         |  6 ++++++
 4 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 778fda213..53bf6ca14 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -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>
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index 28c99758a..a83774884 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -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>
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 5f2ad232d..a80db2882 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -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',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 79bd9f448..14353a5a6 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -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',