From 32fd58f2d52238d54e8ff3556f19a679843fe8f5 Mon Sep 17 00:00:00 2001
From: Timo <timo@devplant.ro>
Date: Tue, 15 Dec 2020 14:03:59 +0200
Subject: [PATCH] reworked redaction report with template

---
 .../file-actions/file-actions.component.html  | 245 ++++++++++--------
 .../file-actions/file-actions.component.ts    |   5 -
 apps/red-ui/src/app/dialogs/dialog.service.ts |   1 -
 .../project-listing-actions.component.ts      |   2 +-
 .../project-overview-screen.component.html    |  23 +-
 5 files changed, 139 insertions(+), 137 deletions(-)

diff --git a/apps/red-ui/src/app/common/file-actions/file-actions.component.html b/apps/red-ui/src/app/common/file-actions/file-actions.component.html
index 4e5039e9e..141c9b2d0 100644
--- a/apps/red-ui/src/app/common/file-actions/file-actions.component.html
+++ b/apps/red-ui/src/app/common/file-actions/file-actions.component.html
@@ -1,114 +1,133 @@
-<div class="file-actions" [class.active]="actionMenuOpen">
-    <!-- delete-->
-    <redaction-circle-button
-        (action)="openDeleteFileDialog($event, fileStatus)"
-        *ngIf="permissionsService.canDeleteFile(fileStatus)"
-        [tooltipPosition]="tooltipPosition"
-        [type]="buttonType"
-        icon="red:trash"
-        tooltip="project-overview.delete.action"
-    >
-    </redaction-circle-button>
-
-    <!-- assign-->
-    <redaction-circle-button
-        (action)="assignReviewer($event, fileStatus)"
-        *ngIf="permissionsService.canAssignReviewer(fileStatus) && screen === 'project-overview'"
-        [icon]="permissionsService.isManagerAndOwner() ? 'red:assign' : 'red:assign-me'"
-        [tooltipPosition]="tooltipPosition"
-        [tooltip]="permissionsService.isManagerAndOwner() ? 'project-overview.assign' : 'project-overview.assign-me'"
-        [type]="buttonType"
-    >
-    </redaction-circle-button>
-
-    <!-- download report-->
-    <redaction-report-download-btn
-        (menuStateChanged)="actionMenuOpen = $event === 'OPEN'"
-        [tooltipClass]="'small'"
-        [tooltipPosition]="tooltipPosition"
-        [file]="fileStatus"
-        [type]="buttonType"
-        [project]="appStateService.activeProject"
-    >
-    </redaction-report-download-btn>
-
-    <!-- download redacted file-->
-    <redaction-circle-button
-        (action)="downloadFile($event, fileStatus)"
-        *ngIf="permissionsService.canDownloadRedactedFile(fileStatus)"
-        [tooltipPosition]="tooltipPosition"
-        [type]="buttonType"
-        icon="red:download"
-        tooltip="project-overview.download-redacted-file"
-    >
-    </redaction-circle-button>
-
-    <!-- file state actions -->
-
-    <!-- Ready for approval-->
-    <redaction-circle-button
-        (action)="setFileUnderApproval($event, fileStatus)"
-        *ngIf="permissionsService.canSetUnderApproval(fileStatus)"
-        [tooltipPosition]="tooltipPosition"
-        [type]="buttonType"
-        icon="red:ready-for-approval"
-        tooltip="project-overview.under-approval"
-    >
-    </redaction-circle-button>
-
-    <!-- Back to review -->
-    <redaction-circle-button
-        (action)="setFileUnderReview($event, fileStatus, true)"
-        *ngIf="permissionsService.canUndoUnderApproval(fileStatus)"
-        [tooltipPosition]="tooltipPosition"
-        [type]="buttonType"
-        icon="red:undo"
-        tooltip="project-overview.under-review"
-    >
-    </redaction-circle-button>
-
-    <!-- Approved-->
-    <redaction-circle-button
-        (action)="setFileApproved($event, fileStatus)"
-        *ngIf="permissionsService.canApprove(fileStatus)"
-        [tooltipPosition]="tooltipPosition"
-        [type]="buttonType"
-        icon="red:approved"
-        tooltip="project-overview.approve"
-    >
-    </redaction-circle-button>
-
-    <!-- Back to approval -->
-    <redaction-circle-button
-        (action)="setFileUnderApproval($event, fileStatus)"
-        *ngIf="permissionsService.canUndoApproval(fileStatus)"
-        [tooltipPosition]="tooltipPosition"
-        [type]="buttonType"
-        icon="red:undo"
-        tooltip="project-overview.under-approval"
-    >
-    </redaction-circle-button>
-
-    <!-- reanalyse file preview -->
-    <redaction-circle-button
-        (action)="reanalyseFile($event, fileStatus)"
-        *ngIf="permissionsService.canReanalyseFile(fileStatus) && screen === 'file-preview'"
-        [tooltipPosition]="'before'"
-        icon="red:refresh"
-        tooltip="file-preview.reanalyse-notification"
-        tooltipClass="warn small"
-        type="warn"
-    >
-    </redaction-circle-button>
-
-    <!-- reanalyse file listing -->
-    <redaction-circle-button
-        (action)="reanalyseFile($event, fileStatus)"
-        *ngIf="permissionsService.canReanalyseFile(fileStatus) && screen === 'project-overview'"
-        [tooltipPosition]="tooltipPosition"
-        icon="red:refresh"
-        tooltip="project-overview.reanalyse.action"
-        type="dark-bg"
-    >
-    </redaction-circle-button>
+<div class="action-buttons" [class.active]="actionMenuOpen" *ngIf="screen === 'project-overview'">
+    <ng-container *ngTemplateOutlet="actions"></ng-container>
+    <redaction-status-bar
+        *ngIf="fileStatus.isWorkable"
+        [config]="[
+            {
+                color: fileStatus.status,
+                length: 1
+            }
+        ]"
+    ></redaction-status-bar>
 </div>
+
+<ng-container *ngIf="screen === 'file-preview'">
+    <ng-container *ngTemplateOutlet="actions"></ng-container>
+</ng-container>
+
+<ng-template #actions>
+    <div class="file-actions">
+        <!-- delete-->
+        <redaction-circle-button
+            (action)="openDeleteFileDialog($event, fileStatus)"
+            *ngIf="permissionsService.canDeleteFile(fileStatus)"
+            [tooltipPosition]="tooltipPosition"
+            [type]="buttonType"
+            icon="red:trash"
+            tooltip="project-overview.delete.action"
+        >
+        </redaction-circle-button>
+
+        <!-- assign-->
+        <redaction-circle-button
+            (action)="assignReviewer($event, fileStatus)"
+            *ngIf="permissionsService.canAssignReviewer(fileStatus) && screen === 'project-overview'"
+            [icon]="permissionsService.isManagerAndOwner() ? 'red:assign' : 'red:assign-me'"
+            [tooltipPosition]="tooltipPosition"
+            [tooltip]="permissionsService.isManagerAndOwner() ? 'project-overview.assign' : 'project-overview.assign-me'"
+            [type]="buttonType"
+        >
+        </redaction-circle-button>
+
+        <!-- download report-->
+        <redaction-report-download-btn
+            (menuStateChanged)="actionMenuOpen = $event === 'OPEN'"
+            [tooltipClass]="'small'"
+            [tooltipPosition]="tooltipPosition"
+            [file]="fileStatus"
+            [type]="buttonType"
+            [project]="appStateService.activeProject"
+        >
+        </redaction-report-download-btn>
+
+        <!-- download redacted file-->
+        <redaction-circle-button
+            (action)="downloadFile($event, fileStatus)"
+            *ngIf="permissionsService.canDownloadRedactedFile(fileStatus)"
+            [tooltipPosition]="tooltipPosition"
+            [type]="buttonType"
+            icon="red:download"
+            tooltip="project-overview.download-redacted-file"
+        >
+        </redaction-circle-button>
+
+        <!-- file state actions -->
+
+        <!-- Ready for approval-->
+        <redaction-circle-button
+            (action)="setFileUnderApproval($event, fileStatus)"
+            *ngIf="permissionsService.canSetUnderApproval(fileStatus)"
+            [tooltipPosition]="tooltipPosition"
+            [type]="buttonType"
+            icon="red:ready-for-approval"
+            tooltip="project-overview.under-approval"
+        >
+        </redaction-circle-button>
+
+        <!-- Back to review -->
+        <redaction-circle-button
+            (action)="setFileUnderReview($event, fileStatus, true)"
+            *ngIf="permissionsService.canUndoUnderApproval(fileStatus)"
+            [tooltipPosition]="tooltipPosition"
+            [type]="buttonType"
+            icon="red:undo"
+            tooltip="project-overview.under-review"
+        >
+        </redaction-circle-button>
+
+        <!-- Approved-->
+        <redaction-circle-button
+            (action)="setFileApproved($event, fileStatus)"
+            *ngIf="permissionsService.canApprove(fileStatus)"
+            [tooltipPosition]="tooltipPosition"
+            [type]="buttonType"
+            icon="red:approved"
+            tooltip="project-overview.approve"
+        >
+        </redaction-circle-button>
+
+        <!-- Back to approval -->
+        <redaction-circle-button
+            (action)="setFileUnderApproval($event, fileStatus)"
+            *ngIf="permissionsService.canUndoApproval(fileStatus)"
+            [tooltipPosition]="tooltipPosition"
+            [type]="buttonType"
+            icon="red:undo"
+            tooltip="project-overview.under-approval"
+        >
+        </redaction-circle-button>
+
+        <!-- reanalyse file preview -->
+        <redaction-circle-button
+            (action)="reanalyseFile($event, fileStatus)"
+            *ngIf="permissionsService.canReanalyseFile(fileStatus) && screen === 'file-preview'"
+            [tooltipPosition]="'before'"
+            icon="red:refresh"
+            tooltip="file-preview.reanalyse-notification"
+            tooltipClass="warn small"
+            type="warn"
+        >
+        </redaction-circle-button>
+
+        <!-- reanalyse file listing -->
+        <redaction-circle-button
+            (action)="reanalyseFile($event, fileStatus)"
+            *ngIf="permissionsService.canReanalyseFile(fileStatus) && screen === 'project-overview'"
+            [tooltipPosition]="tooltipPosition"
+            icon="red:refresh"
+            tooltip="project-overview.reanalyse.action"
+            type="dark-bg"
+        >
+        </redaction-circle-button>
+    </div>
+</ng-template>
diff --git a/apps/red-ui/src/app/common/file-actions/file-actions.component.ts b/apps/red-ui/src/app/common/file-actions/file-actions.component.ts
index 7dc1b5b41..4cd692f3f 100644
--- a/apps/red-ui/src/app/common/file-actions/file-actions.component.ts
+++ b/apps/red-ui/src/app/common/file-actions/file-actions.component.ts
@@ -55,11 +55,6 @@ export class FileActionsComponent implements OnInit {
         });
     }
 
-    downloadFileRedactionReport($event: MouseEvent, file: FileStatusWrapper) {
-        $event.stopPropagation();
-        this.appStateService.downloadFileRedactionReport(file);
-    }
-
     async assignReviewer($event: MouseEvent, file: FileStatusWrapper) {
         $event.stopPropagation();
         await this._fileActionService.assignProjectReviewerFromOverview(file, () => this.actionPerformed.emit('assign-reviewer'));
diff --git a/apps/red-ui/src/app/dialogs/dialog.service.ts b/apps/red-ui/src/app/dialogs/dialog.service.ts
index 2f16ddabc..407cc386b 100644
--- a/apps/red-ui/src/app/dialogs/dialog.service.ts
+++ b/apps/red-ui/src/app/dialogs/dialog.service.ts
@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { FileDetailsDialogComponent } from './file-details-dialog/file-details-dialog.component';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { DictionaryControllerService, FileManagementControllerService, FileStatus, ManualRedactionControllerService, TypeValue } from '@redaction/red-ui-http';
 import { ConfirmationDialogComponent, ConfirmationDialogInput } from './confirmation-dialog/confirmation-dialog.component';
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-actions/project-listing-actions.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-actions/project-listing-actions.component.ts
index a5010c741..6e31ff32c 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-actions/project-listing-actions.component.ts
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-actions/project-listing-actions.component.ts
@@ -16,7 +16,7 @@ import { DialogService } from '../../../dialogs/dialog.service';
 export class ProjectListingActionsComponent implements OnInit {
     @Input() project: ProjectWrapper;
     @Output() actionPerformed = new EventEmitter();
-    actionMenuOpen: boolean = false;
+    actionMenuOpen = false;
 
     constructor(
         public readonly permissionsService: PermissionsService,
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 ad724dac4..5dd77925d 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
@@ -242,23 +242,12 @@
                                 ]"
                             ></redaction-status-bar>
 
-                            <div class="action-buttons">
-                                <redaction-file-actions
-                                    [fileStatus]="fileStatus"
-                                    (actionPerformed)="calculateData()"
-                                    *ngIf="!fileStatus.isProcessing"
-                                    class="mr-4"
-                                ></redaction-file-actions>
-                                <redaction-status-bar
-                                    *ngIf="fileStatus.isWorkable"
-                                    [config]="[
-                                        {
-                                            color: fileStatus.status,
-                                            length: 1
-                                        }
-                                    ]"
-                                ></redaction-status-bar>
-                            </div>
+                            <redaction-file-actions
+                                [fileStatus]="fileStatus"
+                                (actionPerformed)="calculateData()"
+                                *ngIf="!fileStatus.isProcessing"
+                                class="mr-4"
+                            ></redaction-file-actions>
                         </div>
                         <div class="scrollbar-placeholder"></div>
                     </div>