RED-854: Confirmation dialog for remove from dictionary

apps/red-ui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.html

@@ -1,16 +1,18 @@
 <section class="dialog">
-    <div [translate]="confirmationDialogInput.title" class="dialog-header heading-l"></div>
+    <div class="dialog-header heading-l">
+        {{ confirmationDialogInput.title | translate: confirmationDialogInput.translateParams }}
+    </div>
 
     <div class="dialog-content">
-        <p [translate]="confirmationDialogInput.question"></p>
+        <p [innerHTML]="confirmationDialogInput.question | translate: confirmationDialogInput.translateParams"></p>
     </div>
 
     <div class="dialog-actions">
         <button (click)="confirm()" color="primary" mat-flat-button class="red-button">
-            {{ confirmationDialogInput.confirmationText | translate }}
+            {{ confirmationDialogInput.confirmationText | translate: confirmationDialogInput.translateParams }}
         </button>
         <button (click)="deny()" color="primary" mat-flat-button class="red-button">
-            {{ confirmationDialogInput.denyText | translate }}
+            {{ confirmationDialogInput.denyText | translate: confirmationDialogInput.translateParams }}
         </button>
     </div>
 

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

@@ -7,12 +7,14 @@ export class ConfirmationDialogInput {
     public question?: string;
     public confirmationText?: string;
     public denyText?: string;
+    public translateParams?: {};
 
     constructor(options: ConfirmationDialogInput) {
         this.title = options.title || ConfirmationDialogInput.default().title;
         this.question = options.question || ConfirmationDialogInput.default().question;
         this.confirmationText = options.confirmationText || ConfirmationDialogInput.default().confirmationText;
         this.denyText = options.denyText || ConfirmationDialogInput.default().denyText;
+        this.translateParams = options.translateParams || ConfirmationDialogInput.default().translateParams;
     }
 
     static default() {
@@ -20,7 +22,8 @@ export class ConfirmationDialogInput {
             title: 'common.confirmation-dialog.title',
             question: 'common.confirmation-dialog.description',
             confirmationText: 'common.confirmation-dialog.confirm',
-            denyText: 'common.confirmation-dialog.deny'
+            denyText: 'common.confirmation-dialog.deny',
+            translateParams: {}
         });
     }
 }

apps/red-ui/src/app/dialogs/dialog.service.ts

@@ -149,6 +149,23 @@ export class DialogService {
         return ref;
     }
 
+    public openRemoveFromDictionaryDialog($event: MouseEvent, annotation: AnnotationWrapper, cb?: Function): MatDialogRef<ConfirmationDialogComponent> {
+        $event.stopPropagation();
+        const ref = this._dialog.open(ConfirmationDialogComponent, {
+            ...dialogConfig,
+            data: new ConfirmationDialogInput({
+                question: 'confirmation-dialog.remove-from-dictionary.question',
+                translateParams: { entry: annotation.value, dictionary: annotation.dictionary }
+            })
+        });
+        ref.afterClosed().subscribe(async (result) => {
+            if (result) {
+                if (cb) cb();
+            }
+        });
+        return ref;
+    }
+
     public openDeleteDictionaryDialog($event: MouseEvent, dictionary: TypeValue, cb?: Function): MatDialogRef<ConfirmationDialogComponent> {
         $event.stopPropagation();
         const ref = this._dialog.open(ConfirmationDialogComponent, dialogConfig);

apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.scss

@@ -4,12 +4,14 @@
     position: absolute;
     right: 0;
     top: 0;
-    height: 40px;
+    height: 100%;
+    box-sizing: border-box;
     display: none;
-    align-items: center;
     justify-content: flex-end;
     width: 120px;
-    padding-right: 16px;
+    padding-right: 8px;
+    padding-top: 8px;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f9fafb, #f9fafb, #f9fafb);
 
     .confirm.active {
         background-color: $grey-2;

apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.ts

@@ -5,6 +5,7 @@ import { TypeValue } from '@redaction/red-ui-http';
 import { ManualAnnotationService } from '../service/manual-annotation.service';
 import { Observable } from 'rxjs';
 import { PermissionsService } from '../../../common/service/permissions.service';
+import { DialogService } from '../../../dialogs/dialog.service';
 
 @Component({
     selector: 'redaction-annotation-actions',
@@ -23,7 +24,8 @@ export class AnnotationActionsComponent implements OnInit {
     constructor(
         public appStateService: AppStateService,
         public permissionsService: PermissionsService,
-        private readonly _manualAnnotationService: ManualAnnotationService
+        private readonly _manualAnnotationService: ManualAnnotationService,
+        private readonly _dialogService: DialogService
     ) {}
 
     ngOnInit(): void {
@@ -70,8 +72,9 @@ export class AnnotationActionsComponent implements OnInit {
     }
 
     suggestRemoveAnnotation($event: MouseEvent, annotation: AnnotationWrapper, removeFromDictionary: boolean) {
-        $event.stopPropagation();
-        this._processObsAndEmit(this._manualAnnotationService.removeOrSuggestRemoveAnnotation(annotation, removeFromDictionary));
+        this._dialogService.openRemoveFromDictionaryDialog($event, annotation, () => {
+            this._processObsAndEmit(this._manualAnnotationService.removeOrSuggestRemoveAnnotation(annotation, removeFromDictionary));
+        });
     }
 
     undoDirectAction($event: MouseEvent, annotation: AnnotationWrapper) {

apps/red-ui/src/app/screens/file/model/annotation.wrapper.ts

@@ -22,6 +22,7 @@ export class AnnotationWrapper {
     firstTopLeftPoint: Point;
     id: string;
     content: string;
+    value: string;
     manual: boolean;
     userId: string;
     typeLabel: string;
@@ -114,6 +115,7 @@ export class AnnotationWrapper {
             annotationWrapper.redaction = redactionLogEntry.redacted;
             annotationWrapper.hint = redactionLogEntry.hint;
             annotationWrapper.dictionary = redactionLogEntry.type;
+            annotationWrapper.value = redactionLogEntry.value;
             annotationWrapper.firstTopLeftPoint = redactionLogEntry.positions[0]?.topLeft;
             annotationWrapper.pageNumber = redactionLogEntry.positions[0]?.page;
             annotationWrapper.positions = redactionLogEntry.positions;

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

@@ -479,6 +479,9 @@
         "delete-file": {
             "title": "Confirm deletion",
             "question": "Do you wish to proceed?"
+        },
+        "remove-from-dictionary": {
+            "question": "Are you sure you want to remove <b>{{entry}}</b> from the <b>{{dictionary}}</b> dictionary?"
         }
     },
     "add-edit-dictionary": {