refactor(lang): changing how translation string are fetched (#415)

src/ControllerApp.vue

@@ -7,24 +7,28 @@
 import ControllerAppShell from '@/components/controller/ControllerAppShell.vue'
 import ControllerAppLogin from '@/components/controller/ControllerAppLogin.vue'
 import { TOKEN_REFRESH_INTERVAL, useLoginStore } from '@/stores/controller/controllerLogin'
-import { nextTick, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import axios, { CanceledError } from 'axios'
 import { deleteFromStorage, getPreference } from '@nethesis/vue-components'
-import { loadLocaleMessages, setI18nLanguage } from './lib/i18n'
 import { useI18n } from 'vue-i18n'
 import { useNotificationsStore } from './stores/notifications'
 import { useFavicon, useTitle } from '@vueuse/core'
 import { getControllerApiEndpoint, getProductName } from './lib/config'
 
 const loginStore = useLoginStore()
-const { locale, setLocaleMessage } = useI18n({ useScope: 'global' })
+const { locale } = useI18n({ useScope: 'global' })
 const notificationsStore = useNotificationsStore()
 
 const isLoaded = ref(false)
 
 onMounted(async () => {
   await loginStore.loadUserFromStorage()
-  await loadI18n()
+  // setup localization
+  let username = 'admin'
+  if (loginStore.isLoggedIn) {
+    username = loginStore.username
+  }
+  locale.value = getPreference('locale', username) || navigator.language
   configureAxios()
   isLoaded.value = true
 
@@ -37,31 +41,6 @@ onMounted(async () => {
   favIcon.value = '/favicon-controller.ico'
 })
 
-async function loadI18n() {
-  // default language
-  let lang = navigator.language.substring(0, 2)
-
-  // default username
-  let username = 'admin'
-
-  if (loginStore.isLoggedIn) {
-    username = loginStore.username
-  }
-
-  const preferredLanguage = getPreference('locale', username)
-
-  if (preferredLanguage) {
-    lang = preferredLanguage
-  }
-  // load preferred or navigator language, falling back to English
-  const actualLang = await loadLocaleMessages(setLocaleMessage, lang)
-  await nextTick()
-
-  if (actualLang) {
-    setI18nLanguage(locale, actualLang)
-  }
-}
-
 function configureAxios() {
   axios.defaults.headers.post['Content-Type'] = 'application/json'
 

src/StandaloneApp.vue

@@ -7,28 +7,32 @@
 import StandaloneAppShell from '@/components/standalone/StandaloneAppShell.vue'
 import StandaloneAppLogin from '@/components/standalone/StandaloneAppLogin.vue'
 import { TOKEN_REFRESH_INTERVAL, useLoginStore } from '@/stores/standalone/standaloneLogin'
-import { nextTick, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import axios, { CanceledError } from 'axios'
 import { getStandaloneApiEndpoint, isStandaloneMode } from './lib/config'
 import { useUnitsStore } from './stores/controller/units'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { getPreference } from '@nethesis/vue-components'
-import { loadLocaleMessages, setI18nLanguage } from './lib/i18n'
 import { useNotificationsStore } from './stores/notifications'
 
 const loginStore = useLoginStore()
 const unitsStore = useUnitsStore()
 const notificationsStore = useNotificationsStore()
-const { locale, setLocaleMessage } = useI18n({ useScope: 'global' })
+const { locale } = useI18n({ useScope: 'global' })
 const route = useRoute()
 
 const isLoaded = ref(false)
 
 onMounted(async () => {
   if (isStandaloneMode()) {
     await loginStore.loadUserFromStorage()
-    await loadI18n()
+    // Setup localization
+    let username = 'root'
+    if (loginStore.isLoggedIn) {
+      username = loginStore.username
+    }
+    locale.value = getPreference('locale', username) || navigator.language
   } else {
     // a controller is managing this unit
     await unitsStore.load()
@@ -41,31 +45,6 @@ onMounted(async () => {
   isLoaded.value = true
 })
 
-async function loadI18n() {
-  // default language
-  let lang = navigator.language.substring(0, 2)
-
-  // default username
-  let username = 'root'
-
-  if (loginStore.isLoggedIn) {
-    username = loginStore.username
-  }
-
-  const preferredLanguage = getPreference('locale', username)
-
-  if (preferredLanguage) {
-    lang = preferredLanguage
-  }
-  // load preferred or navigator language, falling back to English
-  const actualLang = await loadLocaleMessages(setLocaleMessage, lang)
-  await nextTick()
-
-  if (actualLang) {
-    setI18nLanguage(locale, actualLang)
-  }
-}
-
 function configureAxios() {
   axios.defaults.headers.post['Content-Type'] = 'application/json'
 

src/components/ChangeLangCombobox.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { NeCombobox, type NeComboboxOption, savePreference } from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+import { computed, watch } from 'vue'
+import { isStandaloneMode } from '@/lib/config'
+import { useLoginStore as useStandaloneLoginStore } from '@/stores/standalone/standaloneLogin'
+import { useLoginStore as useControllerLoginStore } from '@/stores/controller/controllerLogin'
+
+const { t, locale, availableLocales } = useI18n({ useScope: 'global' })
+const loginStore = isStandaloneMode() ? useStandaloneLoginStore() : useControllerLoginStore()
+
+const supportedLanguages = computed((): NeComboboxOption[] => {
+  return availableLocales.map((locale) => {
+    return {
+      id: locale,
+      label: t(`languages.${locale}`)
+    }
+  })
+})
+
+watch(locale, () => {
+  savePreference('locale', locale.value, loginStore.username)
+})
+</script>
+
+<template>
+  <NeCombobox
+    v-model="locale"
+    :limitedOptionsLabel="t('ne_combobox.limited_options_label')"
+    :noOptionsLabel="t('ne_combobox.dpi.no_options_label')"
+    :noResultsLabel="t('ne_combobox.no_results')"
+    :optionalLabel="t('common.optional')"
+    :options="supportedLanguages"
+    :selected-label="t('ne_combobox.selected')"
+    :user-input-label="t('ne_combobox.user_input_label')"
+  />
+</template>

src/components/controller/SideMenu.vue

@@ -23,19 +23,19 @@ const controllerLogin = useLoginStore()
 
 const navigation: Ref<MenuItem[]> = ref([
   {
-    name: t('controller.units.title'),
+    name: 'controller.units.title',
     to: 'units',
     icon: 'server'
   },
   {
-    name: t('controller.account_settings.title'),
+    name: 'controller.account_settings.title',
     to: 'account',
     icon: 'gear'
   },
   ...(controllerLogin.isAdmin
     ? [
         {
-          name: t('controller.users.title'),
+          name: 'controller.users.title',
           to: 'users',
           icon: 'user-group'
         }
@@ -64,7 +64,7 @@ function isCurrentRoute(itemPath: string) {
         class="h-6 w-8 shrink-0"
         aria-hidden="true"
       />
-      {{ item.name }}
+      {{ t(item.name) }}
     </router-link>
   </li>
 </template>