From b33b66ce8e9af1c5fd8fc7d6617bc318816877a8 Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo@devplant.ro>
Date: Fri, 6 Nov 2020 20:06:47 +0200
Subject: [PATCH] tooltips fix

---
 .../file-preview-screen.component.html        | 122 ++++++++++--------
 .../screens/file/model/file-status.wrapper.ts |  16 +++
 .../project-listing-screen.component.html     |  31 +++--
 .../project-listing-screen.component.ts       |   5 -
 .../project-overview-screen.component.html    |  32 +++--
 .../project-overview-screen.component.ts      |  17 ---
 .../red-ui/src/app/state/app-state.service.ts |  29 ++++-
 apps/red-ui/src/assets/i18n/en.json           |   8 +-
 .../src/assets/styles/red-tooltips.scss       |  15 ++-
 9 files changed, 163 insertions(+), 112 deletions(-)

diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
index 4356f071c..f53c916f6 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@@ -16,68 +16,78 @@
         </div>
 
         <div class="flex-1 actions-container">
-            <div class="actions-row">
+            <button
+                (click)="openDeleteFileDialog($event)"
+                *ngIf="userService.isManager(user)"
+                mat-icon-button
+            >
+                <mat-icon svgIcon="red:trash"></mat-icon>
+            </button>
+            <div
+                [matTooltip]="
+                    (appStateService.activeFile.isApproved
+                        ? 'report.action'
+                        : 'report.unavailable-single'
+                    ) | translate
+                "
+                [matTooltipHideDelay]="400000"
+                [matTooltipPosition]="'above'"
+            >
                 <button
-                    (click)="openDeleteFileDialog($event)"
-                    *ngIf="userService.isManager(user)"
                     mat-icon-button
+                    (click)="appStateService.downloadFileRedactionReport()"
+                    *ngIf="appStateService.isActiveProjectOwnerAndManager"
+                    [disabled]="!appStateService.activeFile.isApproved"
+                    color="accent"
                 >
-                    <mat-icon svgIcon="red:trash"></mat-icon>
-                </button>
-                <button mat-icon-button>
                     <mat-icon svgIcon="red:report"></mat-icon>
                 </button>
-                <button
-                    (click)="assignReviewer()"
-                    *ngIf="appStateService.isActiveProjectMember && !isApprovedOrUnderApproval()"
-                    mat-icon-button
-                >
-                    <mat-icon svgIcon="red:assign"></mat-icon>
-                </button>
-                <button
-                    (click)="reanalyseFile($event)"
-                    *ngIf="appStateService.isActiveProjectMember && !isApproved()"
-                    mat-icon-button
-                >
-                    <mat-icon svgIcon="red:refresh"></mat-icon>
-                </button>
-                <button
-                    *ngIf="canApprove() && appStateService.isActiveProjectOwnerAndManager"
-                    (click)="requestApprovalOrApproveFile($event)"
-                    color="accent"
-                    mat-icon-button
-                    [matTooltip]="
-                        (appStateService.activeFile.status === 'UNDER_APPROVAL'
-                            ? 'project-overview.approve'
-                            : 'project-overview.under-approval'
-                        ) | translate
-                    "
-                    [matTooltipPosition]="'above'"
-                >
-                    <mat-icon svgIcon="red:check-alt"></mat-icon>
-                </button>
-                <button
-                    (click)="undoApproveOrUnderApproval($event)"
-                    *ngIf="
-                        isApprovedOrUnderApproval() &&
-                        appStateService.isActiveProjectOwnerAndManager
-                    "
-                    [matTooltip]="
-                        (appStateService.activeFile.status === 'APPROVED'
-                            ? 'project-overview.under-approval'
-                            : 'project-overview.under-review'
-                        ) | translate
-                    "
-                    [matTooltipPosition]="'above'"
-                    color="accent"
-                    mat-icon-button
-                >
-                    <mat-icon svgIcon="red:undo"></mat-icon>
-                </button>
-                <button (click)="openFileDetailsDialog($event)" mat-icon-button>
-                    <mat-icon svgIcon="red:info"></mat-icon>
-                </button>
             </div>
+            <button (click)="assignReviewer()" *ngIf="!isApprovedOrUnderApproval()" mat-icon-button>
+                <mat-icon svgIcon="red:assign"></mat-icon>
+            </button>
+            <button
+                (click)="reanalyseFile($event)"
+                *ngIf="appStateService.canReanalyseFile()"
+                mat-icon-button
+            >
+                <mat-icon svgIcon="red:refresh"></mat-icon>
+            </button>
+            <button
+                *ngIf="canApprove() && appStateService.isActiveProjectOwnerAndManager"
+                (click)="requestApprovalOrApproveFile($event)"
+                color="accent"
+                mat-icon-button
+                [matTooltip]="
+                    (appStateService.activeFile.status === 'UNDER_APPROVAL'
+                        ? 'project-overview.approve'
+                        : 'project-overview.under-approval'
+                    ) | translate
+                "
+                [matTooltipPosition]="'above'"
+            >
+                <mat-icon svgIcon="red:check-alt"></mat-icon>
+            </button>
+            <button
+                (click)="undoApproveOrUnderApproval($event)"
+                *ngIf="
+                    isApprovedOrUnderApproval() && appStateService.isActiveProjectOwnerAndManager
+                "
+                [matTooltip]="
+                    (appStateService.activeFile.status === 'APPROVED'
+                        ? 'project-overview.under-approval'
+                        : 'project-overview.under-review'
+                    ) | translate
+                "
+                [matTooltipPosition]="'above'"
+                color="accent"
+                mat-icon-button
+            >
+                <mat-icon svgIcon="red:undo"></mat-icon>
+            </button>
+            <button (click)="openFileDetailsDialog($event)" mat-icon-button>
+                <mat-icon svgIcon="red:info"></mat-icon>
+            </button>
 
             <button
                 (click)="downloadFile('REDACTED')"
diff --git a/apps/red-ui/src/app/screens/file/model/file-status.wrapper.ts b/apps/red-ui/src/app/screens/file/model/file-status.wrapper.ts
index 0149d7a7e..15b1a53c2 100644
--- a/apps/red-ui/src/app/screens/file/model/file-status.wrapper.ts
+++ b/apps/red-ui/src/app/screens/file/model/file-status.wrapper.ts
@@ -75,10 +75,26 @@ export class FileStatusWrapper {
         return this.fileStatus.uploader;
     }
 
+    get isApproved() {
+        return this.fileStatus.status === 'APPROVED';
+    }
+
+    get isError() {
+        return this.fileStatus.status === 'ERROR';
+    }
+
     get pages() {
         if (this.fileStatus.status === 'ERROR') {
             return -1;
         }
         return this.fileStatus.numberOfPages ? this.fileStatus.numberOfPages : 0;
     }
+
+    get isApprovedOrUnderApproval() {
+        return this.status === 'APPROVED' || this.status === 'UNDER_APPROVAL';
+    }
+
+    get canApprove() {
+        return this.status === 'UNDER_REVIEW' || this.status === 'UNDER_APPROVAL';
+    }
 }
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 afc46f403..c5534ff29 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
@@ -194,19 +194,25 @@
                                 <mat-icon svgIcon="red:edit"></mat-icon>
                             </button>
 
-                            <button
-                                mat-icon-button
-                                (click)="downloadRedactionReport($event, pw.project)"
-                                *ngIf="
-                                    appStateService.isManagerAndOwner(user, pw.project) &&
-                                    pw.hasFiles
+                            <div
+                                [matTooltip]="
+                                    (pw.allFilesApproved ? 'report.action' : 'report.unavailable')
+                                        | translate
                                 "
-                                [matTooltip]="'project-listing.report.action' | translate"
                                 [matTooltipPosition]="'above'"
-                                color="accent"
                             >
-                                <mat-icon svgIcon="red:report"></mat-icon>
-                            </button>
+                                <button
+                                    mat-icon-button
+                                    (click)="downloadRedactionReport($event, pw.project)"
+                                    *ngIf="
+                                        appStateService.isManagerAndOwner(pw.project) && pw.hasFiles
+                                    "
+                                    [disabled]="!pw.allFilesApproved"
+                                    color="accent"
+                                >
+                                    <mat-icon svgIcon="red:report"></mat-icon>
+                                </button>
+                            </div>
                             <button
                                 (click)="openAssignProjectOwnerDialog($event, pw.project)"
                                 [matTooltip]="'project-listing.assign.action' | translate"
@@ -219,10 +225,7 @@
                             </button>
                             <button
                                 color="accent"
-                                *ngIf="
-                                    appStateService.isManagerAndOwner(user, pw.project) &&
-                                    pw.hasFiles
-                                "
+                                *ngIf="appStateService.isManagerAndOwner(pw.project) && pw.hasFiles"
                                 (click)="reanalyseProject($event, pw.project)"
                                 mat-icon-button
                                 [matTooltip]="'project-listing.reanalyse.action' | translate"
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 b86c2a2a8..6ac3f623b 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
@@ -116,11 +116,6 @@ export class ProjectListingScreenComponent implements OnInit {
         });
     }
 
-    public downloadRedactionReport($event: MouseEvent, project: Project) {
-        $event.preventDefault();
-        this.appStateService.downloadRedactionReport(project);
-    }
-
     public openAssignProjectOwnerDialog($event: MouseEvent, project: Project) {
         this._dialogService.openAssignProjectMembersAndOwnerDialog($event, project);
     }
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
index 781eb6aa4..0372bd713 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@@ -254,20 +254,30 @@
                             >
                                 <mat-icon svgIcon="red:trash"></mat-icon>
                             </button>
-                            <button
-                                (click)="downloadFileRedactionReport($event, fileStatus)"
-                                [matTooltip]="'project-overview.report.action' | translate"
+
+                            <div
+                                [matTooltip]="
+                                    (fileStatus.isApproved
+                                        ? 'report.action'
+                                        : 'report.unavailable-single'
+                                    ) | translate
+                                "
                                 [matTooltipPosition]="'above'"
-                                color="accent"
-                                mat-icon-button
                             >
-                                <mat-icon svgIcon="red:report"></mat-icon>
-                            </button>
+                                <button
+                                    (click)="downloadFileRedactionReport($event, fileStatus)"
+                                    [disabled]="!fileStatus.isApproved"
+                                    color="accent"
+                                    mat-icon-button
+                                >
+                                    <mat-icon svgIcon="red:report"></mat-icon>
+                                </button>
+                            </div>
                             <button
                                 (click)="assignReviewer($event, fileStatus)"
                                 *ngIf="
                                     appStateService.isActiveProjectMember &&
-                                    !isApprovedOrUnderApproval(fileStatus)
+                                    !fileStatus.isApprovedOrUnderApproval
                                 "
                                 [matTooltip]="'project-overview.assign.action' | translate"
                                 [matTooltipPosition]="'above'"
@@ -278,7 +288,7 @@
                             </button>
                             <button
                                 (click)="reanalyseFile($event, fileStatus)"
-                                *ngIf="!isApproved(fileStatus)"
+                                *ngIf="appStateService.canReanalyseFile(fileStatus)"
                                 [matTooltip]="'project-overview.reanalyse.action' | translate"
                                 [matTooltipPosition]="'above'"
                                 color="accent"
@@ -289,7 +299,7 @@
                             <button
                                 (click)="requestApprovalOrApproveFile($event, fileStatus)"
                                 *ngIf="
-                                    canApprove(fileStatus) &&
+                                    fileStatus.canApprove &&
                                     appStateService.isActiveProjectOwnerAndManager
                                 "
                                 [matTooltip]="
@@ -307,7 +317,7 @@
                             <button
                                 (click)="undoApproveOrUnderApproval($event, fileStatus)"
                                 *ngIf="
-                                    isApprovedOrUnderApproval(fileStatus) &&
+                                    fileStatus.isApprovedOrUnderApproval &&
                                     appStateService.isActiveProjectOwnerAndManager
                                 "
                                 [matTooltip]="
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
index ca8fe52bd..cc0908d4b 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
@@ -343,21 +343,4 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
             this.reloadProjects();
         });
     }
-
-    isApprovedOrUnderApproval(fileStatusWrapper: FileStatusWrapper) {
-        return (
-            fileStatusWrapper.status === 'APPROVED' || fileStatusWrapper.status === 'UNDER_APPROVAL'
-        );
-    }
-
-    canApprove(fileStatusWrapper: FileStatusWrapper) {
-        return (
-            fileStatusWrapper.status === 'UNDER_REVIEW' ||
-            fileStatusWrapper.status === 'UNDER_APPROVAL'
-        );
-    }
-
-    isApproved(fileStatusWrapper: FileStatusWrapper) {
-        return fileStatusWrapper.status === 'APPROVED';
-    }
 }
diff --git a/apps/red-ui/src/app/state/app-state.service.ts b/apps/red-ui/src/app/state/app-state.service.ts
index 8c8f59105..8edcdbc0b 100644
--- a/apps/red-ui/src/app/state/app-state.service.ts
+++ b/apps/red-ui/src/app/state/app-state.service.ts
@@ -39,6 +39,9 @@ export class ProjectWrapper {
     hasHints?: boolean;
     hasRedactions?: boolean;
     hasRequests?: boolean;
+
+    allFilesApproved?: boolean;
+
     private _files: FileStatusWrapper[];
 
     constructor(public project: Project, files: FileStatusWrapper[]) {
@@ -87,10 +90,12 @@ export class ProjectWrapper {
         this.hasHints = false;
         this.hasRedactions = false;
         this.hasRequests = false;
+        this.allFilesApproved = true;
         this._files.forEach((f) => {
             this.hasHints = this.hasHints || f.hasHints;
             this.hasRedactions = this.hasRedactions || f.hasRedactions;
             this.hasRequests = this.hasRequests || f.hasRequests;
+            this.allFilesApproved = this.allFilesApproved && f.isApproved;
         });
     }
 }
@@ -467,7 +472,10 @@ export class AppStateService {
         await this.reloadActiveProjectFiles();
     }
 
-    downloadFileRedactionReport(file: FileStatusWrapper) {
+    downloadFileRedactionReport(file?: FileStatusWrapper) {
+        if (!file) {
+            file = this.activeFile;
+        }
         this._fileUploadControllerService
             .downloadRedactionReport({ fileIds: [file.fileId] }, true, 'response')
             .subscribe((data) => {
@@ -536,7 +544,10 @@ export class AppStateService {
         return data ? data : this._dictionaryData['default'];
     }
 
-    isManagerAndOwner(user: UserWrapper, project: Project) {
+    isManagerAndOwner(project: Project, user?: UserWrapper) {
+        if (!user) {
+            user = this._userService.user;
+        }
         return user.isManager && project.ownerId === user.id;
     }
 
@@ -566,12 +577,24 @@ export class AppStateService {
         );
     }
 
+    canReanalyseFile(fileStatus?: FileStatusWrapper) {
+        if (!fileStatus) {
+            fileStatus = this.activeFile;
+        }
+        return (
+            (!fileStatus.isApproved && this.fileNotUpToDateWithDictionary(fileStatus)) ||
+            fileStatus.isError
+        );
+    }
+
     fileNotUpToDateWithDictionary(fileStatus?: FileStatusWrapper) {
         if (!fileStatus) {
             fileStatus = this.activeFile;
         }
         return (
-            (fileStatus.status === 'UNASSIGNED' || fileStatus.status === 'UNDER_REVIEW') &&
+            (fileStatus.status === 'UNASSIGNED' ||
+                fileStatus.status === 'UNDER_REVIEW' ||
+                fileStatus.status === 'UNDER_APPROVAL') &&
             fileStatus.dictionaryVersion !== this.dictionaryVersion
         );
     }
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 275f5868a..0039a2a62 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -90,10 +90,12 @@
         "document": "Document",
         "needs-work": "Analysed"
     },
+    "report": {
+        "unavailable": "Redaction Report is only available once all files have been approved.",
+        "unavailable-single": "Redaction Report is only available once this file has been approved.",
+        "action": "Download Redaction Report"
+    },
     "project-listing": {
-        "report": {
-            "action": "Download Redaction Report"
-        },
         "reanalyse": {
             "action": "Reanalyse entire Project"
         },
diff --git a/apps/red-ui/src/assets/styles/red-tooltips.scss b/apps/red-ui/src/assets/styles/red-tooltips.scss
index efe8a669b..a26529fca 100644
--- a/apps/red-ui/src/assets/styles/red-tooltips.scss
+++ b/apps/red-ui/src/assets/styles/red-tooltips.scss
@@ -16,13 +16,22 @@
 .mat-tooltip:after {
     content: '';
     position: absolute;
-    top: 100%;
     left: 50%;
     margin-left: -5px;
     width: 0;
     height: 0;
-    border-top: solid 6px $accent;
+    z-index: 3000;
     border-left: solid 5px transparent;
     border-right: solid 5px transparent;
-    z-index: 3000;
+    border-top: solid 6px $accent;
+}
+
+.mat-tooltip[style*='transform-origin: center top']:after {
+    top: -6px;
+    transform: rotate(180deg);
+}
+
+.mat-tooltip[style*='transform-origin: center bottom']:after {
+    top: 100%;
+    border-top: solid 6px $accent;
 }