From c3f8a2c39dd52865c9973e9e43562f584a225144 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Thu, 21 Apr 2022 14:30:52 +0300 Subject: [PATCH] RED-3850: reload file on specific page --- .../watermark-screen.component.ts | 54 +++++-------------- .../pdf-viewer/pdf-viewer.component.ts | 8 +-- .../file-preview-screen.component.html | 2 +- .../services/pdf-viewer.service.ts | 16 +++++- 4 files changed, 31 insertions(+), 49 deletions(-) diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts index 02340d9d6..28c15e08d 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, ElementRef, Inject, ViewChild } from '@angular/core'; +import { ChangeDetectorRef, Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core'; import { PermissionsService } from '@services/permissions.service'; import WebViewer, { WebViewerInstance } from '@pdftron/webviewer'; import { environment } from '@environments/environment'; @@ -9,7 +9,6 @@ import { IWatermark, WatermarkOrientation, WatermarkOrientations } from '@red/do import { BASE_HREF } from '../../../../../tokens'; import { stampPDFPage } from '@utils/page-stamper'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service'; import { WatermarkService } from '@shared/services/watermark.service'; import { firstValueFrom, Observable, of, switchMap } from 'rxjs'; import { catchError, tap } from 'rxjs/operators'; @@ -30,7 +29,7 @@ export const DEFAULT_WATERMARK: IWatermark = { templateUrl: './watermark-screen.component.html', styleUrls: ['./watermark-screen.component.scss'], }) -export class WatermarkScreenComponent { +export class WatermarkScreenComponent implements OnInit { readonly iconButtonTypes = IconButtonTypes; readonly form: FormGroup = this._getForm(); readonly #dossierTemplateId: string; @@ -47,7 +46,6 @@ export class WatermarkScreenComponent { private readonly _http: HttpClient, private readonly _changeDetectorRef: ChangeDetectorRef, private readonly _formBuilder: FormBuilder, - private readonly _dossierTemplatesService: DossierTemplatesService, private readonly _loadingService: LoadingService, private readonly _route: ActivatedRoute, ) { @@ -179,43 +177,19 @@ export class WatermarkScreenComponent { } private _getForm(): FormGroup { + const defaultValue = { + value: null, + disabled: !this.permissionsService.isAdmin(), + }; + const defaultFormControl = [{ ...defaultValue }, Validators.required]; + return this._formBuilder.group({ - text: [{ value: null, disabled: !this.permissionsService.isAdmin() }], - hexColor: [ - { - value: null, - disabled: !this.permissionsService.isAdmin(), - }, - Validators.required, - ], - opacity: [ - { - value: null, - disabled: !this.permissionsService.isAdmin(), - }, - Validators.required, - ], - fontSize: [ - { - value: null, - disabled: !this.permissionsService.isAdmin(), - }, - Validators.required, - ], - fontType: [ - { - value: null, - disabled: !this.permissionsService.isAdmin(), - }, - Validators.required, - ], - orientation: [ - { - value: null, - disabled: !this.permissionsService.isAdmin(), - }, - Validators.required, - ], + text: [{ ...defaultValue }], + hexColor: [...defaultFormControl], + opacity: [...defaultFormControl], + fontSize: [...defaultFormControl], + fontType: [...defaultFormControl], + orientation: [...defaultFormControl], }); } } diff --git a/apps/red-ui/src/app/modules/file-preview/components/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/file-preview/components/pdf-viewer/pdf-viewer.component.ts index 61d2493de..131f4c488 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/pdf-viewer/pdf-viewer.component.ts @@ -29,7 +29,6 @@ import { ConfigService } from '@services/config.service'; import { AutoUnsubscribe, ConfirmationDialogInput, LoadingService } from '@iqser/common-ui'; import { PdfViewer } from '../../services/pdf-viewer.service'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -import { ActivatedRoute } from '@angular/router'; import { toPosition } from '../../../dossier/utils/pdf-calculation.utils'; import { ViewModeService } from '../../services/view-mode.service'; import { MultiSelectService } from '../../services/multi-select.service'; @@ -39,7 +38,7 @@ import { PageRotationService } from '../../services/page-rotation.service'; import { ALLOWED_KEYBOARD_SHORTCUTS, HeaderElements, TextPopups } from '../../shared/constants'; import { FilePreviewDialogService } from '../../services/file-preview-dialog.service'; import { loadCompareDocumentWrapper } from '../../../dossier/utils/compare-mode.utils'; -import { from, fromEvent } from 'rxjs'; +import { from } from 'rxjs'; import { FileDataService } from '../../services/file-data.service'; import { ViewerHeaderConfigService } from '../../services/viewer-header-config.service'; import { TooltipsService } from '../../services/tooltips.service'; @@ -73,7 +72,6 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha private readonly _manualRedactionService: ManualRedactionService, private readonly _dialogService: FilePreviewDialogService, private readonly _ngZone: NgZone, - private readonly _activatedRoute: ActivatedRoute, private readonly _userPreferenceService: UserPreferenceService, private readonly _annotationDrawService: AnnotationDrawService, private readonly _annotationActionsService: AnnotationActionsService, @@ -190,7 +188,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha this._setSelectionMode(); this._configureElements(); this.pdfViewer.disableHotkeys(); - await this._configureTextPopup(); + this._configureTextPopup(); this.annotationManager.addEventListener('annotationSelected', (annotations: Annotation[], action) => { let nextAnnotations: Annotation[]; @@ -236,8 +234,6 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha return this._handleCustomActions(); }); - fromEvent(this.documentViewer, 'pageNumberUpdated').subscribe((page: number) => console.log(`Navigated to page ${page}`)); - this.documentViewer.addEventListener('documentLoaded', this._setReadyAndInitialState); this.documentViewer.addEventListener('keyUp', ($event: KeyboardEvent) => { diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html index 28f4c98d6..355e6d228 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html +++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html @@ -89,7 +89,7 @@ #fileWorkloadComponent (selectPage)="selectPage($event)" *ngIf="!file.excluded" - [activeViewerPage]="pdf.currentPage" + [activeViewerPage]="pdf.currentPage$ | async" [annotationActionsTemplate]="annotationActionsTemplate" [dialogRef]="dialogRef" [file]="file" diff --git a/apps/red-ui/src/app/modules/file-preview/services/pdf-viewer.service.ts b/apps/red-ui/src/app/modules/file-preview/services/pdf-viewer.service.ts index d27fa7a64..efb39eb18 100644 --- a/apps/red-ui/src/app/modules/file-preview/services/pdf-viewer.service.ts +++ b/apps/red-ui/src/app/modules/file-preview/services/pdf-viewer.service.ts @@ -9,9 +9,10 @@ import { environment } from '@environments/environment'; import { DISABLED_HOTKEYS } from '../shared/constants'; import { Observable, Subject } from 'rxjs'; import { NGXLogger } from 'ngx-logger'; -import { tap } from 'rxjs/operators'; -import { ListingService, shareLast } from '@iqser/common-ui'; +import { map, tap } from 'rxjs/operators'; +import { ListingService, shareDistinctLast, shareLast } from '@iqser/common-ui'; import { MultiSelectService } from './multi-select.service'; +import { ActivatedRoute } from '@angular/router'; import Annotation = Core.Annotations.Annotation; @Injectable() @@ -19,17 +20,23 @@ export class PdfViewer { instance?: WebViewerInstance; readonly documentLoaded$: Observable; + readonly currentPage$ = this._activatedRoute.queryParamMap.pipe( + map(params => Number(params.get('page') ?? '1')), + shareDistinctLast(), + ); readonly #documentLoaded$ = new Subject(); constructor( @Inject(BASE_HREF) private readonly _baseHref: string, private readonly _viewModeService: ViewModeService, + private readonly _activatedRoute: ActivatedRoute, private readonly _multiSelectService: MultiSelectService, private readonly _listingService: ListingService, private readonly _logger: NGXLogger, ) { this.documentLoaded$ = this.#documentLoaded$.asObservable().pipe( tap(() => this._logger.debug('[PDF] Loaded')), + tap(() => this.#setCurrentPage()), shareLast(), ); } @@ -244,4 +251,9 @@ export class PdfViewer { #convertPath(path: string) { return `${this._baseHref}${path}`; } + + #setCurrentPage() { + const currentDocPage = this._activatedRoute.snapshot.queryParamMap.get('page'); + this.documentViewer.setCurrentPage(Number(currentDocPage ?? '1')); + } }