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 @@ + + + + + + + + + + + +
+ +
+ {{ cell.label }} +
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 @@
- - - - - - - - - - - - - -
- -
- {{ text }} - {{ data.redactions[idx].typeLabel }}{{ data.falsePositiveContext[idx] }}
+
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(() => [ + readonly tableColumns = computed(() => [ { label: 'Value', show: true, @@ -52,6 +48,14 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent< }, ]); + readonly tableData = computed(() => + 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], })