From 1d9bfacaf3b06da2479279d925f04a6ba01ee05e Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Mon, 7 Mar 2022 15:36:48 +0100
Subject: [PATCH 1/3] Updated to composition API

---
 package-lock.json         |  15 ----
 package.json              |   3 +-
 src/App.vue               |   6 --
 src/i18n.ts               |   2 +-
 src/router/index.ts       |   4 +-
 src/views/Login/Login.vue | 150 +++++++++++++++++++-------------------
 6 files changed, 79 insertions(+), 101 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4a29f7f08..752052c06 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,6 @@
                 "core-js": "^3.6.5",
                 "quasar": "^2.0.0",
                 "vue": "^3.0.0",
-                "vue-class-component": "^8.0.0-0",
                 "vue-i18n": "^9.1.0",
                 "vue-router": "^4.0.0-0",
                 "vuex": "^4.0.0-0"
@@ -19418,14 +19417,6 @@
                 "@vue/shared": "3.2.31"
             }
         },
-        "node_modules/vue-class-component": {
-            "version": "8.0.0-rc.1",
-            "resolved": "https://registry.npmmirror.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz",
-            "integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==",
-            "peerDependencies": {
-                "vue": "^3.0.0"
-            }
-        },
         "node_modules/vue-cli-plugin-i18n": {
             "version": "2.3.1",
             "resolved": "https://registry.npmmirror.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-2.3.1.tgz",
@@ -37109,12 +37100,6 @@
                 "@vue/shared": "3.2.31"
             }
         },
-        "vue-class-component": {
-            "version": "8.0.0-rc.1",
-            "resolved": "https://registry.npmmirror.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz",
-            "integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==",
-            "requires": {}
-        },
         "vue-cli-plugin-i18n": {
             "version": "2.3.1",
             "resolved": "https://registry.npmmirror.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-2.3.1.tgz",
diff --git a/package.json b/package.json
index c006c3ae5..e76479171 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,6 @@
         "core-js": "^3.6.5",
         "quasar": "^2.0.0",
         "vue": "^3.0.0",
-        "vue-class-component": "^8.0.0-0",
         "vue-i18n": "^9.1.0",
         "vue-router": "^4.0.0-0",
         "vuex": "^4.0.0-0"
@@ -49,4 +48,4 @@
         "vue-cli-plugin-quasar": "~4.0.4",
         "vue-jest": "^5.0.0-0"
     }
-}
\ No newline at end of file
+}
diff --git a/src/App.vue b/src/App.vue
index 981b4e3d4..95692e2db 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,12 +2,6 @@
     <router-view></router-view>
 </template>
 
-<script lang="ts">
-import { Vue } from 'vue-class-component';
-
-export default class App extends Vue {}
-</script>
-
 <style lang="scss">
 .body--light {
     background-color: #ccc;
diff --git a/src/i18n.ts b/src/i18n.ts
index 0590c7af9..ff173ba93 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -20,7 +20,7 @@ function loadLocaleMessages(): LocaleMessages<VueMessageType> {
 }
 
 export default createI18n({
-    legacy: true,
+    legacy: false, // Disabled for composition API usage
     locale: process.env.VUE_APP_I18N_LOCALE || 'en',
     fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
     messages: loadLocaleMessages(),
diff --git a/src/router/index.ts b/src/router/index.ts
index 623a955c9..a3cd843c5 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,7 +7,7 @@ const routes: Array<RouteRecordRaw> = [
         name: 'Login',
         component: () => import('../views/Login/Login.vue'),
     },
-    {
+    /*  {
         path: '/',
         name: 'Main',
         component: () => import('../views/Layout/Main.vue'),
@@ -29,7 +29,7 @@ const routes: Array<RouteRecordRaw> = [
                 component: () => import('../views/Layout/NotFound.vue'),
             },
         ],
-    },
+    }, */
 ];
 
 const router = createRouter({
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 7ab37df33..a84ed7b3f 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -4,14 +4,14 @@
             <q-toolbar>
                 <q-space></q-space>
                 <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-toolbar>
         </q-header>
         <q-page-container>
@@ -24,7 +24,7 @@
                                 filled
                                 color="orange"
                                 v-model="username"
-                                :label="$t('login.username')"
+                                :label="t('login.username')"
                                 lazy-rules
                                 :rules="[
                                     (val: string) => (val && val.length > 0) || 'Please type something',
@@ -35,16 +35,16 @@
                                 color="orange"
                                 type="password"
                                 v-model="password"
-                                :label="$t('login.password')"
+                                :label="t('login.password')"
                                 lazy-rules
                                 :rules="[
                                     (val: string) => (val && val.length > 0) || 'Please type something',
                                 ]"
                             />
-                            <q-toggle v-model="keepLogin" :label="$t('login.keepLogin')" color="orange" />
+                            <q-toggle v-model="keepLogin" :label="t('login.keepLogin')" color="orange" />
 
                             <div>
-                                <q-btn :label="$t('login.submit')" type="submit" color="orange" />
+                                <q-btn :label="t('login.submit')" type="submit" color="orange" />
                             </div>
                         </q-form>
                     </q-card>
@@ -54,9 +54,12 @@
     </q-layout>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+<script lang="ts" setup>
+import { computed, ref } 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';
 
 interface LoginForm {
@@ -65,78 +68,75 @@ interface LoginForm {
     keepLogin: boolean;
 }
 
-@Options({
+const quasar = useQuasar();
+const store = useStore();
+const router = useRouter();
+const { t, locale } = useI18n();
+
+let username = ref('');
+let password = ref('');
+let keepLogin = true;
+
+const darkMode = computed({
+    get(): boolean {
+        return Dark.isActive;
+    },
+    set(value: boolean): void {
+        Dark.set(value);
+    },
+});
+
+function onSubmit(): void {
+    axios
+        .post('/api/accounts/login', {
+            user: username,
+            password: password,
+        })
+        .then((response) => {
+            store.dispatch('logIn', {
+                token: response.data.token,
+                keepLogin: keepLogin,
+            });
+
+            quasar.notify({
+                message: t('login.loginSuccess'),
+                type: 'positive',
+            });
+            router.push('/dashboard');
+        })
+        .catch((error) => {
+            console.log(error);
+            const errorCode = error.response.status;
+            if (errorCode === 401) {
+                quasar.notify({
+                    message: t('login.loginFailed'),
+                    type: 'negative',
+                });
+            } else {
+                quasar.notify({
+                    message: t('errors.statusInternalServerError'),
+                    type: 'negative',
+                });
+            }
+        });
+}
+
+/*     data(): LoginForm {
+        return {
+            username: '',
+            password: '',
+            keepLogin: true,
+        };
+    } */
+
+/* @Options({
     setup() {
         return {
             $q: useQuasar(),
         };
     },
 })
-export default class Login extends Vue {
-    username?: string;
-    password?: string;
-    keepLogin?: boolean;
-    private lang = 'es';
-
-    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;
-    }
-
-    onSubmit(): void {
-        axios
-            .post('/api/accounts/login', {
-                user: this.username,
-                password: this.password,
-            })
-            .then((response) => {
-                this.$store.dispatch('logIn', {
-                    token: response.data.token,
-                    keepLogin: this.keepLogin,
-                });
-
-                this.$q.notify({
-                    message: this.$t('login.loginSuccess'),
-                    type: 'positive',
-                });
-                this.$router.push('/dashboard');
-            })
-            .catch((error) => {
-                const errorCode = error.response.status;
-                if (errorCode === 401) {
-                    this.$q.notify({
-                        message: this.$t('login.loginFailed'),
-                        type: 'negative',
-                    });
-                } else {
-                    this.$q.notify({
-                        message: this.$t('errors.statusInternalServerError'),
-                        type: 'negative',
-                    });
-                }
-            });
-    }
-
-    data(): LoginForm {
-        return {
-            username: '',
-            password: '',
-            keepLogin: true,
-        };
-    }
-}
+ */
 </script>
 
 <style lang="scss" scoped>

From e89e325cadc1aa66b193a6041ebe852f91bbb6d6 Mon Sep 17 00:00:00 2001
From: carlosjr <carlosjr@verdnatura.es>
Date: Mon, 7 Mar 2022 16:40:03 +0100
Subject: [PATCH 2/3] class components to composite API

---
 src/router/index.ts               |  4 ++--
 src/views/Customer/Customer.vue   |  7 -------
 src/views/Dashboard/Dashboard.vue |  7 -------
 src/views/Layout/Main.vue         | 20 ++++++--------------
 src/views/Layout/NotFound.vue     |  7 -------
 src/views/Login/Login.vue         | 27 ++-------------------------
 6 files changed, 10 insertions(+), 62 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index a3cd843c5..623a955c9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,7 +7,7 @@ const routes: Array<RouteRecordRaw> = [
         name: 'Login',
         component: () => import('../views/Login/Login.vue'),
     },
-    /*  {
+    {
         path: '/',
         name: 'Main',
         component: () => import('../views/Layout/Main.vue'),
@@ -29,7 +29,7 @@ const routes: Array<RouteRecordRaw> = [
                 component: () => import('../views/Layout/NotFound.vue'),
             },
         ],
-    }, */
+    },
 ];
 
 const router = createRouter({
diff --git a/src/views/Customer/Customer.vue b/src/views/Customer/Customer.vue
index 189736fa8..966b44bf5 100644
--- a/src/views/Customer/Customer.vue
+++ b/src/views/Customer/Customer.vue
@@ -4,11 +4,4 @@
     </q-page>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-
-@Options({})
-export default class Customer extends Vue {}
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/views/Dashboard/Dashboard.vue b/src/views/Dashboard/Dashboard.vue
index 9e5b694a9..353def709 100644
--- a/src/views/Dashboard/Dashboard.vue
+++ b/src/views/Dashboard/Dashboard.vue
@@ -4,11 +4,4 @@
     </q-page>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-
-@Options({})
-export default class Dashboard extends Vue {}
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/views/Layout/Main.vue b/src/views/Layout/Main.vue
index 7a23a4969..7cc63e395 100644
--- a/src/views/Layout/Main.vue
+++ b/src/views/Layout/Main.vue
@@ -59,22 +59,14 @@
     </q-layout>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+<script lang="ts" setup>
+import { ref } from 'vue';
 import Topbar from '@/components/Topbar.vue';
+const drawer = ref(false);
+const miniState = ref(true);
 
-@Options({
-    components: {
-        Topbar,
-    },
-})
-export default class Main extends Vue {
-    drawer = false;
-    miniState = true;
-
-    onToggleDrawer(): void {
-        this.drawer = !this.drawer;
-    }
+function onToggleDrawer(): void {
+    drawer.value = !drawer.value;
 }
 </script>
 
diff --git a/src/views/Layout/NotFound.vue b/src/views/Layout/NotFound.vue
index 3d8ced2d9..f130f38c2 100644
--- a/src/views/Layout/NotFound.vue
+++ b/src/views/Layout/NotFound.vue
@@ -2,11 +2,4 @@
     <q-page> Page not found </q-page>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-
-@Options({})
-export default class NotFound extends Vue {}
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index a84ed7b3f..61991fb49 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -62,12 +62,6 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
 
-interface LoginForm {
-    username: string;
-    password: string;
-    keepLogin: boolean;
-}
-
 const quasar = useQuasar();
 const store = useStore();
 const router = useRouter();
@@ -89,8 +83,8 @@ const darkMode = computed({
 function onSubmit(): void {
     axios
         .post('/api/accounts/login', {
-            user: username,
-            password: password,
+            user: username.value,
+            password: password.value,
         })
         .then((response) => {
             store.dispatch('logIn', {
@@ -120,23 +114,6 @@ function onSubmit(): void {
             }
         });
 }
-
-/*     data(): LoginForm {
-        return {
-            username: '',
-            password: '',
-            keepLogin: true,
-        };
-    } */
-
-/* @Options({
-    setup() {
-        return {
-            $q: useQuasar(),
-        };
-    },
-})
- */
 </script>
 
 <style lang="scss" scoped>

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 3/3] 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>