Merge branch 'RED-8904' into 'master'

RED-8904: changed from list to table display for some dialogs.

See merge request redactmanager/red-ui!404

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">

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;

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;

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

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;
+}

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,