From 49af54175b78ba47c789ca91706866c7a6f78ee7 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Wed, 24 Apr 2024 11:08:23 +0300
Subject: [PATCH] RED-8904: changed from list to table display for some
 dialogs.

---
 .../edit-redaction-dialog.component.html       |  6 +++++-
 .../edit-redaction-dialog.component.scss       |  4 ++--
 .../edit-redaction-dialog.component.ts         | 15 +++++++++++++++
 ...redact-recommendation-dialog.component.html |  6 +++++-
 ...redact-recommendation-dialog.component.scss |  3 +++
 .../redact-recommendation-dialog.component.ts  | 18 +++++++++++++++++-
 6 files changed, 47 insertions(+), 5 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.scss

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 1b2dc1399..b73fa0ade 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
@@ -8,7 +8,11 @@
 
         <div class="dialog-content redaction" [class.fixed-height]="isRedacted && isImage">
             <div class="iqser-input-group" *ngIf="!isImage && redactedTexts.length && !allRectangles">
-                <redaction-selected-annotations-list [values]="redactedTexts"></redaction-selected-annotations-list>
+                <redaction-selected-annotations-table
+                    [columns]="tableColumns"
+                    [data]="tableData"
+                    [staticColumns]="true"
+                ></redaction-selected-annotations-table>
             </div>
 
             <div *ngIf="!isManualRedaction" class="iqser-input-group w-450" [class.required]="!form.controls.type.disabled">
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 f78a044f5..112313d42 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,6 +1,6 @@
-@use 'common-mixins';
-
 .dialog-content {
+    padding-top: 8px;
+
     &.fixed-height {
         height: 386px;
         overflow-y: auto;
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 92c997acf..ef7b870ef 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
@@ -11,6 +11,7 @@ import { EditRedactionData, EditRedactResult } from '../../utils/dialog-types';
 import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
 import { Roles } from '@users/roles';
 import { DialogHelpModeKeys } from '../../utils/constants';
+import { ValueColumn } from '../../components/selected-annotations-table/selected-annotations-table.component';
 
 interface TypeSelectOptions {
     type: string;
@@ -38,6 +39,20 @@ export class EditRedactionDialogComponent
     readonly isRedacted = this.annotations.every(annotation => annotation.isRedacted);
     readonly isImported: boolean = this.annotations.every(annotation => annotation.imported);
     readonly allRectangles = this.annotations.reduce((acc, a) => acc && a.AREA, true);
+    readonly tableColumns = [
+        {
+            label: 'Value',
+            show: true,
+        },
+        {
+            label: 'Type',
+            show: true,
+        },
+    ];
+    readonly tableData: ValueColumn[][] = this.data.annotations.map(redaction => [
+        { label: redaction.value, show: true, bold: true },
+        { label: redaction.typeLabel, show: true },
+    ]);
     protected readonly roles = Roles;
 
     options: DetailsRadioOption<RedactOrHintOption>[] | undefined;
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html
index 3b505bc23..eb1d4b146 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html
@@ -4,7 +4,11 @@
 
         <div class="dialog-content redaction">
             <div class="iqser-input-group">
-                <redaction-selected-annotations-list [values]="selectedValues"></redaction-selected-annotations-list>
+                <redaction-selected-annotations-table
+                    [columns]="tableColumns"
+                    [data]="tableData"
+                    [staticColumns]="true"
+                ></redaction-selected-annotations-table>
             </div>
 
             <iqser-details-radio
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.scss
new file mode 100644
index 000000000..b3cdff4d1
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.scss
@@ -0,0 +1,3 @@
+.redaction {
+    padding-top: 8px;
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.ts
index 5eb8e2070..587f154e9 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.ts
@@ -12,9 +12,11 @@ import { tap } from 'rxjs/operators';
 import { getRedactOrHintOptions, RedactOrHintOption, RedactOrHintOptions } from '../../utils/dialog-options';
 import { RedactRecommendationData, RedactRecommendationResult } from '../../utils/dialog-types';
 import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
+import { ValueColumn } from '../../components/selected-annotations-table/selected-annotations-table.component';
 
 @Component({
     templateUrl: './redact-recommendation-dialog.component.html',
+    styleUrl: './redact-recommendation-dialog.component.scss',
 })
 export class RedactRecommendationDialogComponent
     extends IqserDialogComponent<RedactRecommendationDialogComponent, RedactRecommendationData, RedactRecommendationResult>
@@ -30,7 +32,6 @@ export class RedactRecommendationDialogComponent
     dictionaryRequest = false;
     legalOptions: LegalBasisOption[] = [];
     dictionaries: Dictionary[] = [];
-    readonly selectedValues = this.data.annotations.map(annotation => annotation.value);
     readonly form = inject(FormBuilder).group({
         selectedText: this.isMulti ? null : this.firstEntry.value,
         comment: [null],
@@ -39,6 +40,21 @@ export class RedactRecommendationDialogComponent
         reason: [null],
     });
 
+    readonly tableColumns = [
+        {
+            label: 'Value',
+            show: true,
+        },
+        {
+            label: 'Type',
+            show: true,
+        },
+    ];
+    readonly tableData: ValueColumn[][] = this.data.annotations.map(redaction => [
+        { label: redaction.value, show: true, bold: true },
+        { label: redaction.typeLabel, show: true },
+    ]);
+
     constructor(
         private readonly _justificationsService: JustificationsService,
         private readonly _dictionaryService: DictionaryService,