RED-3850: reload file on specific page

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],
         });
     }
 }

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) => {

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"

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<boolean>;
+    readonly currentPage$ = this._activatedRoute.queryParamMap.pipe(
+        map(params => Number(params.get('page') ?? '1')),
+        shareDistinctLast(),
+    );
     readonly #documentLoaded$ = new Subject<boolean>();
 
     constructor(
         @Inject(BASE_HREF) private readonly _baseHref: string,
         private readonly _viewModeService: ViewModeService,
+        private readonly _activatedRoute: ActivatedRoute,
         private readonly _multiSelectService: MultiSelectService,
         private readonly _listingService: ListingService<AnnotationWrapper>,
         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'));
+    }
 }