From 7a275bfe5533b02a37387956de58902fdb0634c3 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Thu, 21 Mar 2024 15:54:17 +0200
Subject: [PATCH] RED-8812: added selected label and term for single redaction
 delete.

---
 .../remove-redaction-dialog.component.html    | 48 ++++++++++++-------
 .../remove-redaction-dialog.component.scss    |  1 -
 .../remove-redaction-dialog.component.ts      | 26 +++++-----
 apps/red-ui/src/assets/i18n/redact/en.json    |  8 ++--
 4 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.html
index 922ac7054..593744f0f 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.html
@@ -1,35 +1,26 @@
 <section class="dialog">
     <form (submit)="save()" [formGroup]="form">
         <div
-            *ngIf="data.redactions.length === 1"
-            [innerHTML]="
-                'remove-redaction.dialog.title' | translate: { type: hint ? 'hint' : recommendation ? 'recommendation' : 'redaction' }
-            "
-            class="dialog-header heading-l"
-        ></div>
-        <div
-            *ngIf="data.redactions.length > 1"
-            [innerHTML]="
-                'remove-redaction.dialog.title-bulk' | translate: { type: hint ? 'hint' : recommendation ? 'recommendation' : 'redaction' }
-            "
+            [innerHTML]="'remove-redaction.dialog.title' + translationKey | translate: typeTranslationArg"
             class="dialog-header heading-l"
         ></div>
 
         <div class="dialog-content redaction">
-            <div *ngIf="data.redactions.length > 1">
+            <div *ngIf="!isImage" class="iqser-input-group">
                 <label
-                    [translateParams]="{ type: hint ? 'hints' : recommendation ? 'recommendations' : 'redactions' }"
-                    [translate]="'remove-redaction.dialog.content.redacted-text'"
+                    [translateParams]="typeTranslationArg"
+                    [translate]="'remove-redaction.dialog.content.redacted-text' + translationKey"
                     class="selected-text"
                 ></label>
 
                 <cdk-virtual-scroll-viewport
+                    *ngIf="data.redactions.length > 1; else singleSelected"
                     [itemSize]="16"
                     [ngStyle]="{ height: redactedTexts.length <= 5 ? 16 * redactedTexts.length + 'px' : 80 + 'px' }"
                 >
                     <ul *cdkVirtualFor="let text of redactedTexts; let idx = index">
-                        <li>
-                            {{
+                        <li
+                            [innerHTML]="
                                 (isFalsePositive
                                     ? 'remove-redaction.dialog.content.list-item-false-positive'
                                     : 'remove-redaction.dialog.content.list-item'
@@ -37,15 +28,36 @@
                                     | translate
                                         : {
                                               text: text,
+                                              type: data.redactions[idx].typeLabel,
                                               context: data.falsePositiveContext[idx]
                                           }
                                     | replaceNbsp
-                            }}
-                        </li>
+                            "
+                        ></li>
                     </ul>
                 </cdk-virtual-scroll-viewport>
             </div>
 
+            <ng-template #singleSelected>
+                <span
+                    [innerHTML]="
+                        (recommendation
+                            ? 'remove-redaction.dialog.content.list-item-false-recommendation'
+                            : isFalsePositive
+                              ? 'remove-redaction.dialog.content.list-item-false-positive'
+                              : 'remove-redaction.dialog.content.list-item'
+                        )
+                            | translate
+                                : {
+                                      text: redactedTexts[0],
+                                      type: data.redactions[0].typeLabel,
+                                      context: data.falsePositiveContext[0]
+                                  }
+                            | replaceNbsp
+                    "
+                ></span>
+            </ng-template>
+
             <iqser-details-radio [options]="options" formControlName="option"></iqser-details-radio>
 
             <div class="iqser-input-group w-450">
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.scss
index 9f1efc631..152dacc4d 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.scss
@@ -5,7 +5,6 @@
 }
 
 cdk-virtual-scroll-viewport {
-    margin-top: 8px;
     @include common-mixins.scroll-bar;
 }
 
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
index bf4619847..c616ec6e1 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
@@ -21,26 +21,22 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
     RemoveRedactionResult
 > {
     readonly iconButtonTypes = IconButtonTypes;
-    readonly options: DetailsRadioOption<RemoveRedactionOption>[];
-    readonly recommendation: boolean;
-    readonly hint: boolean;
-    readonly skipped: boolean;
-    readonly redactedTexts: string[];
+    readonly options: DetailsRadioOption<RemoveRedactionOption>[] = getRemoveRedactionOptions(this.data);
+    readonly recommendation = this.data.redactions.every(redaction => redaction.isRecommendation);
+    readonly hint = this.data.redactions[0].HINT;
+    readonly skipped = this.data.redactions.some(annotation => annotation.isSkipped);
+    readonly redactedTexts = this.data.redactions.map(annotation => annotation.value);
+    readonly isImage = this.data.redactions.every(redaction => redaction.isImage);
     protected readonly roles = Roles;
     form!: UntypedFormGroup;
 
     constructor(private readonly _formBuilder: FormBuilder) {
         super();
-        this.recommendation = this.data.redactions[0].isRecommendation;
-        this.hint = this.data.redactions[0].HINT;
-        this.skipped = this.data.redactions.some(annotation => annotation.isSkipped);
-        this.options = getRemoveRedactionOptions(this.data);
-        this.redactedTexts = this.data.redactions.map(annotation => annotation.value);
         this.form = this.#getForm();
     }
 
     get isFalsePositive(): boolean {
-        return this.form.get('option').value.value === RemoveAnnotationOptions['FALSE' + '_POSITIVE'];
+        return this.form.get('option').value.value === RemoveAnnotationOptions.FALSE_POSITIVE;
     }
 
     get helpButtonKey() {
@@ -62,6 +58,14 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
         return this.options[0];
     }
 
+    get typeTranslationArg() {
+        return { type: this.hint ? 'hint' : this.recommendation ? 'recommendation' : 'redaction' };
+    }
+
+    get translationKey() {
+        return this.data.redactions.length > 1 ? '-bulk' : '';
+    }
+
     save(): void {
         this.close(this.form.getRawValue());
     }
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index 718179c34..9c1f7bc3b 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -2046,8 +2046,9 @@
       "content": {
         "comment": "Comment",
         "comment-placeholder": "Add remarks or mentions...",
-        "list-item": "{text}",
+        "list-item": "<b>{text}</b>",
         "list-item-false-positive": "<b>{text}</b> as <i>{type}</i> in the context: <b>{context}</b>",
+        "list-item-false-recommendation": "<b>{text}</b> as <i>{type}</i>",
         "options": {
           "do-not-recommend": {
             "description": "Do not recommend the selected term in any document of this dossier.",
@@ -2074,7 +2075,8 @@
             "label": "Remove here"
           }
         },
-        "redacted-text": "Selected {type}"
+        "redacted-text": "Selected {type, select, redaction{redaction} recommendation{recommendation} other{hint}}",
+        "redacted-text-bulk": "Selected {type, select, redaction{redactions} recommendation{recommendations} other{hints}}"
       },
       "title": "Remove {type, select, redaction{redaction} recommendation{recommendation} other{hint}}",
       "title-bulk": "Remove {type, select, redaction{redactions} recommendation{recommendations} other{hints}}"
@@ -2472,4 +2474,4 @@
     }
   },
   "yesterday": "Yesterday"
-}
\ No newline at end of file
+}