From b89163704d1c202962991904eb580bd86c6e0ab6 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 8 Mar 2022 08:57:00 +0100
Subject: [PATCH] Updated components to composition API

---
 src/components/Topbar.vue    |  30 +++++------
 src/components/UserPanel.vue | 102 +++++++++++++++++------------------
 2 files changed, 62 insertions(+), 70 deletions(-)

diff --git a/src/components/Topbar.vue b/src/components/Topbar.vue
index 2c61c76c0..9a07e3111 100644
--- a/src/components/Topbar.vue
+++ b/src/components/Topbar.vue
@@ -27,7 +27,7 @@
                 <q-btn dense flat no-wrap>
                     <q-avatar size="lg">
                         <q-img
-                            :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
+                            :src="`/api/Images/user/160x160/${user.id}/download?access_token=${user.token}`"
                             spinner-color="white"
                         />
                     </q-avatar>
@@ -40,8 +40,9 @@
     </q-header>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
 import UserPanel from '@/components/UserPanel.vue';
 
 interface UserProfile {
@@ -51,18 +52,13 @@ interface UserProfile {
     token: string;
 }
 
-@Options({
-    components: {
-        UserPanel,
-    },
-})
-export default class Topbar extends Vue {
-    get user(): UserProfile {
-        return this.$store.state.user;
-    }
-
-    get token(): string {
-        return this.$store.getters.token;
-    }
-}
+const store = useStore();
+const user = computed((): UserProfile => {
+    return {
+        id: store.state.user.id,
+        username: store.state.user.username,
+        nickname: store.state.user.nickname,
+        token: store.getters.token,
+    };
+});
 </script>
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index d5df59092..9c5fbb4b7 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -2,16 +2,16 @@
     <q-menu>
         <div class="row no-wrap q-pa-md">
             <div class="column">
-                <div class="text-h6 q-mb-md">{{ $t('components.userPanel.settings') }}</div>
+                <div class="text-h6 q-mb-md">{{ t('components.userPanel.settings') }}</div>
                 <q-toggle
-                    :label="$t(`globals.lang['${language}']`)"
+                    :label="t(`globals.lang['${locale}']`)"
                     icon="public"
                     color="orange"
                     false-value="es"
                     true-value="en"
-                    v-model="language"
+                    v-model="locale"
                 />
-                <q-toggle v-model="mode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
+                <q-toggle v-model="darkMode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
 
                 <q-btn color="orange" outline size="sm" label="Settings" icon="settings" />
             </div>
@@ -21,7 +21,7 @@
             <div class="column items-center" style="min-width: 150px">
                 <q-avatar size="80px">
                     <q-img
-                        :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
+                        :src="`/api/Images/user/160x160/${user.id}/download?access_token=${user.token}`"
                         spinner-color="white"
                     />
                 </q-avatar>
@@ -37,10 +37,18 @@
     </q-menu>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+<script lang="ts" setup>
+import { onMounted, computed } from 'vue';
+import { Dark, useQuasar } from 'quasar';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 import axios from 'axios';
-import { Dark } from 'quasar';
+
+const quasar = useQuasar();
+const store = useStore();
+const router = useRouter();
+const { t, locale } = useI18n();
 
 interface UserProfile {
     id: number;
@@ -49,54 +57,42 @@ interface UserProfile {
     token: string;
 }
 
-@Options({})
-export default class UserPanel extends Vue {
-    private lang = 'es';
-
-    mounted(): void {
-        axios
-            .get('/api/accounts/acl')
-            .then((response) => {
-                this.$store.dispatch('updateUserData', response.data);
-            })
-            .catch(() => {
-                this.$q.notify({
-                    message: this.$t('errors.statusUnauthorized'),
-                    type: 'negative',
-                });
-                this.$store.dispatch('logOut');
-                this.$router.push('/login');
-            });
-    }
-
-    logout(): void {
-        this.$store.dispatch('logOut');
-        this.$router.push('/login');
-    }
-
-    get user(): UserProfile {
-        return this.$store.state.user;
-    }
-
-    get token(): string {
-        return this.$store.getters.token;
-    }
-
-    get mode(): boolean {
+const darkMode = computed({
+    get(): boolean {
         return Dark.isActive;
-    }
-
-    set mode(value: boolean) {
+    },
+    set(value: boolean): void {
         Dark.set(value);
-    }
+    },
+});
 
-    get language(): string {
-        return this.lang;
-    }
+const user = computed((): UserProfile => {
+    return {
+        id: store.state.user.id,
+        username: store.state.user.username,
+        nickname: store.state.user.nickname,
+        token: store.getters.token,
+    };
+});
 
-    set language(value: string) {
-        this.lang = value;
-        this.$i18n.locale = value;
-    }
+onMounted(() => {
+    axios
+        .get('/api/accounts/acl')
+        .then((response) => {
+            store.dispatch('updateUserData', response.data);
+        })
+        .catch(() => {
+            quasar.notify({
+                message: t('errors.statusUnauthorized'),
+                type: 'negative',
+            });
+            store.dispatch('logOut');
+            router.push('/login');
+        });
+});
+
+function logout(): void {
+    store.dispatch('logOut');
+    router.push('/login');
 }
 </script>