feat: Add Default Language Main Setting - MEED-7144 - Meeds-io/meeds#2230 (#3950)

This change will allow to configure the default language to be used in
email Notifications when the user didn't connected to platform yet. The
default language will be used as well in `TranslationField.vue`
component to set mandatory default language as well.

Author: boubaker

webapp/portlet/src/main/resources/locale/portlet/GeneralSettings_en.properties

@@ -166,3 +166,9 @@ generalSettings.errorUploadingPreview=An error occurred while uploading Illustra
 generalSettings.globalPageFullWindow=Full Window Pages
 generalSettings.editCustomStyle=Edit custom style
 generalSettings.customStyle=Custom Style
+
+generalSettings.manageDefaultLanguage=Language
+generalSettings.subtitle.manageDefaultLanguage=Select the default platform language
+generalSettings.manageDefaultLanguage.drawer.title=Default Language
+generalSettings.defaultLanguageSettingSaved=Default language saved successfully.
+generalSettings.defaultLanguageSettingError=Error while saving default language setting. Please contact the administrator or try again later.

webapp/portlet/src/main/webapp/vue-apps/component-translation-field/js/TranslationService.js

@@ -65,21 +65,6 @@ export function saveTranslations(objectType, objectId, fieldName, labels) {
   });
 }
 
-export function saveDefaultLanguage(lang) {
-  return fetch(`${eXo.env.portal.context}/${eXo.env.portal.rest}/social/translations/configuration/defaultLanguage`, {
-    method: 'PUT',
-    credentials: 'include',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded'
-    },
-    body: `lang=${lang}`,
-  }).then((resp) => {
-    if (!resp?.ok) {
-      throw new Error(`Error when saving default language '${lang}' configuration`);
-    }
-  });
-}
-
 export function deleteTranslations(objectType, objectId) {
   return fetch(`${eXo.env.portal.context}/${eXo.env.portal.rest}/social/translations/${objectType}/${objectId}`, {
     method: 'DELETE',

webapp/portlet/src/main/webapp/vue-apps/general-settings/components/GeneralSettings.vue

@@ -138,6 +138,23 @@
                   </v-btn>
                 </v-list-item-action>
               </v-list-item>
+              <v-list-item class="px-0" two-line>
+                <v-list-item-content>
+                  <v-list-item-title class="text-title">
+                    {{ $t('generalSettings.manageDefaultLanguage') }}
+                  </v-list-item-title>
+                  <v-list-item-subtitle>
+                    {{ $t('generalSettings.subtitle.manageDefaultLanguage') }}
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+                <v-list-item-action>
+                  <v-btn
+                    icon
+                    @click="$root.$emit('default-language-edit')">
+                    <v-icon size="18" class="icon-default-color">fa-edit</v-icon>
+                  </v-btn>
+                </v-list-item-action>
+              </v-list-item>
               <v-list-item class="px-0" two-line>
                 <v-list-item-content>
                   <v-list-item-title class="text-title">
@@ -168,6 +185,9 @@
         persistent
         @ok="closeEffectively" />
       <portal-general-settings-public-site-drawer />
+      <portal-general-settings-default-language-drawer
+        :branding="branding"
+        @refresh="initBranding" />
     </v-main>
   </v-app>
 </template>
@@ -209,12 +229,18 @@ export default {
   methods: {
     init() {
       this.$root.loading = true;
-      return this.$brandingService.getBrandingInformation()
-        .then(data => this.branding = data)
-        .then(() => this.$registrationService.getRegistrationSettings())
-        .then(data => this.registrationSettings = data)
+      return this.initBranding()
+        .then(this.initRegistration)
         .finally(() => this.$root.loading = false);
     },
+    initBranding() {
+      return this.$brandingService.getBrandingInformation()
+        .then(data => this.branding = data);
+    },
+    initRegistration() {
+      return this.$registrationService.getRegistrationSettings()
+        .then(data => this.registrationSettings = data);
+    },
     close() {
       if (this.changed) {
         this.$refs.closeConfirmDialog.open();

webapp/portlet/src/main/webapp/vue-apps/general-settings/components/language/DefaultLanguageDrawer.vue

@@ -0,0 +1,85 @@
+<template>
+  <exo-drawer
+    ref="drawer"
+    v-model="drawer"
+    id="defaultLanguageDrawer"
+    allow-expand
+    right>
+    <template slot="title">
+      {{ $t('generalSettings.manageDefaultLanguage.drawer.title') }}
+    </template>
+    <template v-if="drawer" slot="content">
+      <v-radio-group v-model="language" class="px-4">
+        <v-radio
+          v-for="lang in languages"
+          :key="lang.value"
+          :label="lang.text"
+          :value="lang.value"
+          class="text-capitalize" />
+      </v-radio-group>
+    </template>
+    <template slot="footer">
+      <div class="d-flex">
+        <v-spacer />
+        <v-btn
+          class="btn me-2"
+          @click="close">
+          {{ $t('generalSettings.cancel') }}
+        </v-btn>
+        <v-btn
+          class="btn btn-primary"
+          @click="saveLanguage">
+          {{ $t('generalSettings.apply') }}
+        </v-btn>
+      </div>
+    </template>
+  </exo-drawer>
+</template>
+
+<script>
+export default {
+  props: {
+    branding: {
+      type: Object,
+      default: null,
+    },
+  },
+  data: () => ({
+    drawer: false,
+    language: null,
+  }),
+  computed: {
+    languages() {
+      return this.branding?.supportedLanguages && Object.keys(this.branding?.supportedLanguages).map(l => ({
+        value: l.replace('_', '-'),
+        text: this.branding.supportedLanguages[l],
+      })) || [];
+    },
+  },
+  created() {
+    this.$root.$on('default-language-edit', this.open);
+  },
+  methods: {
+    open() {
+      this.language = this.branding?.defaultLanguage;
+      this.$refs.drawer.open();
+    },
+    saveLanguage() {
+      const lang = this.language.replace('-', '_');
+      this.loading = true;
+      this.$languageSettingService.saveDefaultLanguage(lang)
+        .then(() => {
+          this.$emit('refresh');
+          this.$root.$emit('alert-message', this.$t('generalSettings.defaultLanguageSettingSaved'), 'success');
+          this.close();
+        })
+        .catch(() => this.$root.$emit('alert-message', this.$t('generalSettings.defaultLanguageSettingError'), 'error'))
+        .finally(() => this.loading = false);
+    },
+    close() {
+      this.$refs.drawer.close();
+    },
+  },
+};
+</script>
+

webapp/portlet/src/main/webapp/vue-apps/general-settings/initComponents.js

@@ -37,6 +37,7 @@ import HubAccess from './components/registration/HubAccess.vue';
 import DefaultSpacesDrawer from './components/registration/DefaultSpacesDrawer.vue';
 
 import PublicSiteEditDrawer from './components/public-site/PublicSiteEditDrawer.vue';
+import DefaultLanguageDrawer from './components/language/DefaultLanguageDrawer.vue';
 
 const components = {
   'portal-general-settings': GeneralSettings,
@@ -55,6 +56,7 @@ const components = {
   'portal-general-settings-hub-access': HubAccess,
   'portal-general-settings-default-spaces-drawer': DefaultSpacesDrawer,
   'portal-general-settings-public-site-drawer': PublicSiteEditDrawer,
+  'portal-general-settings-default-language-drawer': DefaultLanguageDrawer,
 };
 
 for (const key in components) {

webapp/portlet/src/main/webapp/vue-apps/general-settings/js/LanguageSettingService.js

@@ -0,0 +1,34 @@
+/**
+ * This file is part of the Meeds project (https://meeds.io/).
+ *
+ * Copyright (C) 2020 - 2024 Meeds Association contact@meeds.io
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ * 
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+export function saveDefaultLanguage(lang) {
+  return fetch(`${eXo.env.portal.context}/${eXo.env.portal.rest}/social/translations/configuration/defaultLanguage`, {
+    method: 'PUT',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    body: `lang=${lang}`,
+  }).then((resp) => {
+    if (!resp?.ok) {
+      throw new Error(`Error when saving default language '${lang}' configuration`);
+    }
+  });
+}

webapp/portlet/src/main/webapp/vue-apps/general-settings/services.js

@@ -18,7 +18,11 @@
  */
 
 import * as registrationService from './js/RegistrationService.js';
+import * as languageSettingService from './js/LanguageSettingService.js';
 
 window.Object.defineProperty(Vue.prototype, '$registrationService', {
   value: registrationService,
 });
+window.Object.defineProperty(Vue.prototype, '$languageSettingService', {
+  value: languageSettingService,
+});

webapp/portlet/src/main/webapp/vue-apps/user-setting-language/components/UserLanguageDrawer.vue

@@ -2,7 +2,7 @@
   <exo-drawer
     ref="userLanguageDrawer"
     class="userLanguageDrawer"
-    body-classes="hide-scroll decrease-z-index-more"
+    allow-expand
     right>
     <template slot="title">
       {{ $t('UserSettings.language') }}