Merge pull request #2317 from IDEMSInternational/feat/rtl-language-su…

…pport feat: add support for RTL languages
IDEMSInternational · May 23, 2024 · 49ff67b · 49ff67b
2 parents fff61d8 + f057f36
commit 49ff67b
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 4 deletions.
diff --git a/packages/data-models/appConfig.ts b/packages/data-models/appConfig.ts
@@ -51,6 +51,15 @@ const APP_LANGUAGES = {
   default: "gb_en",
 };
 
+export interface ILanguageMeta {
+  rtl?: boolean;
+}
+const APP_LANGUAGES_META: { [languageCode: string]: ILanguageMeta } = {
+  en_rtl: {
+    rtl: true,
+  },
+};
+
 /** Specifies the skins available to the current app build.
  * "defaultSkinName": the name of the skin used by default for a given build
  * "available": an array of all skins that are available to the current build */
@@ -221,6 +230,7 @@ const APP_CONFIG = {
   APP_INITIALISATION_DEFAULTS,
   APP_AUTHENTICATION_DEFAULTS,
   APP_LANGUAGES,
+  APP_LANGUAGES_META,
   APP_ROUTE_DEFAULTS,
   APP_SIDEMENU_DEFAULTS,
   APP_FOOTER_DEFAULTS,

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,4 +1,9 @@
-<ion-app *ngIf="renderAppTemplates" contentId="main" [attr.data-platform]="platforms">
+<ion-app
+  *ngIf="renderAppTemplates"
+  contentId="main"
+  [attr.data-platform]="platforms"
+  [dir]="templateTranslateService.languageDirection()"
+>
   <!-- Left Sidebar -->
   <ion-menu
     *ngIf="sideMenuDefaults.enabled"

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -89,7 +89,8 @@ export class AppComponent {
     private analyticsService: AnalyticsService,
     private localNotificationService: LocalNotificationService,
     private localNotificationInteractionService: LocalNotificationInteractionService,
-    private templateTranslateService: TemplateTranslateService,
+    // make public so that language direction signal can be read directly in template
+    public templateTranslateService: TemplateTranslateService,
     private crashlyticsService: CrashlyticsService,
     private appDataService: AppDataService,
     private authService: AuthService,
@@ -112,6 +113,7 @@ export class AppComponent {
     this.platform.ready().then(async () => {
       this.platforms = this.platform.platforms().join(" ");
       this.subscribeToAppConfigChanges();
+
       // ensure deployment field set correctly for use in any startup services or templates
       localStorage.setItem(this.appFields.DEPLOYMENT_NAME, this.DEPLOYMENT_NAME);
       localStorage.setItem(this.appFields.APP_VERSION, this.APP_VERSION);

diff --git a/src/app/shared/components/template/services/template-translate.service.ts b/src/app/shared/components/template/services/template-translate.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable, WritableSignal, signal } from "@angular/core";
 import { IAppConfig } from "data-models";
 import { BehaviorSubject } from "rxjs";
 import { AppConfigService } from "src/app/shared/services/app-config/app-config.service";
@@ -21,6 +21,8 @@ export class TemplateTranslateService extends AsyncServiceBase {
   app_language$ = new BehaviorSubject<string>(null);
   appFields: IAppConfig["APP_FIELDS"];
   appLanguages: IAppConfig["APP_LANGUAGES"];
+  appLanguagesMeta: IAppConfig["APP_LANGUAGES_META"];
+  languageDirection: WritableSignal<"ltr" | "rtl"> = signal("ltr");
   translation_strings = {};
 
   constructor(
@@ -54,14 +56,16 @@ export class TemplateTranslateService extends AsyncServiceBase {
   /** Set the local storage variable that tracks the app language */
   async setLanguage(code: string, updateDB = true) {
     if (code) {
+      console.log("[SET LANGUAGE]", code);
       if (updateDB) {
         this.localStorageService.setString(this.appFields.APP_LANGUAGE, code);
       }
       const translationStrings = await this.appDataService.getTranslationStrings(code);
       this.translation_strings = translationStrings || {};
       // update observable for subscribers
       this.app_language$.next(code);
-      // console.log("[Language Set]", code);
+      // update language direction signal
+      this.languageDirection.set(this.appLanguagesMeta?.[code]?.rtl ? "rtl" : "ltr");
     }
   }
 
@@ -141,6 +145,7 @@ export class TemplateTranslateService extends AsyncServiceBase {
     this.appConfigService.appConfig$.subscribe((appConfig: IAppConfig) => {
       this.appFields = appConfig.APP_FIELDS;
       this.appLanguages = appConfig.APP_LANGUAGES;
+      this.appLanguagesMeta = appConfig.APP_LANGUAGES_META;
     });
   }
 }