chore(translate): improvement

* Adds primeng locale package. * Refactors the translate service. * Initializes translate service on Core module. Co-Authored-by: Bertrand Zuchuat <[email protected]>
rero · Sep 16, 2024 · 0c7e81e · 0c7e81e
1 parent 2f258fb
commit 0c7e81e
Show file tree

Hide file tree

Showing 14 changed files with 111 additions and 453 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "ngx-toastr": "^18.0.0",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
+    "primelocale": "^1.0.3",
     "primeng": "^17.18.0",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.2",

diff --git a/projects/ng-core-tester/src/app/app.component.ts b/projects/ng-core-tester/src/app/app.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO angular core
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Component, OnInit, inject } from '@angular/core';
-import { CoreConfigService, RecordEvent, RecordService, TitleMetaService, TranslateService } from '@rero/ng-core';
+import { CoreConfigService, RecordEvent, RecordService, TitleMetaService } from '@rero/ng-core';
 import { MenuItem, MessageService } from 'primeng/api';
 
 /**
@@ -28,15 +28,12 @@ import { MenuItem, MessageService } from 'primeng/api';
 export class AppComponent implements OnInit {
 
   /** Service injection */
-  translateService = inject(TranslateService);
+  // translateService = inject(TranslateService);
   configService = inject(CoreConfigService);
   titleMetaService = inject(TitleMetaService);
   recordService = inject(RecordService);
   messageService = inject(MessageService);
 
-  // Current lang of the application
-  lang: string = document.documentElement.lang;
-
   // Available languages
   languages: string[];
 
@@ -48,16 +45,15 @@ export class AppComponent implements OnInit {
 
   // Application language menu
   languageMenu: MenuItem;
+
   /**
    * Component initialization.
    *
    * - Initializes listener to record changes.
-   * - Initializes languages and current language.
    * - Sets title metadata.
    */
   ngOnInit() {
     this.initializeEvents();
-    this.translateService.setLanguage(this.lang);
     // Set default title window when application start
     const prefix = this.configService.prefixWindow;
     if (prefix) {

diff --git a/projects/ng-core-tester/src/app/app.module.ts b/projects/ng-core-tester/src/app/app.module.ts
@@ -21,9 +21,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { CoreConfigService, RecordModule, RecordService, RemoteAutocompleteService, TranslateLoader } from '@rero/ng-core';
-import { defineLocale } from 'ngx-bootstrap/chronos';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
-import { deLocale, enGbLocale, frLocale, itLocale } from 'ngx-bootstrap/locale';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { MenubarModule } from 'primeng/menubar';
 import { AppConfigService } from './app-config.service';
@@ -32,12 +30,12 @@ import { AppComponent } from './app.component';
 import { AppDialogComponent } from './home/dialog/app-dialog.component';
 import { HomeComponent } from './home/home.component';
 import { ToastComponent } from './home/toast/toast.component';
+import { MenuComponent } from './menu/menu.component';
 import { DetailComponent } from './record/document/detail/detail.component';
 import { DocumentComponent } from './record/document/document.component';
 import { EditorComponent } from './record/editor/editor.component';
 import { RecordServiceMock } from './record/editor/record-service-mock';
 import { SearchBarComponent } from './search-bar/search-bar.component';
-import { MenuComponent } from './menu/menu.component';
 import { AppRemoteAutocompleteService } from './service/app-remote-autocomplete.service';
 
 @NgModule({
@@ -86,16 +84,4 @@ import { AppRemoteAutocompleteService } from './service/app-remote-autocomplete.
     ],
     bootstrap: [AppComponent]
 })
-export class AppModule {
-  availableLocales = {
-    de: deLocale,
-    en: enGbLocale,
-    fr: frLocale,
-    it: itLocale
-  };
-  constructor() {
-    Object.keys(this.availableLocales).forEach(locale => {
-      defineLocale(locale, this.availableLocales[locale]);
-    });
-  }
-}
+export class AppModule {}
diff --git a/projects/rero/ng-core/src/lib/core.module.ts b/projects/rero/ng-core/src/lib/core.module.ts
@@ -16,9 +16,9 @@
  */
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { NgModule } from '@angular/core';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoader as BaseTranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { NgxSpinnerModule } from 'ngx-spinner';
@@ -47,6 +47,15 @@ import { TranslateLanguagePipe } from './translate/translate-language.pipe';
 import { TranslateLoader } from './translate/translate-loader';
 import { MenuComponent } from './widget/menu/menu.component';
 import { SortListComponent } from './widget/sort-list/sort-list.component';
+import { NgCoreTranslateService } from './translate/translate-service';
+import { Observable, of } from 'rxjs';
+
+function initializeAppFactory(translateService: NgCoreTranslateService): () => Observable<any> {
+  return () => {
+    translateService.initialize();
+    return of(true);
+  };
+}
 
 @NgModule({
     declarations: [
@@ -115,7 +124,14 @@ import { SortListComponent } from './widget/sort-list/sort-list.component';
     providers: [
       ComponentCanDeactivateGuard,
       ConfirmationService,
-      MessageService
+      MessageService,
+      { provide: TranslateService, useValue: NgCoreTranslateService },
+      {
+        provide: APP_INITIALIZER,
+        useFactory: initializeAppFactory,
+        deps: [NgCoreTranslateService],
+        multi: true
+      }
     ]
 })
 export class CoreModule { }
diff --git a/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.spec.ts b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.spec.ts
@@ -43,7 +43,6 @@ describe('SelectComponent', () => {
         class: 'w-full',
         editable: false,
         filter: false,
-        filterBy: 'label',
         filterMatchMode: 'contains',
         group: false,
         options: [

diff --git a/projects/rero/ng-core/src/lib/translate/date-translate-pipe.spec.ts b/projects/rero/ng-core/src/lib/translate/date-translate-pipe.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO angular core
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,43 +14,45 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { EventEmitter } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
 import { DateTranslatePipe } from './date-translate-pipe';
-import { TranslateService } from './translate-service';
-import en from '@angular/common/locales/en-GB';
-import { registerLocaleData } from '@angular/common';
+import { NgCoreTranslateService } from './translate-service';
 
-let dateTranslateService: DateTranslatePipe;
+describe('DateTranslatePipePipe', () => {
+  let pipe: DateTranslatePipe;
+  let service: NgCoreTranslateService;
 
-export interface LangChangeEvent {
-  lang: string;
-  translations: any;
-}
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        DateTranslatePipe
+      ]
+    });
+    service = TestBed.inject(NgCoreTranslateService);
+    service.initialize();
+    pipe = TestBed.inject(DateTranslatePipe);
+  });
 
-class TranslateServiceMock {
-  get onLangChange() {
-    return new EventEmitter<LangChangeEvent>();
-  }
-  get currentLanguage() {
-    return 'en';
-  }
-}
+  it('should return the english translation of the date (default)', () => {
+    expect(pipe.transform('2019-10-18 12:00:00')).toBe('18 Oct 2019');
+  });
 
-describe('DateTranslatePipePipe', () => {
-  beforeEach(() => {
-    registerLocaleData(en);
-    dateTranslateService = new DateTranslatePipe(
-      new TranslateServiceMock() as unknown as TranslateService
-    );
+  it('should return the French translation of the date', () => {
+    service.use('fr');
+    expect(pipe.transform('2019-10-18 12:00:00')).toBe('18 oct. 2019');
   });
 
-  it('create an instance', () => {
-    const pipe = dateTranslateService;
-    expect(pipe).toBeTruthy();
+  it('should return the German translation of the date', () => {
+    service.use('de');
+    expect(pipe.transform('2019-10-18 12:00:00')).toBe('18.10.2019');
   });
 
-  it('create an instance', () => {
-    const pipe = dateTranslateService;
-    expect(pipe.transform('2019-10-18 12:00:00')).toBe('18 Oct 2019');
+  it('should return the Italian translation of the date', () => {
+    service.use('it');
+    expect(pipe.transform('2019-10-18 12:00:00')).toBe('18 ott 2019');
   });
 });
diff --git a/projects/rero/ng-core/src/lib/translate/date-translate-pipe.ts b/projects/rero/ng-core/src/lib/translate/date-translate-pipe.ts
@@ -15,31 +15,23 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { DatePipe } from '@angular/common';
-import { Inject, Pipe, PipeTransform } from '@angular/core';
-import { TranslateService } from './translate-service';
+import { inject, Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 
 @Pipe({
   name: 'dateTranslate',
   pure: false, // required to update the value when the promise is resolved
 })
 export class DateTranslatePipe extends DatePipe implements PipeTransform {
-  /**
-   * Constructor.
-   *
-   * @param translateService Translate service.
-   */
-  constructor(
-    @Inject(TranslateService) private translateService: TranslateService
-  ) {
-    super(translateService.currentLanguage);
-  }
+
+  translateService = inject(TranslateService);
 
   transform(value: Date | string | number, format?: string, timezone?: string, locale?: string): string | null;
   transform(value: null | undefined, format?: string, timezone?: string, locale?: string): null;
   transform(value: Date | string | number | null | undefined, format?: string, timezone?: string, locale?: string): string | null
   {
     if (!locale) {
-      locale = this.translateService.currentLanguage;
+      locale = this.translateService.currentLang;
     }
 
     if (locale === 'en') {

diff --git a/projects/rero/ng-core/src/lib/translate/primeng/de.json b/projects/rero/ng-core/src/lib/translate/primeng/de.json