Translation rework: select component, other fixes

apps/red-ui/src/app/models/file/annotation.wrapper.ts

@@ -1,6 +1,7 @@
 import { Comment, Point, Rectangle } from '@redaction/red-ui-http';
 import { RedactionLogEntryWrapper } from './redaction-log-entry.wrapper';
 import { annotationTypesTranslations } from '../../translations/annotation-types-translations';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 export type AnnotationSuperType =
     | 'add-dictionary'
@@ -68,7 +69,7 @@ export class AnnotationWrapper {
     }
 
     get descriptor() {
-        return this.isModifyDictionary ? 'dictionary' : 'type';
+        return this.isModifyDictionary ? _('dictionary') : _('type');
     }
 
     get hasTextAfter() {

apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html

@@ -80,8 +80,7 @@
                                       length: this.dossierTemplateForm.controls['reportTypes'].value.length
                                   }
                     "
-                    [options]="reportTypesEnum"
+                    [options]="reportTypes"
-                    [translatePrefix]="'report-type.'"
                     class="mr-16"
                     formControlName="reportTypes"
                 ></redaction-select>
@@ -93,8 +92,7 @@
                                       length: this.dossierTemplateForm.controls['downloadFileTypes'].value.length
                                   }
                     "
-                    [options]="downloadTypesEnum"
+                    [options]="downloadTypes"
-                    [translatePrefix]="'download-type.'"
                     formControlName="downloadFileTypes"
                 ></redaction-select>
             </div>

apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts

@@ -4,8 +4,10 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import * as moment from 'moment';
 import { Moment } from 'moment';
-import { DossierTemplateControllerService, DossierTemplateModel } from '@redaction/red-ui-http';
+import { Dossier, DossierTemplateControllerService, DossierTemplateModel } from '@redaction/red-ui-http';
 import { applyIntervalConstraints } from '@utils/date-inputs-utils';
+import { reportTypesTranslations } from '../../../../translations/report-types-translations';
+import { downloadTypesTranslations } from '../../../../translations/download-types-translations';
 
 @Component({
     selector: 'redaction-add-edit-dossier-template-dialog',
@@ -16,8 +18,16 @@ export class AddEditDossierTemplateDialogComponent {
     dossierTemplateForm: FormGroup;
     hasValidFrom: boolean;
     hasValidTo: boolean;
-    downloadTypesEnum = ['ORIGINAL', 'PREVIEW', 'REDACTED'];
+    downloadTypesEnum: Dossier.DownloadFileTypesEnum[] = ['ORIGINAL', 'PREVIEW', 'REDACTED'];
+    downloadTypes: { key: Dossier.DownloadFileTypesEnum; label: string }[] = this.downloadTypesEnum.map(type => ({
+        key: type,
+        label: downloadTypesTranslations[type]
+    }));
     reportTypesEnum = Object.values(DossierTemplateModel.ReportTypesEnum);
+    reportTypes: { key: DossierTemplateModel.ReportTypesEnum; label: string }[] = this.reportTypesEnum.map(type => ({
+        key: type,
+        label: reportTypesTranslations[type]
+    }));
 
     private _previousValidFrom: Moment;
     private _previousValidTo: Moment;

apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.ts

@@ -8,6 +8,7 @@ import { ComponentHasChanges } from '@guards/can-deactivate.guard';
 import { ActivatedRoute } from '@angular/router';
 import { AppStateService } from '@state/app-state.service';
 import { debounce } from '../../../../utils/debounce';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import ICodeEditor = monaco.editor.ICodeEditor;
 import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
 import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions;
@@ -95,11 +96,11 @@ export class RulesScreenComponent extends ComponentHasChanges implements OnInit
             .then(
                 async () => {
                     await this._initialize();
-                    this._toaster.success('rules-screen.success.generic');
+                    this._toaster.success(_('rules-screen.success.generic'));
                 },
                 () => {
                     this.processing = false;
-                    this._toaster.error('rules-screen.error.generic');
+                    this._toaster.error(_('rules-screen.error.generic'));
                 }
             );
     }

apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.ts

@@ -10,6 +10,7 @@ import {
 } from '@redaction/red-ui-http';
 import { Toaster } from '@services/toaster.service';
 import { AutoUnsubscribeComponent } from '@shared/base/auto-unsubscribe.component';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Component({
     selector: 'redaction-smtp-config-screen',
@@ -110,9 +111,9 @@ export class SmtpConfigScreenComponent extends AutoUnsubscribeComponent implemen
         this.viewReady = false;
         try {
             await this._smtpConfigService.testSMTPConfiguration(this.configForm.getRawValue()).toPromise();
-            this._toaster.success('smtp-config-screen.test.success');
+            this._toaster.success(_('smtp-config-screen.test.success'));
         } catch (e) {
-            this._toaster.error('smtp-config-screen.test.error');
+            this._toaster.error(_('smtp-config-screen.test.error'));
         } finally {
             this.viewReady = true;
         }

apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html

@@ -63,15 +63,13 @@
             <div class="d-flex">
                 <redaction-select
                     [label]="'report-type.label' | translate: { length: reportTypesLength }"
-                    [options]="reportTypesEnum"
+                    [options]="reportTypes"
-                    [translatePrefix]="'report-type.'"
                     class="mr-16"
                     formControlName="reportTypes"
                 ></redaction-select>
                 <redaction-select
                     [label]="'download-type.label' | translate: { length: downloadFileTypesLength }"
-                    [options]="downloadTypesEnum"
+                    [options]="downloadTypes"
-                    [translatePrefix]="'download-type.'"
                     formControlName="downloadFileTypes"
                 ></redaction-select>
             </div>

apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts

@@ -4,6 +4,8 @@ import { Dossier, DossierTemplateModel } from '@redaction/red-ui-http';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AppStateService } from '@state/app-state.service';
 import * as moment from 'moment';
+import { reportTypesTranslations } from '../../../../translations/report-types-translations';
+import { downloadTypesTranslations } from '../../../../translations/download-types-translations';
 
 @Component({
     selector: 'redaction-add-dossier-dialog',
@@ -13,8 +15,16 @@ import * as moment from 'moment';
 export class AddDossierDialogComponent {
     dossierForm: FormGroup;
     hasDueDate = false;
-    downloadTypesEnum = ['ORIGINAL', 'PREVIEW', 'REDACTED'];
+    downloadTypesEnum: Dossier.DownloadFileTypesEnum[] = ['ORIGINAL', 'PREVIEW', 'REDACTED'];
+    downloadTypes: { key: Dossier.DownloadFileTypesEnum; label: string }[] = this.downloadTypesEnum.map(type => ({
+        key: type,
+        label: downloadTypesTranslations[type]
+    }));
     reportTypesEnum = Object.values(DossierTemplateModel.ReportTypesEnum);
+    reportTypes: { key: DossierTemplateModel.ReportTypesEnum; label: string }[] = this.reportTypesEnum.map(type => ({
+        key: type,
+        label: reportTypesTranslations[type]
+    }));
     dossierTemplates: DossierTemplateModel[];
 
     constructor(

apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.html

@@ -1,15 +1,13 @@
 <form [formGroup]="dossierForm">
     <redaction-select
         [label]="'report-type.label' | translate: { length: reportTypesLength }"
-        [options]="reportTypesEnum"
+        [options]="reportTypes"
-        [translatePrefix]="'report-type.'"
         class="mr-16"
         formControlName="reportTypes"
     ></redaction-select>
     <redaction-select
         [label]="'download-type.label' | translate: { length: downloadFileTypesLength }"
-        [options]="downloadTypesEnum"
+        [options]="downloadTypes"
-        [translatePrefix]="'download-type.'"
         formControlName="downloadFileTypes"
     ></redaction-select>
 </form>

apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.ts

@@ -1,9 +1,11 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { DossierTemplateModel } from '@redaction/red-ui-http';
+import { Dossier, DossierTemplateModel } from '@redaction/red-ui-http';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { AppStateService } from '@state/app-state.service';
 import { DossierWrapper } from '@state/model/dossier.wrapper';
 import { EditDossierSectionInterface } from '../edit-dossier-section.interface';
+import { reportTypesTranslations } from '../../../../../translations/report-types-translations';
+import { downloadTypesTranslations } from '../../../../../translations/download-types-translations';
 
 @Component({
     selector: 'redaction-edit-dossier-download-package',
@@ -12,8 +14,16 @@ import { EditDossierSectionInterface } from '../edit-dossier-section.interface';
 })
 export class EditDossierDownloadPackageComponent implements OnInit, EditDossierSectionInterface {
     dossierForm: FormGroup;
-    downloadTypesEnum = ['ORIGINAL', 'PREVIEW', 'REDACTED'];
+    downloadTypesEnum: Dossier.DownloadFileTypesEnum[] = ['ORIGINAL', 'PREVIEW', 'REDACTED'];
+    downloadTypes: { key: Dossier.DownloadFileTypesEnum; label: string }[] = this.downloadTypesEnum.map(type => ({
+        key: type,
+        label: downloadTypesTranslations[type]
+    }));
     reportTypesEnum = Object.values(DossierTemplateModel.ReportTypesEnum);
+    reportTypes: { key: DossierTemplateModel.ReportTypesEnum; label: string }[] = this.reportTypesEnum.map(type => ({
+        key: type,
+        label: reportTypesTranslations[type]
+    }));
     dossierTemplates: DossierTemplateModel[];
 
     @Input() dossierWrapper: DossierWrapper;

apps/red-ui/src/app/modules/shared/components/select/select.component.html

@@ -7,7 +7,7 @@
 </div>
 
 <mat-chip-list [disabled]="disabled" [multiple]="multiple" class="options flex-center" selectable>
-    <mat-chip #chip="matChip" (click)="toggleSelection(chip)" *ngFor="let option of options" [value]="option">
+    <mat-chip #chip="matChip" (click)="toggleSelection(chip)" *ngFor="let option of options" [value]="option.key">
-        {{ translatePrefix + option | translate }}
+        {{ option.label | translate }}
     </mat-chip>
 </mat-chip-list>

apps/red-ui/src/app/modules/shared/components/select/select.component.ts

@@ -2,6 +2,7 @@ import { AfterViewInit, ChangeDetectorRef, Component, Input, ViewChild } from '@
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatChip, MatChipList } from '@angular/material/chips';
 import { map } from 'rxjs/operators';
+import { Dossier, DossierTemplateModel } from '@redaction/red-ui-http';
 
 @Component({
     selector: 'redaction-select',
@@ -17,8 +18,7 @@ import { map } from 'rxjs/operators';
 })
 export class SelectComponent implements AfterViewInit, ControlValueAccessor {
     @Input() label: string;
-    @Input() options: string[];
+    @Input() options: { key: DossierTemplateModel.ReportTypesEnum | Dossier.DownloadFileTypesEnum; label: string }[];
-    @Input() translatePrefix = '';
     @Input() disabled = false;
     @Input() multiple = true;
 

apps/red-ui/src/app/translations/download-types-translations.ts

@@ -0,0 +1,10 @@
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { Dossier } from '@redaction/red-ui-http';
+
+export const downloadTypesTranslations: { [key in Dossier.DownloadFileTypesEnum]: string } = {
+    ORIGINAL: _('download-type.original'),
+    PREVIEW: _('download-type.preview'),
+    REDACTED: _('download-type.redacted'),
+    ANNOTATED: _('download-type.annotated'),
+    FLATTEN: _('download-type.flatten')
+};

apps/red-ui/src/app/translations/report-types-translations.ts

@@ -0,0 +1,9 @@
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { DossierTemplateModel } from '@redaction/red-ui-http';
+
+export const reportTypesTranslations: { [key in DossierTemplateModel.ReportTypesEnum]: string } = {
+    EXCEL_MULTI_FILE: _('report-type.excel-multi-file'),
+    EXCEL_SINGLE_FILE: _('report-type.excel-single-file'),
+    WORD_SINGLE_FILE_APPENDIX_A1_TEMPLATE: _('report-type.word-single-file-appendix-a1'),
+    WORD_SINGLE_FILE_APPENDIX_A2_TEMPLATE: _('report-type.word-single-file-appendix-a2')
+};

apps/red-ui/src/assets/i18n/en.json

@@ -722,10 +722,12 @@
     "queued": "Your download has been queued, you can see all your requested downloads here: <a href='{baseUrl}/main/downloads'>My Downloads <a/>."
   },
   "download-type": {
+    "annotated": "Annotated PDF",
+    "flatten": "Flatten PDF",
     "label": "{length} document versions",
-    "ORIGINAL": "Optimized PDF",
+    "original": "Optimized PDF",
-    "PREVIEW": "Preview PDF",
+    "preview": "Preview PDF",
-    "REDACTED": "Redacted PDF"
+    "redacted": "Redacted PDF"
   },
   "downloads-list": {
     "actions": {
@@ -1139,11 +1141,11 @@
     "value": "Value"
   },
   "report-type": {
-    "EXCEL_MULTI_FILE": "Excel (for all)",
+    "excel-multi-file": "Excel (for all)",
-    "EXCEL_SINGLE_FILE": "Excel (per file)",
+    "excel-single-file": "Excel (per file)",
     "label": "{length} report types",
-    "WORD_SINGLE_FILE_APPENDIX_A1_TEMPLATE": "Justification Appendix A1",
+    "word-single-file-appendix-a1": "Justification Appendix A1",
-    "WORD_SINGLE_FILE_APPENDIX_A2_TEMPLATE": "Justification Appendix A2"
+    "word-single-file-appendix-a2": "Justification Appendix A2"
   },
   "reports": "Reports",
   "reports-screen": {
@@ -1240,7 +1242,6 @@
     },
     "title": "Configure SMTP Account"
   },
-  "submitted": "Submitted",
   "suggestion": "Suggestion for redaction",
   "time": {
     "days": "{days} {days, plural, one{day} other{days}}",
@@ -1284,7 +1285,6 @@
     "no-match": {
       "title": "No dossiers match your current filters."
     },
-    "search": "Search...",
     "table-col-names": {
       "deleted-on": "Deleted on",
       "name": "Name",
@@ -1292,7 +1292,6 @@
       "time-to-restore": "Time to restore"
     },
     "table-header": {
-      "info": "Deleted items can be restored up to {hours} hours from their deletions",
       "title": "{length} deleted dossiers"
     }
   },

apps/red-ui/src/assets/i18n/te.json

@@ -387,6 +387,7 @@
   },
   "dev-mode": "",
   "dictionaries": "",
+  "dictionary": "",
   "dictionary-listing": {
     "action": {
       "delete": "",
@@ -675,7 +676,12 @@
   },
   "download-includes": "",
   "download-type": {
-    "label": ""
+    "annotated": "",
+    "flatten": "",
+    "label": "",
+    "original": "",
+    "preview": "",
+    "redacted": ""
   },
   "downloads-list": {
     "actions": {
@@ -1041,7 +1047,11 @@
     "value": ""
   },
   "report-type": {
-    "label": ""
+    "excel-multi-file": "",
+    "excel-single-file": "",
+    "label": "",
+    "word-single-file-appendix-a1": "",
+    "word-single-file-appendix-a2": ""
   },
   "reports": "",
   "reports-screen": {
@@ -1075,8 +1085,14 @@
   },
   "rule-editor": "",
   "rules-screen": {
+    "error": {
+      "generic": ""
+    },
     "revert-changes": "",
-    "save-changes": ""
+    "save-changes": "",
+    "success": {
+      "generic": ""
+    }
   },
   "smtp-auth-config": {
     "actions": {
@@ -1124,6 +1140,10 @@
       "title": ""
     },
     "subtitle": "",
+    "test": {
+      "error": "",
+      "success": ""
+    },
     "title": ""
   },
   "time": {
@@ -1178,6 +1198,7 @@
       "title": ""
     }
   },
+  "type": "",
   "upload-status": {
     "dialog": {
       "actions": {