fix: add unilingual support (#1395)

staceybeard · web-flow · commit b722b3e9db6a · 2025-07-16T15:29:47.000-04:00
Updated the app to support a unilingual configuration among the currently supported languages ('EN', 'FR'), for example, if an institution wants to configure the app to be in English only.

- Added an environment variable `supportedLanguages` to define which languages are enabled in the system.
- Added a condition to the app's language selector to only display it if there are multiple language options to choose from.
- Refactored the `UserPreferences` service where language is defined.
- Removed some of the unnecessary references to `EN` and `FR` where they were most easy to update. More work will be needed later to completely un-hardcode reliance on these specific languages, for full multilingual support.
diff --git a/env/opal.config.sample.js b/env/opal.config.sample.js
@@ -23,6 +23,8 @@ const config = {
         serviceStatusURL: "./content/service-status.json",
         // Boolean: whether to show the app's version and build number on the front page.
         showVersionOnInit: true,
+        // String: comma-separated list of languages supported in the system (ISO 639-1 codes) with the first language being the default
+        supportedLanguages: 'en,fr',
         // Boolean: whether to use real (production-ready) hospitals for login. If false, development-specific hospitals are used instead.
         useProductionHospitals: false,
         // Boolean: whether to use a sourcemap when building the web code. Should be false in production.
diff --git a/src/js/app.services.js b/src/js/app.services.js
@@ -6,7 +6,6 @@ import "./services/appointments.service.js";
 import "./services/firebase.service.js";
 import "./services/utility.service";
 import "./services/notificationsService.js";
-import "./services/userPreferencesService.js";
 import "./services/userAuthorizationInfoService.js";
 import "./services/updateUIService.js";
 import "./services/documentsService.js";
@@ -45,4 +44,5 @@ import "./services/versionService.js";
 import "./services/hospital.service.js";
 import "./services/profile-selector.service";
 import "./services/user.service";
+import "./services/user-preferences.service.js";
 import "./services/studiesService.js";
diff --git a/src/js/app.values.js b/src/js/app.values.js
@@ -51,7 +51,6 @@
                 setPasswordParam: 'PASSWORD',
                 setLanguageParam: 'LANGUAGE',
                 setLanguageParamProperCase: 'Language',
-                settingsLanguageOptions: ['EN', 'FR'],
                 setFontSizeParam: 'FONTSIZE',
                 settingFontOptions: [
                     {size: 'medium', style: 'fontDescMedium', text: 'SMALL'},
diff --git a/src/js/controllers/appointments/calendarController.js b/src/js/controllers/appointments/calendarController.js
@@ -61,8 +61,7 @@
         vm.noAppointments = false;
 
         /**
-         * The user's preferred language/
-         * Either 'EN' or 'FR'
+         * The user's preferred language
          * @type {string}
          */
         vm.language = '';
diff --git a/src/js/controllers/documents/individualDocumentController.js b/src/js/controllers/documents/individualDocumentController.js
@@ -156,14 +156,10 @@
             if (vm.DocumentDescription !== '') {
                 navigator.pushPage('./views/personal/documents/about-document.html', {'Post': docParams});
             } else {
-                // Check if there is any about link
-                var link = null;
-                docParams.hasOwnProperty("URL_EN") ? link = docParams["URL_" + UserPreferences.getLanguage()] : {};
-
                 // Set the options to send to the content controller
                 var contentOptions = {
                     contentType: docParams.AliasName_EN,
-                    contentLink: link,
+                    contentLink: docParams["URL_" + UserPreferences.getLanguage()],
                     title: 'INFO',
                 };
 
diff --git a/src/js/controllers/home/homeController.js b/src/js/controllers/home/homeController.js
@@ -22,7 +22,7 @@
     ) {
         let vm = this;
 
-        vm.language = 'EN';
+        vm.language = '';
         vm.calledApp = null;
         $scope.infoModalData = [];
 
diff --git a/src/js/controllers/init/technical-legal.controller.js b/src/js/controllers/init/technical-legal.controller.js
@@ -19,7 +19,6 @@
 		let vm = this;
 		let navigator;
 
-		vm.changeLanguage = changeLanguage;
 		vm.goToFeedback = goToFeedback;
 		vm.goToLicense = () => navigator.pushPage('views/init/license.html');
 		vm.goToThirdParty = () => navigator.pushPage('views/init/third-party.html');
@@ -36,21 +35,11 @@
 			vm.navigatorName = Navigator.getNavigatorName();
 
 			vm.authenticated = !!Firebase.getCurrentUser();
-			vm.languageSwitch = (UserPreferences.getLanguage().toUpperCase() !== 'EN');
 			vm.currentYear = new Date().getFullYear();
 			vm.APP_VERSION = Constants.version();
 			vm.APP_BUILD_NUMBER = Constants.build();
 		}
 
-		function changeLanguage(value) {
-
-			if (value) {
-				UserPreferences.setLanguage('FR');
-			} else {
-				UserPreferences.setLanguage('EN');
-			}
-		}
-
 		function goToFeedback() {
 			navigator.pushPage('views/general/feedback/feedback.html', {contentType: 'general'});
 		}
diff --git a/src/js/controllers/settings/accountSettingsController.js b/src/js/controllers/settings/accountSettingsController.js
@@ -23,7 +23,9 @@
     function accountSettingController(UserPreferences, $scope, $timeout, Navigator,
                                       UserHospitalPreferences, LogOutService, User) {
 
-        var vm = this;
+        let vm = this;
+        vm.multipleLanguageOptions = UserPreferences.getSupportedLanguages().length > 1;
+
         vm.accountDeviceBackButton = () => tabbar.setActiveTab(0);
         vm.goToGeneralSettings = goToGeneralSettings;
         vm.goToUpdateAccountField = (param, animation) => settingsNavigator.pushPage('views/settings/update-account-field.html', {param:param},{ animation : animation });
diff --git a/src/js/controllers/settings/changeSettingController.js b/src/js/controllers/settings/changeSettingController.js
@@ -66,7 +66,7 @@
                 } else if (parameters === Params.setLanguageParam) {
                     vm.instruction = "SELECT_LANGUAGE";
                     vm.pickLanguage = UserPreferences.getLanguage();
-                    vm.settingsLanguageOptions = Params.settingsLanguageOptions;
+                    vm.settingsLanguageOptions = UserPreferences.getSupportedLanguages();
                 } else if (parameters === Params.setFontSizeParam) {
                     vm.settingFontOptions = Params.settingFontOptions;
                     vm.instruction = "SELECT_FONT_SIZE";
@@ -82,11 +82,11 @@
 
         //Function to change the language
         function changeLanguage(val) {
-            var objectToSend = {};
-            objectToSend.NewValue = val;
-            objectToSend.FieldToChange = Params.setLanguageParamProperCase;
-            RequestToServer.sendRequest('AccountChange', objectToSend);
             UserPreferences.setLanguage(val, true);
+            RequestToServer.sendRequest('AccountChange', {
+                NewValue: val,
+                FieldToChange: Params.setLanguageParamProperCase,
+            });
         }
 
         /**
diff --git a/src/js/services/announcementsService.js b/src/js/services/announcementsService.js
@@ -133,25 +133,20 @@
         /**
          *@ngdoc method
          *@name setLanguage
-         *@param {Array} item Array or object with announcements
+         *@param {object[]|object} announcements Array of announcements, or single announcement object.
          *@description Translates the array parameter containing announcements to appropriate preferred language specified in {@link OpalApp.service:UserPreferences UserPreferences}.
          *@returns {Array} Returns array with translated values
          **/
-        function setLanguage(item) {
-            var language = UserPreferences.getLanguage();
-            if (Array.isArray( item )) {
-                for (var i = 0; i < item.length; i++) {
-                    //set language
-                    item[i].Title = (language === 'EN')? item[i].PostName_EN : item[i].PostName_FR;
-                    item[i].Body = (language === 'EN')? item[i].Body_EN : item[i].Body_FR;
-                }
-            }else{
-                //set language if string
-                item.Title = (language ==='EN')? item.PostName_EN : item.PostName_FR;
-                item.Body = (language === 'EN')? item.Body_EN: item.Body_FR;
-            }
+        function setLanguage(announcements) {
+            let language = UserPreferences.getLanguage();
+            let announcementList = Array.isArray(announcements) ? announcements : [announcements];
+
+            announcementList.forEach(announcement => {
+                announcement.Title = announcement[`PostName_${language}`];
+                announcement.Body = announcement[`Body_${language}`];
+            });
 
-            return item;
+            return announcements;
         }
 
         /**
diff --git a/src/js/services/documentsService.js b/src/js/services/documentsService.js
@@ -262,28 +262,21 @@ function(UserPreferences,UserAuthorizationInfo,$q,$filter,FileManagerService,Req
         /**
          *@ngdoc method
          *@name setDocumentsLanguage
-         *@param {Array} array Array with documents
+         *@param {object[]|object} documents Array of documents, or single document object.
          *@description Translates the array parameter containing documents to appropriate preferred language specified in {@link OpalApp.service:UserPreferences UserPreferences}.
          *@returns {Array} Returns array with translated values
          **/
-        setDocumentsLanguage:function(array)
+        setDocumentsLanguage:function(documents)
         {
-            //Get language
-            var language = UserPreferences.getLanguage();
+            let language = UserPreferences.getLanguage();
+            let documentsList = Array.isArray(documents) ? documents : [documents];
 
-            //Check if array
-            if (Object.prototype.toString.call( array ) === '[object Array]') {
-                for (var i = 0; i < array.length; i++) {
-                    //set language
-                    array[i].Title = (language=='EN')? array[i].AliasName_EN : array[i].AliasName_FR;
-                    array[i].Description = (language == 'EN')? array[i].AliasDescription_EN : array[i].AliasDescription_FR;
-                }
-            }else{
-                //set language if string
-                array.Description = (language == 'EN')? array.AliasDescription_EN : array.AliasDescription_FR;
-                array.Title = (language=='EN')? array.AliasName_EN : array.AliasName_FR;
-            }
-            return array;
+            documentsList.forEach(document => {
+                document.Title = document[`AliasName_${language}`];
+                document.Description = document[`AliasDescription_${language}`];
+            });
+
+            return documents;
         },
         /**
          *@ngdoc method
diff --git a/src/js/services/educationalMaterialService.js b/src/js/services/educationalMaterialService.js
@@ -46,41 +46,21 @@ function ($q, $filter, LocalStorage, FileManagerService, UserPreferences, Reques
      **/
     var educationalMaterialType = Params.educationalMaterial;
 
-    function setLanguageEduMaterial(array)
+    function setLanguageEduMaterial(materials)
     {
-        var language = UserPreferences.getLanguage();
-
-        if (!array.hasOwnProperty("Language")) {
-            array.Language = language;
-        }
-
-        //Check if array
-        if (Object.prototype.toString.call( array ) === '[object Array]') {
-            if (array.Language != language) {
-                array.forEach(function (element) {
-                    delete element.Content;
-                });
-                array.Language = language;
-            }
-            for (var i = 0; i < array.length; i++) {
-                array[i].Url = (language ==='EN')?array[i].URL_EN:array[i].URL_FR;
-                array[i].Name =(language==='EN')? array[i].Name_EN : array[i].Name_FR;
-                array[i].ShareURL =(language ==='EN')? array[i].ShareURL_EN : array[i].ShareURL_FR;
-                array[i].Type = (language ==='EN')? array[i].EducationalMaterialType_EN : array[i].EducationalMaterialType_FR;
-            }
-        }else{
-            //set language if string
-            if (array.Language != language) {
-                delete array.Content;
-                array.Language = language;
-            }
-            array.Url = (language ==='EN')?array.URL_EN:array.URL_FR;
-            array.Name =(language ==='EN')? array.Name_EN : array.Name_FR;
-            array.Type = (language ==='EN')? array.EducationalMaterialType_EN : array.EducationalMaterialType_FR;
-        }
-        //console.log('Set edu material language:');
-        //console.log(array);
-        return array;
+        let language = UserPreferences.getLanguage();
+        let materialList = Array.isArray(materials) ? materials : [materials];
+
+        materialList.forEach(material => {
+            // Delete content to be re-downloaded later in the right language (when switching languages)
+            delete material.Content;
+            material.Url = material[`URL_${language}`];
+            material.Name = material[`Name_${language}`];
+            material.ShareURL = material[`ShareURL_${language}`];
+            material.Type = material[`EducationalMaterialType_${language}`];
+        });
+
+        return materials;
     }
 
     /**
@@ -119,10 +99,10 @@ function ($q, $filter, LocalStorage, FileManagerService, UserPreferences, Reques
         }
     }
 
-    //Formats the input dates and gets it ready for controllers, updates announcementsArray
+    //Formats the input dates and gets it ready for controllers, updates educationalMaterialArray
     function addEducationalMaterial(edumaterial)
     {
-        //If announcements are undefined simply return
+        //If educational materials are undefined simply return
         if(typeof edumaterial == 'undefined') return;
         for (var i = 0; i < edumaterial.length; i++) {
             //Format the date to javascript
@@ -138,7 +118,7 @@ function ($q, $filter, LocalStorage, FileManagerService, UserPreferences, Reques
                 edumaterial[i].Color = educationalMaterialType['Other'].color;
             }
 
-            //Add to my announcements array
+            //Add to educational material array
             educationalMaterialArray.push(edumaterial[i]);
         }
 
diff --git a/src/js/services/txTeamMessagesService.js b/src/js/services/txTeamMessagesService.js
@@ -160,26 +160,21 @@ myApp.service('TxTeamMessages', ['$filter','RequestToServer','LocalStorage', 'Us
         /**
          *@ngdoc method
          *@name setLanguageTxTeamMessages
-         *@param {Array} array Array with TxTeamMessages
+         *@param {object[]|object} messages Array of messages, or single message object.
          *@description Translates the array parameter containing announcements to appropriate preferred language specified in {@link OpalApp.service:UserPreferences UserPreferences}.
          *@returns {Array} Returns array with translated values
          **/
-        setLanguageTxTeamMessages :function(array)
+        setLanguageTxTeamMessages :function(messages)
         {
-            var language = UserPreferences.getLanguage();
-            //Check if array
-            if (Object.prototype.toString.call( array ) === '[object Array]') {
-                for (var i = 0; i < array.length; i++) {
-                    //set language
-                    array[i].Title = (language=='EN')? array[i].PostName_EN : array[i].PostName_FR;
-                    array[i].Body = (language == 'EN')? array[i].Body_EN : array[i].Body_FR;
-                }
-            }else{
-                //set language if string
-                array.Title = (language=='EN')? array.PostName_EN : array.PostName_FR;
-                array.Body = (language == 'EN')? array.Body_EN: array.Body_FR;
-            }
-            return array;
+            let language = UserPreferences.getLanguage();
+            let messageList = Array.isArray(messages) ? messages : [messages];
+
+            messageList.forEach(message => {
+                message.Title = message[`PostName_${language}`];
+                message.Body = message[`Body_${language}`];
+            });
+
+            return messages;
         },
         /**
          *@ngdoc method
diff --git a/src/js/services/user-preferences.service.js b/src/js/services/user-preferences.service.js
diff --git a/src/js/services/userPreferencesService.js b/src/js/services/userPreferencesService.js
diff --git a/src/js/services/versionService.js b/src/js/services/versionService.js
diff --git a/src/views/home/checkin/checkin-list.html b/src/views/home/checkin/checkin-list.html
diff --git a/src/views/settings/settings.html b/src/views/settings/settings.html
diff --git a/webpack.config.js b/webpack.config.js
