From 7d818cb9964ae8c99654f5535571e81fb4f121dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 7 Feb 2022 14:51:48 +0200
Subject: [PATCH] Watermark module

---
 .../app/modules/admin/admin-routing.module.ts |   4 +-
 .../src/app/modules/admin/admin.module.ts     |   2 -
 .../watermark/watermark-screen.component.html | 127 ------------------
 .../watermark-screen.component.html           | 104 ++++++++++++++
 .../watermark-screen.component.scss           |   8 +-
 .../watermark-screen.component.ts             |   2 +-
 .../screens/watermark/watermark.module.ts     |  14 ++
 7 files changed, 128 insertions(+), 133 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
 create mode 100644 apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html
 rename apps/red-ui/src/app/modules/admin/screens/watermark/{ => watermark-screen}/watermark-screen.component.scss (93%)
 rename apps/red-ui/src/app/modules/admin/screens/watermark/{ => watermark-screen}/watermark-screen.component.ts (99%)
 create mode 100644 apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts

diff --git a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
index 70483cc45..0db6c0412 100644
--- a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
@@ -7,7 +7,6 @@ import { DictionaryListingScreenComponent } from './screens/dictionary-listing/d
 import { DictionaryOverviewScreenComponent } from './screens/dictionary-overview/dictionary-overview-screen.component';
 import { PendingChangesGuard } from '@guards/can-deactivate.guard';
 import { FileAttributesListingScreenComponent } from './screens/file-attributes-listing/file-attributes-listing-screen.component';
-import { WatermarkScreenComponent } from './screens/watermark/watermark-screen.component';
 import { DefaultColorsScreenComponent } from './screens/default-colors/default-colors-screen.component';
 import { UserListingScreenComponent } from './screens/user-listing/user-listing-screen.component';
 import { LicenseInformationScreenComponent } from './screens/license-information/license-information-screen.component';
@@ -89,11 +88,12 @@ const routes: Routes = [
                     },
                     {
                         path: 'watermark',
-                        component: WatermarkScreenComponent,
+                        component: BaseDossierTemplateScreenComponent,
                         canActivate: [CompositeRouteGuard],
                         data: {
                             routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
                         },
+                        loadChildren: () => import('./screens/watermark/watermark.module').then(m => m.WatermarkModule),
                     },
                     {
                         path: 'reports',
diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts
index b8a1d2616..a3092e347 100644
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin.module.ts
@@ -10,7 +10,6 @@ import { DigitalSignatureScreenComponent } from './screens/digital-signature/dig
 import { FileAttributesListingScreenComponent } from './screens/file-attributes-listing/file-attributes-listing-screen.component';
 import { LicenseInformationScreenComponent } from './screens/license-information/license-information-screen.component';
 import { UserListingScreenComponent } from './screens/user-listing/user-listing-screen.component';
-import { WatermarkScreenComponent } from './screens/watermark/watermark-screen.component';
 import { DossierTemplateBreadcrumbsComponent } from './components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { AddEditFileAttributeDialogComponent } from './dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component';
@@ -73,7 +72,6 @@ const screens = [
     FileAttributesListingScreenComponent,
     LicenseInformationScreenComponent,
     UserListingScreenComponent,
-    WatermarkScreenComponent,
     GeneralConfigScreenComponent,
     ReportsScreenComponent,
     DossierAttributesListingScreenComponent,
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
deleted file mode 100644
index b279ead7e..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
+++ /dev/null
@@ -1,127 +0,0 @@
-<section>
-    <div class="page-header">
-        <redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
-
-        <div class="actions flex-1">
-            <redaction-dossier-template-actions></redaction-dossier-template-actions>
-
-            <iqser-circle-button
-                [routerLink]="['../..']"
-                [tooltip]="'common.close' | translate"
-                icon="iqser:close"
-                tooltipPosition="below"
-            ></iqser-circle-button>
-        </div>
-    </div>
-
-    <div class="content-inner">
-        <div class="overlay-shadow"></div>
-
-        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
-
-        <div class="content-container">
-            <div #viewer class="viewer"></div>
-            <div *ngIf="changed && permissionsService.isAdmin()" class="changes-box">
-                <iqser-icon-button
-                    (action)="save()"
-                    [disabled]="form.invalid"
-                    [label]="'watermark-screen.action.save' | translate"
-                    [type]="iconButtonTypes.primary"
-                    icon="iqser:check"
-                ></iqser-icon-button>
-                <div (click)="revert()" class="all-caps-label cancel" translate="watermark-screen.action.revert"></div>
-            </div>
-        </div>
-
-        <div class="right-container" iqserHasScrollbar>
-            <div class="heading-xl" translate="watermark-screen.title"></div>
-            <form (keyup)="configChanged()" [formGroup]="form">
-                <div class="iqser-input-group w-300">
-                    <textarea
-                        (mousemove)="triggerChanges()"
-                        [placeholder]="'watermark-screen.form.text-placeholder' | translate"
-                        class="w-full"
-                        formControlName="text"
-                        iqserHasScrollbar
-                        name="text"
-                        rows="4"
-                        type="text"
-                    ></textarea>
-                </div>
-
-                <div class="iqser-input-group">
-                    <label class="all-caps-label mb-8" translate="watermark-screen.form.orientation"></label>
-                    <div class="square-options">
-                        <div
-                            (click)="setValue('orientation', option)"
-                            *ngFor="let option of ['VERTICAL', 'HORIZONTAL', 'DIAGONAL']"
-                            [class.active]="form.get('orientation').value === option"
-                            [class.disabled]="form.get('orientation').disabled"
-                            [ngClass]="option"
-                        >
-                            <span>ABC</span>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="iqser-input-group">
-                    <label class="all-caps-label" translate="watermark-screen.form.font-size"></label>
-                    <mat-slider (change)="configChanged()" color="primary" formControlName="fontSize" max="50" min="5"></mat-slider>
-                </div>
-
-                <div class="iqser-input-group">
-                    <label class="all-caps-label" translate="watermark-screen.form.opacity"></label>
-                    <mat-slider (change)="configChanged()" color="primary" formControlName="opacity" min="1"></mat-slider>
-                </div>
-
-                <div class="iqser-input-group w-150">
-                    <label class="all-caps-label mb-5" translate="watermark-screen.form.color"></label>
-                    <input
-                        [placeholder]="'add-edit-dictionary.form.color-placeholder' | translate"
-                        class="hex-color-input"
-                        formControlName="hexColor"
-                        name="hexColor"
-                        type="text"
-                    />
-                    <div
-                        (colorPickerChange)="setValue('hexColor', $event)"
-                        [class.disabled]="form.get('hexColor').disabled"
-                        [colorPicker]="form.get('hexColor').value"
-                        [cpDisabled]="form.get('hexColor').disabled"
-                        [cpOutputFormat]="'hex'"
-                        [cpPosition]="'top-right'"
-                        [cpUseRootViewContainer]="true"
-                        [style.background]="form.get('hexColor').value"
-                        class="input-icon"
-                    >
-                        <mat-icon
-                            *ngIf="!form.get('hexColor')?.value || form.get('hexColor').value?.length === 0"
-                            svgIcon="red:color-picker"
-                        ></mat-icon>
-                    </div>
-                </div>
-
-                <div class="iqser-input-group">
-                    <label class="all-caps-label mb-8" translate="watermark-screen.form.font-type"></label>
-                    <div class="square-options">
-                        <div
-                            (click)="setValue('fontType', option.value)"
-                            *ngFor="
-                                let option of [
-                                    { value: 'times-new-roman', display: 'Times' },
-                                    { value: 'helvetica', display: 'Helvetica' },
-                                    { value: 'courier', display: 'Courier' }
-                                ]
-                            "
-                            [class.active]="form.get('fontType').value === option.value"
-                            [class.disabled]="form.get('fontType').disabled"
-                            [ngClass]="option.value"
-                        >
-                            {{ option.display }}
-                        </div>
-                    </div>
-                </div>
-            </form>
-        </div>
-    </div>
-</section>
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html
new file mode 100644
index 000000000..549beee22
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html
@@ -0,0 +1,104 @@
+<div class="content-container">
+    <div #viewer class="viewer"></div>
+    <div *ngIf="changed && permissionsService.isAdmin()" class="changes-box">
+        <iqser-icon-button
+            (action)="save()"
+            [disabled]="form.invalid"
+            [label]="'watermark-screen.action.save' | translate"
+            [type]="iconButtonTypes.primary"
+            icon="iqser:check"
+        ></iqser-icon-button>
+        <div (click)="revert()" class="all-caps-label cancel" translate="watermark-screen.action.revert"></div>
+    </div>
+</div>
+
+<div class="right-container" iqserHasScrollbar>
+    <div class="heading-xl" translate="watermark-screen.title"></div>
+    <form (keyup)="configChanged()" [formGroup]="form">
+        <div class="iqser-input-group w-300">
+            <textarea
+                (mousemove)="triggerChanges()"
+                [placeholder]="'watermark-screen.form.text-placeholder' | translate"
+                class="w-full"
+                formControlName="text"
+                iqserHasScrollbar
+                name="text"
+                rows="4"
+                type="text"
+            ></textarea>
+        </div>
+
+        <div class="iqser-input-group">
+            <label class="all-caps-label mb-8" translate="watermark-screen.form.orientation"></label>
+            <div class="square-options">
+                <div
+                    (click)="setValue('orientation', option)"
+                    *ngFor="let option of ['VERTICAL', 'HORIZONTAL', 'DIAGONAL']"
+                    [class.active]="form.get('orientation').value === option"
+                    [class.disabled]="form.get('orientation').disabled"
+                    [ngClass]="option"
+                >
+                    <span>ABC</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="iqser-input-group">
+            <label class="all-caps-label" translate="watermark-screen.form.font-size"></label>
+            <mat-slider (change)="configChanged()" color="primary" formControlName="fontSize" max="50" min="5"></mat-slider>
+        </div>
+
+        <div class="iqser-input-group">
+            <label class="all-caps-label" translate="watermark-screen.form.opacity"></label>
+            <mat-slider (change)="configChanged()" color="primary" formControlName="opacity" min="1"></mat-slider>
+        </div>
+
+        <div class="iqser-input-group w-150">
+            <label class="all-caps-label mb-5" translate="watermark-screen.form.color"></label>
+            <input
+                [placeholder]="'add-edit-dictionary.form.color-placeholder' | translate"
+                class="hex-color-input"
+                formControlName="hexColor"
+                name="hexColor"
+                type="text"
+            />
+            <div
+                (colorPickerChange)="setValue('hexColor', $event)"
+                [class.disabled]="form.get('hexColor').disabled"
+                [colorPicker]="form.get('hexColor').value"
+                [cpDisabled]="form.get('hexColor').disabled"
+                [cpOutputFormat]="'hex'"
+                [cpPosition]="'top-right'"
+                [cpUseRootViewContainer]="true"
+                [style.background]="form.get('hexColor').value"
+                class="input-icon"
+            >
+                <mat-icon
+                    *ngIf="!form.get('hexColor')?.value || form.get('hexColor').value?.length === 0"
+                    svgIcon="red:color-picker"
+                ></mat-icon>
+            </div>
+        </div>
+
+        <div class="iqser-input-group">
+            <label class="all-caps-label mb-8" translate="watermark-screen.form.font-type"></label>
+            <div class="square-options">
+                <div
+                    (click)="setValue('fontType', option.value)"
+                    *ngFor="
+                        let option of [
+                            { value: 'times-new-roman', display: 'Times' },
+                            { value: 'helvetica', display: 'Helvetica' },
+                            { value: 'courier', display: 'Courier' }
+                        ]
+                    "
+                    [class.active]="form.get('fontType').value === option.value"
+                    [class.disabled]="form.get('fontType').disabled"
+                    [ngClass]="option.value"
+                >
+                    {{ option.display }}
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss
similarity index 93%
rename from apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss
rename to apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss
index 9e316aa55..a6b99d8d3 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss
@@ -1,4 +1,10 @@
-@use 'variables';
+@use 'apps/red-ui/src/assets/styles/variables';
+
+:host {
+    display: flex;
+    flex-grow: 1;
+    overflow: hidden;
+}
 
 .content-container {
     order: 1;
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts
similarity index 99%
rename from apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts
rename to apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts
index 607ef3ca4..19b0b63e5 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts
@@ -6,7 +6,7 @@ import { HttpClient } from '@angular/common/http';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Debounce, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
 import { IWatermark, WatermarkOrientation, WatermarkOrientations } from '@red/domain';
-import { BASE_HREF } from '../../../../tokens';
+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';
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts
new file mode 100644
index 000000000..019258112
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { SharedModule } from '@shared/shared.module';
+import { WatermarkScreenComponent } from './watermark-screen/watermark-screen.component';
+import { ColorPickerModule } from 'ngx-color-picker';
+
+const routes = [{ path: '', component: WatermarkScreenComponent }];
+
+@NgModule({
+    declarations: [WatermarkScreenComponent],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, ColorPickerModule],
+})
+export class WatermarkModule {}