Merge branch 'extract-admin-screens'

apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.scss

@@ -1,5 +1,5 @@
-@use 'apps/red-ui/src/assets/styles/variables';
+@use 'variables';
-@use 'libs/common-ui/src/assets/styles/common-mixins';
+@use 'common-mixins';
 
 .content-container {
     background-color: variables.$grey-2;

apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.scss

@@ -1,5 +1,5 @@
 @use 'variables';
-@use 'libs/common-ui/src/assets/styles/common-mixins';
+@use 'common-mixins';
 
 .dialog-content {
     flex-direction: column;

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

@@ -6,16 +6,13 @@ import { AppStateGuard } from '@state/app-state.guard';
 import { DictionaryListingScreenComponent } from './screens/dictionary-listing/dictionary-listing-screen.component';
 import { DictionaryOverviewScreenComponent } from './screens/dictionary-overview/dictionary-overview-screen.component';
 import { PendingChangesGuard } from '@guards/can-deactivate.guard';
-import { RulesScreenComponent } from './screens/rules/rules-screen.component';
 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';
 import { DigitalSignatureScreenComponent } from './screens/digital-signature/digital-signature-screen.component';
 import { AuditScreenComponent } from './screens/audit/audit-screen.component';
 import { RouterModule, Routes } from '@angular/router';
-import { ReportsScreenComponent } from './screens/reports/reports-screen.component';
 import { DossierAttributesListingScreenComponent } from './screens/dossier-attributes-listing/dossier-attributes-listing-screen.component';
 import { TrashScreenComponent } from './screens/trash/trash-screen.component';
 import { GeneralConfigScreenComponent } from './screens/general-config/general-config-screen.component';
@@ -72,12 +69,13 @@ const routes: Routes = [
                     },
                     {
                         path: 'rules',
-                        component: RulesScreenComponent,
+                        component: BaseDossierTemplateScreenComponent,
                         canActivate: [CompositeRouteGuard],
                         canDeactivate: [PendingChangesGuard],
                         data: {
                             routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
                         },
+                        loadChildren: () => import('./screens/rules/rules.module').then(m => m.RulesModule),
                     },
                     {
                         path: 'file-attributes',
@@ -89,19 +87,21 @@ 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',
-                        component: ReportsScreenComponent,
+                        component: BaseDossierTemplateScreenComponent,
                         canActivate: [CompositeRouteGuard],
                         data: {
                             routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
                         },
+                        loadChildren: () => import('./screens/reports/reports.module').then(m => m.ReportsModule),
                     },
                     {
                         path: 'dossier-attributes',

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

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AdminRoutingModule } from './admin-routing.module';
-import { RulesScreenComponent } from './screens/rules/rules-screen.component';
 import { SharedModule } from '@shared/shared.module';
 import { AuditScreenComponent } from './screens/audit/audit-screen.component';
 import { DefaultColorsScreenComponent } from './screens/default-colors/default-colors-screen.component';
@@ -11,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';
@@ -31,7 +29,6 @@ import { FileAttributesCsvImportDialogComponent } from './dialogs/file-attribute
 import { ActiveFieldsListingComponent } from './dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component';
 import { AdminSideNavComponent } from './admin-side-nav/admin-side-nav.component';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
-import { ReportsScreenComponent } from './screens/reports/reports-screen.component';
 import { ResetPasswordComponent } from './dialogs/add-edit-user-dialog/reset-password/reset-password.component';
 import { UserDetailsComponent } from './dialogs/add-edit-user-dialog/user-details/user-details.component';
 import { AddEditDossierAttributeDialogComponent } from './dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component';
@@ -66,7 +63,6 @@ const dialogs = [
 ];
 
 const screens = [
-    RulesScreenComponent,
     AuditScreenComponent,
     DefaultColorsScreenComponent,
     DictionaryListingScreenComponent,
@@ -75,9 +71,7 @@ const screens = [
     FileAttributesListingScreenComponent,
     LicenseInformationScreenComponent,
     UserListingScreenComponent,
-    WatermarkScreenComponent,
     GeneralConfigScreenComponent,
-    ReportsScreenComponent,
     DossierAttributesListingScreenComponent,
     TrashScreenComponent,
 ];

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

@@ -1,88 +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" iqserHasScrollbar>
-            <div class="heading-xl" translate="reports-screen.title"></div>
-
-            <div class="description" translate="reports-screen.description"></div>
-
-            <div class="document-setup">
-                <div class="all-caps-label" translate="reports-screen.document-setup-heading"></div>
-                <div translate="reports-screen.document-setup-description"></div>
-            </div>
-
-            <div class="placeholders">
-                <div class="all-caps-label" translate="reports-screen.table-header.placeholders"></div>
-                <div class="all-caps-label" translate="reports-screen.table-header.description"></div>
-                <ng-container *ngFor="let placeholder of placeholders">
-                    <div class="placeholder">{{ placeholder.placeholder }}</div>
-                    <div
-                        [innerHTML]="placeholder.descriptionTranslation | translate: { attribute: placeholder.attributeName }"
-                        class="description"
-                    ></div>
-                </ng-container>
-            </div>
-        </div>
-
-        <div class="right-container" iqserHasScrollbar>
-            <div class="header">
-                <div class="heading" translate="reports-screen.report-documents"></div>
-                <iqser-circle-button
-                    (action)="fileInput.click()"
-                    *ngIf="permissionsService.isAdmin()"
-                    [tooltip]="'reports-screen.upload-document' | translate"
-                    icon="iqser:upload"
-                ></iqser-circle-button>
-            </div>
-
-            <div
-                (click)="fileInput.click()"
-                *ngIf="permissionsService.isAdmin() && !availableTemplates?.length"
-                class="template upload-button"
-                translate="reports-screen.upload-document"
-            ></div>
-
-            <div *ngFor="let template of availableTemplates" class="template">
-                <div class="name">
-                    {{ template.fileName }} {{ template.multiFileReport ? ('reports-screen.multi-file-report' | translate) : '' }}
-                </div>
-
-                <div class="actions">
-                    <iqser-circle-button
-                        (action)="download(template)"
-                        [iconSize]="12"
-                        [size]="18"
-                        icon="iqser:download"
-                    ></iqser-circle-button>
-                    <iqser-circle-button
-                        (action)="deleteTemplate(template)"
-                        *ngIf="permissionsService.isAdmin()"
-                        [iconSize]="12"
-                        [size]="18"
-                        icon="iqser:trash"
-                    ></iqser-circle-button>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-<input #fileInput (change)="uploadTemplate($event)" hidden type="file" />

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

@@ -0,0 +1,60 @@
+<div class="content-container" iqserHasScrollbar>
+    <div class="heading-xl" translate="reports-screen.title"></div>
+
+    <div class="description" translate="reports-screen.description"></div>
+
+    <div class="document-setup">
+        <div class="all-caps-label" translate="reports-screen.document-setup-heading"></div>
+        <div translate="reports-screen.document-setup-description"></div>
+    </div>
+
+    <div *ngIf="placeholders$ | async as placeholders" class="placeholders">
+        <div class="all-caps-label" translate="reports-screen.table-header.placeholders"></div>
+        <div class="all-caps-label" translate="reports-screen.table-header.description"></div>
+        <ng-container *ngFor="let placeholder of placeholders">
+            <div class="placeholder">{{ placeholder.placeholder }}</div>
+            <div
+                [innerHTML]="placeholder.descriptionTranslation | translate: { attribute: placeholder.attributeName }"
+                class="description"
+            ></div>
+        </ng-container>
+    </div>
+</div>
+
+<div *ngIf="availableTemplates$ | async as availableTemplates" class="right-container" iqserHasScrollbar>
+    <div class="header">
+        <div class="heading" translate="reports-screen.report-documents"></div>
+        <iqser-circle-button
+            (action)="fileInput.click()"
+            *ngIf="permissionsService.isAdmin()"
+            [tooltip]="'reports-screen.upload-document' | translate"
+            icon="iqser:upload"
+        ></iqser-circle-button>
+    </div>
+
+    <div
+        (click)="fileInput.click()"
+        *ngIf="permissionsService.isAdmin() && !availableTemplates?.length"
+        class="template upload-button"
+        translate="reports-screen.upload-document"
+    ></div>
+
+    <div *ngFor="let template of availableTemplates" class="template">
+        <div class="name">
+            {{ template.fileName }} {{ template.multiFileReport ? ('reports-screen.multi-file-report' | translate) : '' }}
+        </div>
+
+        <div class="actions">
+            <iqser-circle-button (action)="download(template)" [iconSize]="12" [size]="18" icon="iqser:download"></iqser-circle-button>
+            <iqser-circle-button
+                (action)="deleteTemplate(template)"
+                *ngIf="permissionsService.isAdmin()"
+                [iconSize]="12"
+                [size]="18"
+                icon="iqser:trash"
+            ></iqser-circle-button>
+        </div>
+    </div>
+</div>
+
+<input #fileInput (change)="uploadTemplate($event)" hidden type="file" />

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

@@ -1,6 +1,12 @@
 @use 'variables';
 @use 'common-mixins';
 
+:host {
+    flex-grow: 1;
+    overflow: hidden;
+    display: flex;
+}
+
 .content-container,
 .right-container {
     flex: 1;

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { IPlaceholdersResponse, IReportTemplate } from '@red/domain';
 import { download } from '@utils/file-download-utils';
 import { ConfirmationDialogInput, LoadingService, Toaster } from '@iqser/common-ui';
@@ -6,13 +6,13 @@ import { PermissionsService } from '@services/permissions.service';
 import {
     generalPlaceholdersDescriptionsTranslations,
     placeholdersDescriptionsTranslations,
-} from '../../translations/placeholders-descriptions-translations';
+} from '../../../translations/placeholders-descriptions-translations';
 import { removeBraces } from '@utils/functions';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { AdminDialogService } from '../../services/admin-dialog.service';
+import { AdminDialogService } from '../../../services/admin-dialog.service';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
 import { ReportTemplateService } from '@services/report-template.service';
-import { firstValueFrom } from 'rxjs';
+import { BehaviorSubject, firstValueFrom } from 'rxjs';
 
 interface Placeholder {
     placeholder: string;
@@ -27,10 +27,11 @@ const placeholderTypes: PlaceholderType[] = ['generalPlaceholders', 'fileAttribu
     selector: 'redaction-reports-screen',
     templateUrl: './reports-screen.component.html',
     styleUrls: ['./reports-screen.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ReportsScreenComponent implements OnInit {
-    placeholders: Placeholder[];
+    placeholders$ = new BehaviorSubject<Placeholder[]>([]);
-    availableTemplates: IReportTemplate[];
+    availableTemplates$ = new BehaviorSubject<IReportTemplate[]>([]);
 
     @ViewChild('fileInput') private _fileInput: ElementRef;
 
@@ -85,7 +86,7 @@ export class ReportsScreenComponent implements OnInit {
     }
 
     private async _uploadTemplate($event) {
-        const file = $event.target.files[0];
+        const file: File = $event.target.files[0];
 
         if (!this._isValidFile(file)) {
             this._toaster.error(_('reports-screen.invalid-upload'));
@@ -94,7 +95,7 @@ export class ReportsScreenComponent implements OnInit {
 
         const dossierTemplateId = this._dossierTemplatesService.activeDossierTemplateId;
 
-        if (this.availableTemplates.some(template => template.fileName === file.name)) {
+        if (this.availableTemplates$.value.some(template => template.fileName === file.name)) {
             const data = new ConfirmationDialogInput({
                 title: _('confirmation-dialog.report-template-same-name.title'),
                 question: _('confirmation-dialog.report-template-same-name.question'),
@@ -147,8 +148,10 @@ export class ReportsScreenComponent implements OnInit {
     }
 
     private async _loadReportTemplates() {
-        this.availableTemplates = await firstValueFrom(
+        this.availableTemplates$.next(
-            this._reportTemplateService.getAvailableReportTemplates(this._dossierTemplatesService.activeDossierTemplateId),
+            await firstValueFrom(
+                this._reportTemplateService.getAvailableReportTemplates(this._dossierTemplatesService.activeDossierTemplateId),
+            ),
         );
     }
 
@@ -156,12 +159,14 @@ export class ReportsScreenComponent implements OnInit {
         const placeholdersResponse: IPlaceholdersResponse = await firstValueFrom(
             this._reportTemplateService.getAvailablePlaceholders(this._dossierTemplatesService.activeDossierTemplateId),
         );
-        this.placeholders = placeholderTypes.flatMap(type =>
+        this.placeholders$.next(
-            placeholdersResponse[type].map(placeholder => ({
+            placeholderTypes.flatMap(type =>
-                placeholder,
+                placeholdersResponse[type].map(placeholder => ({
-                descriptionTranslation: this._getPlaceholderDescriptionTranslation(type, placeholder),
+                    placeholder,
-                attributeName: this._getAttributeName(placeholder),
+                    descriptionTranslation: this._getPlaceholderDescriptionTranslation(type, placeholder),
-            })),
+                    attributeName: this._getAttributeName(placeholder),
+                })),
+            ),
         );
     }
 

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

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { SharedModule } from '../../../shared/shared.module';
+import { ReportsScreenComponent } from './reports-screen/reports-screen.component';
+
+const routes = [{ path: '', component: ReportsScreenComponent }];
+
+@NgModule({
+    declarations: [ReportsScreenComponent],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule],
+})
+export class ReportsModule {}

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

@@ -1,35 +0,0 @@
-<section>
-    <div class="page-header">
-        <redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
-
-        <div class="flex-1 actions">
-            <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="editor-container">
-            <ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor>
-        </div>
-        <div *ngIf="changed && permissionsService.isAdmin() && !isLeaving" class="changes-box">
-            <iqser-icon-button
-                (action)="save()"
-                [label]="'rules-screen.save-changes' | translate"
-                [type]="iconButtonTypes.primary"
-                icon="iqser:check"
-            ></iqser-icon-button>
-            <div (click)="revert()" class="all-caps-label cancel" translate="rules-screen.revert-changes"></div>
-        </div>
-    </div>
-</section>

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

@@ -1,10 +0,0 @@
-.editor-container {
-    width: 100%;
-    padding-top: 15px;
-    padding-left: 15px;
-}
-
-ngx-monaco-editor {
-    height: 100%;
-    width: 100%;
-}

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

@@ -0,0 +1,11 @@
+<ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor>
+
+<div *ngIf="changed && permissionsService.isAdmin() && !isLeaving" class="changes-box">
+    <iqser-icon-button
+        (action)="save()"
+        [label]="'rules-screen.save-changes' | translate"
+        [type]="iconButtonTypes.primary"
+        icon="iqser:check"
+    ></iqser-icon-button>
+    <div (click)="revert()" class="all-caps-label cancel" translate="rules-screen.revert-changes"></div>
+</div>

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

@@ -0,0 +1,10 @@
+:host {
+    flex-grow: 1;
+    overflow: hidden;
+    padding: 15px 0 0 15px;
+}
+
+ngx-monaco-editor {
+    height: 100%;
+    width: 100%;
+}

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

@@ -5,7 +5,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { saveAs } from 'file-saver';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
-import { RulesService } from '../../services/rules.service';
+import { RulesService } from '../../../services/rules.service';
 import { firstValueFrom } from 'rxjs';
 import ICodeEditor = monaco.editor.ICodeEditor;
 import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;

apps/red-ui/src/app/modules/admin/screens/rules/rules.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 { RulesScreenComponent } from './rules-screen/rules-screen.component';
+import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
+
+const routes = [{ path: '', component: RulesScreenComponent }];
+
+@NgModule({
+    declarations: [RulesScreenComponent],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, MonacoEditorModule],
+})
+export class RulesModule {}

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

@@ -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>

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>

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

@@ -1,5 +1,11 @@
 @use 'variables';
 
+:host {
+    display: flex;
+    flex-grow: 1;
+    overflow: hidden;
+}
+
 .content-container {
     order: 1;
 

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';

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 {}

apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss

@@ -1,5 +1,5 @@
-@use 'libs/common-ui/src/assets/styles/common-mixins';
+@use 'common-mixins';
-@use 'apps/red-ui/src/assets/styles/variables';
+@use 'variables';
 
 .search-container {
     margin-top: 16px;

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/view-mode-selection/view-mode-selection.component.scss

@@ -1,4 +1,4 @@
-@use 'apps/red-ui/src/assets/styles/variables';
+@use 'variables';
 
 .view-mode-selection {
     border-right: 1px solid variables.$separator;

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.scss

@@ -1,4 +1,4 @@
-@use 'apps/red-ui/src/assets/styles/variables';
+@use 'variables';
 
 .annotation-actions {
     display: none;

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/document-info/document-info.component.scss

@@ -1,5 +1,5 @@
-@use 'apps/red-ui/src/assets/styles/variables';
+@use 'variables';
-@use 'libs/common-ui/src/assets/styles/common-mixins';
+@use 'common-mixins';
 
 :host {
     display: block;

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.scss

@@ -1,5 +1,5 @@
-@use 'apps/red-ui/src/assets/styles/variables';
+@use 'variables';
-@use 'libs/common-ui/src/assets/styles/common-mixins';
+@use 'common-mixins';
 
 .read-only {
     padding: 13px 16px;

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/page-exclusion/page-exclusion.component.scss

@@ -1,5 +1,5 @@
-@use 'apps/red-ui/src/assets/styles/variables';
+@use 'variables';
-@use 'libs/common-ui/src/assets/styles/common-mixins';
+@use 'common-mixins';
 
 :host {
     height: 100%;

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/page-indicator/page-indicator.component.scss

@@ -1,4 +1,4 @@
-@use 'apps/red-ui/src/assets/styles/variables';
+@use 'variables';
 
 .page-wrapper {
     color: variables.$accent;

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.scss

@@ -1,4 +1,4 @@
-@use 'apps/red-ui/src/assets/styles/variables';
+@use 'variables';
 
 .page {
     display: flex;