Pull request #208: Bugs

Merge in RED/ui from bugs to master

* commit '11dfe604511eacc13a92ea7b650df4317a030850':
  RED-1596: don't reuse component without open file permissions
  fix disable redaction for approved files

apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html

@@ -2,12 +2,7 @@
     <ng-container *ngTemplateOutlet="actions"></ng-container>
     <redaction-status-bar
         *ngIf="fileStatus.isWorkable"
-        [config]="[
-            {
-                color: fileStatus.status,
-                length: 1
-            }
-        ]"
+        [config]="statusBarConfig"
     ></redaction-status-bar>
 </div>
 
@@ -25,8 +20,7 @@
             [type]="buttonType"
             icon="red:trash"
             tooltip="dossier-overview.delete.action"
-        >
-        </redaction-circle-button>
+        ></redaction-circle-button>
 
         <redaction-circle-button
             (action)="assign($event)"
@@ -44,8 +38,7 @@
             [type]="buttonType"
             icon="red:assign-me"
             tooltip="dossier-overview.assign-me"
-        >
-        </redaction-circle-button>
+        ></redaction-circle-button>
 
         <!-- download redacted file-->
         <redaction-file-download-btn
@@ -54,8 +47,7 @@
             [tooltipClass]="'small'"
             [tooltipPosition]="tooltipPosition"
             [type]="buttonType"
-        >
-        </redaction-file-download-btn>
+        ></redaction-file-download-btn>
 
         <redaction-circle-button
             (action)="toggleViewDocumentInfo()"
@@ -74,8 +66,7 @@
             [type]="buttonType"
             icon="red:ready-for-approval"
             tooltip="dossier-overview.under-approval"
-        >
-        </redaction-circle-button>
+        ></redaction-circle-button>
 
         <!-- Back to review -->
         <redaction-circle-button
@@ -85,8 +76,7 @@
             [type]="buttonType"
             icon="red:undo"
             tooltip="dossier-overview.under-review"
-        >
-        </redaction-circle-button>
+        ></redaction-circle-button>
 
         <!-- Approved-->
         <redaction-circle-button
@@ -101,8 +91,7 @@
             "
             [type]="buttonType"
             icon="red:approved"
-        >
-        </redaction-circle-button>
+        ></redaction-circle-button>
 
         <!-- Back to approval -->
         <redaction-circle-button
@@ -112,8 +101,7 @@
             [type]="buttonType"
             icon="red:undo"
             tooltip="dossier-overview.under-approval"
-        >
-        </redaction-circle-button>
+        ></redaction-circle-button>
 
         <redaction-circle-button
             (action)="ocrFile($event)"
@@ -122,8 +110,7 @@
             [type]="buttonType"
             icon="red:ocr"
             tooltip="dossier-overview.ocr-file"
-        >
-        </redaction-circle-button>
+        ></redaction-circle-button>
 
         <!-- reanalyse file preview -->
         <redaction-circle-button
@@ -134,8 +121,7 @@
             tooltipClass="warn small"
             tooltipPosition="below"
             type="warn"
-        >
-        </redaction-circle-button>
+        ></redaction-circle-button>
 
         <!-- reanalyse file listing -->
         <redaction-circle-button
@@ -145,21 +131,19 @@
             icon="red:refresh"
             tooltip="dossier-overview.reanalyse.action"
             type="dark-bg"
-        >
-        </redaction-circle-button>
+        ></redaction-circle-button>
 
         <!-- exclude from redaction -->
         <div class="red-input-group">
             <mat-slide-toggle
-                (click)="toggleAnalysis($event)"
+                (change)="toggleAnalysis()"
                 [checked]="!fileStatus?.isExcluded"
                 [class.mr-24]="screen === 'dossier-overview'"
                 [disabled]="!permissionsService.canToggleAnalysis(fileStatus)"
                 [matTooltipPosition]="tooltipPosition"
                 [matTooltip]="toggleTooltip | translate"
                 color="primary"
-            >
-            </mat-slide-toggle>
+            ></mat-slide-toggle>
         </div>
     </div>
 </ng-template>

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(

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<void> {
+        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 {

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"
-            >
-            </redaction-document-info>
+            ></redaction-document-info>
 
             <redaction-file-workload
                 #fileWorkloadComponent

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts

@@ -222,6 +222,11 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy, OnAttach,
     }
 
     async ngOnAttach(previousRoute: ActivatedRouteSnapshot) {
+        if (!this.permissionsService.canOpenFile(this.appStateService.activeFile)) {
+            await this._router.navigate(['/main/dossiers/' + this.dossierId]);
+            return;
+        }
+
         await this.ngOnInit();
         this._lastPage = previousRoute.queryParams.page;
     }
@@ -325,7 +330,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy, OnAttach,
 
     selectPage(pageNumber: number) {
         this._viewerComponent.navigateToPage(pageNumber);
-        this._workloadComponent.scrollAnnotationsToPage(pageNumber, 'always');
+        this._workloadComponent?.scrollAnnotationsToPage(pageNumber, 'always');
     }
 
     openManualAnnotationDialog($event: ManualRedactionEntryWrapper) {
@@ -393,7 +398,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy, OnAttach,
     viewerPageChanged($event: any) {
         if (typeof $event === 'number') {
             this._scrollViews();
-            if (!this._workloadComponent.multiSelectActive) {
+            if (!this._workloadComponent?.multiSelectActive) {
                 this.shouldDeselectAnnotationsOnPageChange = true;
             }
 
@@ -583,9 +588,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy, OnAttach,
                         }
                     } else {
                         if (fileDataModel.fileStatus.isError) {
-                            this._router.navigate([
-                                '/main/dossiers/' + this.appStateService.activeDossierId
-                            ]);
+                            this._router.navigate(['/main/dossiers/' + this.dossierId]);
                         } else {
                             this.loadingMessage = 'file-preview.reanalyse-file';
                         }
@@ -597,8 +600,8 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy, OnAttach,
 
     @debounce()
     private _scrollViews() {
-        this._workloadComponent.scrollQuickNavigation();
-        this._workloadComponent.scrollAnnotations();
+        this._workloadComponent?.scrollQuickNavigation();
+        this._workloadComponent?.scrollAnnotations();
     }
 
     /* Get the documentElement (<html>) to display the page in fullscreen */

apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts

@@ -31,33 +31,27 @@ export class PdfViewerDataService {
     }
 
     loadActiveFileData(): Observable<FileDataModel> {
-        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)));
     }