Translation rework: extract strings done

apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.html

@@ -1,4 +1,4 @@
-<redaction-side-nav [title]="type">
+<redaction-side-nav [title]="translations[type] | translate">
     <ng-container *ngFor="let item of items[type]">
         <div
             *ngIf="

apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.ts

@@ -3,6 +3,9 @@ import { PermissionsService } from '@services/permissions.service';
 import { UserPreferenceService } from '@services/user-preference.service';
 import { AppStateService } from '@state/app-state.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { adminSideNavTranslations } from '../translations/admin-side-nav-translations';
+
+type Type = 'settings' | 'dossierTemplates';
 
 @Component({
     selector: 'redaction-admin-side-nav',
@@ -10,10 +13,11 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
     styleUrls: ['./admin-side-nav.component.scss']
 })
 export class AdminSideNavComponent {
-    @Input() type: 'settings' | 'dossier-templates';
+    @Input() type: Type;
+    translations = adminSideNavTranslations;
 
     items: {
-        [key: string]: {
+        [key in Type]: {
             screen: string;
             onlyDevMode?: boolean;
             onlyAdmin?: boolean;
@@ -30,7 +34,7 @@ export class AdminSideNavComponent {
             { screen: 'users', label: _('user-management'), userManagerOnly: true },
             { screen: 'smtp-config', label: _('configurations'), onlyAdmin: true }
         ],
-        'dossier-templates': [
+        dossierTemplates: [
             { screen: 'dictionaries', label: _('dictionaries') },
             { screen: 'rules', onlyDevMode: true, label: _('rule-editor') },
             { screen: 'default-colors', label: _('default-colors') },

apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts

@@ -6,6 +6,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { DefaultColorType } from '@models/default-color-key.model';
 import { defaultColorsTranslations } from '../../translations/default-colors-translations';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Component({
     selector: 'redaction-edit-color-dialog',
@@ -52,10 +53,10 @@ export class EditColorDialogComponent {
         try {
             await this._dictionaryControllerService.setColors(colors, this._dossierTemplateId).toPromise();
             this._dialogRef.close(true);
-            const color = this._translateService.instant(`default-colors-screen.types.${this.colorKey}`);
+            const color = this._translateService.instant(defaultColorsTranslations[this.colorKey]);
-            this._toaster.info('edit-color-dialog.success', { params: { color: color } });
+            this._toaster.info(_('edit-color-dialog.success'), { params: { color: color } });
         } catch (e) {
-            this._toaster.error('edit-color-dialog.error');
+            this._toaster.error(_('edit-color-dialog.error'));
         }
     }
 }

apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html

@@ -126,9 +126,7 @@
                 class="center"
             >
                 <div class="csv-part-header">
-                    <div class="all-caps-label">
+                    <div [translate]="'file-attributes-csv-import.csv-column'" class="all-caps-label"></div>
-                        {{ 'file-attributes-csv-import.csv-column' + (previewExpanded ? '' : '-preview') | translate }}
-                    </div>
                     <redaction-circle-button
                         (click)="previewExpanded = !previewExpanded"
                         [icon]="previewExpanded ? 'red:expand' : 'red:collapse'"

apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts

@@ -13,6 +13,7 @@ import { SearchService } from '@shared/services/search.service';
 import { ScreenStateService } from '@shared/services/screen-state.service';
 import { SortingService } from '@services/sorting.service';
 import { BaseListingComponent } from '@shared/base/base-listing.component';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 export interface Field {
     id?: string;
@@ -202,9 +203,9 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent
 
         try {
             await this._fileAttributesControllerService.setFileAttributesConfig(fileAttributes, this.dossierTemplateId).toPromise();
-            this._toaster.success('file-attributes-csv-import.save.success', { params: { count: this.activeFields.length } });
+            this._toaster.success(_('file-attributes-csv-import.save.success'), { params: { count: this.activeFields.length } });
         } catch (e) {
-            this._toaster.error('file-attributes-csv-import.save.error');
+            this._toaster.error(_('file-attributes-csv-import.save.error'));
         }
 
         this.dialogRef.close(true);

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

@@ -7,6 +7,7 @@ import { applyIntervalConstraints } from '@utils/date-inputs-utils';
 import { LoadingService } from '@services/loading.service';
 import { AutoUnsubscribeComponent } from '@shared/base/auto-unsubscribe.component';
 import { auditCategoriesTranslations } from '../../translations/audit-categories-translations';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 const PAGE_SIZE = 50;
 
@@ -17,7 +18,7 @@ const PAGE_SIZE = 50;
 })
 export class AuditScreenComponent extends AutoUnsubscribeComponent implements OnDestroy {
     readonly ALL_CATEGORIES = 'allCategories';
-    readonly ALL_USERS = 'audit-screen.all-users';
+    readonly ALL_USERS = _('audit-screen.all-users');
     translations = auditCategoriesTranslations;
 
     filterForm: FormGroup;

apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html

@@ -17,7 +17,7 @@
     <div class="red-content-inner">
         <div class="overlay-shadow"></div>
 
-        <redaction-admin-side-nav type="dossier-templates"></redaction-admin-side-nav>
+        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
 
         <div class="content-container">
             <div class="header-item">

apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html

@@ -17,7 +17,7 @@
     <div class="red-content-inner">
         <div class="overlay-shadow"></div>
 
-        <redaction-admin-side-nav type="dossier-templates"></redaction-admin-side-nav>
+        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
 
         <div class="content-container">
             <div class="header-item">

apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html

@@ -51,7 +51,7 @@
     <div class="flex red-content-inner">
         <div class="overlay-shadow"></div>
 
-        <redaction-admin-side-nav type="dossier-templates"></redaction-admin-side-nav>
+        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
 
         <redaction-dictionary-manager
             #dictionaryManager

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

@@ -6,6 +6,7 @@ import { PermissionsService } from '@services/permissions.service';
 import { lastIndexOfEnd } from '@utils/functions';
 import { AutoUnsubscribeComponent } from '@shared/base/auto-unsubscribe.component';
 import { LoadingService } from '@services/loading.service';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Component({
     selector: 'redaction-digital-signature-screen',
@@ -47,13 +48,13 @@ export class DigitalSignatureScreenComponent extends AutoUnsubscribeComponent im
         this.addSubscription = observable.subscribe(
             () => {
                 this.loadDigitalSignatureAndInitializeForm();
-                this._toaster.success('digital-signature-screen.action.save-success');
+                this._toaster.success(_('digital-signature-screen.action.save-success'));
             },
             error => {
                 if (error.status === 400) {
-                    this._toaster.error('digital-signature-screen.action.certificate-not-valid-error');
+                    this._toaster.error(_('digital-signature-screen.action.certificate-not-valid-error'));
                 } else {
-                    this._toaster.error('digital-signature-screen.action.save-error');
+                    this._toaster.error(_('digital-signature-screen.action.save-error'));
                 }
             }
         );
@@ -63,9 +64,9 @@ export class DigitalSignatureScreenComponent extends AutoUnsubscribeComponent im
         this.addSubscription = this._digitalSignatureControllerService.deleteDigitalSignature().subscribe(
             () => {
                 this.loadDigitalSignatureAndInitializeForm();
-                this._toaster.success('digital-signature-screen.action.delete-success');
+                this._toaster.success(_('digital-signature-screen.action.delete-success'));
             },
-            () => this._toaster.error('digital-signature-screen.action.delete-error')
+            () => this._toaster.error(_('digital-signature-screen.action.delete-error'))
         );
     }
 

apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html

@@ -17,7 +17,7 @@
     <div class="red-content-inner">
         <div class="overlay-shadow"></div>
 
-        <redaction-admin-side-nav type="dossier-templates"></redaction-admin-side-nav>
+        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
 
         <div class="content-container">
             <div *ngIf="(screenStateService.noData$ | async) === false" class="header-item">
@@ -129,7 +129,7 @@
 
                             <redaction-circle-button
                                 (action)="openConfirmDeleteAttributeDialog($event, attribute)"
-                                [tooltip]="'file-attributes-listing.action.delete' | translate"
+                                [tooltip]="'dossier-attributes-listing.action.delete' | translate"
                                 icon="red:trash"
                                 type="dark-bg"
                             ></redaction-circle-button>

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html

@@ -17,7 +17,7 @@
     <div class="red-content-inner">
         <div class="overlay-shadow"></div>
 
-        <redaction-admin-side-nav type="dossier-templates"></redaction-admin-side-nav>
+        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
 
         <div class="content-container">
             <div class="header-item">

apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html

@@ -17,7 +17,7 @@
     <div class="red-content-inner">
         <div class="overlay-shadow"></div>
 
-        <redaction-admin-side-nav type="dossier-templates"></redaction-admin-side-nav>
+        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
 
         <div class="content-container" redactionHasScrollbar>
             <div class="heading-xl" translate="reports-screen.title"></div>

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

@@ -17,7 +17,7 @@
     <div class="red-content-inner">
         <div class="overlay-shadow"></div>
 
-        <redaction-admin-side-nav type="dossier-templates"></redaction-admin-side-nav>
+        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
 
         <div class="editor-container">
             <ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor>

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

@@ -66,8 +66,9 @@ export class UserListingScreenComponent extends BaseListingComponent<User> imple
     }
 
     getDisplayRoles(user: User) {
+        const separator = ', ';
         return (
-            user.roles.map(role => this._translateService.instant(this.translations[role])).join(', ') ||
+            user.roles.map(role => this._translateService.instant(this.translations[role])).join(separator) ||
             this._translateService.instant(this.translations['NO_ROLE'])
         );
     }

apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html

@@ -17,7 +17,7 @@
     <div class="red-content-inner">
         <div class="overlay-shadow"></div>
 
-        <redaction-admin-side-nav type="dossier-templates"></redaction-admin-side-nav>
+        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
 
         <div class="content-container">
             <div #viewer class="viewer"></div>

apps/red-ui/src/app/modules/admin/translations/admin-side-nav-translations.ts

@@ -0,0 +1,6 @@
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+
+export const adminSideNavTranslations = {
+    settings: _('admin-side-nav.settings'),
+    dossierTemplates: _('admin-side-nav.dossier-templates')
+};

apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html

@@ -1,15 +1,13 @@
 <ng-container *ngIf="appStateService.activeDossier">
     <div class="collapsed-wrapper">
-        <ng-container
+        <ng-container *ngTemplateOutlet="collapsible; context: { action: 'expand', tooltip: (expandTooltip | translate) }"></ng-container>
-            *ngTemplateOutlet="collapsible; context: { action: 'expand', tooltip: 'dossier-details.expand' | translate }"
-        ></ng-container>
         <div class="all-caps-label" translate="dossier-details.title"></div>
     </div>
 
     <div class="header-wrapper mt-8">
         <div class="heading-xl flex-1">{{ appStateService.activeDossier.dossier.dossierName }}</div>
         <ng-container
-            *ngTemplateOutlet="collapsible; context: { action: 'collapse', tooltip: 'dossier-details.collapse' | translate }"
+            *ngTemplateOutlet="collapsible; context: { action: 'collapse', tooltip: (collapseTooltip | translate) }"
         ></ng-container>
     </div>
 

apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts

@@ -11,6 +11,7 @@ import { Toaster } from '@services/toaster.service';
 import { FilterService } from '@shared/services/filter.service';
 import { DossierAttributeWithValue } from '@models/dossier-attributes.model';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Component({
     selector: 'redaction-dossier-details',
@@ -25,6 +26,8 @@ export class DossierDetailsComponent implements OnInit {
     @Output() openAssignDossierMembersDialog = new EventEmitter();
     @Output() openDossierDictionaryDialog = new EventEmitter();
     @Output() toggleCollapse = new EventEmitter();
+    collapseTooltip = _('dossier-details.collapse');
+    expandTooltip = _('dossier-details.expand');
 
     readonly needsWorkFilters$ = this.filterService.getFilterModels$('needsWorkFilters');
 

apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts

@@ -48,10 +48,10 @@ export class FileActionsComponent implements OnInit {
 
     get toggleTooltip(): string {
         if (!this.permissionsService.isManager()) {
-            return 'file-preview.toggle-analysis.only-managers';
+            return _('file-preview.toggle-analysis.only-managers');
         }
 
-        return this.fileStatus?.isExcluded ? 'file-preview.toggle-analysis.enable' : 'file-preview.toggle-analysis.disable';
+        return this.fileStatus?.isExcluded ? _('file-preview.toggle-analysis.enable') : _('file-preview.toggle-analysis.disable');
     }
 
     get canAssignToSelf() {

apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts

@@ -5,6 +5,7 @@ import { PageRange, ReanalysisControllerService } from '@redaction/red-ui-http';
 import { FileDataModel } from '../../../../models/file/file-data.model';
 import { Toaster } from '@services/toaster.service';
 import { LoadingService } from '@services/loading.service';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Component({
     selector: 'redaction-page-exclusion',
@@ -78,7 +79,7 @@ export class PageExclusionComponent implements OnChanges {
             this.excludePagesForm.reset();
             this.actionPerformed.emit('exclude-pages');
         } catch (e) {
-            this._toaster.error('file-preview.tabs.exclude-pages.error');
+            this._toaster.error(_('file-preview.tabs.exclude-pages.error'));
             this._loadingService.stop();
         }
     }

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

@@ -6,8 +6,8 @@
 
         <redaction-empty-state
             *ngIf="!customAttributes.length"
+            [text]="'edit-dossier-dialog.attributes.no-custom-attributes' | translate"
             icon="red:attribute"
-            text="edit-dossier-dialog.attributes.no-custom-attributes"
         ></redaction-empty-state>
 
         <div *ngFor="let attr of customAttributes" [class.datepicker-wrapper]="isDate(attr)" class="red-input-group">
@@ -36,8 +36,8 @@
 
         <redaction-empty-state
             *ngIf="!imageAttributes.length"
+            [text]="'edit-dossier-dialog.attributes.no-image-attributes' | translate"
             icon="red:attribute"
-            text="edit-dossier-dialog.attributes.no-image-attributes"
         ></redaction-empty-state>
 
         <div

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

@@ -4,7 +4,7 @@
     </div>
 
     <div class="dialog-content">
-        <redaction-side-nav title="configurations">
+        <redaction-side-nav [title]="'edit-dossier-dialog.side-nav-title' | translate">
             <div
                 (click)="changeTab(item.key)"
                 *ngFor="let item of navItems"

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

@@ -51,6 +51,7 @@ export class EditDossierDialogComponent {
             },
             {
                 key: 'dossierDictionary',
+                sideNavTitle: _('edit-dossier-dialog.nav-items.dictionary'),
                 title: _('edit-dossier-dialog.nav-items.dossier-dictionary')
             },
             {
@@ -95,7 +96,7 @@ export class EditDossierDialogComponent {
     }
 
     updatedDossier(updatedDossier: DossierWrapper) {
-        this._toaster.success('edit-dossier-dialog.change-successful');
+        this._toaster.success(_('edit-dossier-dialog.change-successful'));
 
         if (updatedDossier) {
             this.dossierWrapper = updatedDossier;
@@ -120,7 +121,7 @@ export class EditDossierDialogComponent {
 
     changeTab(key: Section) {
         if (this.activeComponent.changed) {
-            this._toaster.error('edit-dossier-dialog.unsaved-changes');
+            this._toaster.error(_('edit-dossier-dialog.unsaved-changes'));
             return;
         }
         this.activeNav = key;

apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts

@@ -11,6 +11,7 @@ import { Router } from '@angular/router';
 import { MatDialogRef } from '@angular/material/dialog';
 import { EditDossierDialogComponent } from '../edit-dossier-dialog.component';
 import { Toaster } from '@services/toaster.service';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Component({
     selector: 'redaction-edit-dossier-general-info',
@@ -111,7 +112,7 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
     }
 
     private _notifyDossierDeleted() {
-        this._toaster.success('edit-dossier-dialog.delete-successful');
+        this._toaster.success(_('edit-dossier-dialog.delete-successful'));
     }
 
     private _filterInvalidDossierTemplates() {

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

@@ -11,7 +11,7 @@
                     formControlName="type"
                 >
                     <mat-option *ngFor="let option of typeOptions" [value]="option">
-                        {{ 'recategorize-image-dialog.options.' + option | translate }}
+                        {{ translations[option] | translate }}
                     </mat-option>
                 </mat-select>
             </div>

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

@@ -3,6 +3,8 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { PermissionsService } from '@services/permissions.service';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
+import { imageCategoriesTranslations } from '../../translations/image-categories-translations';
+import { ImageCategory } from '../../models/image-category.model';
 
 @Component({
     selector: 'redaction-recategorize-image-dialog',
@@ -12,7 +14,8 @@ import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 export class RecategorizeImageDialogComponent implements OnInit {
     recategorizeImageForm: FormGroup;
     isDocumentAdmin: boolean;
-    typeOptions: string[] = ['signature', 'logo', 'formula', 'image'];
+    typeOptions: ImageCategory[] = ['signature', 'logo', 'formula', 'image'];
+    translations = imageCategoriesTranslations;
 
     constructor(
         private readonly _permissionsService: PermissionsService,

apps/red-ui/src/app/modules/dossier/models/image-category.model.ts

@@ -0,0 +1 @@
+export type ImageCategory = 'signature' | 'logo' | 'formula' | 'image';

apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html

@@ -8,10 +8,7 @@
 
     <div class="red-content-inner">
         <div class="content-container">
-            <redaction-table-header
+            <redaction-table-header [tableColConfigs]="tableColConfigs" [tableHeaderLabel]="tableHeaderLabel"></redaction-table-header>
-                [tableColConfigs]="tableColConfigs"
-                [tableHeaderLabel]="'dossier-listing.table-header.title'"
-            ></redaction-table-header>
 
             <redaction-empty-state
                 (action)="openAddDossierDialog()"

apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts

@@ -75,8 +75,8 @@ export class DossierListingScreenComponent
     dossiersChartData: DoughnutChartConfig[] = [];
     documentsChartData: DoughnutChartConfig[] = [];
     protected readonly _primaryKey = 'dossierName';
+    protected _tableHeaderLabel = _('dossier-listing.table-header.title');
     private _lastScrollPosition: number;
-
     @ViewChild('needsWorkTemplate', { read: TemplateRef, static: true })
     private readonly _needsWorkTemplate: TemplateRef<any>;
 

apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts

@@ -34,6 +34,7 @@ import { DossierAttributeWithValue } from '@models/dossier-attributes.model';
 import { UserPreferenceService } from '@services/user-preference.service';
 import { workloadTranslations } from '../../translations/workload-translations';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Component({
     templateUrl: './dossier-overview-screen.component.html',
@@ -148,9 +149,9 @@ export class DossierOverviewScreenComponent
             .reanalyzeDossier()
             .then(() => {
                 this.reloadDossiers();
-                this._toaster.success('dossier-overview.reanalyse-dossier.success');
+                this._toaster.success(_('dossier-overview.reanalyse-dossier.success'));
             })
-            .catch(() => this._toaster.error('dossier-overview.reanalyse-dossier.error'));
+            .catch(() => this._toaster.error(_('dossier-overview.reanalyse-dossier.error')));
     }
 
     reloadDossiers() {

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html

@@ -151,8 +151,8 @@
             <redaction-empty-state
                 *ngIf="viewReady && appStateService.activeFile.isExcluded && !viewDocumentInfo && !excludePages"
                 [horizontalPadding]="40"
+                [text]="'file-preview.tabs.is-excluded' | translate"
                 icon="red:needs-work"
-                text="file-preview.tabs.is-excluded"
             ></redaction-empty-state>
 
             <redaction-document-info

apps/red-ui/src/app/modules/dossier/services/annotation-processing.service.ts

@@ -4,6 +4,7 @@ import { SuperTypeSorter } from '@utils/sorters/super-type-sorter';
 import { FilterModel } from '@shared/components/filters/popup-filter/model/filter.model';
 import { handleCheckedValue } from '@shared/components/filters/popup-filter/utils/filter-utils';
 import { annotationTypesTranslations } from '../../../translations/annotation-types-translations';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Injectable()
 export class AnnotationProcessingService {
@@ -12,7 +13,7 @@ export class AnnotationProcessingService {
             {
                 key: 'with-comments',
                 icon: 'red:comment',
-                label: 'filter-menu.with-comments',
+                label: _('filter-menu.with-comments'),
                 checked: false,
                 topLevelFilter: true,
                 filters: [],
@@ -21,7 +22,7 @@ export class AnnotationProcessingService {
             {
                 key: 'with-reason-changes',
                 icon: 'red:reason',
-                label: 'filter-menu.with-reason-changes',
+                label: _('filter-menu.with-reason-changes'),
                 checked: false,
                 topLevelFilter: true,
                 filters: [],

apps/red-ui/src/app/modules/dossier/services/manual-annotation.service.ts

@@ -14,6 +14,7 @@ import { UserService } from '@services/user.service';
 import { PermissionsService } from '@services/permissions.service';
 import { AnnotationActionMode } from '../models/annotation-action-mode.model';
 import { annotationActionsTranslations } from '../translations/annotation-actions-translations';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Injectable()
 export class ManualAnnotationService {
@@ -196,20 +197,20 @@ export class ManualAnnotationService {
         if (this._permissionsService.isApprover()) {
             switch (type) {
                 case 'DICTIONARY':
-                    return 'manual-annotation.dialog.header.dictionary';
+                    return _('manual-annotation.dialog.header.dictionary');
                 case 'FALSE_POSITIVE':
-                    return 'manual-annotation.dialog.header.false-positive';
+                    return _('manual-annotation.dialog.header.false-positive');
                 case 'REDACTION':
-                    return 'manual-annotation.dialog.header.redaction';
+                    return _('manual-annotation.dialog.header.redaction');
             }
         } else {
             switch (type) {
                 case 'DICTIONARY':
-                    return 'manual-annotation.dialog.header.request-dictionary';
+                    return _('manual-annotation.dialog.header.request-dictionary');
                 case 'FALSE_POSITIVE':
-                    return 'manual-annotation.dialog.header.request-false-positive';
+                    return _('manual-annotation.dialog.header.request-false-positive');
                 case 'REDACTION':
-                    return 'manual-annotation.dialog.header.request-redaction';
+                    return _('manual-annotation.dialog.header.request-redaction');
             }
         }
     }

apps/red-ui/src/app/modules/dossier/translations/image-categories-translations.ts

@@ -0,0 +1,9 @@
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { ImageCategory } from '../models/image-category.model';
+
+export const imageCategoriesTranslations: { [key in ImageCategory]: string } = {
+    signature: _('image-category.signature'),
+    logo: _('image-category.logo'),
+    formula: _('image-category.formula'),
+    image: _('image-category.image')
+};

apps/red-ui/src/app/modules/shared/base/base-listing.component.ts

@@ -23,6 +23,7 @@ export abstract class BaseListingComponent<T> extends AutoUnsubscribeComponent i
     readonly sortedDisplayedEntities$: Observable<T[]>;
     readonly noMatch$: Observable<boolean>;
 
+    protected readonly _tableHeaderLabel: string;
     /**
      * Key used in the *trackBy* function with **ngFor* or **cdkVirtualFor*
      * and in the default sorting and as the search field
@@ -44,6 +45,14 @@ export abstract class BaseListingComponent<T> extends AutoUnsubscribeComponent i
         this.noMatch$ = this._noMatch$;
     }
 
+    get tableHeaderLabel(): string {
+        if (!this._tableHeaderLabel) {
+            throw new Error('Not implemented');
+        }
+
+        return this._tableHeaderLabel;
+    }
+
     get allEntities(): T[] {
         return this.screenStateService.allEntities;
     }

apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts

@@ -7,6 +7,7 @@ import { Toaster } from '@services/toaster.service';
 import { BASE_HREF } from '../../../../../tokens';
 import { AutoUnsubscribeComponent } from '@shared/base/auto-unsubscribe.component';
 import { TranslateService } from '@ngx-translate/core';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 export type MenuState = 'OPEN' | 'CLOSED';
 
@@ -53,7 +54,7 @@ export class FileDownloadBtnComponent extends AutoUnsubscribeComponent implement
         this.addSubscription = this._fileDownloadService
             .downloadFiles(Array.isArray(this.file) ? this.file : [this.file], this.dossier)
             .subscribe(() => {
-                this._toaster.info('download-status.queued', { params: { baseUrl: this._baseHref } });
+                this._toaster.info(_('download-status.queued'), { params: { baseUrl: this._baseHref } });
             });
     }
 }

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

@@ -5,6 +5,7 @@ import { debounce } from '@utils/debounce';
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 import { DossierWrapper } from '@state/model/dossier.wrapper';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import ICodeEditor = monaco.editor.ICodeEditor;
 import IDiffEditor = monaco.editor.IDiffEditor;
 import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
@@ -37,7 +38,7 @@ export class DictionaryManagerComponent implements OnChanges, OnInit {
     showDiffEditor = false;
     searchText = '';
 
-    selectDossier = { name: 'dictionary-overview.compare.select-dossier' };
+    selectDossier = { name: _('dictionary-overview.compare.select-dossier') };
     compare: false;
 
     private _codeEditor: ICodeEditor;

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

@@ -1,3 +1,3 @@
-<div [translate]="title" class="all-caps-label"></div>
+<div class="all-caps-label">{{ title }}</div>
 
 <ng-content></ng-content>

apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.ts

@@ -48,7 +48,8 @@ export class ConfirmationDialogComponent {
     ) {
         this.config = _confirmationDialogInput ?? new ConfirmationDialogInput();
         this.config = this.translate(this.config);
-        this.inputLabel = this.translate('confirmation-dialog.delete-dossier.input-label') + ` '${this.config.confirmationText}'`;
+        this.inputLabel =
+            this._translateService.instant('confirmation-dialog.delete-dossier.input-label') + ` '${this.config.confirmationText}'`;
     }
 
     get isDeleteAction() {

apps/red-ui/src/app/modules/shared/services/dictionary-save.service.ts

@@ -3,6 +3,7 @@ import { Observable, throwError } from 'rxjs';
 import { Toaster } from '@services/toaster.service';
 import { DictionaryControllerService } from '@redaction/red-ui-http';
 import { tap } from 'rxjs/operators';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 const MIN_WORD_LENGTH = 2;
 
@@ -39,13 +40,13 @@ export class DictionarySaveService {
             return obs.pipe(
                 tap(
                     () => {
-                        if (showToast) this._toaster.success('dictionary-overview.success.generic');
+                        if (showToast) this._toaster.success(_('dictionary-overview.success.generic'));
                     },
-                    () => this._toaster.error('dictionary-overview.error.generic')
+                    () => this._toaster.error(_('dictionary-overview.error.generic'))
                 )
             );
         } else {
-            this._toaster.error('dictionary-overview.error.entries-too-short');
+            this._toaster.error(_('dictionary-overview.error.entries-too-short'));
 
             return throwError('Entries too short');
         }

apps/red-ui/src/app/state/app-state.service.ts

@@ -331,7 +331,7 @@ export class AppStateService {
                 const index = this.allDossiers.findIndex(p => p.dossierId === dossier.dossierId);
                 this._appState.dossiers.splice(index, 1);
             },
-            () => this._toaster.error('dossiers.delete.delete-failed', { params: dossier })
+            () => this._toaster.error(_('dossier-listing.delete.delete-failed'), { params: dossier })
         );
     }
 

apps/red-ui/src/app/utils/missing-translations-handler.ts

@@ -4,6 +4,6 @@ export class REDMissingTranslationHandler implements MissingTranslationHandler {
     handle(params: MissingTranslationHandlerParams): any {
         const missingKey = params.key;
         console.error('Missing translation: ' + missingKey);
-        return `?${missingKey}?`;
+        return missingKey;
     }
 }

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

@@ -106,6 +106,10 @@
     },
     "title": "{type, select, edit{Edit} create{Add New} other{}} User"
   },
+  "admin-side-nav": {
+    "dossier-templates": "Dossier Templates",
+    "settings": "Settings"
+  },
   "annotation": "Annotation",
   "annotation-actions": {
     "accept-recommendation": {
@@ -189,7 +193,6 @@
           "error": "Failed to request image recategorization: {error}",
           "success": "Image recategorization requested."
         },
-        "search": "Document name...",
         "suggest": {
           "error": "Failed to save redaction suggestion: {error}",
           "success": "Redaction suggestion saved"
@@ -201,9 +204,7 @@
       }
     },
     "recategorize-image": "Recategorize",
-    "reject": "Reject",
     "reject-suggestion": "Reject Suggestion",
-    "remove": "Remove",
     "remove-annotation": {
       "false-positive": "False Positive",
       "only-here": "Remove only here",
@@ -237,15 +238,12 @@
   "assign-dossier-owner": {
     "dialog": {
       "approvers": "Approvers",
-      "cancel": "Cancel",
       "make-approver": "Make Approver",
       "no-approvers": "No approvers yet.\nSelect from the list below.",
       "no-reviewers": "No reviewers yet.\nSelect from the list below.",
       "reviewers": "Reviewers",
-      "save": "Save Changes",
       "search": "Search...",
-      "single-user": "Owner",
+      "single-user": "Owner"
-      "title": "Manage Dossier Team"
     }
   },
   "assign-owner": {
@@ -299,7 +297,6 @@
     "logout": "Logout"
   },
   "by": "by",
-  "change-legal-basis": "Pending Change of Legal Basis",
   "change-legal-basis-dialog": {
     "actions": {
       "cancel": "Cancel",
@@ -313,7 +310,6 @@
     },
     "header": "Edit Redaction Reason"
   },
-  "comment": "Comment",
   "comments": {
     "add-comment": "Enter comment",
     "comments": "{count} {count, plural, one{comment} other{comments}}",
@@ -394,7 +390,6 @@
       "updatedColor": "Updated"
     }
   },
-  "delete-files-error": "Failed to delete files.",
   "dev-mode": "DEV",
   "dictionaries": "Dictionaries",
   "dictionary": "Dictionary",
@@ -552,13 +547,9 @@
       "action": "Delete Dossier",
       "delete-failed": "Failed to delete dossier: {dossierName}"
     },
-    "download-files": {
-      "action": "Download Redacted Files"
-    },
     "edit": {
       "action": "Edit Dossier"
     },
-    "header": "Dossiers",
     "no-data": {
       "action": "New Dossier",
       "title": "You currently have no dossiers."
@@ -591,13 +582,9 @@
       "status": "Status"
     },
     "table-header": {
-      "recent": "Recent",
+      "title": "{length} active {length, plural, one{Dossier} other{Dossiers}}"
-      "title": "{length} active dossiers"
     }
   },
-  "dossier-member-guard": {
-    "access-denied": "You are not allowed to access that page."
-  },
   "dossier-overview": {
     "approve": "Approve",
     "approve-disabled": "File can only be approved once it has been analysed with the latest dictionaries and all suggestions have been processed.",
@@ -639,7 +626,6 @@
         "file-processing": "Processing"
       }
     },
-    "header": "Dossier Overview",
     "header-actions": {
       "edit": "Edit Dossier",
       "upload-document": "Upload Document"
@@ -666,13 +652,13 @@
       "recent": "Recent ({hours} h)",
       "unassigned": "Unassigned"
     },
-    "reanalyse": {
-      "action": "Analyze File"
-    },
     "reanalyse-dossier": {
       "error": "Failed to schedule files for reanalysis. Please try again.",
       "success": "Files scheduled for reanalysis."
     },
+    "reanalyse": {
+      "action": "Analyze File"
+    },
     "search": "Document name...",
     "table-col-names": {
       "added-on": "Added",
@@ -741,8 +727,7 @@
       "date": "Date",
       "name": "Name",
       "size": "Size",
-      "status": "Status",
+      "status": "Status"
-      "type": "Type"
     },
     "table-header": {
       "title": "{length} downloads"
@@ -800,12 +785,11 @@
       "download-package": "Download Package",
       "general-info": "General Information",
       "members": "Members",
-      "report-attributes": "Report Attributes",
       "team-members": "Team Members"
     },
+    "side-nav-title": "Configurations",
     "unsaved-changes": "You have unsaved changes. Save or revert before changing the tab."
   },
-  "efsa": "EFSA Approval",
   "file-attribute-types": {
     "date": "Date",
     "number": "Number",
@@ -909,9 +893,7 @@
     "exclude-pages": "Exclude pages from redaction",
     "excluded-from-redaction": "excluded from redaction",
     "fullscreen": "Full Screen (F)",
-    "html-debug": "Open Document HTML Debug",
     "last-reviewer": "Last Reviewed by:",
-    "new-tab-ssr": "Open Document in Server Side Rendering Mode",
     "no-data": {
       "title": "There are no annotations on this page."
     },
@@ -919,11 +901,9 @@
       "jump-first": "Jump to first page",
       "jump-last": "Jump to last page"
     },
-    "reanalyse-file": "File reanalysis in progress",
     "reanalyse-notification": "This document was not processed with the latest rule/dictionary set. Analyze now to get updated annotations.",
     "redacted": "Preview",
     "redacted-tooltip": "Redaction preview shows only redactions. Consider this a preview for the final redacted version. This view is only available if the file has no pending changes & doesn't require a reanalysis",
-    "reviewer": "Assigned to",
     "standard": "Standard",
     "standard-tooltip": "Standard Workload view shows all hints, redactions, recommendations & suggestions. This view allows editing.",
     "tabs": {
@@ -963,8 +943,7 @@
       "disable": "Disable redaction",
       "enable": "Enable for redaction",
       "only-managers": "Enabling / disabling is permitted only for managers"
-    },
+    }
-    "unassigned": "Unassigned"
   },
   "file-status": {
     "approved": "Approved",
@@ -979,6 +958,13 @@
     "under-review": "Under Review",
     "unprocessed": "Unprocessed"
   },
+  "filter-menu": {
+    "filter-options": "Filter options",
+    "filter-types": "Filter types",
+    "label": "Filter",
+    "with-comments": "Only annotations with comments",
+    "with-reason-changes": "Only redactions with reason changes"
+  },
   "filter": {
     "analysis": "Analysis required",
     "hint": "Hints only",
@@ -988,30 +974,26 @@
     "suggestion": "Suggested Redaction",
     "updated": "Updated"
   },
-  "filter-menu": {
-    "filter-options": "Filter options",
-    "filter-types": "Filter types",
-    "label": "Filter",
-    "with-comments": "Only annotations with comments",
-    "with-reason-changes": "Only redactions with reason changes"
-  },
   "filters": {
     "assigned-people": "Assignee(s)",
-    "dossier": "Dossier",
     "dossier-templates": "Rule Sets",
     "filter-by": "Filter:",
     "needs-work": "Workload",
     "people": "Dossier Member(s)",
     "status": "Status"
   },
-  "finished": "Finished",
   "hint": "Hint",
+  "image-category": {
+    "formula": "Formula",
+    "image": "Image",
+    "logo": "Logo",
+    "signature": "Signature"
+  },
   "initials-avatar": {
     "unassigned": "Unassigned",
     "you": "You"
   },
   "license-info-screen": {
-    "3rd-party-title": "Reference to 3rd Party Licenses",
     "analyzed-pages": "Analyzed Pages",
     "backend-version": "Backend Application Version",
     "chart": {
@@ -1025,6 +1007,7 @@
     "copyright-claim-title": "Copyright Claim",
     "current-analyzed": "Analyzed Pages in Current Licensing Period",
     "custom-app-title": "Custom Application Title",
+    "email-report": "Email Report",
     "email": {
       "body": {
         "analyzed": "Total Analyzed Pages in current license period: {pages}.",
@@ -1032,7 +1015,6 @@
       },
       "title": "License Report {licenseCustomer}"
     },
-    "email-report": "Email Report",
     "end-user-license-text": "The use of this product is subject to the terms of the Redaction End User Agreement, unless other specified therein.",
     "end-user-license-title": "End User License Agreement",
     "frontend-version": "Frontend Application Version",
@@ -1068,10 +1050,6 @@
         "request-false-positive": "Request false positive",
         "request-redaction": "Request Redaction"
       }
-    },
-    "undo": {
-      "error": "Failed to undo action.",
-      "success": "Action undone."
     }
   },
   "notifications": {
@@ -1103,7 +1081,6 @@
       }
     }
   },
-  "pending-analysis": "Pending Re-Analysis",
   "pending-changes-guard": "WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.",
   "readonly": "Read only",
   "recategorize-image-dialog": {
@@ -1116,13 +1093,7 @@
       "type": "Select image type",
       "type-placeholder": "Select a type..."
     },
-    "header": "Edit Image Type",
+    "header": "Edit Image Type"
-    "options": {
-      "formula": "Formula",
-      "image": "Image",
-      "logo": "Logo",
-      "signature": "Signature"
-    }
   },
   "redaction": "Redaction",
   "remove-annotations-dialog": {
@@ -1188,8 +1159,6 @@
       "generic": "Rules updated!"
     }
   },
-  "settings": "Settings",
-  "skipped": "Skipped",
   "smtp-auth-config": {
     "actions": {
       "cancel": "Cancel",
@@ -1242,7 +1211,6 @@
     },
     "title": "Configure SMTP Account"
   },
-  "suggestion": "Suggestion for redaction",
   "time": {
     "days": "{days} {days, plural, one{day} other{days}}",
     "hours": "{hours} {hours, plural, one{hour} other{hours}}",

package.json

@@ -21,7 +21,7 @@
     "format:check": "nx format:check",
     "format:write": "nx format:write",
     "help": "nx help",
-    "i18n:extract": "ngx-translate-extract --input ./apps/red-ui/src --output apps/red-ui/src/assets/i18n/te.json --clean --sort --format namespaced-json",
+    "i18n:extract": "ngx-translate-extract --input ./apps/red-ui/src --output apps/red-ui/src/assets/i18n/en.json --clean --sort --format namespaced-json --format-indentation '  '",
     "postinstall": "ngcc --properties es2015 browser module main",
     "lint": "nx workspace-lint && nx lint",
     "lint-fix": "nx workspace-lint --fix && nx lint --fix",