From ec45d72f2a2f929d0081588df3f63928d2f79449 Mon Sep 17 00:00:00 2001
From: Timo <timo@devplant.ro>
Date: Wed, 24 Feb 2021 18:37:49 +0200
Subject: [PATCH] dialog for force redaction

---
 apps/red-ui/src/app/app.module.ts             |  2 +
 .../service/annotation-actions.service.ts     | 18 ++---
 apps/red-ui/src/app/dialogs/dialog.service.ts | 18 ++++-
 .../force-redaction-dialog.component.html     | 34 +++++++++
 .../force-redaction-dialog.component.scss     |  3 +
 .../force-redaction-dialog.component.ts       | 75 +++++++++++++++++++
 apps/red-ui/src/assets/i18n/en.json           |  1 +
 7 files changed, 139 insertions(+), 12 deletions(-)
 create mode 100644 apps/red-ui/src/app/dialogs/force-redaction-dialog/force-redaction-dialog.component.html
 create mode 100644 apps/red-ui/src/app/dialogs/force-redaction-dialog/force-redaction-dialog.component.scss
 create mode 100644 apps/red-ui/src/app/dialogs/force-redaction-dialog/force-redaction-dialog.component.ts

diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index 73dba4712..bcd985e8a 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -115,6 +115,7 @@ import { RemoveAnnotationsDialogComponent } from './dialogs/remove-annotations-d
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { ComboChartComponent, ComboSeriesVerticalComponent } from './screens/admin/license-information-screen/combo-chart';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { ForceRedactionDialogComponent } from './dialogs/force-redaction-dialog/force-redaction-dialog.component';
 
 export function HttpLoaderFactory(httpClient: HttpClient) {
     return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
@@ -325,6 +326,7 @@ const matImports = [
         LogoComponent,
         SimpleDoughnutChartComponent,
         ManualAnnotationDialogComponent,
+        ForceRedactionDialogComponent,
         AnnotationIconComponent,
         AuthErrorComponent,
         HumanizePipe,
diff --git a/apps/red-ui/src/app/common/service/annotation-actions.service.ts b/apps/red-ui/src/app/common/service/annotation-actions.service.ts
index 4fed588b5..20a0f00a3 100644
--- a/apps/red-ui/src/app/common/service/annotation-actions.service.ts
+++ b/apps/red-ui/src/app/common/service/annotation-actions.service.ts
@@ -37,16 +37,14 @@ export class AnnotationActionsService {
 
     public forceRedaction($event: MouseEvent, annotations: AnnotationWrapper[], annotationsChanged: EventEmitter<AnnotationWrapper>) {
         $event?.stopPropagation();
-        annotations.forEach((annotation) => {
-            this._processObsAndEmit(
-                this._manualAnnotationService.forceRedaction({
-                    annotationId: annotation.id,
-                    comment: 'Test',
-                    legalBasis: 'Test'
-                }),
-                annotation,
-                annotationsChanged
-            );
+        this._dialogService.openForceRedactionDialog($event, (request) => {
+            annotations.forEach((annotation) => {
+                this._processObsAndEmit(
+                    this._manualAnnotationService.forceRedaction({ ...request, annotationId: annotation.id }),
+                    annotation,
+                    annotationsChanged
+                );
+            });
         });
     }
 
diff --git a/apps/red-ui/src/app/dialogs/dialog.service.ts b/apps/red-ui/src/app/dialogs/dialog.service.ts
index efaac9671..93967f43c 100644
--- a/apps/red-ui/src/app/dialogs/dialog.service.ts
+++ b/apps/red-ui/src/app/dialogs/dialog.service.ts
@@ -26,6 +26,7 @@ import { AddEditRuleSetDialogComponent } from '../screens/admin/rule-sets-listin
 import { OverwriteFilesDialogComponent } from './overwrite-files-dialog/overwrite-files-dialog.component';
 import { EditColorDialogComponent } from '../screens/admin/default-colors-screen/edit-color-dialog/edit-color-dialog.component';
 import { RemoveAnnotationsDialogComponent } from './remove-annotations-dialog/remove-annotations-dialog.component';
+import { ForceRedactionDialogComponent } from './force-redaction-dialog/force-redaction-dialog.component';
 
 const dialogConfig = {
     width: '662px',
@@ -135,8 +136,21 @@ export class DialogService {
             data: project
         });
         ref.afterClosed().subscribe(async (result) => {
-            if (result) {
-                if (cb) cb();
+            if (result && cb) {
+                cb(result);
+            }
+        });
+        return ref;
+    }
+
+    public openForceRedactionDialog($event: MouseEvent, cb?: Function): MatDialogRef<ForceRedactionDialogComponent> {
+        $event?.stopPropagation();
+        const ref = this._dialog.open(ForceRedactionDialogComponent, {
+            ...dialogConfig
+        });
+        ref.afterClosed().subscribe(async (result) => {
+            if (result && cb) {
+                cb(result);
             }
         });
         return ref;
diff --git a/apps/red-ui/src/app/dialogs/force-redaction-dialog/force-redaction-dialog.component.html b/apps/red-ui/src/app/dialogs/force-redaction-dialog/force-redaction-dialog.component.html
new file mode 100644
index 000000000..3c508b551
--- /dev/null
+++ b/apps/red-ui/src/app/dialogs/force-redaction-dialog/force-redaction-dialog.component.html
@@ -0,0 +1,34 @@
+<section class="dialog">
+    <form (submit)="handleForceRedaction()" [formGroup]="redactionForm">
+        <div class="dialog-header heading-l" [translate]="'manual-annotation.dialog.header.force'"></div>
+
+        <div class="dialog-content">
+            <div class="red-input-group required w-400">
+                <label translate="manual-annotation.dialog.content.reason"></label>
+                <mat-select formControlName="reason" class="full-width" [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate">
+                    <mat-option *ngFor="let option of legalOptions" [value]="option" [matTooltip]="option.description">
+                        {{ option.label }}
+                    </mat-option>
+                </mat-select>
+            </div>
+
+            <div class="red-input-group w-400">
+                <label translate="manual-annotation.dialog.content.legalBasis"></label>
+                <input type="text" [value]="redactionForm.get('reason').value?.legalBasis" disabled />
+            </div>
+
+            <div class="red-input-group w-300" [class.required]="!isDocumentAdmin">
+                <label translate="manual-annotation.dialog.content.comment"></label>
+                <textarea redactionHasScrollbar formControlName="comment" name="comment" type="text" rows="4"></textarea>
+            </div>
+        </div>
+
+        <div class="dialog-actions">
+            <button color="primary" mat-flat-button [disabled]="!redactionForm.valid" type="submit">
+                {{ 'manual-annotation.dialog.actions.save' | translate }}
+            </button>
+        </div>
+    </form>
+
+    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+</section>
diff --git a/apps/red-ui/src/app/dialogs/force-redaction-dialog/force-redaction-dialog.component.scss b/apps/red-ui/src/app/dialogs/force-redaction-dialog/force-redaction-dialog.component.scss
new file mode 100644
index 000000000..07b46869c
--- /dev/null
+++ b/apps/red-ui/src/app/dialogs/force-redaction-dialog/force-redaction-dialog.component.scss
@@ -0,0 +1,3 @@
+.full-width {
+    width: 100%;
+}
diff --git a/apps/red-ui/src/app/dialogs/force-redaction-dialog/force-redaction-dialog.component.ts b/apps/red-ui/src/app/dialogs/force-redaction-dialog/force-redaction-dialog.component.ts
new file mode 100644
index 000000000..f79ef8af3
--- /dev/null
+++ b/apps/red-ui/src/app/dialogs/force-redaction-dialog/force-redaction-dialog.component.ts
@@ -0,0 +1,75 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AppStateService } from '../../state/app-state.service';
+import { MatDialogRef } from '@angular/material/dialog';
+import { ForceRedactionRequest, LegalBasisMappingControllerService } from '@redaction/red-ui-http';
+import { NotificationService } from '../../notification/notification.service';
+import { TranslateService } from '@ngx-translate/core';
+import { UserService } from '../../user/user.service';
+import { ManualAnnotationService } from '../../screens/file/service/manual-annotation.service';
+import { PermissionsService } from '../../common/service/permissions.service';
+
+export interface LegalBasisOption {
+    label?: string;
+    legalBasis?: string;
+    description?: string;
+}
+
+@Component({
+    selector: 'redaction-force-redaction-dialog',
+    templateUrl: './force-redaction-dialog.component.html',
+    styleUrls: ['./force-redaction-dialog.component.scss']
+})
+export class ForceRedactionDialogComponent implements OnInit {
+    redactionForm: FormGroup;
+    isDocumentAdmin: boolean;
+    legalOptions: LegalBasisOption[] = [];
+
+    constructor(
+        private readonly _appStateService: AppStateService,
+        private readonly _userService: UserService,
+        private readonly _formBuilder: FormBuilder,
+        private readonly _notificationService: NotificationService,
+        private readonly _translateService: TranslateService,
+        private readonly _legalBasisMappingControllerService: LegalBasisMappingControllerService,
+        private readonly _manualAnnotationService: ManualAnnotationService,
+        private readonly _permissionsService: PermissionsService,
+        public dialogRef: MatDialogRef<ForceRedactionDialogComponent>
+    ) {}
+
+    async ngOnInit() {
+        this._legalBasisMappingControllerService.getLegalBasisMapping(this._appStateService.activeProject.ruleSetId).subscribe((data) => {
+            data.map((lbm) => {
+                this.legalOptions.push({
+                    legalBasis: lbm.reason,
+                    description: lbm.description,
+                    label: lbm.name
+                });
+            });
+
+            this.legalOptions.sort((a, b) => a.label.localeCompare(b.label));
+        });
+
+        this.isDocumentAdmin = this._permissionsService.isManagerAndOwner();
+
+        this.redactionForm = this._formBuilder.group({
+            reason: [null, Validators.required],
+            comment: this.isDocumentAdmin ? [null] : [null, Validators.required]
+        });
+    }
+
+    handleForceRedaction() {
+        this.dialogRef.close(this._createForceRedactionRequest());
+    }
+
+    private _createForceRedactionRequest(): ForceRedactionRequest {
+        const request: ForceRedactionRequest = {};
+
+        const legalOption: LegalBasisOption = this.redactionForm.get('reason').value;
+
+        request.legalBasis = legalOption.legalBasis;
+        request.comment = this.redactionForm.get('comment').value;
+
+        return request;
+    }
+}
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 7ee64a3db..3b6768629 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -507,6 +507,7 @@
             "header": {
                 "dictionary": "Add to dictionary",
                 "redaction": "Redaction",
+                "force": "Force Redaction",
                 "request-dictionary": "Request add to dictionary",
                 "request-redaction": "Request Redaction",
                 "false-positive": "Set false positive",