fixed viewed pages not being available for all statuses

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

@@ -132,7 +132,7 @@
                     <redaction-page-indicator
                         *ngFor="let pageNumber of displayedPages"
                         (pageSelected)="selectPage($event)"
-                        [viewedPages]="viewedPages"
+                        [viewedPages]="fileData.viewedPages"
                         [number]="pageNumber"
                         [active]="pageNumber === activeViewerPage"
                     >

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

@@ -61,7 +61,7 @@ export class FilePreviewScreenComponent implements OnInit {
         private readonly _manualAnnotationService: ManualAnnotationService,
         private readonly _fileDownloadService: FileDownloadService,
         private readonly _reanalysisControllerService: ReanalysisControllerService,
-        private readonly _viewedPagesControllerService: ViewedPagesControllerService,
+
         private ngZone: NgZone
     ) {
         this._activatedRoute.params.subscribe((params) => {
@@ -119,14 +119,8 @@ export class FilePreviewScreenComponent implements OnInit {
 
     private _activeMenuAnnotation: AnnotationWrapper;
     loadingMessage: string;
-    viewedPages: ViewedPages = { pages: [] };
 
     public ngOnInit(): void {
-        this._viewedPagesControllerService
-            .getViewedPages(this.appStateService.activeProjectId, this.appStateService.activeFileId)
-            .subscribe((viewedPages) => {
-                this.viewedPages = viewedPages;
-            });
         this._loadFileData().subscribe(() => {});
         this.appStateService.fileStatusChanged.subscribe((fileStatus: FileStatusWrapper) => {
             if (fileStatus.fileId === this.fileId) {

apps/red-ui/src/app/screens/file/model/file-data.model.ts

@@ -1,4 +1,9 @@
-import { ManualRedactionEntry, ManualRedactions, RedactionLog } from '@redaction/red-ui-http';
+import {
+    ManualRedactionEntry,
+    ManualRedactions,
+    RedactionLog,
+    ViewedPages
+} from '@redaction/red-ui-http';
 import { FileStatusWrapper } from './file-status.wrapper';
 
 export class FileDataModel {
@@ -7,7 +12,8 @@ export class FileDataModel {
         public annotatedFileData: Blob,
         public redactedFileData: Blob,
         public redactionLog: RedactionLog,
-        public manualRedactions: ManualRedactions
+        public manualRedactions: ManualRedactions,
+        public viewedPages?: ViewedPages
     ) {}
 
     get entriesToAdd(): ManualRedactionEntry[] {

apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.ts

@@ -4,6 +4,7 @@ import {
     HostListener,
     Input,
     OnChanges,
+    OnInit,
     Output,
     SimpleChanges
 } from '@angular/core';
@@ -15,7 +16,7 @@ import { AppStateService } from '../../../state/app-state.service';
     templateUrl: './page-indicator.component.html',
     styleUrls: ['./page-indicator.component.scss']
 })
-export class PageIndicatorComponent implements OnChanges {
+export class PageIndicatorComponent implements OnChanges, OnInit {
     @Input() active: boolean;
     @Input() number: number;
     @Input() viewedPages: ViewedPages;
@@ -23,12 +24,17 @@ export class PageIndicatorComponent implements OnChanges {
     @Output() pageSelected = new EventEmitter<number>();
 
     pageReadTimeout: number = null;
+    canMarkPagesAsViewed: boolean;
 
     constructor(
         private readonly _viewedPagesControllerService: ViewedPagesControllerService,
         private readonly _appStateService: AppStateService
     ) {}
 
+    ngOnInit(): void {
+        this.canMarkPagesAsViewed = this._appStateService.canMarkPagesAsViewedForActiveFile;
+    }
+
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.active) {
             this._handlePageRead();
@@ -40,15 +46,17 @@ export class PageIndicatorComponent implements OnChanges {
     }
 
     private _handlePageRead() {
-        if (this.pageReadTimeout) {
-            clearTimeout(this.pageReadTimeout);
-        }
-        if (this.active && !this.read) {
-            this.pageReadTimeout = setTimeout(() => {
-                if (this.active && !this.read) {
-                    this._markPageRead();
-                }
-            }, 3 * 1000); // 3 seconds
+        if (this.canMarkPagesAsViewed) {
+            if (this.pageReadTimeout) {
+                clearTimeout(this.pageReadTimeout);
+            }
+            if (this.active && !this.read) {
+                this.pageReadTimeout = setTimeout(() => {
+                    if (this.active && !this.read) {
+                        this._markPageRead();
+                    }
+                }, 3 * 1000); // 3 seconds
+            }
         }
     }
 
@@ -78,24 +86,28 @@ export class PageIndicatorComponent implements OnChanges {
 
     @HostListener('window:keydown', ['$event'])
     handleKeyDown(event: KeyboardEvent) {
-        if (this.active && event.key === 'Enter') {
-            if (
-                document.activeElement &&
-                document.activeElement.className.indexOf('activePanel') >= 0
-            ) {
-                this.toggleReadState();
-                event.stopPropagation();
-                event.preventDefault();
-                return false;
+        if (this.canMarkPagesAsViewed) {
+            if (this.active && event.key === ' ') {
+                if (
+                    document.activeElement &&
+                    document.activeElement.className.indexOf('activePanel') >= 0
+                ) {
+                    this.toggleReadState();
+                    event.stopPropagation();
+                    event.preventDefault();
+                    return false;
+                }
             }
         }
     }
 
     toggleReadState() {
-        if (this.read) {
-            this._markPageUnread();
-        } else {
-            this._markPageRead();
+        if (this.canMarkPagesAsViewed) {
+            if (this.read) {
+                this._markPageUnread();
+            } else {
+                this._markPageRead();
+            }
         }
     }
 }

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

@@ -38,10 +38,15 @@ export class FileDownloadService {
             this._appStateService.activeProjectId,
             this._appStateService.activeFileId
         );
+        const viewedPagesObs = this._appStateService.getViewedPagesForActiveFile();
 
-        return forkJoin([annotatedObs, redactedObs, reactionLogObs, manualRedactionsObs]).pipe(
-            map((data) => new FileDataModel(this._appStateService.activeFile, ...data))
-        );
+        return forkJoin([
+            annotatedObs,
+            redactedObs,
+            reactionLogObs,
+            manualRedactionsObs,
+            viewedPagesObs
+        ]).pipe(map((data) => new FileDataModel(this._appStateService.activeFile, ...data)));
     }
 
     loadFile(

apps/red-ui/src/app/state/app-state.service.ts

@@ -8,13 +8,15 @@ import {
     ReanalysisControllerService,
     StatusControllerService,
     TypeValue,
-    VersionsControllerService
+    VersionsControllerService,
+    ViewedPages,
+    ViewedPagesControllerService
 } from '@redaction/red-ui-http';
 import { NotificationService, NotificationType } from '../notification/notification.service';
 import { TranslateService } from '@ngx-translate/core';
 import { Router } from '@angular/router';
 import { UserService, UserWrapper } from '../user/user.service';
-import { forkJoin, interval } from 'rxjs';
+import { forkJoin, interval, of } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { download } from '../utils/file-download-utils';
 import { humanize } from '../utils/functions';
@@ -81,7 +83,8 @@ export class AppStateService {
         private readonly _translateService: TranslateService,
         private readonly _dictionaryControllerService: DictionaryControllerService,
         private readonly _statusControllerService: StatusControllerService,
-        private readonly _versionsControllerService: VersionsControllerService
+        private readonly _versionsControllerService: VersionsControllerService,
+        private readonly _viewedPagesControllerService: ViewedPagesControllerService
     ) {
         this._appState = {
             projects: [],
@@ -137,6 +140,17 @@ export class AppStateService {
         return this._dictionaryData;
     }
 
+    getViewedPagesForActiveFile() {
+        if (this.canMarkPagesAsViewedForActiveFile) {
+            return this._viewedPagesControllerService.getViewedPages(
+                this.activeProjectId,
+                this.activeFileId
+            );
+        } else {
+            return of({ pages: [] });
+        }
+    }
+
     getDictionaryColor(type: string) {
         const color = this._dictionaryData[type].hexColor;
         return color ? color : this._dictionaryData['default'].hexColor;
@@ -190,6 +204,12 @@ export class AppStateService {
         return this._appState.totalDocuments;
     }
 
+    get canMarkPagesAsViewedForActiveFile() {
+        return (
+            this.activeFile.status === 'UNDER_APPROVAL' || this.activeFile.status === 'UNDER_REVIEW'
+        );
+    }
+
     public getProjectById(id: string) {
         return this.allProjects.find((project) => project.project.projectId === id);
     }