Dynamically load language files (#446)

resources/scripts/admin/stores/global.js

@@ -50,7 +50,7 @@ export const useGlobalStore = (useWindow = false) => {
         return new Promise((resolve, reject) => {
           axios
             .get('/api/v1/bootstrap')
-            .then((response) => {
+            .then(async (response) => {
               const companyStore = useCompanyStore()
               const userStore = useUserStore()
               const moduleStore = useModuleStore()
@@ -71,8 +71,8 @@ export const useGlobalStore = (useWindow = false) => {
               moduleStore.apiToken = response.data.global_settings.api_token
               moduleStore.enableModules = response.data.modules
 
-                // company store
-                companyStore.companies = response.data.companies
+              // company store
+              companyStore.companies = response.data.companies
               companyStore.selectedCompany = response.data.current_company
               companyStore.setSelectedCompany(response.data.current_company)
               companyStore.selectedCompanySettings =
@@ -80,9 +80,31 @@ export const useGlobalStore = (useWindow = false) => {
               companyStore.selectedCompanyCurrency =
                 response.data.current_company_currency
 
-              if(typeof global.locale !== 'string') {
-                global.locale.value =
-                  response.data.current_user_settings.language || 'en'
+              // Determine and load the appropriate language
+              const userLanguage = response.data.current_user_settings?.language
+              const companyLanguage = response.data.current_company_settings?.language
+              const targetLanguage = userLanguage || companyLanguage || 'en'
+
+              // Load the language dynamically if it's not English
+              if (targetLanguage !== 'en' && window.loadLanguage) {
+                try {
+                  await window.loadLanguage(targetLanguage)
+                } catch (error) {
+                  console.warn('Failed to load language during bootstrap:', error)
+                  // Fall back to English if loading fails
+                  if (typeof global.locale !== 'string') {
+                    global.locale.value = 'en'
+                  } else {
+                    global.locale = 'en'
+                  }
+                }
+              } else {
+                // Set locale for English or when loadLanguage is not available
+                if (typeof global.locale !== 'string') {
+                  global.locale.value = targetLanguage
+                } else {
+                  global.locale = targetLanguage
+                }
               }
 
               this.isAppLoaded = true

resources/scripts/admin/views/installation/Installation.vue

@@ -65,7 +65,8 @@ export default {
       }
 
       if(typeof res.data.profile_language === 'string') {
-        global.locale.value = res.data.profile_language
+        // Use dynamic language loading instead of direct assignment
+        await window.loadLanguage(res.data.profile_language)
       }
 
       let dbstep = parseInt(res.data.profile_complete)

resources/scripts/admin/views/installation/Step0SetLanguage.vue

@@ -27,6 +27,8 @@
 
       <BaseButton
         v-show="!isFetchingInitialData"
+        :loading="isChangingLanguage"
+        :disabled="isChangingLanguage"
         @click="next"
       >
         {{ $t('wizard.continue') }}
@@ -43,12 +45,11 @@
 import { ref, onMounted } from 'vue'
 import { useInstallationStore } from '@/scripts/admin/stores/installation.js'
 
-const { global } = window.i18n
-
 const emit = defineEmits(['next'])
 
 let isFetchingInitialData = ref(false)
 let isSaving = ref(false)
+let isChangingLanguage = ref(false)
 let languages = ref([])
 let currentLanguage = 'en'
 
@@ -75,11 +76,19 @@ function next() {
   isSaving.value = false
 }
 
-function changeLanguage(event){
-  if(typeof global.locale !== 'string') {
-    global.locale.value = event
+async function changeLanguage(event) {
+  if (!event) return
+
+  isChangingLanguage.value = true
+
+  try {
+    // Dynamically load the selected language
+    await window.loadLanguage(event)
+    currentLanguage.value = event
+  } catch (error) {
+    console.error('Failed to change language:', error)
+  } finally {
+    isChangingLanguage.value = false
   }
 }
 </script>
-
-

resources/scripts/admin/views/settings/AccountSetting.vue

@@ -200,6 +200,9 @@ async function updateUserData() {
     // Update Language if changed
 
     if (userStore.currentUserSettings.language !== userForm.language) {
+      // Load the new language dynamically before updating settings
+      await window.loadLanguage(userForm.language)
+
       await userStore.updateUserSettings({
         settings: {
           language: userForm.language,

resources/scripts/admin/views/settings/PreferencesSetting.vue

@@ -105,7 +105,7 @@
             class="w-full"
           />
         </BaseInputGroup>
-        
+
         <BaseInputGroup
           :label="$t('settings.preferences.time_format')"
           :content-loading="isFetchingInitialData"
@@ -378,6 +378,12 @@ async function updatePreferencesData() {
 
   isSaving.value = true
   delete data.settings.link_expiry_days
+
+  // If language is being changed, load it dynamically first
+  if (companyStore.selectedCompanySettings.language !== settingsForm.language) {
+    await window.loadLanguage(settingsForm.language)
+  }
+
   let res = await companyStore.updateCompanySettings({
     data: data,
     message: 'settings.preferences.updated_message',