diff --git a/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.html b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.html new file mode 100644 index 000000000..63961a98f --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.html @@ -0,0 +1,5 @@ + + + diff --git a/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.scss b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.scss new file mode 100644 index 000000000..1bbfb4ca9 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.scss @@ -0,0 +1,21 @@ +@use 'common-mixins'; + +cdk-virtual-scroll-viewport { + @include common-mixins.scroll-bar; +} + +:host ::ng-deep .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper { + max-width: 100% !important; +} + +ul { + padding-left: 16px; + + li { + white-space: nowrap; + text-overflow: ellipsis; + list-style-position: inside; + overflow: hidden; + padding-right: 10px; + } +} diff --git a/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.ts b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.ts new file mode 100644 index 000000000..b3663cc17 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.ts @@ -0,0 +1,22 @@ +import { Component, Input } from '@angular/core'; +import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; +import { NgStyle } from '@angular/common'; + +const LIST_ITEM_SIZE = 16; +const MAX_ITEMS_DISPLAY = 5; + +@Component({ + selector: 'redaction-selected-annotations-list', + standalone: true, + imports: [CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport, NgStyle], + templateUrl: './selected-annotations-list.component.html', + styleUrl: './selected-annotations-list.component.scss', +}) +export class SelectedAnnotationsListComponent { + @Input({ required: true }) values: string[]; + protected readonly LIST_ITEM_SIZE = LIST_ITEM_SIZE; + + get redactedTextsAreaHeight() { + return this.values.length <= MAX_ITEMS_DISPLAY ? LIST_ITEM_SIZE * this.values.length : LIST_ITEM_SIZE * MAX_ITEMS_DISPLAY; + } +} 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/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.html index 2754b2475..47979cbd3 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.html +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.html @@ -5,14 +5,7 @@
- -
    -
  • {{ text }}
    • -
- +
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.scss index 79f0d48b8..e69de29bb 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.scss @@ -1,21 +0,0 @@ -@use 'common-mixins'; - -cdk-virtual-scroll-viewport { - @include common-mixins.scroll-bar; -} - -:host ::ng-deep .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper { - max-width: 100% !important; -} - -ul { - padding-left: 16px; -} - -li { - white-space: nowrap; - text-overflow: ellipsis; - list-style-position: inside; - overflow: hidden; - padding-right: 10px; -} diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html index c5af2cf10..1b2dc1399 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html @@ -7,16 +7,8 @@ >
-
- -
    -
  • {{ text }}
    • -
- +
+
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss index a313e2031..f78a044f5 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss @@ -6,23 +6,3 @@ overflow-y: auto; } } - -cdk-virtual-scroll-viewport { - @include common-mixins.scroll-bar; -} - -:host ::ng-deep .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper { - max-width: 100% !important; -} - -ul { - padding-left: 16px; -} - -li { - white-space: nowrap; - text-overflow: ellipsis; - list-style-position: inside; - overflow: hidden; - padding-right: 10px; -} diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html index e7225bb7b..8234cbb1c 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html @@ -4,6 +4,7 @@
+
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.scss index 07b46869c..033ed36b7 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.scss @@ -1,3 +1,7 @@ .full-width { width: 100%; } + +.dialog-content { + padding-top: 8px; +} diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts index 236caada2..3925d5752 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts @@ -7,6 +7,7 @@ import { Dossier, ILegalBasisChangeRequest } from '@red/domain'; import { firstValueFrom } from 'rxjs'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { Roles } from '@users/roles'; +import { ValueColumn } from '../../components/selected-annotations-table/selected-annotations-table.component'; export interface LegalBasisOption { label?: string; @@ -23,8 +24,24 @@ const DOCUMINE_LEGAL_BASIS = 'n-a.'; }) export class ForceAnnotationDialogComponent extends BaseDialogComponent implements OnInit { readonly isDocumine = getConfig().IS_DOCUMINE; - protected readonly roles = Roles; + + 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 }, + ]); + legalOptions: LegalBasisOption[] = []; + protected readonly roles = Roles; constructor( private readonly _justificationsService: JustificationsService, @@ -33,7 +50,7 @@ export class ForceAnnotationDialogComponent extends BaseDialogComponent implemen private readonly _data: { readonly dossier: Dossier; readonly hint: boolean; annotations: AnnotationWrapper[] }, ) { super(_dialogRef); - this.form = this._getForm(); + this.form = this.#getForm(); } get isHintDialog() { @@ -66,17 +83,17 @@ export class ForceAnnotationDialogComponent extends BaseDialogComponent implemen } save() { - this._dialogRef.close(this._createForceRedactionRequest()); + this._dialogRef.close(this.#createForceRedactionRequest()); } - private _getForm(): UntypedFormGroup { + #getForm(): UntypedFormGroup { return this._formBuilder.group({ reason: this._data.hint ? ['Forced Hint'] : [null, !this.isDocumine ? Validators.required : null], comment: [null], }); } - private _createForceRedactionRequest(): ILegalBasisChangeRequest { + #createForceRedactionRequest(): ILegalBasisChangeRequest { const request: ILegalBasisChangeRequest = {}; request.legalBasis = !this.isDocumine ? this.form.get('reason').value.legalBasis : DOCUMINE_LEGAL_BASIS; diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html index 17664b739..3b505bc23 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html @@ -3,9 +3,8 @@
-
- - {{ selectedText }} +
+
annotation.value); readonly form = inject(FormBuilder).group({ selectedText: this.isMulti ? null : this.firstEntry.value, comment: [null], diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html index 96dee3775..4454477ce 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html @@ -8,7 +8,11 @@ [class.fixed-height-36]="dictionaryRequest" [ngClass]="isEditingSelectedText ? 'flex relative' : 'flex-align-items-center'" > - +
    +
  • + +
    • +