diff --git a/apps/red-ui/src/app/modules/file-preview/components/manual-changes/manual-changes.component.html b/apps/red-ui/src/app/modules/file-preview/components/manual-changes/manual-changes.component.html new file mode 100644 index 000000000..e5ae0e480 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/manual-changes/manual-changes.component.html @@ -0,0 +1,14 @@ +
+

+
+

{{ redaction().value }}

+

{{ redaction().typeLabel }}

+

{{ redaction().legalBasis }}

+
+

+ +
diff --git a/apps/red-ui/src/app/modules/file-preview/components/manual-changes/manual-changes.component.scss b/apps/red-ui/src/app/modules/file-preview/components/manual-changes/manual-changes.component.scss new file mode 100644 index 000000000..cff0cbe4d --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/manual-changes/manual-changes.component.scss @@ -0,0 +1,48 @@ +:host { + width: 100%; +} + +.container { + padding: 8px; + width: calc(100% - 28px); + + &.full-width { + width: 100%; + } +} + +p { + margin: 4px 0; +} + +.col-span { + display: inline-flex; + width: calc(100% - 16px); + + p:nth-child(n + 2) { + padding-left: 8px; + } + + p { + flex: 1; + text-align: start; + white-space: nowrap; + text-overflow: ellipsis; + list-style-position: inside; + overflow: hidden; + + padding-right: 8px; + line-height: 1.5; + } + + p:last-child { + padding-right: 0; + } +} + +redaction-selected-annotations-table { + ::ng-deep .table { + padding: 0; + width: calc(100% - 16px); + } +} diff --git a/apps/red-ui/src/app/modules/file-preview/components/manual-changes/manual-changes.component.ts b/apps/red-ui/src/app/modules/file-preview/components/manual-changes/manual-changes.component.ts new file mode 100644 index 000000000..adc183fb8 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/manual-changes/manual-changes.component.ts @@ -0,0 +1,28 @@ +import { Component, computed, input } from '@angular/core'; +import { AnnotationWrapper } from '@models/file/annotation.wrapper'; +import { SelectedAnnotationsTableComponent, ValueColumn } from '../selected-annotations-table/selected-annotations-table.component'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + selector: 'redaction-manual-changes', + standalone: true, + imports: [SelectedAnnotationsTableComponent, TranslateModule], + templateUrl: './manual-changes.component.html', + styleUrl: './manual-changes.component.scss', +}) +export class ManualChangesComponent { + readonly redaction = input(); + readonly isExpanded = input(); + + readonly columns = [{ label: 'Action' }, { label: 'Date' }, { label: 'User' }]; + readonly data = computed(() => + this.redaction().entry.manualChanges.map( + change => + [ + { label: change.manualRedactionType }, + { label: change.requestedDate, componentType: 'date' }, + { label: change.userId, componentType: 'avatar' }, + ] as ValueColumn[], + ), + ); +}