Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 8c93477

Browse files
authored
feat: add support for multilingual UI (#1479)
Updated code across the app to support a truly multilingual UI. While `angular-translate` was already set up to facilitate adding more languages, the app's controllers and views still expected data to be provided in either English or French. This meant that setting the app to a new language would break the majority of the data display. The PR linked below moves the responsibility to the listener to provide translated strings and data, with a fallback language when the requested language isn't available. This allows the app to receive and display data in any language, and allows the user to set the UI to a language other than English or French. The following example describes the most common change required for a multilingual UI. Suppose a piece of data has a description; the data would come from the listener with fields `Description_EN` and `Description_FR`. The app view would then display `Description_${language}`. However, with the app in Spanish (for example), the view would be trying to access `Description_ES`, which doesn't exist. To fix this problem, the code was changed to expect just a `Description`, already translated by the listener either in the correct language or a fallback language. Extra changes: - Deleted unused `src/views/personal/documents/pdf-view.html`. Then renamed `pdf-view.directive.css` to `pdf-viewer.directive.css` for clarity. - Installed `@babel/plugin-proposal-throw-expressions` to allow the syntax `return data || throw error;` (used in `dynamicContentService.js` when a link is missing in the chosen language and in the fallback language).
1 parent b5a24d6 commit 8c93477

81 files changed

Lines changed: 304 additions & 877 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

REUSE.toml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,15 @@ SPDX-FileCopyrightText = "Copyright (C) 2021 Opal Health Informatics Group at th
4040
SPDX-License-Identifier = "Apache-2.0"
4141

4242

43+
[[annotations]]
44+
path = [
45+
"babel.config.json",
46+
]
47+
precedence = "override"
48+
SPDX-FileCopyrightText = "Copyright (C) 2026 Opal Health Informatics Group at the Research Institute of the McGill University Health Centre <[email protected]>"
49+
SPDX-License-Identifier = "Apache-2.0"
50+
51+
4352
[[annotations]]
4453
path = [
4554
"res/**",

babel.config.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"plugins": ["@babel/plugin-proposal-throw-expressions"]
3+
}

content/README.md

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,15 @@ external server, with the URL specified in the `serviceStatusURL` setting in
6969
`opal.config.js`. A sample configuration file for `Service Status` is available at
7070
`content/service-status.sample.json`.
7171

72-
For testing `Service Status` using a local sample, create
73-
`content/service-status.json` file by
74-
copying `content/service-status.sample.json`.
75-
In the new file provide a string to `Announcement` setting that would
76-
be shown during app startup.
72+
In production, it's important to host the service status file on an external server,
73+
ideally on a different server than the one on which the Opal backend software is running.
74+
This will allow users to be informed of service disruptions even in the case of a complete failure of the main server.
75+
76+
However, for testing or in non-production environments, a service status file can be provided locally.
77+
To use a local file, copy `content/service-status.sample.json` to `content/service-status.json`,
78+
and make sure that the `serviceStatusURL` points to this path.
79+
In the new file, provide the `title` and `message` strings that will be shown at app startup.
80+
If `message` is left empty, no pop-up will be shown (this can be used to disable the feature when not in use).
7781
7882
## Deployment
7983

content/service-status.sample.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,10 @@
66
"fr": {
77
"title": "Annonce",
88
"message": ""
9+
},
10+
"xx": {
11+
"_comment": "Any additional language entries can be added according to the languages supported in the app (see `supportedLanguages` in `opal.config.js`)",
12+
"title": "",
13+
"message": ""
914
}
1015
}

env/opal.config.sample.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ const config = {
2525
showVersionOnInit: true,
2626
// String: comma-separated list of languages supported in the system (ISO 639-1 codes) with the first language being the default
2727
supportedLanguages: 'en,fr',
28+
// String: language (ISO 639-1 code) used as a fallback for frontend elements that aren't available in the user's chosen language, for example, app links
29+
fallbackLanguage: 'en',
2830
// Boolean: whether to use real (production-ready) hospitals for login. If false, development-specific hospitals are used instead.
2931
useProductionHospitals: false,
3032
// Boolean: whether to use a sourcemap when building the web code. Should be false in production.

package-lock.json

Lines changed: 21 additions & 29 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
},
106106
"devDependencies": {
107107
"@babel/core": "7.28.5",
108+
"@babel/plugin-proposal-throw-expressions": "7.27.1",
108109
"@babel/plugin-transform-runtime": "7.28.5",
109110
"@babel/preset-env": "7.28.5",
110111
"@semantic-release/changelog": "6.0.3",

0 commit comments

Comments
 (0)