Merge branch 'RED-6245' into dev

apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.html

@@ -0,0 +1,11 @@
+<div class="pagination noselect">
+    <div id="portraitPage" class="page-button" (click)="changePage.emit(1)">
+        <mat-icon class="chevron-icon" svgIcon="red:nav-prev"></mat-icon>
+        Portrait
+    </div>
+    <div class="separator">/</div>
+    <div id="landscapePage" class="page-button" (click)="changePage.emit(2)">
+        Landscape
+        <mat-icon class="chevron-icon" svgIcon="red:nav-next"></mat-icon>
+    </div>
+</div>

apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.scss

@@ -0,0 +1,42 @@
+.pagination {
+    z-index: 1;
+    position: absolute;
+    bottom: 20px;
+    right: calc(50% - (var(--viewer-width) / 2));
+    transform: translate(-50%);
+    background: var(--iqser-background);
+    color: var(--iqser-grey-7);
+    border: 1px solid var(--iqser-grey-7);
+    border-radius: 8px;
+    padding: 6px 2px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > div {
+        height: 16px;
+        cursor: default;
+    }
+
+    .separator {
+        padding-left: 2px;
+        padding-right: 2px;
+    }
+
+    .page-button {
+        cursor: pointer;
+        align-items: center;
+        display: inline-flex;
+
+        &:hover {
+            color: var(--iqser-text);
+        }
+    }
+
+    .chevron-icon {
+        height: 16px;
+        transform: rotate(-90deg);
+        padding-left: 4px;
+        padding-right: 4px;
+    }
+}

apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts

@@ -0,0 +1,10 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+    selector: 'redaction-paginator',
+    templateUrl: './paginator.component.html',
+    styleUrls: ['./paginator.component.scss'],
+})
+export class PaginatorComponent {
+    @Output() readonly changePage = new EventEmitter<number>();
+}

apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html

@@ -1,5 +1,6 @@
 <div class="content-container">
     <div class="viewer" id="viewer"></div>
+    <redaction-paginator *ngIf="loaded$ | async" (changePage)="navigateTo($event)"></redaction-paginator>
 
     <div *ngIf="changed && currentUser.isAdmin" class="changes-box">
         <iqser-icon-button

apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss

@@ -5,6 +5,7 @@
     flex-direction: row !important;
     flex-grow: 1;
     overflow: hidden;
+    --viewer-width: 380px;
 }
 
 .content-container {
@@ -12,6 +13,7 @@
 
     .viewer {
         height: 100%;
+        width: 100%;
     }
 }
 

apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts

@@ -18,7 +18,7 @@ import { DOSSIER_TEMPLATE_ID, type IWatermark, type User, WATERMARK_ID, Watermar
 import { stampPDFPage } from '@utils/page-stamper';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { WatermarkService } from '@services/entity-services/watermark.service';
-import { firstValueFrom, Observable, of } from 'rxjs';
+import { BehaviorSubject, firstValueFrom, Observable, of } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { LicenseService } from '@services/license.service';
 import { UserPreferenceService } from '@users/user-preference.service';
@@ -64,6 +64,8 @@ export class WatermarkScreenComponent {
     readonly orientationOptions = ['DIAGONAL', 'HORIZONTAL', 'VERTICAL'];
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
     readonly #watermarkId = Number(getParam(WATERMARK_ID));
+    readonly #loaded$ = new BehaviorSubject(false);
+    readonly loaded$ = this.#loaded$.asObservable();
     private _instance: WebViewerInstance;
     private _watermark: Partial<IWatermark> = {};
 
@@ -167,6 +169,7 @@ export class WatermarkScreenComponent {
         this._instance.UI.setTheme(this._userPreferenceService.getTheme());
 
         this._instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
+            this.#loaded$.next(true);
             this._loadingService.stop();
             await this._drawWatermark();
         });
@@ -201,11 +204,11 @@ export class WatermarkScreenComponent {
             this.form.controls.orientation.value,
             this.form.controls.opacity.value,
             this.form.controls.hexColor.value,
-            [1],
+            [1, 2],
             this._licenseService.activeLicenseKey,
         );
         this._instance.Core.documentViewer.refreshAll();
-        this._instance.Core.documentViewer.updateView([0], 0);
+        this._instance.Core.documentViewer.updateView([0, 1], 0);
     }
 
     private _getForm() {
@@ -225,4 +228,8 @@ export class WatermarkScreenComponent {
 
         return form;
     }
+
+    navigateTo($event: number) {
+        this._instance.Core.documentViewer.displayPageLocation($event, 0, 0);
+    }
 }

apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts

@@ -18,6 +18,7 @@ import { RedRoleGuard } from '@users/red-role.guard';
 import { WATERMARK_ID } from '@red/domain';
 import { WatermarkExistsGuard } from '@guards/watermark-exists.guard';
 import { TranslateModule } from '@ngx-translate/core';
+import { PaginatorComponent } from './paginator/paginator.component';
 
 const routes = [
     {
@@ -47,7 +48,7 @@ const routes = [
 ];
 
 @NgModule({
-    declarations: [WatermarkScreenComponent, WatermarksListingScreenComponent],
+    declarations: [WatermarkScreenComponent, WatermarksListingScreenComponent, PaginatorComponent],
     imports: [
         RouterModule.forChild(routes),
         CommonModule,