interface: instability of the interface language

* Closes rero/sonar#741.

Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>

projects/sonar/src/app/_layout/admin/admin.component.ts

@@ -14,6 +14,7 @@
  * 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 { HttpClient } from '@angular/common/http';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { TranslateService } from '@rero/ng-core';
 import { NgxSpinnerService } from 'ngx-spinner';
@@ -50,7 +51,8 @@ export class AdminComponent implements OnInit, OnDestroy {
     private _spinner: NgxSpinnerService,
     private _userService: UserService,
     private _configService: AppConfigService,
-    private _translateService: TranslateService
+    private _translateService: TranslateService,
+    private _httpClient: HttpClient
   ) {}
 
   get currentLanguage(): string {
@@ -112,5 +114,17 @@ export class AdminComponent implements OnInit, OnDestroy {
    */
   changeLanguage(languageCode: string) {
     this._translateService.setLanguage(languageCode);
+    this._changeFlaskLanguage(languageCode);
+  }
+
+  /**
+   * Change language on frontend flask.
+   *
+   * @param languageCode 2 digit language code.
+   */
+  private _changeFlaskLanguage(languageCode: string): void {
+    this._httpClient
+      .get(`/lang/${languageCode}`, { responseType: 'text' })
+        .subscribe();
   }
 }

projects/sonar/src/app/app-translate-loader.spec.ts

@@ -104,11 +104,11 @@ describe('AppTranslateLoader', () => {
     });
   });
 
-  it('should return the unmodified german translation dictionary', () => {
+  it('should return the modified german translation dictionary with the first value in the custom array', () => {
     translateService.use('de');
     appTranslateLoader.getTranslation('de').subscribe((dict: any) => {
       const customF1Key = 'Custom field 1';
-      expect(dict[customF1Key]).toBe('Custom field 1');
+      expect(dict[customF1Key]).toBe('Custom fre 1');
     });
   });
 });

projects/sonar/src/app/app-translate-loader.ts

@@ -1,4 +1,3 @@
-
 /*
  * SONAR User Interface
  * Copyright (C) 2021 RERO
@@ -59,11 +58,18 @@ export class AppTranslateLoader extends NgCoreTranslateLoader {
             (mapping: {code: string, bibCode: string}) => mapping.code === lang
           ).bibCode;
           [1, 2, 3].forEach((id: number) => {
-            const label = user.organisation['documentsCustomField' + id].label;
-            if (label) {
-              const entry = label.find((lab: any) => lab.language === bibLanguage);
-              if (entry) {
-                translation['Custom field ' + id] = entry.value;
+            const key = 'documentsCustomField' + id;
+            if (key in user.organisation) {
+              if ('label' in user.organisation[key]) {
+                const label = user.organisation[key].label;
+                const entry = label.find((lab: any) => lab.language === bibLanguage);
+                if (entry) {
+                  translation['Custom field ' + id] = entry.value;
+                } else {
+                  // If we do not have a value for the selected language,
+                  // we take the first value in the array.
+                  translation['Custom field ' + id] = label[0].value;
+                }
               }
             }
           });

projects/sonar/src/app/app.component.ts

@@ -14,57 +14,32 @@
  * 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 { HttpClient } from '@angular/common/http';
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import {
-  LangChangeEvent,
-  TranslateService as NgxTranslateService
-} from '@ngx-translate/core';
-import { TranslateService } from '@rero/ng-core';
-import { Subscription } from 'rxjs';
+import { Component, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { TranslateService as CoreTranslateService } from '@rero/ng-core';
 
 @Component({
   selector: 'sonar-root',
   templateUrl: './app.component.html',
 })
-export class AppComponent implements OnDestroy, OnInit {
-  // Change language subscription.
-  private _changeLanguageSubscription: Subscription;
+export class AppComponent implements OnInit {
 
   /**
    * Constructor.
-   *
-   * @param _translateService Translate service.
-   * @param _ngxTranslateService NgxTranslateService.
+   * @param _translateService TranslateService.
    */
   constructor(
     private _translateService: TranslateService,
-    private _ngxTranslateService: NgxTranslateService,
-    private _httpClient: HttpClient
+    private _coreTranslateService: CoreTranslateService
   ) {}
 
   /**
    * Component init hook.
    */
   ngOnInit() {
-    this._changeLanguageSubscription =
-      this._ngxTranslateService.onLangChange.subscribe(
-        (event: LangChangeEvent) => {
-          // Change the language in flask application. Mandatory to set the responseType
-          // as `text` to avoid an error in the response.
-          this._httpClient
-            .get(`/lang/${event.lang}`, { responseType: 'text' })
-            .subscribe();
-        }
-      );
-
-    this._translateService.setLanguage(document.documentElement.lang || 'en');
+    const lang = document.documentElement.lang || 'en';
+    this._translateService.use(lang);
+    this._coreTranslateService.setLanguage(lang);
   }
 
-  /**
-   * Component destruction hook.
-   */
-  ngOnDestroy() {
-    this._changeLanguageSubscription.unsubscribe();
-  }
 }

projects/sonar/src/app/app.module.ts

@@ -119,7 +119,8 @@ export function minElementError(err: any, field: FormlyFieldConfig) {
         provide: BaseTranslateLoader,
         useClass: AppTranslateLoader,
         deps: [CoreConfigService, HttpClient, UserService]
-      }
+      },
+      defaultLanguage: 'en'
     }),
     ReactiveFormsModule,
     BrowserAnimationsModule,

projects/sonar/tests/utils.ts

@@ -14,6 +14,7 @@
  * 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 { HttpClientTestingModule } from '@angular/common/http/testing';
 import { of } from 'rxjs';
 import { AppModule } from '../src/app/app.module';
 import { DepositService } from '../src/app/deposit/deposit.service';
@@ -45,7 +46,7 @@ depositTestingService.getFiles.and.returnValue(of({}));
 depositTestingService.get.and.returnValue(of({}));
 
 export const mockedConfiguration = {
-  imports: [AppModule],
+  imports: [AppModule, HttpClientTestingModule],
   providers: [
     { provide: UserService, useValue: userTestingService },
     { provide: DepositService, useValue: depositTestingService },