diff --git a/src/i18n/index.js b/src/i18n/index.js index 1a89b0dc763..b38d23656df 100644 --- a/src/i18n/index.js +++ b/src/i18n/index.js @@ -9,9 +9,4 @@ const i18n = createI18n({ messages: { en }, }) -// React to language changes -i18n.onLanguageChanged = (newLocale, oldLocale) => { - console.log(`Language changed from ${oldLocale} to ${newLocale}`) - // You can perform additional actions here if needed -} export default i18n diff --git a/src/i18n/localeManager.js b/src/i18n/localeManager.js index f3cb15d748b..32e745d72b9 100644 --- a/src/i18n/localeManager.js +++ b/src/i18n/localeManager.js @@ -1,6 +1,7 @@ import i18n from '@/i18n' import { nextTick } from 'vue' import languageData from '@/i18n/data/languages.json' +import { useAppStore } from '@/store' const localeManager = { get defaultLocale() { @@ -28,8 +29,8 @@ const localeManager = { await localeManager.loadLocaleMessages(newLocale) localeManager.currentLocale = newLocale document.querySelector('html').setAttribute('lang', newLocale) - localStorage.setItem('user-locale', newLocale) - + const store = useAppStore() + store.setLanguage(newLocale) }, /** @@ -74,7 +75,8 @@ const localeManager = { * @returns {string|null} The persisted locale if it is supported, or null otherwise. */ getPersistedLocale() { - const persistedLocale = localStorage.getItem('user-locale') + const store = useAppStore() + const persistedLocale = store.getUserLanguage if(localeManager.isLocaleSupported(persistedLocale)) { return persistedLocale diff --git a/src/router.js b/src/router.js index 4a328a9c90d..6f095cc5760 100644 --- a/src/router.js +++ b/src/router.js @@ -39,10 +39,9 @@ const router = createRouter({ */ router.beforeEach(async (to, from, next) => { const store = useAppStore() - const fromLocale = from.params.locale - const toLocale = to.params.locale || localeManager.guessDefaultLocale() - if (fromLocale !== toLocale) { - await localeManager.changeLanguage(toLocale) + const locale = localeManager.guessDefaultLocale() + if (locale !== store.user.language) { + await localeManager.changeLanguage(locale) } if (to.meta.requiresAuth && !store.user.token) { console.log('checkAuth') diff --git a/src/store.js b/src/store.js index 956479d06ef..98d309e6d2e 100644 --- a/src/store.js +++ b/src/store.js @@ -9,7 +9,7 @@ export const useAppStore = defineStore('app', { last_product_mode_used: 'barcode', last_currency_used: import.meta.env.VITE_DEFAULT_CURRENCY, // 'EUR' recent_locations: [], - language: localStorage.getItem('user-locale') || import.meta.env.VITE_DEFAULT_LOCALE, // 'en' + language: import.meta.env.VITE_DEFAULT_LOCALE, // 'en' country: import.meta.env.VITE_DEFAULT_COUNTRY, // 'FR', proofs: [], proofTotal: null, @@ -25,10 +25,6 @@ export const useAppStore = defineStore('app', { } }, getUserLanguage: (state) => { - // manage edge-case where some user languages were stored as objects instead of strings - if (typeof state.user.language === 'object') { - return state.user.language.code - } return state.user.language }, getUserCountry: (state) => { diff --git a/src/views/UserSettings.vue b/src/views/UserSettings.vue index bed7311083d..0ac19f384a9 100644 --- a/src/views/UserSettings.vue +++ b/src/views/UserSettings.vue @@ -21,7 +21,7 @@ :label="$t('UserSettings.LanguageLabel')" :items="languageList" item-title="native" - return-object + item-value="code" hide-details="auto" > @@ -91,7 +91,7 @@ export default { watch:{ 'userSettingsForm.selectedLanguage': async function () { if (this.userSettingsForm.selectedLanguage !== null) { - this.languageTranslationCompletion = await localeManager.calculateTranslationCompletion(this.userSettingsForm.selectedLanguage.code) + this.languageTranslationCompletion = await localeManager.calculateTranslationCompletion(this.userSettingsForm.selectedLanguage) } }, 'userSettingsForm.selectedCountry': function (newValue, oldValue) { @@ -138,12 +138,12 @@ export default { methods: { initUserSettingsForm() { this.userSettingsForm.currency = this.appStore.user.last_currency_used - this.userSettingsForm.selectedLanguage = this.languageList.find(lang => lang.code === localeManager.guessDefaultLocale()) || this.languageList.find(lang => lang.code === 'en') + this.userSettingsForm.selectedLanguage = this.languageList.find(lang => lang.code === localeManager.guessDefaultLocale()).code this.userSettingsForm.selectedCountry = countryData.find(country => country.code === this.appStore.user.country).code }, async updateSettings() { - await localeManager.changeLanguage(this.userSettingsForm.selectedLanguage.code) - this.appStore.setLanguage(this.userSettingsForm.selectedLanguage.code) + await localeManager.changeLanguage(this.userSettingsForm.selectedLanguage) + this.appStore.setLanguage(this.userSettingsForm.selectedLanguage) this.appStore.setCountry(this.userSettingsForm.selectedCountry) this.appStore.setLastCurrencyUsed(this.userSettingsForm.currency) this.$router.push({ path: '/', query: { settingsSuccess: 'true' } })