Update lang

src/layouts/MainLayout.vue

@@ -13,8 +13,13 @@ const appStore = useAppStore();
 
 const refreshContentKey = ref(0);
 const { mainUser, supplantedUser } = storeToRefs(userStore);
-const { title, subtitle, useRightDrawer, rightDrawerOpen, filteredMenuItems } =
+const {
-    storeToRefs(appStore);
+    menuTitle,
+    subtitle,
+    useRightDrawer,
+    rightDrawerOpen,
+    filteredMenuItems
+} = storeToRefs(appStore);
 const actions = ref(null);
 const leftDrawerOpen = ref(false);
 
@@ -53,7 +58,7 @@ const logoutSupplantedUser = async () => {
                     @click="toggleLeftDrawer"
                 />
                 <QToolbarTitle>
-                    {{ title }}
+                    {{ menuTitle }}
                     <div v-if="subtitle" class="subtitle text-caption">
                         {{ subtitle }}
                     </div>

src/pages/Account/AccountConfig.vue

@@ -57,6 +57,15 @@ const formatMailData = data => {
     data.isToBeMailed = Boolean(data.isToBeMailed);
 };
 
+const updateConfigLang = async lang => {
+    try {
+        await vnFormRef.value.submit();
+        userStore.updateUserLang(lang);
+    } catch (error) {
+        console.error(error);
+    }
+};
+
 onMounted(() => fetchLanguagesSql());
 </script>
 
@@ -113,9 +122,7 @@ onMounted(() => fetchLanguagesSql());
                         option-label="name"
                         option-value="code"
                         :options="langOptions"
-                        @update:model-value="
+                        @update:model-value="updateConfigLang(data.lang)"
-                            userStore.updateUserLang(data.lang)
-                        "
                     />
                 </template>
                 <template #extraForm>

src/pages/Login/LoginView.vue

@@ -5,14 +5,18 @@ import { useI18n } from 'vue-i18n';
 import { useUserStore } from 'stores/user';
 import useNotify from 'src/composables/useNotify.js';
 import { useRouter, useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useAppStore } from 'src/stores/app';
 
 const { notify } = useNotify();
 const { t } = useI18n();
 const { locale } = useI18n({ useScope: 'global' });
-
 const userStore = useUserStore();
+const appStore = useAppStore();
 const route = useRoute();
 const router = useRouter();
+const { siteLang, localeOptions } = storeToRefs(appStore);
+
 const email = ref(null);
 const password = ref(null);
 const remember = ref(false);
@@ -20,12 +24,11 @@ const showPwd = ref(false);
 
 const selectedLocaleValue = computed({
     get() {
-        return userStore.localeOptions.find(
+        return siteLang.value;
-            option => option.lang === locale.value
-        ).value;
     },
     set(value) {
         locale.value = value;
+        appStore.updateSiteLocale(value);
     }
 });
 
@@ -44,7 +47,6 @@ onMounted(() => {
 
 const onLogin = async () => {
     await userStore.fetchUser();
-    await userStore.updateUserLang(selectedLocaleValue.value);
     await router.push('/');
 };
 
@@ -90,7 +92,7 @@ const loginAsGuest = async () => {
                     />
                     <QSelect
                         v-model="selectedLocaleValue"
-                        :options="userStore.localeOptions"
+                        :options="localeOptions"
                         :label="t('language')"
                         option-value="lang"
                         dense

src/router/index.js

@@ -7,7 +7,6 @@ import {
     createWebHashHistory
 } from 'vue-router';
 import routes from './routes';
-import { i18n } from 'src/boot/i18n';
 
 /*
  * If not building with SSR mode, you can
@@ -40,10 +39,9 @@ export default route(function (/* { store, ssrContext } */) {
     Router.afterEach((to, from) => {
         if (from.name === to.name) return;
         const app = useAppStore();
+
         app.$patch({
-            title: i18n.global.t(
+            title: to.meta.title || 'Home',
-                to.meta.title ? `titles.${to.meta.title}` : 'titles.Home'
-            ),
             subtitle: null,
             useRightDrawer: false,
             rightDrawerOpen: true

src/stores/app.js

@@ -6,6 +6,7 @@ import { useQuasar } from 'quasar';
 
 const { notify } = useNotify();
 const storageOrderName = 'hederaBasket';
+const { t } = i18n.global;
 
 export const useAppStore = defineStore('hedera', {
     state: () => ({
@@ -23,7 +24,15 @@ export const useAppStore = defineStore('hedera', {
             months: [],
             daysShort: [],
             monthsShort: []
-        }
+        },
+        siteLang: 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' }
+        ]
     }),
     actions: {
         async getMenuLinks() {
@@ -67,6 +76,7 @@ export const useAppStore = defineStore('hedera', {
         },
 
         async init() {
+            this.updateSiteLocale(localStorage.getItem('siteLang') || 'es-ES');
             this.getBasketOrderId();
             this.getLocaleDates();
         },
@@ -143,6 +153,13 @@ export const useAppStore = defineStore('hedera', {
         onLogout() {
             this.unloadOrder();
             this.menuEssentialLinks = [];
+        },
+
+        updateSiteLocale(locale = null) {
+            const _locale = locale || 'es-ES';
+            i18n.global.locale.value = _locale;
+            this.siteLang = _locale;
+            localStorage.setItem('siteLang', _locale);
         }
     },
     getters: {
@@ -151,6 +168,9 @@ export const useAppStore = defineStore('hedera', {
                 item => !state.hiddenMenuLinks.has(item.description)
             );
         },
+        siteLocaleOption: state =>
+            state.localeOptions.find(l => l.value === state.siteLang),
+        menuTitle: state => t(`titles.${state.title}`),
         isMobile() {
             const $q = useQuasar();
             return $q?.screen?.width <= 768;

src/stores/user.js

@@ -1,11 +1,9 @@
 import { defineStore } from 'pinia';
 import { ref, computed, watch } from 'vue';
 import { api, jApi } from 'boot/axios';
-import { i18n } from 'src/boot/i18n';
 import useNotify from 'src/composables/useNotify.js';
 import { useAppStore } from 'src/stores/app.js';
 
-const { t } = i18n.global;
 const { notify } = useNotify();
 const TOKEN_MULTIMEDIA = 'tokenMultimedia';
 const TOKEN = 'token';
@@ -17,13 +15,7 @@ export const useUserStore = defineStore('user', () => {
     const user = ref(null); // Usuario en uso => supplantedUser || mainUser
     const supplantedUser = ref(null); // Usuario suplantado
     const mainUser = ref(null); // Usuario principal logueado
-    const localeOptions = ref([
+
-        { 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' }
-    ]);
     const keepLogin = ref(false);
     const intervalId = ref(null);
     const isCheckingToken = ref(false);
@@ -31,9 +23,6 @@ export const useUserStore = defineStore('user', () => {
     let router;
 
     const loggedIn = computed(() => !!token.value);
-    const userLocaleOption = computed(() =>
-        localeOptions.value?.find(l => l.value === user.value?.lang)
-    );
     const storage = computed(() =>
         keepLogin.value ? localStorage : sessionStorage
     );
@@ -51,7 +40,6 @@ export const useUserStore = defineStore('user', () => {
         await fetchTokenConfig();
         await fetchUser();
         await supplantInit();
-        updateSiteLocale();
         startInterval();
     };
 
@@ -277,17 +265,9 @@ export const useUserStore = defineStore('user', () => {
         await fetchUser();
     };
 
-    const updateSiteLocale = (locale = null) => {
-        i18n.global.locale.value =
-            locale || userLocaleOption.value?.lang || 'en-US';
-    };
-
     const updateUserLang = async lang => {
         if (!user.value || user.value.lang === lang) return;
-
         user.value.lang = lang;
-        updateSiteLocale();
-        notify(t('dataSaved'), 'positive');
     };
 
     const $reset = () => {
@@ -316,13 +296,11 @@ export const useUserStore = defineStore('user', () => {
         user,
         supplantedUser,
         mainUser,
-        localeOptions,
         keepLogin,
         intervalId,
         isCheckingToken,
         tokenConfig,
         loggedIn,
-        userLocaleOption,
         storage,
         getToken,
         getTokenMultimedia,
@@ -342,7 +320,6 @@ export const useUserStore = defineStore('user', () => {
         supplantUser,
         supplantInit,
         logoutSupplantedUser,
-        updateSiteLocale,
         updateUserLang,
         init,
         $reset