From 54a5cdd9a1d023b147f341c3bfe07a34bcd7b193 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Tue, 5 Dec 2023 17:34:30 +0200
Subject: [PATCH] RED-7761 - Missing fields in Edit Dialog for Signature
 (redacted images)

---
 .../edit-redaction-dialog.component.html      | 58 ++++++++++---------
 .../edit-redaction-dialog.component.scss      |  7 +++
 .../edit-redaction-dialog.component.ts        | 18 +++---
 3 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html
index 192adcb8f..a71108d1e 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html
@@ -6,7 +6,7 @@
             class="dialog-header heading-l"
         ></div>
 
-        <div class="dialog-content redaction">
+        <div class="dialog-content redaction" [class.fixed-height]="isRedacted && isImage">
             <div *ngIf="!isImage && redactedTexts" class="iqser-input-group">
                 <label [translate]="'edit-redaction.dialog.content.redacted-text'" class="selected-text"></label>
                 <cdk-virtual-scroll-viewport
@@ -39,35 +39,37 @@
             </div>
 
             <ng-container *ngIf="showExtras">
-                <div [class.required]="!someSkipped" class="iqser-input-group w-450">
-                    <label [translate]="'edit-redaction.dialog.content.reason'"></label>
-                    <mat-form-field>
-                        <mat-select
-                            [placeholder]="!hidePlaceholder ? ('edit-redaction.dialog.content.unchanged' | translate) : ''"
-                            class="full-width"
-                            formControlName="reason"
-                        >
-                            <mat-option
-                                *ngFor="let option of legalOptions"
-                                [matTooltip]="option.description"
-                                [value]="option"
-                                matTooltipPosition="after"
+                <ng-container *ngIf="!hiddenReason">
+                    <div [class.required]="!someSkipped" class="iqser-input-group w-450">
+                        <label [translate]="'edit-redaction.dialog.content.reason'"></label>
+                        <mat-form-field>
+                            <mat-select
+                                [placeholder]="!hidePlaceholder ? ('edit-redaction.dialog.content.unchanged' | translate) : ''"
+                                class="full-width"
+                                formControlName="reason"
                             >
-                                {{ option.label }}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                </div>
+                                <mat-option
+                                    *ngFor="let option of legalOptions"
+                                    [matTooltip]="option.description"
+                                    [value]="option"
+                                    matTooltipPosition="after"
+                                >
+                                    {{ option.label }}
+                                </mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
 
-                <div class="iqser-input-group w-450">
-                    <label [translate]="'edit-redaction.dialog.content.legal-basis'"></label>
-                    <input
-                        [placeholder]="!hidePlaceholder ? ('edit-redaction.dialog.content.unchanged' | translate) : ''"
-                        [value]="form.controls.reason.value?.legalBasis"
-                        disabled
-                        type="text"
-                    />
-                </div>
+                    <div class="iqser-input-group w-450">
+                        <label [translate]="'edit-redaction.dialog.content.legal-basis'"></label>
+                        <input
+                            [placeholder]="!hidePlaceholder ? ('edit-redaction.dialog.content.unchanged' | translate) : ''"
+                            [value]="form.controls.reason.value?.legalBasis"
+                            disabled
+                            type="text"
+                        />
+                    </div>
+                </ng-container>
 
                 <div class="iqser-input-group w-450">
                     <label [translate]="'edit-redaction.dialog.content.section'"></label>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss
index bba70f9c4..88048539d 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss
@@ -1,5 +1,12 @@
 @use 'common-mixins';
 
+.dialog-content {
+    &.fixed-height {
+        height: 386px;
+        overflow-y: auto;
+    }
+}
+
 cdk-virtual-scroll-viewport {
     margin-top: 8px;
     @include common-mixins.scroll-bar;
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
index 4914f9ad5..ad7b9d730 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
@@ -10,8 +10,6 @@ import { getEditRedactionOptions, RedactOrHintOption } from '../../utils/dialog-
 import { EditRedactionData, EditRedactResult } from '../../utils/dialog-types';
 import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
 
-const SIGNATURE = 'signature';
-
 @Component({
     templateUrl: './edit-redaction-dialog.component.html',
     styleUrls: ['./edit-redaction-dialog.component.scss'],
@@ -59,15 +57,13 @@ export class EditRedactionDialogComponent
     }
 
     get showExtras() {
-        const type = this.form.get('type').value;
-        const isSignature = type === SIGNATURE;
-        return (isSignature && this.isRedacted) || !(this.isImage || this.isHint);
+        return (this.isImage && this.isRedacted) || !(this.isImage || this.isHint);
     }
 
     get disabled() {
         return (
             this.form.invalid ||
-            (this.showExtras && (!this.allSkipped || this.isRedactBasedType) ? !this.form.controls.reason.value : false)
+            (!this.isImage && this.showExtras && (!this.allSkipped || this.isRedactBasedType) ? !this.form.controls.reason.value : false)
         );
     }
 
@@ -114,13 +110,9 @@ export class EditRedactionDialogComponent
 
     typeChanged() {
         const selectedDictionaryType = this.form.controls.type.value;
-        const isSignature = selectedDictionaryType === SIGNATURE;
         this.#setOptions(selectedDictionaryType);
 
-        if (this.redactBasedTypes.includes(selectedDictionaryType) || (isSignature && !this.allSkipped)) {
-            if (isSignature) {
-                this.form.patchValue({ reason: this.initialFormValue.reason, option: this.initialFormValue.option });
-            }
+        if (this.redactBasedTypes.includes(selectedDictionaryType)) {
             this.form.controls.reason.enable();
             this.hasTypeChanged = true;
         } else {
@@ -177,4 +169,8 @@ export class EditRedactionDialogComponent
             value: new FormControl<string>(this.allRectangles ? this.data.annotations[0].value : null),
         });
     }
+
+    get hiddenReason() {
+        return this.isImage && this.form.controls.reason.disabled;
+    }
 }