diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html index 142c28620..46fc879d6 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html @@ -132,7 +132,7 @@ diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts index 502cb5c09..d5e6236b6 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts +++ b/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) { diff --git a/apps/red-ui/src/app/screens/file/model/file-data.model.ts b/apps/red-ui/src/app/screens/file/model/file-data.model.ts index 08bd7aaa2..fbd6afdfe 100644 --- a/apps/red-ui/src/app/screens/file/model/file-data.model.ts +++ b/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[] { diff --git a/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.ts b/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.ts index 44210fa44..cfd4f8f31 100644 --- a/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.ts +++ b/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(); 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(); + } } } } diff --git a/apps/red-ui/src/app/screens/file/service/file-download.service.ts b/apps/red-ui/src/app/screens/file/service/file-download.service.ts index 9d27048e6..69b6b0e6f 100644 --- a/apps/red-ui/src/app/screens/file/service/file-download.service.ts +++ b/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( diff --git a/apps/red-ui/src/app/state/app-state.service.ts b/apps/red-ui/src/app/state/app-state.service.ts index 41ab2be1f..1f6c59b39 100644 --- a/apps/red-ui/src/app/state/app-state.service.ts +++ b/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); }