From 5d6cdcb6dfdc9a440aec094d64db81f3f02dddbe Mon Sep 17 00:00:00 2001
From: carlosjr <carlosjr@verdnatura.es>
Date: Tue, 1 Mar 2022 16:58:30 +0100
Subject: [PATCH] user panel refactor

---
 src/views/Login/Login.vue |   2 +-
 src/views/Main/Main.vue   | 108 +++++++++++++++++++++++---------------
 2 files changed, 66 insertions(+), 44 deletions(-)

diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index a597e0df6..50fa2d709 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -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({
diff --git a/src/views/Main/Main.vue b/src/views/Main/Main.vue
index 92157012b..bd023315c 100644
--- a/src/views/Main/Main.vue
+++ b/src/views/Main/Main.vue
@@ -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>