From 489b4ce0314f8e68ed5357edcd52e31fced32713 Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <angelfqc.18@gmail.com>
Date: Tue, 19 Dec 2023 19:32:27 -0500
Subject: [PATCH] Set i18n locale when changing route

---
 assets/vue/App.vue               | 19 +++++++++-
 assets/vue/composables/locale.js | 64 ++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 assets/vue/composables/locale.js

diff --git a/assets/vue/App.vue b/assets/vue/App.vue
index ad348c300c..e79d30744e 100644
--- a/assets/vue/App.vue
+++ b/assets/vue/App.vue
@@ -50,6 +50,8 @@ import { useSecurityStore } from "./store/securityStore"
 import { usePlatformConfig } from "./store/platformConfig"
 import Toast from "primevue/toast"
 import { useNotification } from "./composables/notification"
+import { useLocale } from "./composables/locale"
+import { useI18n } from "vue-i18n"
 
 const apolloClient = new ApolloClient({
   link: createHttpLink({
@@ -62,6 +64,7 @@ provide(DefaultApolloClient, apolloClient)
 
 const route = useRoute()
 const router = useRouter()
+const i18n = useI18n()
 
 const layout = computed(() => {
   const queryParams = new URLSearchParams(window.location.search)
@@ -161,4 +164,18 @@ axios.interceptors.response.use(
 
 const platformConfigurationStore = usePlatformConfig()
 platformConfigurationStore.initialize()
-</script>
\ No newline at end of file
+
+watch(
+  () => route.params,
+  () => {
+    const { appLocale } = useLocale()
+
+    if (i18n.locale.value !== appLocale.value) {
+      i18n.locale.value = appLocale.value
+    }
+  },
+  {
+    inmediate: true
+  }
+)
+</script>
diff --git a/assets/vue/composables/locale.js b/assets/vue/composables/locale.js
new file mode 100644
index 0000000000..2e9510de20
--- /dev/null
+++ b/assets/vue/composables/locale.js
@@ -0,0 +1,64 @@
+import {usePlatformConfig} from "../store/platformConfig";
+import {useSecurityStore} from "../store/securityStore";
+import {useCidReqStore} from "../store/cidReq";
+import {computed, ref} from "vue";
+
+export function useLocale() {
+  const platformConfigStore = usePlatformConfig()
+  const securityStore = useSecurityStore()
+  const cidReqStore = useCidReqStore()
+
+  const localeList = computed(() => {
+    const list = {};
+
+    const platformLocale = platformConfigStore.getSetting('language.platform_language')
+
+    if (platformLocale) {
+      list['platform_lang'] = platformLocale
+    }
+
+    const userLocale = securityStore.user ? securityStore.user.locale : null
+
+    if (userLocale) {
+      list['user_profil_lang'] = userLocale
+    }
+
+    const courseLocale = cidReqStore.course ? cidReqStore.course.courseLanguage : null
+
+    if (courseLocale) {
+      list['course_lang'] = courseLocale
+    }
+
+    // @todo check language from request
+    //list['user_selected_lang'] = ?
+
+    return list
+  });
+
+  const priorityList = [
+    'language_priority_1',
+    'language_priority_2',
+    'language_priority_3',
+    'language_priority_4',
+  ]
+
+  const appLocale = ref('')
+
+  for (const setting of priorityList) {
+    const priority = platformConfigStore.getSetting(`language.${setting}`)
+
+    if (priority && localeList.value[priority]) {
+      appLocale.value = localeList.value[priority]
+
+      break
+    }
+  }
+
+  if (!appLocale.value) {
+    appLocale.value = document.querySelector('html').lang
+  }
+
+  return {
+    appLocale
+  }
+}