Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-8904: extracted selected annotations table in a separate component.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-04-09 16:59:54 +03:00
parent 71259f6708
commit 6fbf7a36f1
7 changed files with 122 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.html Normal file
View File

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

63
apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.scss Normal file
View File

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

27
apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.ts Normal file
View File

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

22
apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.html
View File

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

60
apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.scss
View File

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

16
apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
View File

@ -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();
}

2
apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
View File

@ -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],
})