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

RED-8904: adjusted the table columns width for specific cases.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-04-22 12:19:58 +03:00
parent 392ac7c4b1
commit 2f38c2b491
6 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,14 @@
<table> <table>
<thead> <thead>
<tr> <tr>
<th *ngFor="let column of columns" [ngClass]="{ hide: !column.show }"> <th *ngFor="let column of columns" [ngClass]="{ hide: !column.show, 'w-50': staticColumns }">
<label>{{ column.label }}</label> <label>{{ column.label }}</label>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody [ngStyle]="{ height: redactedTextsAreaHeight + 'px' }"> <tbody [ngStyle]="{ height: redactedTextsAreaHeight + 'px' }">
<tr *ngFor="let row of data"> <tr *ngFor="let row of data">
<td *ngFor="let cell of row" [ngClass]="{ hide: !cell.show, bold: cell.bold }"> <td *ngFor="let cell of row" [ngClass]="{ hide: !cell.show, bold: cell.bold, 'w-50': staticColumns }">
{{ cell.label }} {{ cell.label }}
</td> </td>
</tr> </tr>

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

@ -27,8 +27,10 @@ table {
th, th,
td { td {
&:not(.w-50) {
width: 25%;
}
max-width: 0; max-width: 0;
width: 25%;
text-align: start; text-align: start;
white-space: nowrap; white-space: nowrap;
@ -58,6 +60,15 @@ tbody tr:nth-child(odd) {
visibility: hidden; visibility: hidden;
} }
.w-50 {
max-width: 0;
min-width: 50%;
&.hide {
display: none;
}
}
.bold { .bold {
font-weight: bold; font-weight: bold;
} }

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

@ -20,6 +20,7 @@ const MAX_ITEMS_DISPLAY = 10;
export class SelectedAnnotationsTableComponent { export class SelectedAnnotationsTableComponent {
@Input({ required: true }) columns: ValueColumn[]; @Input({ required: true }) columns: ValueColumn[];
@Input({ required: true }) data: ValueColumn[][]; @Input({ required: true }) data: ValueColumn[][];
@Input() staticColumns = false;
get redactedTextsAreaHeight() { get redactedTextsAreaHeight() {
return this.data.length <= MAX_ITEMS_DISPLAY ? TABLE_ROW_SIZE * this.data.length : TABLE_ROW_SIZE * MAX_ITEMS_DISPLAY; return this.data.length <= MAX_ITEMS_DISPLAY ? TABLE_ROW_SIZE * this.data.length : TABLE_ROW_SIZE * MAX_ITEMS_DISPLAY;

6
apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html
View File

@ -4,7 +4,11 @@
<div *ngIf="isHintDialog" class="dialog-header heading-l" [translate]="'manual-annotation.dialog.header.force-hint'"></div> <div *ngIf="isHintDialog" class="dialog-header heading-l" [translate]="'manual-annotation.dialog.header.force-hint'"></div>
<div class="dialog-content"> <div class="dialog-content">
<redaction-selected-annotations-table [columns]="tableColumns" [data]="tableData"></redaction-selected-annotations-table> <redaction-selected-annotations-table
[columns]="tableColumns"
[data]="tableData"
[staticColumns]="true"
></redaction-selected-annotations-table>
<div *ngIf="!isHintDialog && !isDocumine" class="iqser-input-group required w-400"> <div *ngIf="!isHintDialog && !isDocumine" class="iqser-input-group required w-400">
<label [translate]="'manual-annotation.dialog.content.reason'"></label> <label [translate]="'manual-annotation.dialog.content.reason'"></label>
<mat-form-field> <mat-form-field>

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

@ -10,6 +10,7 @@
<redaction-selected-annotations-table <redaction-selected-annotations-table
[columns]="tableColumns()" [columns]="tableColumns()"
[data]="tableData()" [data]="tableData()"
[staticColumns]="!hasFalsePositiveOption"
></redaction-selected-annotations-table> ></redaction-selected-annotations-table>
</div> </div>

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

@ -73,6 +73,10 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
return DialogHelpModeKeys.REDACTION_REMOVE; return DialogHelpModeKeys.REDACTION_REMOVE;
} }
get hasFalsePositiveOption() {
return !!this.options.find(option => option.value === RemoveRedactionOptions.FALSE_POSITIVE);
}
get defaultOption() { get defaultOption() {
const removeHereOption = this.options.find(option => option.value === RemoveRedactionOptions.ONLY_HERE); const removeHereOption = this.options.find(option => option.value === RemoveRedactionOptions.ONLY_HERE);
if (!!removeHereOption && !removeHereOption.disabled) return removeHereOption; if (!!removeHereOption && !removeHereOption.disabled) return removeHereOption;