From bcf20a22e058038e1bdf3b08508b86a1e01c5b68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 16 Nov 2020 20:35:43 +0200
Subject: [PATCH] Translate status outside of doughnut component

---
 .../simple-doughnut-chart.component.html           |  2 +-
 .../project-listing-screen.component.html          |  2 +-
 .../project-listing-screen.component.ts            | 10 ++++++++--
 .../project-details/project-details.component.html |  2 +-
 .../project-details/project-details.component.ts   |  2 ++
 .../src/app/utils/translate-chart.service.ts       | 14 ++++++++++++++
 apps/red-ui/src/assets/i18n/en.json                |  6 +++---
 7 files changed, 30 insertions(+), 8 deletions(-)
 create mode 100644 apps/red-ui/src/app/utils/translate-chart.service.ts

diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
index 23aa836c8..0aa80da2c 100644
--- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
+++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
@@ -29,7 +29,7 @@
                         {
                             length: val.value,
                             color: val.color,
-                            label: val.value + ' ' + (val.label.toLowerCase().replace('_', '-') | translate)
+                            label: val.value + ' ' + val.label
                         }
                     ]"
                 >
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index 643961d01..f33367eb7 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -163,7 +163,7 @@
         <div class="right-fixed-container">
             <redaction-project-listing-details
                 [projectsChartData]="projectsChartData"
-                [documentsChartData]="documentsChartData"
+                [documentsChartData]="translateChartService.translateStatus(documentsChartData)"
                 [filters]="detailsContainerFilters"
                 (filtersChanged)="filtersChanged($event)"
             ></redaction-project-listing-details>
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
index aa557fc1c..b56883957 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
@@ -22,6 +22,7 @@ import { PermissionsService } from '../../common/service/permissions.service';
 import { ProjectWrapper } from '../../state/model/project.wrapper';
 import { Subscription, timer } from 'rxjs';
 import { tap } from 'rxjs/operators';
+import { TranslateChartService } from '../../utils/translate-chart.service';
 
 @Component({
     selector: 'redaction-project-listing-screen',
@@ -53,7 +54,8 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
         private readonly _changeDetectorRef: ChangeDetectorRef,
         private readonly _dialogService: DialogService,
         private readonly _translateService: TranslateService,
-        public readonly sortingService: SortingService
+        public readonly sortingService: SortingService,
+        public readonly translateChartService: TranslateChartService
     ) {}
 
     public ngOnInit(): void {
@@ -85,7 +87,11 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
         const groups = groupBy(this.appStateService.aggregatedFiles, 'status');
         this.documentsChartData = [];
         for (const key of Object.keys(groups)) {
-            this.documentsChartData.push({ value: groups[key].length, color: key, label: key });
+            this.documentsChartData.push({
+                value: groups[key].length,
+                color: key,
+                label: key
+            });
         }
     }
 
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
index 583dec076..6384c8d4d 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
@@ -45,7 +45,7 @@
 <div *ngIf="hasFiles" class="mt-24">
     <redaction-simple-doughnut-chart
         (toggleFilter)="toggleFilter('statusFilters', $event)"
-        [config]="documentsChartData"
+        [config]="translateChartService.translateStatus(documentsChartData)"
         [filter]="filters.statusFilters"
         [radius]="70"
         [strokeWidth]="15"
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts
index 9424d859a..69be9148c 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts
@@ -6,6 +6,7 @@ import { DialogService } from '../../../dialogs/dialog.service';
 import { Router } from '@angular/router';
 import { FilterModel } from '../../../common/filter/model/filter.model';
 import { PermissionsService } from '../../../common/service/permissions.service';
+import { TranslateChartService } from '../../../utils/translate-chart.service';
 
 @Component({
     selector: 'redaction-project-details',
@@ -20,6 +21,7 @@ export class ProjectDetailsComponent implements OnInit {
 
     constructor(
         public readonly appStateService: AppStateService,
+        public readonly translateChartService: TranslateChartService,
         public readonly permissionsService: PermissionsService,
         private readonly _changeDetectorRef: ChangeDetectorRef,
         private readonly _dialogService: DialogService,
diff --git a/apps/red-ui/src/app/utils/translate-chart.service.ts b/apps/red-ui/src/app/utils/translate-chart.service.ts
new file mode 100644
index 000000000..25c15af12
--- /dev/null
+++ b/apps/red-ui/src/app/utils/translate-chart.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { DoughnutChartConfig } from '../components/simple-doughnut-chart/simple-doughnut-chart.component';
+import { TranslateService } from '@ngx-translate/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class TranslateChartService {
+    constructor(private readonly _translateService: TranslateService) {}
+
+    public translateStatus(config: DoughnutChartConfig[]): DoughnutChartConfig[] {
+        return config.map((val) => ({ ...val, label: this._translateService.instant(val.label.toLowerCase().replace('_', '-')) }));
+    }
+}
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 4eb7b7605..87e9bf0bc 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -351,9 +351,9 @@
         "cancel": "Cancel"
     },
     "unassigned": "Unassigned",
-    "under-review": "Under review",
-    "under-approval": "Under approval",
-    "efsa": "EFSA approval",
+    "under-review": "Under Review",
+    "under-approval": "Under Approval",
+    "efsa": "EFSA Approval",
     "finished": "Finished",
     "approved": "Approved",
     "submitted": "Submitted",