feat: timeago now uses userService lang$ to change configuration

markuczy · Mar 12, 2024 · 03bc849 · 03bc849
1 parent 3abc3fc
commit 03bc849
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 22 deletions.
diff --git a/libs/angular-accelerator/src/lib/angular-accelerator.module.ts b/libs/angular-accelerator/src/lib/angular-accelerator.module.ts
@@ -10,15 +10,13 @@ import {
   TranslateModule,
 } from '@ngx-translate/core'
 import {
-  IL10nsStrings,
   TimeagoClock,
   TimeagoCustomFormatter,
   TimeagoDefaultClock,
   TimeagoFormatter,
   TimeagoIntl,
   TimeagoModule,
 } from 'ngx-timeago'
-import { strings as englishStrings } from 'ngx-timeago/language-strings/en'
 
 import { AppStateService, UserService } from '@onecx/angular-integration-interface'
 import { createTranslateLoader } from '@onecx/angular-integration-interface'
@@ -41,6 +39,7 @@ import { DiagramComponent } from './components/diagram/diagram.component'
 import { DynamicPipe } from './pipes/dynamic.pipe'
 import { IfPermissionDirective } from './directives/if-permission.directive'
 import { OcxTimeAgoPipe } from './pipes/ocxtimeago.pipe'
+import { OcxTimeagoIntl } from './utils/ocxtimeagointl.utils'
 
 export class AngularAcceleratorMissingTranslationHandler implements MissingTranslationHandler {
   handle(params: MissingTranslationHandlerParams) {
@@ -49,10 +48,6 @@ export class AngularAcceleratorMissingTranslationHandler implements MissingTrans
   }
 }
 
-export class OcxTimeagoIntl extends TimeagoIntl {
-  override strings: IL10nsStrings = englishStrings
-}
-
 @NgModule({
   imports: [
     CommonModule,
@@ -101,7 +96,10 @@ export class OcxTimeagoIntl extends TimeagoIntl {
     },
     {
       provide: TimeagoIntl,
-      useClass: OcxTimeagoIntl,
+      useFactory: (userService: UserService) => {
+        return new OcxTimeagoIntl(userService)
+      },
+      deps: [UserService],
     },
     importProvidersFrom(TimeagoModule),
     {

diff --git a/libs/angular-accelerator/src/lib/utils/ocxtimeagointl.utils.ts b/libs/angular-accelerator/src/lib/utils/ocxtimeagointl.utils.ts
@@ -0,0 +1,38 @@
+import { filter, map } from 'rxjs'
+import { IL10nsStrings, TimeagoIntl } from 'ngx-timeago'
+import { strings as englishStrings } from 'ngx-timeago/language-strings/en'
+import { strings as germanStrings } from 'ngx-timeago/language-strings/de'
+import { UserService } from '@onecx/angular-integration-interface'
+
+export class OcxTimeagoIntl extends TimeagoIntl {
+  private LANG_TO_STRINGS: { [key: string]: IL10nsStrings } = {
+    en: englishStrings,
+    de: germanStrings,
+  }
+  private DEFAULT_LANG = 'en'
+
+  constructor(protected userService: UserService) {
+    super()
+    this.strings = englishStrings
+    userService.lang$
+      .pipe(
+        filter((v) => v !== undefined),
+        map((lang) => {
+          return this.getBestMatchLanguage(lang as string)
+        })
+      )
+      .subscribe((lang) => {
+        this.strings = this.LANG_TO_STRINGS[lang]
+        this.changes.next()
+      })
+  }
+
+  getBestMatchLanguage(lang: string) {
+    if (Object.keys(this.LANG_TO_STRINGS).includes(lang)) {
+      return lang
+    } else {
+      console.log(`${lang} is not supported. Using ${this.DEFAULT_LANG} as a fallback.`)
+    }
+    return this.DEFAULT_LANG
+  }
+}
diff --git a/libs/portal-integration-angular/src/lib/core/utils/add-initialize-module-guard.utils.spec.ts b/libs/portal-integration-angular/src/lib/core/utils/add-initialize-module-guard.utils.spec.ts
@@ -4,17 +4,15 @@ import { ConfigurationService } from '../../services/configuration.service'
 import { InitializeModuleGuard } from '../../services/initialize-module-guard.service'
 import { UserService } from '@onecx/angular-integration-interface'
 import { addInitializeModuleGuard } from './add-initialize-module-guard.utils'
-import { TimeagoIntl } from 'ngx-timeago'
 
 class MockInitializeModuleGuard extends InitializeModuleGuard {
   constructor(
     translateService: TranslateService,
     configService: ConfigurationService,
     appStateService: AppStateService,
-    userService: UserService,
-    timeagoIntl: TimeagoIntl
+    userService: UserService
   ) {
-    super(translateService, configService, appStateService, userService, timeagoIntl)
+    super(translateService, configService, appStateService, userService)
   }
 }
 

diff --git a/libs/portal-integration-angular/src/lib/services/initialize-module-guard.service.ts b/libs/portal-integration-angular/src/lib/services/initialize-module-guard.service.ts
@@ -5,24 +5,16 @@ import { filter, from, isObservable, map, mergeMap, Observable, of, tap, zip } f
 import { AppStateService } from '@onecx/angular-integration-interface'
 import { ConfigurationService } from './configuration.service'
 import { UserService } from '@onecx/angular-integration-interface'
-import { IL10nsStrings, TimeagoIntl } from 'ngx-timeago'
-import { strings as englishStrings } from 'ngx-timeago/language-strings/en'
-import { strings as germanStrings } from 'ngx-timeago/language-strings/de'
 
 @Injectable({ providedIn: 'any' })
 export class InitializeModuleGuard implements CanActivate {
   private SUPPORTED_LANGS = ['en', 'de']
-  private LANG_TO_STRINGS: { [key: string]: IL10nsStrings } = {
-    en: englishStrings,
-    de: germanStrings,
-  }
   private DEFAULT_LANG = 'en'
   constructor(
     protected translateService: TranslateService,
     protected configService: ConfigurationService,
     protected appStateService: AppStateService,
-    protected userService: UserService,
-    protected intl: TimeagoIntl
+    protected userService: UserService
   ) {}
 
   canActivate(
@@ -57,8 +49,6 @@ export class InitializeModuleGuard implements CanActivate {
       filter((v) => v !== undefined),
       mergeMap((lang) => {
         const bestMatchLang = this.getBestMatchLanguage(lang as string)
-        this.intl.strings = this.LANG_TO_STRINGS[bestMatchLang]
-        this.intl.changes.next()
         return this.translateService.use(bestMatchLang)
       }),
       mergeMap(() => of(true))