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

RED-9578: fixed issues and rewrote the annotations table component.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-09-25 13:54:26 +03:00
parent dc063218ff
commit 81669177cd
12 changed files with 83 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,19 +1,12 @@
<table>
<thead>
<tr>
<th *ngFor="let column of columns()" [ngClass]="{ hide: !!column.hide, 'w-50': staticColumns() && shouldApplyHalfWidth() }">
<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.hide, bold: cell.bold, 'w-50': staticColumns() && shouldApplyHalfWidth() }"
>
<div [ngStyle]="gridConfig()" class="table">
@for (column of _columns(); track column.label) {
<div [ngClass]="{ hide: !!column.hide }" class="col cell">{{ column.label }}</div>
}
@for (row of _data(); track $index) {
@for (cell of row; track cell.label) {
<div [ngClass]="{ background: _data().indexOf(row) % 2 === 0, hide: !!cell.hide, bold: cell.bold }" class="cell">
{{ cell.label }}
</td>
</tr>
</tbody>
</table>
</div>
}
}
</div>

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

@ -1,74 +1,39 @@
@use 'common-mixins';
table {
.table {
padding: 0 13px;
max-width: 100%;
min-width: 100%;
border-spacing: 0;
display: grid;
overflow-x: hidden;
overflow-y: auto;
@include common-mixins.scroll-bar;
tbody {
padding-top: 2px;
overflow-y: auto;
display: block;
@include common-mixins.scroll-bar;
.col {
position: sticky;
top: 0;
z-index: 1;
background: white;
}
tr {
max-width: 100%;
min-width: 100%;
display: table;
.cell {
text-align: start;
white-space: nowrap;
text-overflow: ellipsis;
list-style-position: inside;
overflow: hidden;
th {
label {
opacity: 0.7;
font-weight: normal;
}
}
th,
td {
&:first-child:not(.w-50) {
width: 25%;
}
max-width: 0;
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;
}
padding-right: 8px;
line-height: 1.5;
}
}
tbody tr:nth-child(odd) {
td {
background-color: var(--iqser-alt-background);
}
.background {
background-color: var(--iqser-alt-background);
}
.hide {
visibility: hidden;
}
.w-50 {
max-width: 0;
min-width: 50%;
&.hide {
display: none;
}
}
.bold {
font-weight: bold;
}

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

@ -5,9 +5,10 @@ export interface ValueColumn {
label: string;
hide?: boolean;
bold?: boolean;
width?: string;
}
const TABLE_ROW_SIZE = 18;
const TABLE_ROW_SIZE = 20;
const MAX_ITEMS_DISPLAY = 10;
@Component({
@ -18,12 +19,33 @@ const MAX_ITEMS_DISPLAY = 10;
styleUrl: './selected-annotations-table.component.scss',
})
export class SelectedAnnotationsTableComponent {
readonly columns = input.required<ValueColumn[]>();
readonly data = input.required<ValueColumn[][]>();
readonly staticColumns = input(false);
readonly defaultColumnWidth = input(false);
readonly redactedTextsAreaHeight = computed(() =>
this.data().length <= MAX_ITEMS_DISPLAY ? TABLE_ROW_SIZE * this.data().length : TABLE_ROW_SIZE * MAX_ITEMS_DISPLAY,
readonly columns = input.required<ValueColumn[]>();
readonly _columns = computed(() => this.columns().filter(item => !this.defaultColumnWidth() || !item.hide));
readonly data = input.required<ValueColumn[][]>();
readonly _data = computed(() => this.data().map(item => item.filter(cell => !this.defaultColumnWidth() || !cell.hide)));
readonly redactedTextsAreaHeight = computed(
() =>
(this._data().length <= MAX_ITEMS_DISPLAY ? TABLE_ROW_SIZE * this._data().length : TABLE_ROW_SIZE * MAX_ITEMS_DISPLAY) +
TABLE_ROW_SIZE,
);
readonly shouldApplyHalfWidth = computed(() => this.columns().filter(column => !column.hide).length === 2);
readonly gridConfig = computed(() => ({
height: `${this.redactedTextsAreaHeight()}px`,
'grid-template-columns': !this.defaultColumnWidth() ? this.#computeCustomColumnWidths() : this.#getDefaultColumnWidth(),
'grid-template-rows': `repeat(${this._data().length + 1}, ${TABLE_ROW_SIZE}px)`,
}));
#computeCustomColumnWidths() {
return this._columns()
.map(column => column.width ?? `auto`)
.join(' ');
}
#getDefaultColumnWidth() {
return `repeat(${this._columns().length}, 1fr)`;
}
}

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

@ -11,7 +11,7 @@
<redaction-selected-annotations-table
[columns]="tableColumns"
[data]="tableData"
[staticColumns]="true"
[defaultColumnWidth]="true"
></redaction-selected-annotations-table>
</div>

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

@ -7,7 +7,7 @@
<redaction-selected-annotations-table
[columns]="tableColumns"
[data]="tableData"
[staticColumns]="true"
[defaultColumnWidth]="true"
></redaction-selected-annotations-table>
}

2
apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html
View File

@ -7,7 +7,7 @@
<redaction-selected-annotations-table
[columns]="tableColumns"
[data]="tableData"
[staticColumns]="true"
[defaultColumnWidth]="true"
></redaction-selected-annotations-table>
</div>

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

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

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

@ -111,11 +111,12 @@ 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 tableColumns = computed<ValueColumn[]>(() => [
{ label: 'Value' },
{ label: 'Type' },
{ label: 'Value', width: '25%' },
{ label: 'Type', width: '25%' },
{
label: 'Context',
hide: !this.isFalsePositive(),
width: '50%',
},
]);

7
apps/red-ui/src/app/modules/shared/components/approve-warning-details/approve-warning-details.component.scss
View File

@ -1,8 +1,13 @@
@use 'common-mixins';
:host {
height: 250px;
}
.scrollable {
margin-bottom: 8px;
overflow-y: auto;
max-height: calc(5 * 50px);
max-height: 240px;
@include common-mixins.scroll-bar;
padding-left: 2px;

6
apps/red-ui/src/app/modules/shared/components/warning-details-panel/warning-details-panel.component.html
View File

@ -1,8 +1,4 @@
<mat-expansion-panel [expanded]="openByDefault()" togglePosition="before">
<mat-expansion-panel-header>{{ filename() }}</mat-expansion-panel-header>
<redaction-selected-annotations-table
[columns]="tableColumns()"
[data]="tableData()"
[staticColumns]="true"
></redaction-selected-annotations-table>
<redaction-selected-annotations-table [columns]="tableColumns()" [data]="tableData()"></redaction-selected-annotations-table>
</mat-expansion-panel>

11
apps/red-ui/src/app/modules/shared/components/warning-details-panel/warning-details-panel.component.ts
View File

@ -16,7 +16,6 @@ import { TranslateService } from '@ngx-translate/core';
styleUrl: './warning-details-panel.component.scss',
})
export class WarningDetailsPanelComponent {
readonly #translateService = inject(TranslateService);
readonly warnings = input<WarningModel[]>();
readonly filename = input<string>();
readonly openByDefault = input<boolean>();
@ -24,14 +23,20 @@ export class WarningDetailsPanelComponent {
{ label: 'Value' },
{ label: 'Type' },
{ label: 'Page' },
{ label: 'Warning Reason' },
{
label: 'Warning Reason',
width: '40%',
},
]);
readonly #translateService = inject(TranslateService);
readonly tableData = computed<ValueColumn[][]>(() =>
this.warnings().map(warning => [
{ label: warning.value, bold: true },
{ label: warning.type },
{ label: warning.pages.join(',') },
{ label: this.#translateService.instant(approvalWarningReasonTranslations[warning.warningType]) },
{
label: this.#translateService.instant(approvalWarningReasonTranslations[warning.warningType]),
},
]),
);
}

2
libs/common-ui

@ -1 +1 @@
Subproject commit c71a4995a63e4886bc23a8a8cea7d02d7560c2aa
Subproject commit 835cb7820e2100ff1125939f4c2766f06e9c09a6