Merge pull request 'feat(darkMode): current darkMode value is now saved in vn.userConfig.darkMode' (#12) from 3904-user_dark_mode into dev

Reviewed-on: #12

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>

src/components/UserPanel.vue

@@ -3,6 +3,7 @@ import { onMounted, computed } from 'vue';
 import { Dark, useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import axios from 'axios';
 
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
@@ -29,10 +30,11 @@ const token = session.getToken();
 
 onMounted(async () => {
     try {
-        const stateRoles = state.getRoles().value
+        const stateRoles = state.getRoles().value;
         if (stateRoles.length === 0) {
             await role.fetch();
         }
+        updatePreferences();
     } catch (error) {
         quasar.notify({
             message: t('errors.statusUnauthorized'),
@@ -42,39 +44,63 @@ 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, {
+        darkMode: value,
+    });
+    user.value.darkMode = value;
+}
+
+async function saveLanguage(value) {
+    const query = `/api/Accounts/${user.value.id}`;
+    await axios.patch(query, {
+        lang: value,
+    });
+}
+
 function logout() {
     session.destroy();
     router.push('/login');
 }
-
 </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"
+                    @update:model-value="saveLanguage"
                     :label="t(`globals.lang['${locale}']`)"
                     icon="public"
                     color="orange"
                     false-value="es"
                     true-value="en"
-                    v-model="locale"
                 />
                 <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}`"
@@ -90,7 +116,7 @@ function logout() {
                 <q-btn
                     color="orange"
                     flat
-                    label="Log Out"
+                    :label="t('globals.logOut')"
                     size="sm"
                     icon="logout"
                     @click="logout()"
@@ -100,3 +126,9 @@ function logout() {
         </div>
     </q-menu>
 </template>
+
+<style lang="scss" scoped>
+.panel {
+    width: 150px;
+}
+</style>

src/components/__tests__/UserPanel.spec.js

@@ -10,38 +10,47 @@ jest.mock('vue-router', () => ({
     }),
 }));
 
-describe('UserPanel', () => {
-    describe('onMounted', () => {
-        it.only('should define the user into state', async () => {
-            const userMock = {
-                user: {
-                    id: 1,
-                    name: 'myName',
-                    nickname: 'myNickName'
-                },
-                roles: []
-            }
-            jest.spyOn(axios, 'get').mockResolvedValue({ data: userMock });
-            const { vm } = createWrapper(UserPanel);
+describe('UserPanel onMounted()', () => {
+    it('should define the user into state', async () => {
+        const userMock = {
+            user: {
+                id: 1,
+                name: 'myName',
+                nickname: 'myNickName',
+                lang: 'en',
+                userConfig: {
+                    darkMode: 'false'
+                }
+            },
+            roles: []
+        }
+        const expectedUserData = {
+            id: 1,
+            name: 'myName',
+            nickname: 'myNickName',
+            lang: 'en',
+            darkMode: 'false'
+        }
 
-            await flushPromises()
+        jest.spyOn(axios, 'get').mockResolvedValue({ data: userMock });
+        const { vm } = createWrapper(UserPanel);
 
-            const expectedUser = expect.objectContaining(userMock.user)
-            expect(vm.state.getUser().value).toEqual(expectedUser);
-        });
+        await flushPromises()
 
-        it('should logout and notify the expected error', async () => {
-            jest.spyOn(axios, 'get').mockRejectedValue(new Error('error'));
+        expect(vm.state.getUser().value).toEqual(expectedUserData);
+    });
 
-            const { vm } = createWrapper(UserPanel);
+    it('should logout and notify the expected error', async () => {
+        jest.spyOn(axios, 'get').mockRejectedValue(new Error('error'));
 
-            jest.spyOn(vm.quasar, 'notify');
+        const { vm } = createWrapper(UserPanel);
 
-            await flushPromises()
+        jest.spyOn(vm.quasar, 'notify');
 
-            expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
-                { 'type': 'negative' }
-            ));
-        });
+        await flushPromises()
+
+        expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
+            { 'type': 'negative' }
+        ));
     });
 });

src/composables/__tests__/useRole.spec.js

@@ -19,10 +19,25 @@ describe('useRole', () => {
                     }
                 }
             ];
-            const expectedUser = { id: 1 }
+            const fetchedUser = {
+                id: 999,
+                name: `T'Challa`,
+                nickname: 'Black Panther',
+                lang: 'en',
+                userConfig: {
+                    darkMode: false,
+                }
+            }
+            const expectedUser = {
+                id: 999,
+                name: `T'Challa`,
+                nickname: 'Black Panther',
+                lang: 'en',
+                darkMode: false,
+            }
             const expectedRoles = ['salesPerson', 'admin']
             jest.spyOn(axios, 'get').mockResolvedValue({
-                data: { roles: rolesData, user: expectedUser }
+                data: { roles: rolesData, user: fetchedUser }
             });
 
             jest.spyOn(role.state, 'setUser');

src/composables/__tests__/useSession.spec.js

@@ -36,11 +36,15 @@ describe('session', () => {
                 id: 999,
                 name: `T'Challa`,
                 nickname: 'Black Panther',
+                lang: 'en',
+                darkMode: false,
             }
             const expectedUser = {
                 id: 0,
                 name: '',
                 nickname: '',
+                lang: '',
+                darkMode: null,
             }
             let user = state.getUser();
 
@@ -60,20 +64,29 @@ describe('session', () => {
     });
 
     describe('login', () => {
-        it('should fetch the user roles and then set token in the sessionStorage', async () => {
-            const rolesData = [
-                {
-                    role: {
-                        name: 'salesPerson'
-                    }
-                },
-                {
-                    role: {
-                        name: 'admin'
-                    }
+        const expectedUser = {
+            id: 999,
+            name: `T'Challa`,
+            nickname: 'Black Panther',
+            lang: 'en',
+            userConfig: {
+                darkMode: false,
+            }
+        }
+        const rolesData = [
+            {
+                role: {
+                    name: 'salesPerson'
                 }
-            ];
-            const expectedUser = { id: 1 }
+            },
+            {
+                role: {
+                    name: 'admin'
+                }
+            }
+        ];
+
+        it('should fetch the user roles and then set token in the sessionStorage', async () => {
             const expectedRoles = ['salesPerson', 'admin']
             jest.spyOn(axios, 'get').mockResolvedValue({
                 data: { roles: rolesData, user: expectedUser }
@@ -96,20 +109,6 @@ describe('session', () => {
         });
 
         it('should fetch the user roles and then set token in the localStorage', async () => {
-
-            const rolesData = [
-                {
-                    role: {
-                        name: 'salesPerson'
-                    }
-                },
-                {
-                    role: {
-                        name: 'admin'
-                    }
-                }
-            ];
-            const expectedUser = { id: 1 }
             const expectedRoles = ['salesPerson', 'admin']
             jest.spyOn(axios, 'get').mockResolvedValue({
                 data: { roles: rolesData, user: expectedUser }

src/composables/useRole.js

@@ -8,7 +8,14 @@ export function useRole() {
         const { data } = await axios.get('/api/accounts/acl');
         const roles = data.roles.map(userRoles => userRoles.role.name);
 
-        state.setUser(data.user);
+        const userData = {
+            id: data.user.id,
+            name: data.user.name,
+            nickname: data.user.nickname,
+            lang: data.user.lang || 'es',
+            darkMode: data.user.userConfig.darkMode,
+        }
+        state.setUser(userData);
         state.setRoles(roles);
     }
 

src/composables/useSession.js

@@ -30,6 +30,8 @@ export function useSession() {
             id: 0,
             name: '',
             nickname: '',
+            lang: '',
+            darkMode: null,
         });
     }
 

src/composables/useState.js

@@ -4,6 +4,8 @@ const user = ref({
     id: 0,
     name: '',
     nickname: '',
+    lang: '',
+    darkMode: null,
 });
 
 const roles = ref([]);
@@ -17,6 +19,8 @@ export function useState() {
                 id: user.value.id,
                 name: user.value.name,
                 nickname: user.value.nickname,
+                lang: user.value.lang,
+                darkMode: user.value.darkMode,
             };
         });
     }
@@ -26,6 +30,8 @@ export function useState() {
             id: data.id,
             name: data.name,
             nickname: data.nickname,
+            lang: data.lang,
+            darkMode: data.darkMode,
         };
     }
 

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',

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',

src/pages/Login/Login.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { computed, ref } from 'vue';
-import { Dark, useQuasar } from 'quasar';
+import { ref } from 'vue';
+import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
@@ -10,21 +10,12 @@ import { useSession } from 'src/composables/useSession';
 const quasar = useQuasar();
 const session = useSession();
 const router = useRouter();
-const { t, locale } = useI18n();
+const { t } = useI18n();
 
 const username = ref('');
 const password = ref('');
 const keepLogin = ref(true);
 
-const darkMode = computed({
-    get() {
-        return Dark.isActive;
-    },
-    set(value) {
-        Dark.set(value);
-    },
-});
-
 async function onSubmit() {
     try {
         const { data } = await axios.post('/api/accounts/login', {
@@ -66,36 +57,11 @@ async function onSubmit() {
 
 <template>
     <q-layout>
-        <q-header class="transparent">
-            <q-toolbar>
-                <q-space></q-space>
-                <q-toggle
-                    :label="t(`globals.lang['${locale}']`)"
-                    icon="public"
-                    color="orange"
-                    false-value="es"
-                    true-value="en"
-                    v-model="locale"
-                />
-                <q-toggle
-                    v-model="darkMode"
-                    checked-icon="dark_mode"
-                    color="orange"
-                    unchecked-icon="light_mode"
-                />
-            </q-toolbar>
-        </q-header>
         <q-page-container>
             <q-page>
                 <div id="login">
                     <q-card class="login q-pa-xl">
-                        <q-img
-                            src="~/assets/logo.svg"
-                            alt="Logo"
-                            fit="contain"
-                            :ratio="16 / 9"
-                            class="q-mb-md"
-                        />
+                        <q-img src="~/assets/logo.svg" alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
                         <q-form @submit="onSubmit" class="q-gutter-md">
                             <q-input
                                 filled
@@ -103,9 +69,7 @@ async function onSubmit() {
                                 v-model="username"
                                 :label="t('login.username')"
                                 lazy-rules
-                                :rules="[
-                                    (val) => (val && val.length > 0) || 'Please type something',
-                                ]"
+                                :rules="[(val) => (val && val.length > 0) || 'Please type something']"
                             />
                             <q-input
                                 filled
@@ -114,15 +78,9 @@ async function onSubmit() {
                                 v-model="password"
                                 :label="t('login.password')"
                                 lazy-rules
-                                :rules="[
-                                    (val) => (val && val.length > 0) || 'Please type something',
-                                ]"
-                            />
-                            <q-toggle
-                                v-model="keepLogin"
-                                :label="t('login.keepLogin')"
-                                color="orange"
+                                :rules="[(val) => (val && val.length > 0) || 'Please type something']"
                             />
+                            <q-toggle v-model="keepLogin" :label="t('login.keepLogin')" color="orange" />
 
                             <div>
                                 <q-btn :label="t('login.submit')" type="submit" color="orange" />

src/pages/Login/__tests__/Login.spec.js

@@ -18,8 +18,17 @@ describe('Login', () => {
     });
 
     it('should successfully set the token into session', async () => {
+        const expectedUser = {
+            id: 999,
+            name: `T'Challa`,
+            nickname: 'Black Panther',
+            lang: 'en',
+            userConfig: {
+                darkMode: false,
+            }
+        }
         jest.spyOn(axios, 'post').mockResolvedValue({ data: { token: 'token' } });
-        jest.spyOn(axios, 'get').mockResolvedValue({ data: { roles: [], user: { id: 1 } } });
+        jest.spyOn(axios, 'get').mockResolvedValue({ data: { roles: [], user: expectedUser } });
         jest.spyOn(vm.quasar, 'notify')
 
         expect(vm.session.getToken()).toEqual('');