From 3b3dc5739f8031684434e5c72e7fa10bb4deaec0 Mon Sep 17 00:00:00 2001
From: Timo <timo@devplant.ro>
Date: Tue, 23 Feb 2021 09:40:31 +0200
Subject: [PATCH] bulk actions for multiple selected annotations

---
 apps/red-ui/src/app/dialogs/dialog.service.ts | 15 +-------
 .../remove-annotations-dialog.component.html  | 37 +++++++++++++++++--
 .../remove-annotations-dialog.component.scss  | 10 +++++
 .../remove-annotations-dialog.component.ts    |  7 +++-
 apps/red-ui/src/assets/i18n/en.json           | 26 +++++++------
 apps/red-ui/src/assets/styles/red-tables.scss | 11 ++++++
 6 files changed, 75 insertions(+), 31 deletions(-)

diff --git a/apps/red-ui/src/app/dialogs/dialog.service.ts b/apps/red-ui/src/app/dialogs/dialog.service.ts
index 77fb9a886..efaac9671 100644
--- a/apps/red-ui/src/app/dialogs/dialog.service.ts
+++ b/apps/red-ui/src/app/dialogs/dialog.service.ts
@@ -151,20 +151,7 @@ export class DialogService {
         $event?.stopPropagation();
         const ref = this._dialog.open(RemoveAnnotationsDialogComponent, {
             ...dialogConfig,
-            data: annotations
-            // new ConfirmationDialogInput({
-            //     title: annotation.isManualRedaction
-            //         ? 'confirmation-dialog.remove-manual-redaction.title'
-            //         : removeFromDictionary
-            //         ? 'confirmation-dialog.remove-from-dictionary.title'
-            //         : 'confirmation-dialog.remove-only-here.title',
-            //     question: annotation.isManualRedaction
-            //         ? 'confirmation-dialog.remove-manual-redaction.question'
-            //         : removeFromDictionary
-            //         ? 'confirmation-dialog.remove-from-dictionary.question'
-            //         : 'confirmation-dialog.remove-only-here.question',
-            //     translateParams: { entry: annotation.value, dictionary: annotation.dictionary }
-            // })
+            data: { annotationsToRemove: annotations, removeFromDictionary: removeFromDictionary }
         });
         ref.afterClosed().subscribe(async (result) => {
             if (result) {
diff --git a/apps/red-ui/src/app/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html b/apps/red-ui/src/app/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
index ab92d4c55..a216cb0ab 100644
--- a/apps/red-ui/src/app/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
@@ -1,18 +1,47 @@
 <section class="dialog">
     <div class="dialog-header heading-l">
-        <!--        {{ confirmationDialogInput.title | translate: confirmationDialogInput.translateParams }}-->
+        {{
+            (data.removeFromDictionary ? 'remove-annotations-dialog.remove-from-dictionary.title' : 'remove-annotations-dialog.remove-only-here.title')
+                | translate
+        }}
     </div>
 
     <div class="dialog-content">
-        <!--        <p [innerHTML]="confirmationDialogInput.question | translate: confirmationDialogInput.translateParams"></p>-->
+        {{
+            (data.removeFromDictionary ? 'remove-annotations-dialog.remove-from-dictionary.question' : 'remove-annotations-dialog.remove-only-here.question')
+                | translate
+        }}
+
+        <div class="content-wrapper" *ngIf="data.removeFromDictionary">
+            <table class="default-table">
+                <thead>
+                    <tr>
+                        <th>{{ 'remove-annotations-dialog.dictionary' | translate }}</th>
+                        <th>{{ 'remove-annotations-dialog.value' | translate }}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let annotation of data.annotationsToRemove">
+                        <td>{{ annotation.dictionary }}</td>
+                        <td>{{ annotation.value }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <ul *ngIf="!data.removeFromDictionary">
+            <li *ngFor="let annotation of data.annotationsToRemove">
+                {{ annotation.value }}
+            </li>
+        </ul>
     </div>
 
     <div class="dialog-actions">
         <button (click)="confirm()" color="primary" mat-flat-button>
-            <!--            {{ confirmationDialogInput.confirmationText | translate: confirmationDialogInput.translateParams }}-->
+            {{ 'remove-annotations-dialog.confirm' | translate }}
         </button>
         <button (click)="deny()" color="primary" mat-flat-button>
-            <!--            {{ confirmationDialogInput.denyText | translate: confirmationDialogInput.translateParams }}-->
+            {{ 'remove-annotations-dialog.deny' | translate }}
         </button>
     </div>
 
diff --git a/apps/red-ui/src/app/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.scss b/apps/red-ui/src/app/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.scss
index e69de29bb..9e8bcdbe3 100644
--- a/apps/red-ui/src/app/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.scss
+++ b/apps/red-ui/src/app/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.scss
@@ -0,0 +1,10 @@
+.content-wrapper {
+    padding-top: 20px;
+    padding-bottom: 8px;
+}
+
+ul {
+    li {
+        padding-top: 4px;
+    }
+}
diff --git a/apps/red-ui/src/app/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.ts b/apps/red-ui/src/app/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.ts
index 77e8037ce..8e7eb78b4 100644
--- a/apps/red-ui/src/app/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.ts
+++ b/apps/red-ui/src/app/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.ts
@@ -4,6 +4,11 @@ import { TranslateService } from '@ngx-translate/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ConfirmationDialogInput } from '../confirmation-dialog/confirmation-dialog.component';
 
+export interface RemoveAnnotationsDialogInput {
+    annotationsToRemove: AnnotationWrapper[];
+    removeFromDictionary: boolean;
+}
+
 @Component({
     selector: 'redaction-remove-annotations-dialog',
     templateUrl: './remove-annotations-dialog.component.html',
@@ -13,7 +18,7 @@ export class RemoveAnnotationsDialogComponent implements OnInit {
     constructor(
         private readonly _translateService: TranslateService,
         public dialogRef: MatDialogRef<RemoveAnnotationsDialogComponent>,
-        @Inject(MAT_DIALOG_DATA) public annotationsToRemove: AnnotationWrapper[]
+        @Inject(MAT_DIALOG_DATA) public data: RemoveAnnotationsDialogInput
     ) {}
 
     ngOnInit(): void {}
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 8b3b68aa8..79e5ec90f 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -546,6 +546,20 @@
             "error": "Failed to add redaction."
         }
     },
+    "remove-annotations-dialog": {
+        "remove-from-dictionary": {
+            "title": "Remove From Dictionary",
+            "question": "Following entries will be removed from their respective dictionaries:"
+        },
+        "remove-only-here": {
+            "title": "Remove Redaction",
+            "question": "Following redactions will be removed only here:"
+        },
+        "dictionary": "Dictionary",
+        "value": "Value",
+        "confirm": "Yes, proceed and remove!",
+        "deny": "Cancel"
+    },
     "confirmation-dialog": {
         "delete-file": {
             "title": "Delete Document",
@@ -554,18 +568,6 @@
         "delete-project": {
             "title": "Delete Project",
             "question": "Do you wish to proceed?"
-        },
-        "remove-manual-redaction": {
-            "title": "Remove Redaction",
-            "question": "Are you sure you wish to remove this redaction?"
-        },
-        "remove-from-dictionary": {
-            "title": "Remove From Dictionary",
-            "question": "Are you sure you want to remove <b>{{entry}}</b> from the <b>{{dictionary}}</b> dictionary?"
-        },
-        "remove-only-here": {
-            "title": "Remove Only Here",
-            "question": "Are you sure you want to remove <b>{{entry}}</b> only here?"
         }
     },
     "add-edit-dictionary": {
diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss
index 55fae57bc..c5f77f376 100644
--- a/apps/red-ui/src/assets/styles/red-tables.scss
+++ b/apps/red-ui/src/assets/styles/red-tables.scss
@@ -1,6 +1,17 @@
 @import 'red-variables';
 @import 'red-mixins';
 
+.default-table {
+    border-collapse: collapse;
+
+    th,
+    td {
+        padding: 8px;
+        text-align: left;
+        border: 1px solid $separator;
+    }
+}
+
 .no-data {
     padding: 24px;
 }