wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

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: verdnatura/salix-front#12
This commit is contained in:
Carlos Jimenez Ruiz 2022-04-20 14:28:20 +00:00
parent 16020e9c16 05272cbbb2
commit 25244272fd
12 changed files with 184 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Navbar.vue
View File

@ -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>

50
src/components/UserPanel.vue
View File

@ -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>

61
src/components/__tests__/UserPanel.spec.js
View File

@ -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' }
));
});
});

19
src/composables/__tests__/useRole.spec.js
View File

@ -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');

53
src/composables/__tests__/useSession.spec.js
View File

@ -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 }

9
src/composables/useRole.js
View File

@ -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);
}

2
src/composables/useSession.js
View File

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

6
src/composables/useState.js
View File

@ -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,
};
}

6
src/i18n/en/index.js
View File

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

6
src/i18n/es/index.js
View File

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

56
src/pages/Login/Login.vue
View File

@ -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" />

11
src/pages/Login/__tests__/Login.spec.js
View File

@ -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('');