From e89d317fa0a4495ca3e536f2f1e940f92cd9fca2 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Sun, 11 Jun 2023 01:11:22 +0300 Subject: [PATCH] RED-6829: remove other observables --- apps/red-ui/src/app/models/file/list-item.ts | 1 - .../annotation-actions.component.html | 4 +- .../annotation-details.component.ts | 9 +- .../annotation-wrapper.component.html | 4 +- .../annotation-wrapper.component.ts | 7 +- .../annotations-list.component.ts | 36 +++---- .../file-workload.component.html | 47 ++++---- .../file-workload/file-workload.component.ts | 102 +++++++----------- .../page-indicator.component.html | 4 +- .../page-indicator.component.ts | 27 +++-- .../components/pages/pages.component.html | 1 - .../components/pages/pages.component.ts | 11 +- .../readonly-banner.component.html | 4 +- .../readonly-banner.component.ts | 7 +- ...ile-preview-right-container.component.html | 8 +- .../file-preview-screen.component.ts | 18 ++-- .../services/annotation-actions.service.ts | 2 +- .../services/annotations-listing.service.ts | 2 +- .../services/document-info.service.ts | 40 +++---- .../services/excluded-pages.service.ts | 21 ++-- .../services/pdf-proxy.service.ts | 4 +- .../file-preview/services/skipped.service.ts | 38 +++---- .../services/view-mode.service.ts | 7 +- .../services/document-viewer.service.ts | 2 +- .../services/page-rotation.service.ts | 46 ++++---- .../pdf-viewer/services/pdf-viewer.service.ts | 7 +- .../services/viewer-header.service.ts | 2 +- .../file-actions/file-actions.component.ts | 5 +- 28 files changed, 202 insertions(+), 264 deletions(-) diff --git a/apps/red-ui/src/app/models/file/list-item.ts b/apps/red-ui/src/app/models/file/list-item.ts index 71ba19148..7bf4a2dea 100644 --- a/apps/red-ui/src/app/models/file/list-item.ts +++ b/apps/red-ui/src/app/models/file/list-item.ts @@ -1,5 +1,4 @@ export interface ListItem { item: T; isSelected: boolean; - multiSelectActive: boolean; } diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.html index 3271edad1..29a792c60 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.html @@ -62,7 +62,7 @@ this.annotation.item[key]); @@ -65,7 +66,7 @@ export class AnnotationDetailsComponent implements OnChanges { ngOnChanges() { this.engines = this.#extractEngines(this.annotation.item).filter(engine => engine.show); this.changesTooltip = this.getChangesTooltip(); - this.noSelection = !this.annotation.isSelected || !this.annotation.multiSelectActive; + this.noSelection = !this.annotation.isSelected || this._multiSelectService.inactive(); } #extractEngines(annotation: AnnotationWrapper): Engine[] { diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.html b/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.html index 97ac3715b..dfd222f5e 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.html @@ -20,11 +20,11 @@ {{ annotation.item.comments.length }} -
+
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.ts index 23b6943e2..a8046088a 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.ts @@ -1,8 +1,9 @@ -import { Component, HostBinding, Input, OnChanges } from '@angular/core'; +import { Component, HostBinding, inject, Input, OnChanges } from '@angular/core'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { PdfProxyService } from '../../services/pdf-proxy.service'; import { ActionsHelpModeKeys } from '../../utils/constants'; import { ListItem } from '@models/file/list-item'; +import { MultiSelectService } from '../../services/multi-select.service'; @Component({ selector: 'redaction-annotation-wrapper', @@ -15,8 +16,8 @@ export class AnnotationWrapperComponent implements OnChanges { @HostBinding('attr.annotation-id') annotationId: string; @HostBinding('class.active') active = false; actionsHelpModeKey?: string; - - constructor(readonly pdfProxyService: PdfProxyService) {} + protected readonly _pdfProxyService = inject(PdfProxyService); + protected readonly _multiSelectService = inject(MultiSelectService); ngOnChanges() { this.annotationId = this.annotation.item.id; diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts index ffcbff470..bd4a8a323 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts @@ -1,11 +1,10 @@ -import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnChanges, Output } from '@angular/core'; +import { ChangeDetectorRef, Component, computed, ElementRef, EventEmitter, Input, OnChanges, Output } from '@angular/core'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { FilterService, HasScrollbarDirective, IqserEventTarget } from '@iqser/common-ui'; import { MultiSelectService } from '../../services/multi-select.service'; import { AnnotationReferencesService } from '../../services/annotation-references.service'; import { UserPreferenceService } from '@users/user-preference.service'; import { ViewModeService } from '../../services/view-mode.service'; -import { BehaviorSubject } from 'rxjs'; import { EarmarkGroup } from '@red/domain'; import { REDAnnotationManager } from '../../../pdf-viewer/services/annotation-manager.service'; import { AnnotationsListingService } from '../../services/annotations-listing.service'; @@ -18,10 +17,14 @@ import { ListItem } from '@models/file/list-item'; }) export class AnnotationsListComponent extends HasScrollbarDirective implements OnChanges { @Input() annotations: ListItem[]; - @Output() readonly pagesPanelActive = new EventEmitter(); - readonly earmarkGroups$ = new BehaviorSubject([]); + readonly #earmarkGroups = computed(() => { + if (this._viewModeService.isEarmarks()) { + return this.#getEarmarksGroups(); + } + return [] as EarmarkGroup[]; + }); constructor( protected readonly _elementRef: ElementRef, @@ -37,16 +40,6 @@ export class AnnotationsListComponent extends HasScrollbarDirective implements O super(_elementRef, _changeDetector); } - ngOnChanges(): void { - if (this._viewModeService.isEarmarks()) { - this._updateEarmarksGroups(); - } - - setTimeout(() => { - super.ngOnChanges(); - }, 0); - } - annotationClicked(annotation: AnnotationWrapper, $event: MouseEvent): void { if (this._userPreferenceService.areDevFeaturesEnabled) { console.log('Selected Annotation:', annotation); @@ -78,16 +71,18 @@ export class AnnotationsListComponent extends HasScrollbarDirective implements O } showHighlightGroup(idx: number): EarmarkGroup { - return this._viewModeService.isEarmarks() && this.earmarkGroups$.value.find(h => h.startIdx === idx); + return this._viewModeService.isEarmarks() && this.#earmarkGroups().find(h => h.startIdx === idx); } protected readonly _trackBy = (index: number, listItem: ListItem) => listItem.item.id; - private _updateEarmarksGroups(): void { - if (!this.annotations?.length) { - return; - } + #getEarmarksGroups() { const earmarksGroups: EarmarkGroup[] = []; + + if (!this.annotations?.length) { + return earmarksGroups; + } + let lastGroup: EarmarkGroup; for (let idx = 0; idx < this.annotations.length; ++idx) { if (idx === 0 || this.annotations[idx].item.color !== this.annotations[idx - 1].item.color) { @@ -99,7 +94,8 @@ export class AnnotationsListComponent extends HasScrollbarDirective implements O lastGroup.length += 1; } } + earmarksGroups.push(lastGroup); - this.earmarkGroups$.next(earmarksGroups); + return earmarksGroups; } } diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html index 74d8fb9a0..58572c49b 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html @@ -1,4 +1,8 @@ -
+
- {{ title$ | async | translate }} + {{ title() | translate }}
- +
@@ -76,7 +76,7 @@ >
- + @@ -146,19 +145,19 @@ (keydown)="preventKeyDefault($event)" (keyup)="preventKeyDefault($event)" [class.active-panel]="!pagesPanelActive" - [hidden]="excludedPagesService.shown$ | async" + [hidden]="excludedPagesService.shown()" class="annotations" id="annotations-list" tabindex="1" > - + - + {{ 'file-preview.tabs.annotations.page-is' | translate }}
- +
@@ -214,7 +213,7 @@ diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts index fc51bce0b..924dba47f 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, effect, ElementRef, HostListener, Input, OnDestroy, ViewChild } from '@angular/core'; +import { ChangeDetectorRef, Component, computed, effect, ElementRef, HostListener, OnDestroy, ViewChild } from '@angular/core'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { AnnotationProcessingService } from '../../services/annotation-processing.service'; import { MatDialog } from '@angular/material/dialog'; @@ -12,11 +12,9 @@ import { IconButtonTypes, INestedFilter, IqserEventTarget, - shareLast, } from '@iqser/common-ui'; import { combineLatest, delay, Observable } from 'rxjs'; import { map, tap } from 'rxjs/operators'; -import { File } from '@red/domain'; import { ExcludedPagesService } from '../../services/excluded-pages.service'; import { MultiSelectService } from '../../services/multi-select.service'; import { DocumentInfoService } from '../../services/document-info.service'; @@ -32,7 +30,6 @@ import { REDDocumentViewer } from '../../../pdf-viewer/services/document-viewer. import { SuggestionsService } from '../../services/suggestions.service'; import { ListItem } from '@models/file/list-item'; import { PageRotationService } from '../../../pdf-viewer/services/page-rotation.service'; -import { toObservable } from '@angular/core/rxjs-interop'; const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape']; const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; @@ -43,9 +40,6 @@ const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; styleUrls: ['./file-workload.component.scss'], }) export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy { - @Input() activeViewerPage: number; - @Input({ required: true }) file!: File; - readonly iconButtonTypes = IconButtonTypes; readonly circleButtonTypes = CircleButtonTypes; @@ -53,9 +47,10 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy displayedPages: number[] = []; pagesPanelActive = true; readonly displayedAnnotations$: Observable[]>>; - readonly showExcludedPages$: Observable; - readonly title$: Observable; - readonly isEarmarks$: Observable; + readonly title = computed(() => + this.viewModeService.isEarmarks() ? _('file-preview.tabs.highlights.label') : _('file-preview.tabs.annotations.label'), + ); + readonly currentPageIsExcluded = computed(() => this.state.file().excludedPages.includes(this.pdf.currentPage())); @ViewChild('annotationsElement') private readonly _annotationsElement: ElementRef; @ViewChild('quickNavigation') private readonly _quickNavigationElement: ElementRef; @@ -75,7 +70,6 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy readonly excludedPagesService: ExcludedPagesService, private readonly _changeDetectorRef: ChangeDetectorRef, private readonly _annotationProcessingService: AnnotationProcessingService, - private readonly _viewModeService: ViewModeService, private readonly _suggestionsService: SuggestionsService, private readonly _pageRotationService: PageRotationService, ) { @@ -99,47 +93,30 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy }); this.displayedAnnotations$ = this._displayedAnnotations$; - this.showExcludedPages$ = this._showExcludedPages$; - this.isEarmarks$ = this._isEarmarks$; - this.title$ = this._title$; effect(() => { if (this.multiSelectService.inactive()) { this.annotationManager.deselect(); } }); + + effect(() => { + const __ = this.viewModeService.viewMode(); + this._scrollViews(); + }); + + effect( + () => { + if (this.excludedPagesService.shown()) { + this._disableMultiSelectAndDocumentInfo(); + } + }, + { allowSignalWrites: true }, + ); } get activeAnnotations(): AnnotationWrapper[] { - return this.displayedAnnotations.get(this.activeViewerPage) || []; - } - - get currentPageIsExcluded(): boolean { - return this.file?.excludedPages?.includes(this.activeViewerPage); - } - - private get _showExcludedPages$() { - return this.excludedPagesService.shown$.pipe( - tap(show => { - if (show) { - this._disableMultiSelectAndDocumentInfo(); - } - }), - shareLast(), - ); - } - - private get _title$(): Observable { - return this.isEarmarks$.pipe( - map(isHighlights => (isHighlights ? _('file-preview.tabs.highlights.label') : _('file-preview.tabs.annotations.label'))), - ); - } - - private get _isEarmarks$(): Observable { - return this.viewModeService.viewMode$.pipe( - tap(() => this._scrollViews()), - map(() => this.viewModeService.isEarmarks()), - ); + return this.displayedAnnotations.get(this.pdf.currentPage()) || []; } private get _firstSelectedAnnotation() { @@ -155,7 +132,6 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy primary$, secondary$, this.listingService.selected$, - toObservable(this.multiSelectService.active), this._pageRotationService.rotations$, ]).pipe( delay(0), @@ -166,7 +142,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy } get #allPages() { - return Array.from({ length: this.file?.numberOfPages }, (_x, i) => i + 1); + return Array.from({ length: this.state.file()?.numberOfPages }, (_x, i) => i + 1); } private static _scrollToFirstElement(elements: HTMLElement[], mode: 'always' | 'if-needed' = 'if-needed') { @@ -232,10 +208,11 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy } scrollAnnotations(): void { - if (this._firstSelectedAnnotation?.pageNumber === this.activeViewerPage) { + const currentPage = this.pdf.currentPage(); + if (this._firstSelectedAnnotation?.pageNumber === currentPage) { return; } - this.scrollAnnotationsToPage(this.activeViewerPage, 'always'); + this.scrollAnnotationsToPage(currentPage, 'always'); } scrollAnnotationsToPage(page: number, mode: 'always' | 'if-needed' = 'if-needed'): void { @@ -257,8 +234,9 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy } scrollQuickNavigation(): void { - let quickNavPageIndex = this.displayedPages.findIndex(p => p >= this.activeViewerPage); - if (quickNavPageIndex === -1 || this.displayedPages[quickNavPageIndex] !== this.activeViewerPage) { + const currentPage = this.pdf.currentPage(); + let quickNavPageIndex = this.displayedPages.findIndex(p => p >= currentPage); + if (quickNavPageIndex === -1 || this.displayedPages[quickNavPageIndex] !== currentPage) { quickNavPageIndex = Math.max(0, quickNavPageIndex - 1); } this._scrollQuickNavigationToPage(this.displayedPages[quickNavPageIndex]); @@ -287,8 +265,9 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy } navigateAnnotations($event: KeyboardEvent) { - if (!this._firstSelectedAnnotation || this.activeViewerPage !== this._firstSelectedAnnotation.pageNumber) { - if (this.displayedPages.indexOf(this.activeViewerPage) !== -1) { + const currentPage = this.pdf.currentPage(); + if (!this._firstSelectedAnnotation || currentPage !== this._firstSelectedAnnotation.pageNumber) { + if (this.displayedPages.indexOf(currentPage) !== -1) { // Displayed page has annotations return this.listingService.selectAnnotations(this.activeAnnotations ? this.activeAnnotations[0] : null); } @@ -362,12 +341,13 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy primary: INestedFilter[], secondary: INestedFilter[] = [], ): Map { + const onlyPageWithAnnotations = this.viewModeService.onlyPagesWithAnnotations(); if (!primary || primary.length === 0) { - this.displayedPages = this.viewModeService.onlyPagesWithAnnotations ? [] : this.#allPages; + this.displayedPages = onlyPageWithAnnotations ? [] : this.#allPages; return; } - if (this._viewModeService.isRedacted()) { + if (this.viewModeService.isRedacted()) { annotations = annotations.filter(a => !bool(a.isChangeLogRemoved)); annotations = this._suggestionsService.filterWorkloadSuggestionsInPreview(annotations); } @@ -376,13 +356,13 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy const pagesThatDisplayAnnotations = [...this.displayedAnnotations.keys()]; const enabledFilters = this.filterService.enabledFlatFilters; if (enabledFilters.some(f => f.id === 'pages-without-annotations')) { - if (enabledFilters.length === 1 && !this.viewModeService.onlyPagesWithAnnotations) { + if (enabledFilters.length === 1 && !onlyPageWithAnnotations) { this.displayedPages = this.#allPages.filter(page => !pagesThatDisplayAnnotations.includes(page)); } else { this.displayedPages = []; } this.displayedAnnotations.clear(); - } else if (enabledFilters.length || this.viewModeService.onlyPagesWithAnnotations) { + } else if (enabledFilters.length || onlyPageWithAnnotations) { this.displayedPages = pagesThatDisplayAnnotations; } else { this.displayedPages = this.#allPages; @@ -393,9 +373,10 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy } private _selectFirstAnnotationOnCurrentPageIfNecessary() { + const currentPage = this.pdf.currentPage(); if ( - (!this._firstSelectedAnnotation || this.activeViewerPage !== this._firstSelectedAnnotation.pageNumber) && - this.displayedPages.indexOf(this.activeViewerPage) >= 0 && + (!this._firstSelectedAnnotation || currentPage !== this._firstSelectedAnnotation.pageNumber) && + this.displayedPages.indexOf(currentPage) >= 0 && this.activeAnnotations.length > 0 ) { this.listingService.selectAnnotations(this.activeAnnotations[0]); @@ -403,7 +384,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy } private _navigatePages($event: KeyboardEvent) { - const pageIdx = this.displayedPages.indexOf(this.activeViewerPage); + const pageIdx = this.displayedPages.indexOf(this.pdf.currentPage()); if ($event.key !== 'ArrowDown') { if (pageIdx === -1) { @@ -437,7 +418,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy private _nextPageWithAnnotations() { let idx = 0; for (const page of this.displayedPages) { - if (page > this.activeViewerPage && this.displayedAnnotations.get(page)) { + if (page > this.pdf.currentPage() && this.displayedAnnotations.get(page)) { break; } ++idx; @@ -449,7 +430,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy let idx = this.displayedPages.length - 1; const reverseDisplayedPages = [...this.displayedPages].reverse(); for (const page of reverseDisplayedPages) { - if (page < this.activeViewerPage && this.displayedAnnotations.get(page)) { + if (page < this.pdf.currentPage() && this.displayedAnnotations.get(page)) { break; } --idx; @@ -473,7 +454,6 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnDestroy const newValue = annotations.get(key).map(annotation => ({ item: annotation, isSelected: this.listingService.isSelected(annotation), - multiSelectActive: this.multiSelectService.active(), })); listItemsMap.set(key, newValue); }); diff --git a/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.html b/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.html index b1ad66c77..0d01ad29d 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.html @@ -2,7 +2,7 @@ (click)="pageSelected.emit(number)" (dblclick)="toggleReadState()" *ngIf="componentContext$ | async" - [class.active]="active" + [class.active]="isActive" [class.read]="read" [id]="'quick-nav-page-' + number" class="page-wrapper" @@ -13,7 +13,7 @@
-
+
diff --git a/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.ts b/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.ts index 41d14a15b..4472986f9 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'; import { PermissionsService } from '@services/permissions.service'; import { ViewedPagesService } from '@services/files/viewed-pages.service'; import { FilePreviewStateService } from '../../services/file-preview-state.service'; @@ -8,6 +8,7 @@ import { map, tap } from 'rxjs/operators'; import { AppConfig, ViewedPage } from '@red/domain'; import { ViewedPagesMapService } from '@services/files/viewed-pages-map.service'; import { pairwise } from 'rxjs'; +import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service'; interface PageIndicatorContext { isRotated: boolean; @@ -15,46 +16,42 @@ interface PageIndicatorContext { } @Component({ - selector: 'redaction-page-indicator [number] [read]', + selector: 'redaction-page-indicator', templateUrl: './page-indicator.component.html', styleUrls: ['./page-indicator.component.scss'], }) export class PageIndicatorComponent extends ContextComponent implements OnChanges, OnInit { - @Input() active = false; + @Input({ required: true }) number: number; @Input() showDottedIcon = false; - @Input() number: number; @Input() activeSelection = false; @Input() read = false; @Output() readonly pageSelected = new EventEmitter(); pageReadTimeout: number = null; - isRotated = false; readonly #config = getConfig(); constructor( private readonly _viewedPagesService: ViewedPagesService, private readonly _viewedPagesMapService: ViewedPagesMapService, - private readonly _changeDetectorRef: ChangeDetectorRef, private readonly _permissionService: PermissionsService, private readonly _state: FilePreviewStateService, + private readonly _pdf: PdfViewer, readonly pageRotationService: PageRotationService, ) { super(); } + get isActive() { + return this.number === this._pdf.currentPage(); + } + ngOnInit() { - const isRotated$ = this.pageRotationService.isRotated$(this.number).pipe( - tap(value => { - this.isRotated = value; - this._changeDetectorRef.detectChanges(); - }), - ); const assigneeChanged$ = this._state.file$.pipe( pairwise(), map(([prevFile, currFile]) => prevFile.assignee !== currFile.assignee), tap(assigneeChanged => assigneeChanged && this.handlePageRead()), ); - super._initContext({ isRotated: isRotated$, assigneeChanged: assigneeChanged$ }); + super._initContext({ assigneeChanged: assigneeChanged$ }); } ngOnChanges() { @@ -80,9 +77,9 @@ export class PageIndicatorComponent extends ContextComponent { - if (this.active && !this.read) { + if (this.isActive && !this.read) { await this.#markPageRead(); } }, this.#config.AUTO_READ_TIME * 1000); diff --git a/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.html b/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.html index ce9328da0..1b859c016 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.html @@ -3,7 +3,6 @@ (pageSelected)="pageSelectedByClick($event)" *ngFor="let pageNumber of pages; trackBy: trackBy" [activeSelection]="pageHasSelection(pageNumber)" - [active]="pageNumber === activePage" [number]="pageNumber" [read]="!!getViewedPage(viewedPages, pageNumber)" [showDottedIcon]="hasOnlyManualRedactionsAndIsExcluded(pageNumber)" diff --git a/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts b/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts index 8cbca4e2c..287c7db81 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts @@ -9,22 +9,21 @@ import { ViewedPagesMapService } from '@services/files/viewed-pages-map.service' import { ViewedPage } from '@red/domain'; @Component({ - selector: 'redaction-pages [pages] [activePage] [displayedAnnotations]', + selector: 'redaction-pages', templateUrl: './pages.component.html', styleUrls: ['./pages.component.scss'], }) export class PagesComponent { - @Input() pages: List; - @Input() activePage: number; - @Input() displayedAnnotations: Map; - readonly #pdf = inject(PdfViewer); + @Input({ required: true }) pages: List; + @Input({ required: true }) displayedAnnotations: Map; + protected readonly _pdf = inject(PdfViewer); readonly #state = inject(FilePreviewStateService); readonly viewedPages$ = inject(ViewedPagesMapService).get$(this.#state.fileId); readonly #multiSelectService = inject(MultiSelectService); readonly #listingService = inject(AnnotationsListingService); pageSelectedByClick($event: number): void { - this.#pdf.navigateTo($event); + this._pdf.navigateTo($event); } readonly trackBy = (_index: number, item: number) => item; diff --git a/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html b/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html index b85081c8e..9a914de05 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.html @@ -1,4 +1,4 @@ -