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

manual redaction actions are now linked in real time to reviewer popup

Browse Source
This commit is contained in:
Timo Bejan 2020-11-03 09:26:30 +02:00
parent 7ca894c6d9
commit 5a3f6852ea
5 changed files with 111 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -74,6 +74,7 @@
<div class="flex red-content-inner"> <div class="flex red-content-inner">
<div class="left-container"> <div class="left-container">
<redaction-pdf-viewer <redaction-pdf-viewer
[isReviewer]="appStateService.isActiveFileDocumentReviewer"
(annotationSelected)="handleAnnotationSelected($event)" (annotationSelected)="handleAnnotationSelected($event)"
(keyUp)="handleKeyEvent($event)" (keyUp)="handleKeyEvent($event)"
(manualAnnotationRequested)="openManualRedactionDialog($event)" (manualAnnotationRequested)="openManualRedactionDialog($event)"

68
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -116,33 +116,23 @@ export class FilePreviewScreenComponent implements OnInit {
} }
private _loadFileData() { private _loadFileData() {
this._fileDownloadService this._fileDownloadService.loadActiveFileData().subscribe((fileDataModel) => {
.loadFileData(this.appStateService.activeProjectId, this.fileId) this.fileData = fileDataModel;
.subscribe((fileDataModel) => {
this.fileData = fileDataModel;
const manualRedactionAnnotations = fileDataModel.entriesToAdd.map((mr) => const manualRedactionAnnotations = fileDataModel.entriesToAdd.map((mr) =>
AnnotationWrapper.fromManualRedaction( AnnotationWrapper.fromManualRedaction(mr, fileDataModel.manualRedactions.comments)
mr, );
fileDataModel.manualRedactions.comments const redactionLogAnnotations = fileDataModel.redactionLog.redactionLogEntry.map(
) (rde) =>
); AnnotationWrapper.fromRedactionLog(rde, fileDataModel.manualRedactions.comments)
const redactionLogAnnotations = fileDataModel.redactionLog.redactionLogEntry.map( );
(rde) =>
AnnotationWrapper.fromRedactionLog(
rde,
fileDataModel.manualRedactions.comments
)
);
this.annotations.push(...manualRedactionAnnotations); this.annotations.push(...manualRedactionAnnotations);
this.annotations.push(...redactionLogAnnotations); this.annotations.push(...redactionLogAnnotations);
this.filters = this._annotationProcessingService.getAnnotationFilter( this.filters = this._annotationProcessingService.getAnnotationFilter(this.annotations);
this.annotations this.filtersChanged(this.filters);
); this._changeDetectorRef.detectChanges();
this.filtersChanged(this.filters); });
this._changeDetectorRef.detectChanges();
});
} }
public openFileDetailsDialog($event: MouseEvent) { public openFileDetailsDialog($event: MouseEvent) {
@ -207,7 +197,7 @@ export class FilePreviewScreenComponent implements OnInit {
this._dialogRef = this._dialogService.openManualRedactionDialog( this._dialogRef = this._dialogService.openManualRedactionDialog(
$event, $event,
(response: ManualAnnotationResponse) => { (response: ManualAnnotationResponse) => {
// TODO REDRAW ANNOTATIONS FROM MANUAL REQUESTS this._cleanupAndRedrawManualAnnotations();
} }
); );
}); });
@ -280,8 +270,7 @@ export class FilePreviewScreenComponent implements OnInit {
$event, $event,
annotation, annotation,
() => { () => {
// TODO DELETE ANNOTATIOn this._cleanupAndRedrawManualAnnotations();
//this.activeViewer.annotManager.deleteAnnotation(annotation, false, true);
} }
); );
}); });
@ -449,4 +438,27 @@ export class FilePreviewScreenComponent implements OnInit {
$event.preventDefault(); $event.preventDefault();
} }
} }
private _cleanupAndRedrawManualAnnotations() {
this._fileDownloadService
.loadActiveFileManualAnnotations()
.subscribe((manualRedactions) => {
this.fileData.manualRedactions = manualRedactions;
const annotationsToRemove = [];
this.fileData.entriesToAdd.forEach((manuallyAddedEntry) => {
const annotation = this.activeViewer.annotManager.getAnnotationById(
manuallyAddedEntry.id
);
if (annotation) {
annotationsToRemove.push(annotation);
}
});
this.activeViewer.annotManager.deleteAnnotations(annotationsToRemove, false, true);
this._annotationDrawService.drawAnnotations(
this.instance,
this.fileData.entriesToAdd
);
});
}
} }

89
apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
View File

@ -46,6 +46,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
@Input() fileData: Blob; @Input() fileData: Blob;
@Input() fileStatus: FileStatus; @Input() fileStatus: FileStatus;
@Input() isReviewer = false;
@Output() fileReady = new EventEmitter(); @Output() fileReady = new EventEmitter();
@Output() annotationSelected = new EventEmitter<string>(); @Output() annotationSelected = new EventEmitter<string>();
@ -55,8 +56,6 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
@Output() viewerReady = new EventEmitter<WebViewerInstance>(); @Output() viewerReady = new EventEmitter<WebViewerInstance>();
@Input() flag = false;
@ViewChild('viewer', { static: true }) viewer: ElementRef; @ViewChild('viewer', { static: true }) viewer: ElementRef;
instance: WebViewerInstance; instance: WebViewerInstance;
@ -77,6 +76,10 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
if (changes.fileData && !changes.fileData.firstChange) { if (changes.fileData && !changes.fileData.firstChange) {
this._changeDocument(); this._changeDocument();
} }
if (changes.isReviewer) {
this._handleCustomActions();
}
console.log(this.isReviewer);
} }
ngAfterViewInit(): void { ngAfterViewInit(): void {
@ -169,41 +172,52 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
}, 250); }, 250);
} }
}); });
if (this._appStateService.isActiveFileDocumentReviewer) { this.instance.textPopup.add(<any>{
this.instance.textPopup.add(<any>{ type: 'actionButton',
type: 'actionButton', dataElement: 'add-dictionary',
img: '/assets/icons/general/add-dictionary.svg', img: '/assets/icons/general/add-dictionary.svg',
title: this._translateService.instant( title: this._translateService.instant(
this._manualAnnotationService.getTitle('DICTIONARY') this._manualAnnotationService.getTitle('DICTIONARY')
), ),
onClick: () => { onClick: () => {
const mre = this._getManualRedactionEntry(); const mre = this._getManualRedactionEntry();
this.manualAnnotationRequested.emit( this.manualAnnotationRequested.emit(
new ManualRedactionEntryWrapper( new ManualRedactionEntryWrapper(
this.instance.docViewer.getSelectedTextQuads(), this.instance.docViewer.getSelectedTextQuads(),
mre, mre,
'DICTIONARY' 'DICTIONARY'
) )
); );
} }
}); });
this.instance.textPopup.add(<any>{ this.instance.textPopup.add(<any>{
type: 'actionButton', type: 'actionButton',
img: '/assets/icons/general/add-redaction.svg', dataElement: 'add-redaction',
title: this._translateService.instant( img: '/assets/icons/general/add-redaction.svg',
this._manualAnnotationService.getTitle('REDACTION') title: this._translateService.instant(
), this._manualAnnotationService.getTitle('REDACTION')
onClick: () => { ),
const mre = this._getManualRedactionEntry(); onClick: () => {
this.manualAnnotationRequested.emit( const mre = this._getManualRedactionEntry();
new ManualRedactionEntryWrapper( this.manualAnnotationRequested.emit(
this.instance.docViewer.getSelectedTextQuads(), new ManualRedactionEntryWrapper(
mre, this.instance.docViewer.getSelectedTextQuads(),
'REDACTION' mre,
) 'REDACTION'
); )
} );
}); }
});
this._handleCustomActions();
}
private _handleCustomActions() {
if (this.instance) {
if (this.isReviewer) {
this.instance.enableElements(['add-redaction', 'add-dictionary']);
} else {
this.instance.disableElements(['add-redaction', 'add-dictionary']);
}
} }
} }
@ -241,7 +255,6 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
public selectAnnotation(annotation: AnnotationWrapper) { public selectAnnotation(annotation: AnnotationWrapper) {
this.instance.annotManager.deselectAllAnnotations(); this.instance.annotManager.deselectAllAnnotations();
const annotationFromViewer = this.instance.annotManager.getAnnotationById(annotation.id); const annotationFromViewer = this.instance.annotManager.getAnnotationById(annotation.id);
console.log(annotationFromViewer);
this.instance.annotManager.selectAnnotation(annotationFromViewer); this.instance.annotManager.selectAnnotation(annotationFromViewer);
this.navigateToPage(annotation.pageNumber); this.navigateToPage(annotation.pageNumber);
} }

23
apps/red-ui/src/app/screens/file/service/file-download.service.ts
View File

@ -8,24 +8,35 @@ import {
} from '@redaction/red-ui-http'; } from '@redaction/red-ui-http';
import { FileType } from '../model/file-type'; import { FileType } from '../model/file-type';
import { FileDataModel } from '../model/file-data.model'; import { FileDataModel } from '../model/file-data.model';
import { AppStateService } from '../../../state/app-state.service';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class FileDownloadService { export class FileDownloadService {
constructor( constructor(
private readonly _appStateService: AppStateService,
private readonly _fileUploadControllerService: FileUploadControllerService, private readonly _fileUploadControllerService: FileUploadControllerService,
private readonly _manualRedactionControllerService: ManualRedactionControllerService, private readonly _manualRedactionControllerService: ManualRedactionControllerService,
private readonly _redactionLogControllerService: RedactionLogControllerService private readonly _redactionLogControllerService: RedactionLogControllerService
) {} ) {}
public loadFileData(projectId: string, fileId: string): Observable<FileDataModel> { public loadActiveFileManualAnnotations() {
const annotatedObs = this.loadFile('ANNOTATED', fileId); return this._manualRedactionControllerService.getManualRedaction(
const redactedObs = this.loadFile('REDACTED', fileId); this._appStateService.activeProjectId,
const reactionLogObs = this._redactionLogControllerService.getRedactionLog(fileId); this._appStateService.activeFileId
);
}
public loadActiveFileData(): Observable<FileDataModel> {
const annotatedObs = this.loadFile('ANNOTATED', this._appStateService.activeFileId);
const redactedObs = this.loadFile('REDACTED', this._appStateService.activeFileId);
const reactionLogObs = this._redactionLogControllerService.getRedactionLog(
this._appStateService.activeFileId
);
const manualRedactionsObs = this._manualRedactionControllerService.getManualRedaction( const manualRedactionsObs = this._manualRedactionControllerService.getManualRedaction(
projectId, this._appStateService.activeProjectId,
fileId this._appStateService.activeFileId
); );
return forkJoin([annotatedObs, redactedObs, reactionLogObs, manualRedactionsObs]).pipe( return forkJoin([annotatedObs, redactedObs, reactionLogObs, manualRedactionsObs]).pipe(

2
libs/red-ui-http/src/lib/model/manualRedactionEntry.ts
View File

@ -21,6 +21,8 @@ export interface ManualRedactionEntry {
type?: string; type?: string;
user?: string; user?: string;
value?: string; value?: string;
requestDate?: string;
processedDate?: string;
} }
export namespace ManualRedactionEntry { export namespace ManualRedactionEntry {
export type StatusEnum = 'REQUESTED' | 'APPROVED' | 'DECLINED'; export type StatusEnum = 'REQUESTED' | 'APPROVED' | 'DECLINED';