verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 82 Releases Wiki Activity

user panel refactor

This commit is contained in:
Carlos Jimenez Ruiz 2022-03-01 16:58:30 +01:00
parent f423cc2a1d
commit 5d6cdcb6df
2 changed files with 66 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/Login/Login.vue
View File

@ -109,7 +109,7 @@ export default class Login extends Vue {
message: this.$t('login.loginSuccess'), message: this.$t('login.loginSuccess'),
type: 'positive', type: 'positive',
}); });
this.$router.push('/dashboard'); this.$router.push('/');
}) })
.catch(() => .catch(() =>
this.$q.notify({ this.$q.notify({

108
src/views/Main/Main.vue
View File

@ -2,13 +2,16 @@
<q-layout> <q-layout>
<q-header class="bg-darker" color="white" elevated> <q-header class="bg-darker" color="white" elevated>
<q-toolbar> <q-toolbar>
<q-btn flat round dense icon="menu" /> <q-btn flat @click="drawer = !drawer" round dense icon="menu" />
<q-toolbar-title>Salix</q-toolbar-title> <q-toolbar-title>Salix</q-toolbar-title>
<q-space></q-space> <q-space></q-space>
<q-btn dense flat no-wrap> <q-btn dense flat no-wrap>
<q-avatar size="lg" color="orange"> <q-avatar size="lg">
<img :src="`/api/Images/user/160x160/${id}/download?access_token=${token}`" alt="" /> <q-img
:src="`/api/Images/user/160x160/${id}/download?access_token=${token}`"
spinner-color="white"
/>
</q-avatar> </q-avatar>
<q-tooltip>Account</q-tooltip> <q-tooltip>Account</q-tooltip>
<q-icon name="arrow_drop_down" size="s" /> <q-icon name="arrow_drop_down" size="s" />
@ -17,8 +20,20 @@
<div class="row no-wrap q-pa-md"> <div class="row no-wrap q-pa-md">
<div class="column"> <div class="column">
<div class="text-h6 q-mb-md">Settings</div> <div class="text-h6 q-mb-md">Settings</div>
<q-toggle label="Dark mode" /> <q-toggle
<q-toggle label="Language" class="q-mb-md" /> :label="$t(`globals.lang['${language}']`)"
icon="public"
color="orange"
false-value="es"
true-value="en"
v-model="language"
/>
<q-toggle
v-model="mode"
checked-icon="dark_mode"
color="orange"
unchecked-icon="light_mode"
/>
<q-btn color="orange" outline size="sm" label="Settings" icon="settings" /> <q-btn color="orange" outline size="sm" label="Settings" icon="settings" />
</div> </div>
@ -26,17 +41,17 @@
<q-separator vertical inset class="q-mx-lg" /> <q-separator vertical inset class="q-mx-lg" />
<div class="column items-center" style="min-width: 150px"> <div class="column items-center" style="min-width: 150px">
<q-avatar color="orange" size="80px"> <q-avatar size="80px">
<img <q-img
:src="`/api/Images/user/160x160/${id}/download?access_token=${token}`" :src="`/api/Images/user/160x160/${id}/download?access_token=${token}`"
alt="" spinner-color="white"
/> />
</q-avatar> </q-avatar>
<div class="text-subtitle1 q-mt-md"> <div class="text-subtitle1 q-mt-md">
<strong>{{ nickname }}</strong> <strong>{{ nickname }}</strong>
</div> </div>
<div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ nickname }}</div> <div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ username }}</div>
<q-btn <q-btn
color="orange" color="orange"
@ -50,43 +65,19 @@
</div> </div>
</div> </div>
</q-menu> </q-menu>
<!-- <q-menu auto-close>
<q-list dense>
<q-item>
<q-item-section>
<div>
<strong>{{ nickname }}</strong>
</div>
</q-item-section>
</q-item>
<q-separator />
<q-item clickable>
<q-item-section>Your profile</q-item-section>
</q-item>
<q-separator />
<q-item clickable>
<q-item-section>Settings</q-item-section>
</q-item>
<q-item clickable @click="logout()">
<q-item-section>Sign out</q-item-section>
</q-item>
</q-list>
</q-menu> -->
</q-btn> </q-btn>
<!-- <q-toggle
:label="$t(`globals.lang['${language}']`)"
icon="public"
color="orange"
false-value="es"
true-value="en"
v-model="language"
/>
<q-toggle v-model="mode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" /> -->
</q-toolbar> </q-toolbar>
</q-header> </q-header>
<q-drawer show-if-above :mini="true" mini-to-overlay :width="200" :breakpoint="500"> <q-drawer
v-model="drawer"
show-if-above
:mini="miniState"
@mouseover="miniState = false"
@mouseout="miniState = true"
mini-to-overlay
:width="200"
:breakpoint="500"
>
<q-scroll-area class="fit"> <q-scroll-area class="fit">
<q-list padding> <q-list padding>
<q-item active clickable v-ripple> <q-item active clickable v-ripple>
@ -140,10 +131,16 @@
<script lang="ts"> <script lang="ts">
import { Options, Vue } from 'vue-class-component'; import { Options, Vue } from 'vue-class-component';
import { Dark } from 'quasar';
import axios from 'axios'; import axios from 'axios';
import { ref } from 'vue';
@Options({}) @Options({})
export default class Main extends Vue { export default class Main extends Vue {
private lang = 'es';
drawer = false;
miniState = true;
mounted(): void { mounted(): void {
axios.get('/api/accounts/acl').then((response) => { axios.get('/api/accounts/acl').then((response) => {
this.$store.dispatch('updateUserData', response.data); this.$store.dispatch('updateUserData', response.data);
@ -171,6 +168,14 @@ export default class Main extends Vue {
return ''; return '';
} }
get username(): string {
if (this.$store.getters.hasData) {
return this.$store.state.user.name;
}
return '';
}
get id(): string { get id(): string {
if (this.$store.getters.hasData) { if (this.$store.getters.hasData) {
return this.$store.state.user.id; return this.$store.state.user.id;
@ -184,6 +189,23 @@ export default class Main extends Vue {
return token ? token : ''; return token ? token : '';
} }
get mode(): boolean {
return Dark.isActive;
}
set mode(value: boolean) {
Dark.set(value);
}
get language(): string {
return this.lang;
}
set language(value: string) {
this.lang = value;
this.$i18n.locale = value;
}
} }
</script> </script>