internationalize the UI and add German and English localizations

sovity · Jun 27, 2024 · 6a6381f · 6a6381f
1 parent 38e47f2
commit 6a6381f
Show file tree

Hide file tree

Showing 73 changed files with 1,975 additions and 436 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,8 @@ the detailed section referring to by linking pull requests or issues.
 
 #### Major
 
+- Internationalize the UI and add a German localization
+
 #### Minor
 
 - Added Initiate Negotiation Confirm ToS Dialog

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,8 @@
     "@angular/platform-browser-dynamic": "^14.3.0",
     "@angular/router": "^14.3.0",
     "@ng-apimock/core": "^3.11.0",
+    "@ngx-translate/core": "^14.0.0",
+    "@ngx-translate/http-loader": "^7.0.0",
     "@ngxs/store": "^3.8.1",
     "@sovity.de/broker-server-client": "0.20240420.122901-main-9eb8e44d",
     "@sovity.de/edc-client": "0.20240418.174436-main-8bfcfeb1",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,4 +1,14 @@
-import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
+/*
+ * Copyright (c) 2021-2024. sovity GmbH
+ * Copyright (c) 2024. Fraunhofer Institute for Applied Information Technology FIT
+ * Contributors:
+ *    - Fraunhofer FIT: Internationalization and German Localization
+ */
+import {
+  HTTP_INTERCEPTORS,
+  HttpClient,
+  HttpClientModule,
+} from '@angular/common/http';
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
@@ -16,14 +26,21 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {TitleStrategy} from '@angular/router';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 import {NgxsModule} from '@ngxs/store';
 import {NgChartsModule} from 'ng2-charts';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {PageNotFoundComponent} from './component-library/error-404-component/page-not-found.component';
 import {provideAppConfig} from './core/config/app-config-initializer';
 import {ApiKeyInterceptor} from './core/services/api/api-key.interceptor';
+import {CustomPageTitleStrategy} from './core/services/page-title-strategy';
 
+export function HttploaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http);
+}
 @NgModule({
   imports: [
     // Angular
@@ -43,6 +60,15 @@ import {ApiKeyInterceptor} from './core/services/api/api-key.interceptor';
     MatSnackBarModule,
     MatToolbarModule,
 
+    //Translation
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttploaderFactory,
+        deps: [HttpClient],
+      },
+    }),
+
     // NgXs
     NgxsModule.forRoot([]),
 
@@ -54,10 +80,11 @@ import {ApiKeyInterceptor} from './core/services/api/api-key.interceptor';
   ],
   declarations: [AppComponent, PageNotFoundComponent],
   providers: [
+    HttpClient,
     provideAppConfig(),
 
     {provide: HTTP_INTERCEPTORS, multi: true, useClass: ApiKeyInterceptor},
-
+    {provide: TitleStrategy, useClass: CustomPageTitleStrategy},
     {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
     {
       provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
@@ -68,5 +95,6 @@ import {ApiKeyInterceptor} from './core/services/api/api-key.interceptor';
     },
   ],
   bootstrap: [AppComponent],
+  exports: [TranslateModule],
 })
 export class AppModule {}
diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service.ts b/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service.ts
@@ -1,4 +1,5 @@
 import {Injectable} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
 import {DataOffer} from '../../../core/services/models/data-offer';
 import {UiAssetMapped} from '../../../core/services/models/ui-asset-mapped';
 import {CatalogDataOfferMapped} from '../../../routes/broker-ui/catalog-page/catalog-page/mapping/catalog-page-result-mapped';
@@ -13,6 +14,7 @@ import {AssetPropertyGridGroupBuilder} from './asset-property-grid-group-builder
 export class AssetDetailDialogDataService {
   constructor(
     private assetPropertyGridGroupBuilder: AssetPropertyGridGroupBuilder,
+    private translateService: TranslateService,
   ) {}
 
   assetDetailsReadonly(asset: UiAssetMapped): AssetDetailDialogData {
@@ -74,7 +76,7 @@ export class AssetDetailDialogDataService {
       ),
       this.assetPropertyGridGroupBuilder.buildAssetPropertiesGroup(
         asset,
-        'Asset',
+        this.translateService.instant('general.asset'),
       ),
       ...this.assetPropertyGridGroupBuilder.buildAdditionalPropertiesGroups(
         asset,
@@ -98,7 +100,7 @@ export class AssetDetailDialogDataService {
       this.assetPropertyGridGroupBuilder.buildBrokerDataOfferGroup(dataOffer),
       this.assetPropertyGridGroupBuilder.buildAssetPropertiesGroup(
         asset,
-        'Asset',
+        this.translateService.instant('general.asset'),
       ),
       ...this.assetPropertyGridGroupBuilder.buildAdditionalPropertiesGroups(
         asset,

diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html b/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html
@@ -1,3 +1,10 @@
+<!--
+  ~ Copyright (c) 2021-2024. sovity GmbH
+  ~ Copyright (c) 2024. Fraunhofer Institute for Applied Information Technology FIT
+  ~ Contributors:
+  ~    - Fraunhofer FIT: Internationalization and German Localization
+  -->
+
 <div class="flex flex-row justify-between space-x-[10px]">
   <div class="mat-card-header" mat-dialog-title removeClass="mat-dialog-title">
     <mat-icon
@@ -38,15 +45,15 @@
       *ngIf="data.showEditButton"
       class="hover:!bg-[#EDEDED]"
       mat-icon-button
-      matTooltip="Edit"
+      matTooltip="{{ 'general.edit' | translate }}"
       (click)="onEditClick()">
       <mat-icon class="mat-icon-[22px]">edit</mat-icon>
     </button>
     <button
       *ngIf="data.showDeleteButton"
       class="hover:!bg-[#EDEDED]"
       mat-icon-button
-      matTooltip="Delete"
+      matTooltip="{{ 'general.delete' | translate }}"
       (click)="onDeleteClick()">
       <mat-icon class="mat-icon-[22px]">delete</mat-icon>
     </button>
@@ -61,9 +68,12 @@
     mode="indeterminate"></mat-progress-bar>
 
   <!-- Description -->
-  <markdown-description
-    class="pt-3"
-    [description]="asset.description"></markdown-description>
+  <div class="whitespace-pre-line">
+    {{ asset.description }}
+    <i *ngIf="!asset.description">{{
+      'component_library.no_description' | translate
+    }}</i>
+  </div>
 
   <div>
     <hr class="h-px my-5 bg-gray-200 border-0" />
@@ -81,7 +91,7 @@
     <div
       class="flex flex-row flex-wrap property-grid-group-title"
       [style.margin-top.px]="30">
-      Transfer History
+      {{ 'component_library.t_history' | translate }}
     </div>
     <transfer-history-mini-list [contractAgreement]="data.contractAgreement!!">
     </transfer-history-mini-list>
@@ -103,7 +113,7 @@
   <div class="w-full flex flex-row justify-end">
     <div class="flex gap-1 items-center">
       <button mat-button [mat-dialog-close]="null" [disabled]="loading">
-        Close
+        {{ 'general.close' | translate }}
       </button>
 
       <ng-container
@@ -115,8 +125,8 @@
           *ngIf="data.asset.isOwnConnector"
           disabled
           mat-raised-button
-          matTooltip="Cannot negotiate contracts with your own connector.">
-          Negotiate
+          matTooltip="{{ 'tooltip.negotiate' | translate }}">
+          {{ 'component_library.negotiate' | translate }}
         </button>
 
         <button
@@ -134,12 +144,14 @@
             )
           "
           (click)="onNegotiateClick(data.dataOffer!.contractOffers[0])">
-          <ng-container *ngSwitchCase="'ready'">Negotiate</ng-container>
+          <ng-container *ngSwitchCase="'ready'">{{
+            'component_library.negotiate' | translate
+          }}</ng-container>
           <ng-container *ngSwitchCase="'negotiating'">
-            Negotiating...
+            {{ 'component_library.negotiating' | translate }}
           </ng-container>
           <ng-container *ngSwitchCase="'negotiated'">
-            Successfully Negotiated
+            {{ 'component_library.succ_negotiating' | translate }}
           </ng-container>
         </button>
       </ng-container>
@@ -154,7 +166,7 @@
         [matTooltip]="data.contractAgreement?.statusTooltipText ?? ''"
         [disabled]="!data.contractAgreement?.canTransfer"
         (click)="onTransferClick()">
-        Transfer
+        {{ 'component_library.transfer' | translate }}
       </button>
     </div>
   </div>

diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.ts b/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.ts
@@ -1,3 +1,9 @@
+/*
+ * Copyright (c) 2021-2024. sovity GmbH
+ * Copyright (c) 2024. Fraunhofer Institute for Applied Information Technology FIT
+ * Contributors:
+ *    - Fraunhofer FIT: Internationalization and German Localization
+ */
 import {Component, Inject, OnDestroy} from '@angular/core';
 import {
   MAT_DIALOG_DATA,
@@ -6,6 +12,7 @@ import {
 } from '@angular/material/dialog';
 import {Observable, Subject, isObservable} from 'rxjs';
 import {filter, finalize, takeUntil} from 'rxjs/operators';
+import {TranslateService} from '@ngx-translate/core';
 import {UiContractOffer} from '@sovity.de/edc-client';
 import {EdcApiService} from '../../../core/services/api/edc-api.service';
 import {ContractNegotiationService} from '../../../core/services/contract-negotiation.service';
@@ -63,6 +70,7 @@ export class AssetDetailDialogComponent implements OnDestroy {
     @Inject(MAT_DIALOG_DATA)
     private _data: AssetDetailDialogData | Observable<AssetDetailDialogData>,
     public contractNegotiationService: ContractNegotiationService,
+    private translateService: TranslateService,
   ) {
     if (isObservable(this._data)) {
       this._data
@@ -114,7 +122,11 @@ export class AssetDetailDialogComponent implements OnDestroy {
   }
 
   private confirmDelete(): Observable<boolean> {
-    const dialogData = ConfirmDialogModel.forDelete('asset', this.asset.title);
+    const dialogData = ConfirmDialogModel.forDelete(
+      'asset',
+      this.asset.title,
+      this.translateService,
+    );
     const ref = this.matDialog.open(ConfirmationDialogComponent, {
       maxWidth: '20%',
       data: dialogData,