From 6fbf7a36f19e8f29071616e504f93a5fccbea606 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Tue, 9 Apr 2024 16:59:54 +0300
Subject: [PATCH] RED-8904: extracted selected annotations table in a separate
 component.

---
 .../selected-annotations-table.component.html | 16 +++++
 .../selected-annotations-table.component.scss | 63 +++++++++++++++++++
 .../selected-annotations-table.component.ts   | 27 ++++++++
 .../remove-redaction-dialog.component.html    | 22 ++-----
 .../remove-redaction-dialog.component.scss    | 60 ------------------
 .../remove-redaction-dialog.component.ts      | 16 +++--
 .../file-preview/file-preview.module.ts       |  2 +
 7 files changed, 122 insertions(+), 84 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.html
 create mode 100644 apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.scss
 create mode 100644 apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.ts

diff --git a/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.html b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.html
new file mode 100644
index 000000000..567b04b25
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.html
@@ -0,0 +1,16 @@
+<table>
+    <thead>
+        <tr>
+            <th *ngFor="let column of columns" [ngClass]="{ hide: !column.show }">
+                <label>{{ column.label }}</label>
+            </th>
+        </tr>
+    </thead>
+    <tbody [ngStyle]="{ height: redactedTextsAreaHeight + 'px' }">
+        <tr *ngFor="let row of data">
+            <td *ngFor="let cell of row" [ngClass]="{ hide: !cell.show, bold: cell.bold }">
+                {{ cell.label }}
+            </td>
+        </tr>
+    </tbody>
+</table>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.scss b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.scss
new file mode 100644
index 000000000..c4a571d6e
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.scss
@@ -0,0 +1,63 @@
+@use 'common-mixins';
+
+table {
+    padding: 0 13px;
+    max-width: 100%;
+    min-width: 100%;
+    border-spacing: 0;
+
+    tbody {
+        padding-top: 2px;
+        overflow-y: auto;
+        display: block;
+        @include common-mixins.scroll-bar;
+    }
+
+    tr {
+        max-width: 100%;
+        min-width: 100%;
+        display: table;
+
+        th {
+            label {
+                opacity: 0.7;
+                font-weight: normal;
+            }
+        }
+
+        th,
+        td {
+            max-width: 0;
+            width: 25%;
+            text-align: start;
+
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            list-style-position: inside;
+            overflow: hidden;
+
+            padding-right: 8px;
+        }
+
+        th:last-child,
+        td:last-child {
+            max-width: 0;
+            width: 50%;
+            padding-right: 0;
+        }
+    }
+}
+
+tbody tr:nth-child(odd) {
+    td {
+        background-color: var(--iqser-alt-background);
+    }
+}
+
+.hide {
+    visibility: hidden;
+}
+
+.bold {
+    font-weight: bold;
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.ts b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.ts
new file mode 100644
index 000000000..db71779c7
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.ts
@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+import { NgClass, NgForOf, NgStyle } from '@angular/common';
+
+export interface ValueColumn {
+    label: string;
+    show: boolean;
+    bold?: boolean;
+}
+
+const TABLE_ROW_SIZE = 18;
+const MAX_ITEMS_DISPLAY = 10;
+
+@Component({
+    selector: 'redaction-selected-annotations-table',
+    standalone: true,
+    imports: [NgForOf, NgClass, NgStyle],
+    templateUrl: './selected-annotations-table.component.html',
+    styleUrl: './selected-annotations-table.component.scss',
+})
+export class SelectedAnnotationsTableComponent {
+    @Input({ required: true }) columns: ValueColumn[];
+    @Input({ required: true }) data: ValueColumn[][];
+
+    get redactedTextsAreaHeight() {
+        return this.data.length <= MAX_ITEMS_DISPLAY ? TABLE_ROW_SIZE * this.data.length : TABLE_ROW_SIZE * MAX_ITEMS_DISPLAY;
+    }
+}
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 d2bdeca2b..63287b276 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
@@ -7,24 +7,10 @@
 
         <div [ngStyle]="{ height: dialogContentHeight + redactedTextsAreaHeight + 'px' }" class="dialog-content redaction">
             <div class="iqser-input-group">
-                <table>
-                    <thead>
-                        <tr>
-                            <th *ngFor="let column of columns()" [ngClass]="{ hide: !column.show }">
-                                <label>{{ column.label }}</label>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody [ngStyle]="{ height: redactedTextsAreaHeight + 'px' }">
-                        <tr *ngFor="let text of redactedTexts; let idx = index">
-                            <td>
-                                <b>{{ text }}</b>
-                            </td>
-                            <td>{{ data.redactions[idx].typeLabel }}</td>
-                            <td [ngClass]="{ hide: !isFalsePositive() }">{{ data.falsePositiveContext[idx] }}</td>
-                        </tr>
-                    </tbody>
-                </table>
+                <redaction-selected-annotations-table
+                    [columns]="tableColumns()"
+                    [data]="tableData()"
+                ></redaction-selected-annotations-table>
             </div>
 
             <iqser-details-radio [options]="options" formControlName="option"></iqser-details-radio>
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 d4f4cecd5..d79b1bf48 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
@@ -1,64 +1,4 @@
-@use 'common-mixins';
-
 .dialog-content {
     padding-top: 8px;
     padding-bottom: 35px;
 }
-
-table {
-    padding: 0 13px;
-    max-width: 100%;
-    min-width: 100%;
-    border-spacing: 0;
-
-    tbody {
-        padding-top: 2px;
-        overflow-y: auto;
-        display: block;
-        @include common-mixins.scroll-bar;
-    }
-
-    tr {
-        max-width: 100%;
-        min-width: 100%;
-        display: table;
-
-        th {
-            label {
-                opacity: 0.7;
-                font-weight: normal;
-            }
-        }
-
-        th,
-        td {
-            max-width: 0;
-            width: 25%;
-            text-align: start;
-
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            list-style-position: inside;
-            overflow: hidden;
-
-            padding-right: 8px;
-        }
-
-        th:last-child,
-        td:last-child {
-            max-width: 0;
-            width: 50%;
-            padding-right: 0;
-        }
-    }
-}
-
-tbody tr:nth-child(odd) {
-    td {
-        background-color: var(--iqser-alt-background);
-    }
-}
-
-.hide {
-    visibility: hidden;
-}
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 f6d556571..ed69238b7 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
@@ -7,11 +7,7 @@ import { Roles } from '@users/roles';
 import { DialogHelpModeKeys } from '../../utils/constants';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs/operators';
-
-interface ValuesColumns {
-    label: string;
-    show: boolean;
-}
+import { ValueColumn } from '../../components/selected-annotations-table/selected-annotations-table.component';
 
 @Component({
     templateUrl: './remove-redaction-dialog.component.html',
@@ -37,7 +33,7 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
 
     readonly selectedOption = toSignal(this.form.get('option').valueChanges.pipe(map(value => value.value)));
     readonly isFalsePositive = computed(() => this.selectedOption() === RemoveRedactionOptions.FALSE_POSITIVE);
-    readonly columns = computed<ValuesColumns[]>(() => [
+    readonly tableColumns = computed<ValueColumn[]>(() => [
         {
             label: 'Value',
             show: true,
@@ -52,6 +48,14 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
         },
     ]);
 
+    readonly tableData = computed<ValueColumn[][]>(() =>
+        this.data.redactions.map((redaction, index) => [
+            { label: redaction.value, show: true, bold: true },
+            { label: redaction.typeLabel, show: true },
+            { label: this.data.falsePositiveContext[index], show: this.isFalsePositive() },
+        ]),
+    );
+
     constructor(private readonly _formBuilder: FormBuilder) {
         super();
     }
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
index 8bad2b0f3..5a1ad98c7 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
@@ -70,6 +70,7 @@ import { DocumentUnloadedGuard } from './services/document-unloaded.guard';
 import { FilePreviewDialogService } from './services/file-preview-dialog.service';
 import { ManualRedactionService } from './services/manual-redaction.service';
 import { TablesService } from './services/tables.service';
+import { SelectedAnnotationsTableComponent } from './components/selected-annotations-table/selected-annotations-table.component';
 
 const routes: IqserRoutes = [
     {
@@ -152,6 +153,7 @@ const components = [
         LogPipe,
         ReplaceNbspPipe,
         DisableStopPropagationDirective,
+        SelectedAnnotationsTableComponent,
     ],
     providers: [FilePreviewDialogService, ManualRedactionService, DocumentUnloadedGuard, TablesService],
 })