wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests 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'),
type: 'positive',
});
this.$router.push('/dashboard');
this.$router.push('/');
})
.catch(() =>
this.$q.notify({

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

@ -2,13 +2,16 @@
<q-layout>
<q-header class="bg-darker" color="white" elevated>
<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-space></q-space>
<q-btn dense flat no-wrap>
<q-avatar size="lg" color="orange">
<img :src="`/api/Images/user/160x160/${id}/download?access_token=${token}`" alt="" />
<q-avatar size="lg">
<q-img
:src="`/api/Images/user/160x160/${id}/download?access_token=${token}`"
spinner-color="white"
/>
</q-avatar>
<q-tooltip>Account</q-tooltip>
<q-icon name="arrow_drop_down" size="s" />
@ -17,8 +20,20 @@
<div class="row no-wrap q-pa-md">
<div class="column">
<div class="text-h6 q-mb-md">Settings</div>
<q-toggle label="Dark mode" />
<q-toggle label="Language" class="q-mb-md" />
<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-btn color="orange" outline size="sm" label="Settings" icon="settings" />
</div>
@ -26,17 +41,17 @@
<q-separator vertical inset class="q-mx-lg" />
<div class="column items-center" style="min-width: 150px">
<q-avatar color="orange" size="80px">
<img
<q-avatar size="80px">
<q-img
:src="`/api/Images/user/160x160/${id}/download?access_token=${token}`"
alt=""
spinner-color="white"
/>
</q-avatar>
<div class="text-subtitle1 q-mt-md">
<strong>{{ nickname }}</strong>
</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
color="orange"
@ -50,43 +65,19 @@
</div>
</div>
</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-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-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-list padding>
<q-item active clickable v-ripple>
@ -140,10 +131,16 @@
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { Dark } from 'quasar';
import axios from 'axios';
import { ref } from 'vue';
@Options({})
export default class Main extends Vue {
private lang = 'es';
drawer = false;
miniState = true;
mounted(): void {
axios.get('/api/accounts/acl').then((response) => {
this.$store.dispatch('updateUserData', response.data);
@ -171,6 +168,14 @@ export default class Main extends Vue {
return '';
}
get username(): string {
if (this.$store.getters.hasData) {
return this.$store.state.user.name;
}
return '';
}
get id(): string {
if (this.$store.getters.hasData) {
return this.$store.state.user.id;
@ -184,6 +189,23 @@ export default class Main extends Vue {
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>