From 7ef6b208a6b564d823da7433d4b15cbb6acece83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 13 Jul 2021 17:06:52 +0300
Subject: [PATCH] Display page excluded from redaction in workload

---
 .../document-info/document-info.component.ts  |  2 +-
 .../dossier-listing-actions.component.ts      |  2 +-
 .../file-workload.component.html              | 20 ++++++++++++++++---
 .../file-workload/file-workload.component.ts  |  1 -
 .../pdf-viewer/pdf-viewer.component.html      |  2 +-
 .../dossier-listing-screen.component.ts       |  2 +-
 .../dossier-overview-screen.component.ts      |  4 ++--
 .../file-preview-screen.component.html        |  1 -
 .../services/dossiers-dialog.service.ts       |  6 +++---
 .../empty-state/empty-state.component.html    |  3 +++
 .../empty-state/empty-state.component.scss    |  4 ++++
 apps/red-ui/src/assets/i18n/en.json           |  4 +++-
 12 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.ts b/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.ts
index e41fb8e47..754972a6e 100644
--- a/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.ts
@@ -30,6 +30,6 @@ export class DocumentInfoComponent {
     }
 
     edit() {
-        this._dialogService.openDialog('document-info', null, this.file);
+        this._dialogService.openDialog('documentInfo', null, this.file);
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts
index 5452f2dbf..ae79b6868 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts
@@ -24,7 +24,7 @@ export class DossierListingActionsComponent {
     ) {}
 
     openEditDossierDialog($event: MouseEvent, dossierWrapper: DossierWrapper) {
-        this._dialogService.openDialog('edit-dossier', $event, {
+        this._dialogService.openDialog('editDossier', $event, {
             dossierWrapper,
             afterSave: () => {
                 this.actionPerformed.emit();
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
index f18120c34..0cb15a7bd 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
@@ -27,7 +27,7 @@
 >
     <div>
         <redaction-circle-button
-            (action)="closeExcludePagesView.emit()"
+            (action)="actionPerformed.emit('view-exclude-pages')"
             icon="red:close"
             tooltip="file-preview.tabs.exclude-pages.close"
             tooltipPosition="before"
@@ -148,7 +148,21 @@
                             [verticalPadding]="40"
                             icon="red:document"
                             screen="file-preview"
-                        ></redaction-empty-state>
+                        >
+                            <ng-container
+                                *ngIf="
+                                    fileData?.fileStatus?.excludedPages?.includes(activeViewerPage)
+                                "
+                            >
+                                {{ 'file-preview.tabs.annotations.page-is' | translate }}
+                                <a
+                                    (click)="actionPerformed.emit('view-exclude-pages')"
+                                    translate="file-preview.tabs.annotations.excluded-from-redaction"
+                                >
+                                </a
+                                >.
+                            </ng-container>
+                        </redaction-empty-state>
                         <div class="no-annotations-buttons-container mt-32">
                             <redaction-icon-button
                                 (action)="jumpToPreviousWithAnnotations()"
@@ -267,8 +281,8 @@
 
 <ng-template #annotationFilterActionTemplate let-filter="filter">
     <redaction-circle-button
-        *ngIf="filter.key === 'skipped'"
         (action)="toggleSkipped.emit($event)"
+        *ngIf="filter.key === 'skipped'"
         [icon]="hideSkipped ? 'red:visibility-off' : 'red:visibility'"
         type="dark-bg"
     ></redaction-circle-button>
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts
index 88dbbd086..1603de47d 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts
@@ -50,7 +50,6 @@ export class FileWorkloadComponent {
     @Output() selectPage = new EventEmitter<number>();
     @Output() toggleSkipped = new EventEmitter<any>();
     @Output() annotationsChanged = new EventEmitter<AnnotationWrapper>();
-    @Output() closeExcludePagesView = new EventEmitter();
     @Output() actionPerformed = new EventEmitter<string>();
     displayedPages: number[] = [];
     pagesPanelActive = true;
diff --git a/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.html b/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.html
index f86d81b51..5bfe10c73 100644
--- a/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.html
@@ -9,7 +9,7 @@
     type="file"
 />
 
-<div *ngIf="utils.totalPages && utils.currentPage" class="pagination noselect">
+<div *ngIf="utils?.totalPages && utils?.currentPage" class="pagination noselect">
     <div (click)="utils.previousPage()">
         <mat-icon class="chevron-icon" svgIcon="red:nav-prev"></mat-icon>
     </div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
index 213379d4d..3d0e73788 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
@@ -196,7 +196,7 @@ export class DossierListingScreenComponent
             this._calculateData();
             await this._router.navigate([`/main/dossiers/${addResponse.dossier.dossierId}`]);
             if (addResponse.addMembers) {
-                this._dialogService.openDialog('edit-dossier', null, {
+                this._dialogService.openDialog('editDossier', null, {
                     dossierWrapper: addResponse.dossier,
                     section: 'members'
                 });
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
index 8f226bef6..ea6d48303 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
@@ -293,14 +293,14 @@ export class DossierOverviewScreenComponent
     }
 
     openEditDossierDialog($event: MouseEvent) {
-        this._dialogService.openDialog('edit-dossier', $event, {
+        this._dialogService.openDialog('editDossier', $event, {
             dossierWrapper: this.activeDossier
         });
     }
 
     openAssignDossierMembersDialog(): void {
         this._dialogService.openDialog(
-            'edit-dossier',
+            'editDossier',
             null,
             {
                 dossierWrapper: this.activeDossier,
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
index cc1e1e42b..5f574af01 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
@@ -174,7 +174,6 @@
                 #fileWorkloadComponent
                 (actionPerformed)="fileActionPerformed($event)"
                 (annotationsChanged)="annotationsChangedByReviewAction($event)"
-                (closeExcludePagesView)="excludePages = false"
                 (deselectAnnotations)="deselectAnnotations($event)"
                 (selectAnnotations)="selectAnnotations($event)"
                 (selectPage)="selectPage($event)"
diff --git a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
index 1446efbc5..f1aa10c3a 100644
--- a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
@@ -33,7 +33,7 @@ const dialogConfig = {
 
 // TODO: Continue refactor
 
-type DialogType = 'confirm' | 'document-info' | 'edit-dossier';
+type DialogType = 'confirm' | 'documentInfo' | 'editDossier';
 
 type DossiersDialogConfig = {
     [key in DialogType]: {
@@ -48,11 +48,11 @@ export class DossiersDialogService extends DialogService<DialogType> {
         confirm: {
             component: ConfirmationDialogComponent
         },
-        'document-info': {
+        documentInfo: {
             component: DocumentInfoDialogComponent,
             dialogConfig: { autoFocus: true }
         },
-        'edit-dossier': {
+        editDossier: {
             component: EditDossierDialogComponent,
             dialogConfig: { ...this._largeConfig, autoFocus: true }
         }
diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
index e3154f74e..50223bb5c 100644
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
@@ -7,6 +7,9 @@
     class="empty-state"
 >
     <mat-icon [svgIcon]="icon"></mat-icon>
+    <div class="ng-content-wrapper heading-l">
+        <ng-content></ng-content>
+    </div>
     <div [translate]="text || screen + '.' + type + '.title'" class="heading-l"></div>
     <redaction-icon-button
         (action)="action.emit()"
diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss
index ef18f9b40..7efc6aa36 100644
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss
@@ -20,4 +20,8 @@
     redaction-icon-button {
         margin-top: 24px;
     }
+
+    .ng-content-wrapper:not(:empty) + .heading-l {
+        display: none;
+    }
 }
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index a14f2f188..ae0fe1ad9 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -948,7 +948,9 @@
         "label": "Workload",
         "select": "Select",
         "select-all": "All",
-        "select-none": "None"
+        "select-none": "None",
+        "page-is": "This page is",
+        "excluded-from-redaction": "excluded from redaction"
       },
       "document-info": {
         "close": "Close Document Info",