WIP

src/App.vue

@@ -1,9 +1,14 @@
 <script setup>
 import { useAppStore } from 'stores/app';
+import { useUserStore } from 'stores/user';
 import { onBeforeMount } from 'vue';
 const appStore = useAppStore();
+const userStore = useUserStore();
 
-onBeforeMount(() => appStore.init());
+onBeforeMount(async () => {
+    await userStore.init();
+    await appStore.init();
+});
 </script>
 
 <template>

src/i18n/ca-ES/index.js

@@ -1,4 +1,13 @@
 export default {
+    language: 'Idioma',
+    langs: {
+        en: 'Anglès',
+        es: 'Espanyol',
+        ca: 'Català',
+        fr: 'Francès',
+        mn: 'Rus',
+        pt: 'Portuguès'
+    },
     date: {
         days: [
             'Diumenge',
@@ -82,5 +91,15 @@ export default {
     confirm: 'Confirmar',
     delete: 'Esborrar',
     confirmDelete: 'Estàs segur que vols esborrar la línia?',
-    emptyList: 'Llista buida'
+    emptyList: 'Llista buida',
+
+    logInAsGuest: `Accedir com a convidat`,
+    haveForgottenPassword: '¿Has oblidat la teva contrasenya?',
+    signUp: 'Registrar-me',
+    notACustomerYet: `Encara no ets client?`,
+    loginPhone: '+34 963 242 100',
+    loginMail: "{'info'}{'@'}{'verdnatura.es'}",
+    remindMe: "Recorda'm",
+    user: 'Usuari',
+    password: 'Contrasenya'
 };

src/i18n/en-US/index.js

@@ -12,6 +12,15 @@ export default {
     today: 'Today',
     yesterday: 'Yesterday',
     tomorrow: 'Tomorrow',
+    language: 'Language',
+    langs: {
+        en: 'English',
+        es: 'Spanish',
+        ca: 'Catalan',
+        fr: 'French',
+        mn: 'Russian',
+        pt: 'Portuguese'
+    },
     date: {
         days: [
             'Sunday',
@@ -116,5 +125,13 @@ export default {
     dataSaved: 'Data saved',
     save: 'Save',
     cancel: 'Cancel',
-    of: 'of'
+    of: 'of',
+    loginAsGuest: 'Login as guest',
+    haveForgottenPassword: 'Have you forgotten your password?',
+    signUp: 'Sign up',
+    notACustomerYet: 'Not a customer yet?',
+    loginPhone: '+34 963 242 100',
+    loginMail: "{'info'}{'@'}{'verdnatura.es'}",
+    remindMe: 'Remember me',
+    password: 'Password'
 };

src/i18n/fr-FR/index.js

@@ -1,4 +1,13 @@
 export default {
+    language: 'Langue',
+    langs: {
+        en: 'Anglais',
+        es: 'Espagnol',
+        ca: 'Catalan',
+        fr: 'Français',
+        mn: 'Russe',
+        pt: 'Portugais'
+    },
     date: {
         days: [
             'Dimanche',
@@ -81,5 +90,16 @@ export default {
     noData: 'Aucune donnée',
     confirm: 'Confirmer',
     delete: 'Effacer',
-    confirmDelete: 'Voulez-vous vraiment supprimer la ligne?'
+    confirmDelete: 'Voulez-vous vraiment supprimer la ligne?',
+    emptyList: 'Liste vide',
+
+    logInAsGuest: `Entrez en tant qu'invité`,
+    haveForgottenPassword: 'Avez-vous oublié votre mot de passe?',
+    signUp: `S'inscrire`,
+    notACustomerYet: `Pas encore client?`,
+    loginPhone: '+34 963 242 100',
+    loginMail: "{'info'}{'@'}{'verdnatura.es'}",
+    remindMe: `Rappelle-moi`,
+    user: 'Utilisateur',
+    password: 'Mot de passe'
 };

src/i18n/pt-PT/index.js

@@ -1,4 +1,13 @@
 export default {
+    language: 'Língua',
+    langs: {
+        en: 'Inglês',
+        es: 'Espanhol',
+        ca: 'Catalão',
+        fr: 'Francês',
+        mn: 'Russo',
+        pt: 'Português'
+    },
     date: {
         days: [
             'Domingo',
@@ -79,5 +88,16 @@ export default {
     noData: 'Sem dados',
     confirm: 'Confirme',
     delete: 'Eliminar',
-    confirmDelete: 'Tens certeza que queres eliminar esta linha?'
+    confirmDelete: 'Tens certeza que queres eliminar esta linha?',
+    emptyList: 'Lista vazia',
+
+    logInAsGuest: 'Entrar como convidado',
+    haveForgottenPassword: 'Esqueceu a senha?',
+    signUp: 'Registar',
+    notACustomerYet: 'Ainda não é cliente?',
+    loginPhone: '+34 963 242 100',
+    loginMail: "{'info'}{'@'}{'verdnatura.es'}",
+    remindMe: 'Lembrar-me',
+    user: 'Utilizador',
+    password: 'Senha'
 };

src/layouts/MainLayout.vue

@@ -22,11 +22,9 @@ const toggleLeftDrawer = () => {
 };
 
 onMounted(async () => {
-    appStore.isHeaderMounted = true;
-    await userStore.fetchUser();
     await appStore.loadConfig();
-    await userStore.supplantInit();
     await appStore.getMenuLinks();
+    appStore.isHeaderMounted = true;
 });
 
 const logout = async () => {

src/pages/Login/LoginView.vue

@@ -1,12 +1,15 @@
 <script setup>
+import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import { useUserStore } from 'stores/user';
-import { onMounted, ref } from 'vue';
 import useNotify from 'src/composables/useNotify.js';
 import { useRouter, useRoute } from 'vue-router';
-const { notify } = useNotify();
 
-const t = useI18n();
+const { notify } = useNotify();
+const { t } = useI18n();
+const { locale } = useI18n({ useScope: 'global' });
+
 const userStore = useUserStore();
 const route = useRoute();
 const router = useRouter();
@@ -15,7 +18,17 @@ const password = ref(null);
 const remember = ref(false);
 const showPwd = ref(false);
 
-const langs = ['en', 'es', 'ca', 'fr', 'mn', 'pt'];
+const selectedLocaleValue = computed({
+    get() {
+        return userStore.localeOptions.find(
+            option => option.lang === locale.value
+        ).value;
+    },
+    set(value) {
+        locale.value = value;
+    }
+});
+
 onMounted(() => {
     if (route.query.emailConfirmed !== undefined) {
         notify({
@@ -30,7 +43,9 @@ onMounted(() => {
 });
 async function onLogin() {
     await userStore.login(email.value, password.value, remember.value);
-    router.push('/');
+    await userStore.fetchUser();
+    await userStore.updateUserLang(selectedLocaleValue.value);
+    await router.push('/');
 }
 </script>
 
@@ -57,29 +72,23 @@ async function onLogin() {
                         />
                     </template>
                 </QInput>
-                <div class="text-center">
+                <div class="row justify-between text-center">
                     <QCheckbox
                         v-model="remember"
                         :label="$t('remindMe')"
                         dense
                     />
-                    <QBtn
+                    <QSelect
-                        id="switchLanguage"
+                        v-model="selectedLocaleValue"
-                        :label="$t('language')"
+                        :options="userStore.localeOptions"
-                        icon="translate"
+                        :label="t('language')"
-                        color="primary"
+                        option-value="lang"
-                        size="sm"
+                        dense
-                        flat
+                        borderless
-                        rounded
+                        emit-value
-                    >
+                        map-options
-                        <QMenu auto-close>
+                        options-dense
-                            <QList dense v-for="lang in langs" :key="lang">
+                    />
-                                <QItem disabled v-ripple clickable>
-                                    {{ $t(`langs.${lang}`) }}
-                                </QItem>
-                            </QList>
-                        </QMenu>
-                    </QBtn>
                 </div>
             </div>
             <div class="justify-center">

src/stores/user.js

@@ -1,5 +1,8 @@
 import { defineStore } from 'pinia';
 import { api, jApi } from 'boot/axios';
+import { i18n } from 'src/boot/i18n';
+
+const { t } = i18n.global;
 
 export const useUserStore = defineStore('user', {
     state: () => {
@@ -11,20 +14,36 @@ export const useUserStore = defineStore('user', {
             token,
             isGuest: false,
             user: null,
-            supplantedUser: null
+            supplantedUser: null,
+            localeOptions: [
+                { label: t('langs.en'), lang: 'en-US', value: 'en' },
+                { label: t('langs.es'), lang: 'es-ES', value: 'es' },
+                { label: t('langs.ca'), lang: 'ca-ES', value: 'ca' },
+                { label: t('langs.fr'), lang: 'fr-FR', value: 'fr' },
+                { label: t('langs.pt'), lang: 'pt-PT', value: 'pt' }
+            ]
         };
     },
 
     getters: {
-        loggedIn: state => state.token != null
+        loggedIn: state => state.token != null,
+        userLang: state =>
+            state.localeOptions?.find(l => l.value === state?.user?.lang)?.lang
     },
 
     actions: {
+        async init() {
+            await this.fetchUser();
+            await this.supplantInit();
+            i18n.global.locale.value = this.userLang || 'en-US';
+        },
+
         async getToken() {
             this.token =
                 sessionStorage.getItem('vnToken') ||
                 localStorage.getItem('vnToken');
         },
+
         async login(user, password, remember) {
             const params = { user, password };
             const res = await api.post('Accounts/login', params);
@@ -40,6 +59,7 @@ export const useUserStore = defineStore('user', {
                 name: user
             });
         },
+
         async logout() {
             if (this.token != null) {
                 try {
@@ -54,7 +74,7 @@ export const useUserStore = defineStore('user', {
         async fetchUser(userType = 'user') {
             try {
                 const userData = await jApi.getObject(
-                    'SELECT id, nickname, name FROM account.myUser'
+                    'SELECT id, nickname, name, lang FROM account.myUser'
                 );
                 this.$patch({ [userType]: userData });
             } catch (error) {
@@ -83,6 +103,19 @@ export const useUserStore = defineStore('user', {
             await api.post('Accounts/logout');
             this.getToken();
             await this.fetchUser();
+        },
+
+        async updateUserLang(lang) {
+            console.log('lang to update: ', lang);
+            if (!this.user || this.user.lang === lang) return;
+            await jApi.execQuery(
+                `START TRANSACTION;
+                UPDATE account.myUser SET lang = #lang WHERE (id = #id);
+                SELECT lang FROM account.myUser WHERE (id = #id);
+                COMMIT;`,
+                { id: this.user.id, lang }
+            );
+            this.user.lang = lang;
         }
     }
 });