diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html index ad8e15788..c32244e0f 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html @@ -2,12 +2,7 @@ @@ -25,8 +20,7 @@ [type]="buttonType" icon="red:trash" tooltip="dossier-overview.delete.action" - > - + > - + > - + > - + > - + > - + > - + > - + > - + > - + >
- + >
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts index 9446d4504..aafb154cd 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts @@ -25,6 +25,10 @@ export class FileActionsComponent implements OnInit { private readonly _fileActionService: FileActionService ) {} + get statusBarConfig() { + return [{ color: this.fileStatus.status, length: 1 }]; + } + get tooltipPosition() { return this.screen === 'file-preview' ? 'below' : 'above'; } @@ -63,26 +67,14 @@ export class FileActionsComponent implements OnInit { return this.permissionsService.canOcrFile(this.fileStatus); } - // Under review get canSetToUnderReview() { return this.permissionsService.canSetUnderReview(this.fileStatus); } - // Under approval get canSetToUnderApproval() { return this.permissionsService.canSetUnderApproval(this.fileStatus); } - // Approve - get isReadyForApproval() { - return this.permissionsService.isReadyForApproval(this.fileStatus); - } - - get canApprove() { - return this.permissionsService.canApprove(this.fileStatus); - } - - // Undo approval get canUndoApproval() { return this.permissionsService.canUndoApproval(this.fileStatus); } @@ -94,17 +86,18 @@ export class FileActionsComponent implements OnInit { } ngOnInit(): void { - if (!this.fileStatus) { - this.fileStatus = this.appStateService.activeFile; - this.screen = 'file-preview'; - this.appStateService.fileChanged.subscribe((fileStatus: FileStatusWrapper) => { - if (fileStatus.fileId === this.fileStatus?.fileId) { - this.fileStatus = this.appStateService.activeFile; - } - }); - } else { + if (this.fileStatus) { this.screen = 'dossier-overview'; + return; } + + this.fileStatus = this.appStateService.activeFile; + this.screen = 'file-preview'; + this.appStateService.fileChanged.subscribe(fileStatus => { + if (fileStatus.fileId === this.fileStatus?.fileId) { + this.fileStatus = this.appStateService.activeFile; + } + }); } toggleViewDocumentInfo() { @@ -116,9 +109,7 @@ export class FileActionsComponent implements OnInit { $event, this.fileStatus.dossierId, [this.fileStatus.fileId], - () => { - this.actionPerformed.emit('delete'); - } + () => this.actionPerformed.emit('delete') ); } @@ -191,8 +182,7 @@ export class FileActionsComponent implements OnInit { }); } - async toggleAnalysis($event: MouseEvent) { - $event.stopPropagation(); + async toggleAnalysis() { await this._fileActionService.toggleAnalysis(this.fileStatus).toPromise(); await this.appStateService.getFiles(); this.actionPerformed.emit( diff --git a/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.ts index 1214932e8..6c704c95e 100644 --- a/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.ts @@ -78,8 +78,8 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { } } - ngAfterViewInit(): void { - this._loadViewer(); + async ngAfterViewInit(): Promise { + await this._loadViewer(); } deselectAllAnnotations() { @@ -135,99 +135,98 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { return this.instance.annotManager.getAnnotationById(id); } - private _loadViewer() { - WebViewer( + private async _loadViewer() { + this.instance = await WebViewer( { licenseKey: environment.licenseKey ? atob(environment.licenseKey) : null, path: this._convertPath('/assets/wv-resources'), css: this._convertPath('/assets/pdftron/stylesheet.css') }, this.viewer.nativeElement - ).then(instance => { - this.instance = instance; - this._setSelectionMode(); - this._disableElements(); - this._disableHotkeys(); - this._configureTextPopup(); + ); - instance.annotManager.on('annotationSelected', (annotations, action) => { - this.annotationSelected.emit( - instance.annotManager.getSelectedAnnotations().map(ann => ann.Id) + this._setSelectionMode(); + this._disableElements(); + this._disableHotkeys(); + this._configureTextPopup(); + + this.instance.annotManager.on('annotationSelected', (annotations, action) => { + this.annotationSelected.emit( + this.instance.annotManager.getSelectedAnnotations().map(ann => ann.Id) + ); + if (action === 'deselected') { + this._toggleRectangleAnnotationAction(true); + } else { + this._configureAnnotationSpecificActions(annotations); + this._toggleRectangleAnnotationAction( + annotations.length === 1 && annotations[0].ReadOnly ); - if (action === 'deselected') { - this._toggleRectangleAnnotationAction(true); - } else { - this._configureAnnotationSpecificActions(annotations); - this._toggleRectangleAnnotationAction( - annotations.length === 1 && annotations[0].ReadOnly - ); - } - }); + } + }); - instance.annotManager.on('annotationChanged', annotations => { - // when a rectangle is drawn, - // it returns one annotation with tool name 'AnnotationCreateRectangle; - // this will auto select rectangle after drawing - if ( - annotations.length === 1 && - annotations[0].ToolName === 'AnnotationCreateRectangle' - ) { - instance.annotManager.selectAnnotations(annotations); - } - }); + this.instance.annotManager.on('annotationChanged', annotations => { + // when a rectangle is drawn, + // it returns one annotation with tool name 'AnnotationCreateRectangle; + // this will auto select rectangle after drawing + if ( + annotations.length === 1 && + annotations[0].ToolName === 'AnnotationCreateRectangle' + ) { + this.instance.annotManager.selectAnnotations(annotations); + } + }); - instance.docViewer.on('pageNumberUpdated', pageNumber => { - if (this.shouldDeselectAnnotationsOnPageChange) { - this.deselectAllAnnotations(); - } - this._ngZone.run(() => this.pageChanged.emit(pageNumber)); - }); + this.instance.docViewer.on('pageNumberUpdated', pageNumber => { + if (this.shouldDeselectAnnotationsOnPageChange) { + this.deselectAllAnnotations(); + } + this._ngZone.run(() => this.pageChanged.emit(pageNumber)); + }); - instance.docViewer.on('documentLoaded', this._documentLoaded); + this.instance.docViewer.on('documentLoaded', this._documentLoaded); - instance.docViewer.on('keyUp', $event => { - // arrows and full-screen - if ($event.target?.tagName?.toLowerCase() !== 'input') { - if ($event.key.startsWith('Arrow') || $event.key === 'f') { - this._ngZone.run(() => { - this.keyUp.emit($event); - }); - $event.preventDefault(); - $event.stopPropagation(); - } - } - - if (this._allowedKeyboardShortcuts.indexOf($event.key) < 0) { + this.instance.docViewer.on('keyUp', $event => { + // arrows and full-screen + if ($event.target?.tagName?.toLowerCase() !== 'input') { + if ($event.key.startsWith('Arrow') || $event.key === 'f') { + this._ngZone.run(() => { + this.keyUp.emit($event); + }); $event.preventDefault(); $event.stopPropagation(); } - }); + } - instance.docViewer.on('textSelected', (quads, selectedText) => { - this._selectedText = selectedText; - if (selectedText.length > 2 && this.canPerformActions) { - this.instance.enableElements(['add-dictionary', 'add-false-positive']); - } else { - this.instance.disableElements(['add-dictionary', 'add-false-positive']); - } - }); - - instance.iframeWindow.addEventListener('visibilityChanged', (event: any) => { - if (event.detail.element === 'searchPanel') { - const inputElement = instance.iframeWindow.document.getElementById( - 'SearchPanel__input' - ) as HTMLInputElement; - setTimeout(() => { - inputElement.value = ''; - }, 0); - if (!event.detail.isVisible) { - instance.docViewer.clearSearchResults(); - } - } - }); - - this._loadDocument(); + if (this._allowedKeyboardShortcuts.indexOf($event.key) < 0) { + $event.preventDefault(); + $event.stopPropagation(); + } }); + + this.instance.docViewer.on('textSelected', (quads, selectedText) => { + this._selectedText = selectedText; + if (selectedText.length > 2 && this.canPerformActions) { + this.instance.enableElements(['add-dictionary', 'add-false-positive']); + } else { + this.instance.disableElements(['add-dictionary', 'add-false-positive']); + } + }); + + this.instance.iframeWindow.addEventListener('visibilityChanged', (event: any) => { + if (event.detail.element === 'searchPanel') { + const inputElement = this.instance.iframeWindow.document.getElementById( + 'SearchPanel__input' + ) as HTMLInputElement; + setTimeout(() => { + inputElement.value = ''; + }, 0); + if (!event.detail.isVisible) { + this.instance.docViewer.clearSearchResults(); + } + } + }); + + this._loadDocument(); } private _setSelectionMode(): void { diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html index cc13c7d41..1e65d6365 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html @@ -242,8 +242,7 @@ (closeDocumentInfoView)="viewDocumentInfo = false" *ngIf="viewReady && viewDocumentInfo" [file]="fileData.fileStatus.fileStatus" - > - + > ) to display the page in fullscreen */ diff --git a/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts b/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts index 7c4d32f1c..c02562776 100644 --- a/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts +++ b/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts @@ -31,33 +31,27 @@ export class PdfViewerDataService { } loadActiveFileData(): Observable { - const fileObs = this.downloadOriginalFile(this._appStateService.activeFile); - const reactionLogObs = this._redactionLogControllerService - .getRedactionLog( - this._appStateService.activeDossierId, - this._appStateService.activeFileId - ) + const dossierId = this._appStateService.activeDossierId; + const fileId = this._appStateService.activeFileId; + + const file$ = this.downloadOriginalFile(this._appStateService.activeFile); + const reactionLog$ = this._redactionLogControllerService + .getRedactionLog(dossierId, fileId) .pipe(catchError(() => of({}))); - const redactionChangeLogObs = this._redactionLogControllerService - .getRedactionChangeLog( - this._appStateService.activeDossierId, - this._appStateService.activeFileId - ) + const redactionChangeLog$ = this._redactionLogControllerService + .getRedactionChangeLog(dossierId, fileId) .pipe(catchError(() => of({}))); - const manualRedactionsObs = this._manualRedactionControllerService - .getManualRedaction( - this._appStateService.activeDossierId, - this._appStateService.activeFileId - ) + const manualRedactions$ = this._manualRedactionControllerService + .getManualRedaction(dossierId, fileId) .pipe(catchError(() => of({}))); - const viewedPagesObs = this.getViewedPagesForActiveFile(); + const viewedPages$ = this.getViewedPagesForActiveFile(); return forkJoin([ - fileObs, - reactionLogObs, - redactionChangeLogObs, - manualRedactionsObs, - viewedPagesObs + file$, + reactionLog$, + redactionChangeLog$, + manualRedactions$, + viewedPages$ ]).pipe(map(data => new FileDataModel(this._appStateService.activeFile, ...data))); }