Pull request #368: VM/RED-4247

Merge in RED/ui from VM/RED-4247 to master

* commit '4c14a86fbe60887b54c03da375f13cdb9d634629':
  RED-4247 - When I edit or create a dossier as n owner I want to select from multiple watermark configurations
  RED-4247 - WIP on watermarks list

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

@@ -15,12 +15,14 @@ import { GeneralConfigScreenComponent } from './screens/general-config/general-c
 import { BaseAdminScreenComponent } from './base-admin-screen/base-admin-screen.component';
 import { BaseDossierTemplateScreenComponent } from './base-dossier-templates-screen/base-dossier-template-screen.component';
 import { DossierTemplatesGuard } from '@guards/dossier-templates.guard';
-import { DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@red/domain';
+import { DOSSIER_TEMPLATE_ID, ENTITY_TYPE, WATERMARK_ID } from '@red/domain';
 import { DossierTemplateExistsGuard } from '@guards/dossier-template-exists.guard';
 import { EntityExistsGuard } from '@guards/entity-exists-guard.service';
 import { DossierStatesListingScreenComponent } from './screens/dossier-states-listing/dossier-states-listing-screen.component';
 import { BaseEntityScreenComponent } from './base-entity-screen/base-entity-screen.component';
 import { PermissionsGuard } from '../../guards/permissions-guard';
+import { WatermarksListingScreenComponent } from './screens/watermarks-listing/watermarks-listing-screen.component';
+import { BaseWatermarkScreenComponent } from './base-watermark-screen/base-watermark-screen.component';
 
 const dossierTemplateIdRoutes: Routes = [
     {
@@ -69,13 +71,26 @@ const dossierTemplateIdRoutes: Routes = [
         },
     },
     {
-        path: 'watermark',
+        path: 'watermarks',
-        component: BaseDossierTemplateScreenComponent,
+        children: [
-        canActivate: [CompositeRouteGuard],
+            {
-        data: {
+                path: '',
-            routeGuards: [AuthGuard, RedRoleGuard],
+                component: WatermarksListingScreenComponent,
-        },
+                canActivate: [CompositeRouteGuard],
-        loadChildren: () => import('./screens/watermark/watermark.module').then(m => m.WatermarkModule),
+                data: {
+                    routeGuards: [AuthGuard, RedRoleGuard],
+                },
+            },
+            {
+                path: `:${WATERMARK_ID}`,
+                component: BaseWatermarkScreenComponent,
+                canActivate: [CompositeRouteGuard],
+                loadChildren: () => import('./screens/watermark/watermark.module').then(m => m.WatermarkModule),
+                data: {
+                    routeGuards: [AuthGuard, RedRoleGuard],
+                },
+            },
+        ],
     },
     {
         path: 'reports',

apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.ts

@@ -59,7 +59,7 @@ export class AdminSideNavComponent implements OnInit {
                 hideIf: !this.userPreferenceService.areDevFeaturesEnabled,
             },
             { screen: 'default-colors', label: _('admin-side-nav.default-colors') },
-            { screen: 'watermark', label: _('admin-side-nav.watermark') },
+            { screen: 'watermarks', label: _('admin-side-nav.watermarks') },
             { screen: 'file-attributes', label: _('admin-side-nav.file-attributes') },
             { screen: 'dossier-attributes', label: _('admin-side-nav.dossier-attributes') },
             { screen: 'dossier-states', label: _('admin-side-nav.dossier-states') },

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

@@ -46,6 +46,8 @@ import { SystemPreferencesFormComponent } from './screens/general-config/system-
 import { ConfigureCertificateDialogComponent } from './dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component';
 import { PkcsSignatureConfigurationComponent } from './dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component';
 import { KmsSignatureConfigurationComponent } from './dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component';
+import { WatermarksListingScreenComponent } from './screens/watermarks-listing/watermarks-listing-screen.component';
+import { BaseWatermarkScreenComponent } from './base-watermark-screen/base-watermark-screen.component';
 
 const dialogs = [
     AddEditCloneDossierTemplateDialogComponent,
@@ -73,6 +75,7 @@ const screens = [
     GeneralConfigScreenComponent,
     DossierAttributesListingScreenComponent,
     DossierStatesListingScreenComponent,
+    WatermarksListingScreenComponent,
 ];
 
 const components = [
@@ -85,6 +88,7 @@ const components = [
     BaseAdminScreenComponent,
     BaseDossierTemplateScreenComponent,
     BaseEntityScreenComponent,
+    BaseWatermarkScreenComponent,
     GeneralConfigFormComponent,
     SmtpFormComponent,
     SystemPreferencesFormComponent,

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

@@ -0,0 +1,27 @@
+<section>
+    <div class="page-header">
+        <redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
+
+        <div class="flex-1 actions">
+            <iqser-circle-button
+                *ngIf="editMode"
+                (action)="openDeleteWatermarkDialog($event)"
+                [tooltip]="'watermarks-listing.action.delete' | translate"
+                icon="iqser:trash"
+            ></iqser-circle-button>
+
+            <iqser-circle-button
+                [routerLink]="['../../watermarks']"
+                [tooltip]="'common.close' | translate"
+                icon="iqser:close"
+                tooltipPosition="below"
+            ></iqser-circle-button>
+        </div>
+    </div>
+
+    <div class="content-inner">
+        <div class="overlay-shadow"></div>
+
+        <router-outlet></router-outlet>
+    </div>
+</section>

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

@@ -0,0 +1,57 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
+import { AdminDialogService } from '../services/admin-dialog.service';
+import { ConfirmationDialogInput, LoadingService, Toaster } from '@iqser/common-ui';
+import { WatermarkService } from '../../../services/entity-services/watermark.service';
+import { DOSSIER_TEMPLATE_ID, WATERMARK_ID } from '@red/domain';
+import { ActivatedRoute, Router } from '@angular/router';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+
+@Component({
+    templateUrl: './base-watermark-screen.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BaseWatermarkScreenComponent {
+    readonly #dossierTemplateId: string;
+    readonly #watermarkId: string;
+
+    constructor(
+        private readonly _dialogService: AdminDialogService,
+        private readonly _loadingService: LoadingService,
+        private readonly _watermarkService: WatermarkService,
+        private readonly _toaster: Toaster,
+        private readonly _route: ActivatedRoute,
+        private readonly _router: Router,
+    ) {
+        this.#dossierTemplateId = _route.snapshot.paramMap.get(DOSSIER_TEMPLATE_ID);
+        this.#watermarkId = _route.snapshot.paramMap.get(WATERMARK_ID);
+    }
+
+    async openDeleteWatermarkDialog($event: MouseEvent): Promise<void> {
+        const isUsed = await firstValueFrom(this._watermarkService.isWatermarkUsed(this.#watermarkId));
+
+        if (!isUsed) {
+            await this._deleteWatermark(this.#watermarkId);
+            return;
+        }
+
+        const data = new ConfirmationDialogInput({
+            question: _('watermarks-listing.watermark-is-used'),
+        });
+        this._dialogService.openDialog('confirm', $event, data, async () => {
+            await this._deleteWatermark(this.#watermarkId);
+        });
+    }
+
+    private async _deleteWatermark(watermarkId: string): Promise<void> {
+        this._loadingService.start();
+        await firstValueFrom(this._watermarkService.deleteWatermark(watermarkId));
+        this._toaster.success(_('watermarks-listing.action.delete-success'));
+        await this._router.navigate([`/main/admin/dossier-templates/${this.#dossierTemplateId}/watermarks`]);
+        this._loadingService.stop();
+    }
+
+    get editMode(): boolean {
+        return !!Number(this.#watermarkId);
+    }
+}

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

@@ -3,7 +3,7 @@
     <div *ngIf="changed && permissionsService.isAdmin()" class="changes-box">
         <iqser-icon-button
             (action)="save()"
-            [disabled]="form.invalid"
+            [disabled]="!valid"
             [label]="'watermark-screen.action.save' | translate"
             [type]="iconButtonTypes.primary"
             icon="iqser:check"
@@ -13,9 +13,14 @@
 </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">
+        <div class="iqser-input-group required w-300">
+            <label translate="watermark-screen.form.name-label"></label>
+            <input [placeholder]="'watermark-screen.form.name-placeholder' | translate" formControlName="name" type="text" />
+        </div>
+
+        <div class="iqser-input-group required w-300">
+            <label translate="watermark-screen.form.text-label"></label>
             <textarea
                 (mousemove)="triggerChanges()"
                 [placeholder]="'watermark-screen.form.text-placeholder' | translate"
@@ -33,7 +38,7 @@
             <div class="square-options">
                 <div
                     (click)="setValue('orientation', option)"
-                    *ngFor="let option of ['VERTICAL', 'HORIZONTAL', 'DIAGONAL']"
+                    *ngFor="let option of ['DIAGONAL', 'HORIZONTAL', 'VERTICAL']"
                     [class.active]="form.get('orientation').value === option"
                     [class.disabled]="form.get('orientation').disabled"
                     [ngClass]="option"

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

@@ -4,24 +4,31 @@ import WebViewer, { WebViewerInstance } from '@pdftron/webviewer';
 import { HttpClient } from '@angular/common/http';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Debounce, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
-import { DOSSIER_TEMPLATE_ID, IWatermark, WatermarkOrientation, WatermarkOrientations } from '@red/domain';
+import { DOSSIER_TEMPLATE_ID, IWatermark, WATERMARK_ID, WatermarkOrientation, WatermarkOrientations } from '@red/domain';
 import { BASE_HREF_FN, BaseHrefFn } from '../../../../../tokens';
 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, switchMap } from 'rxjs';
+import { firstValueFrom, Observable, of } from 'rxjs';
 import { catchError, tap } from 'rxjs/operators';
-import { ActivatedRoute } from '@angular/router';
 import { LicenseService } from '@services/license.service';
 import { UserPreferenceService } from '@services/user-preference.service';
+import { ActivatedRoute, Router } from '@angular/router';
 
 export const DEFAULT_WATERMARK: IWatermark = {
-    text: null,
+    id: null,
-    hexColor: '#dd4d50',
+    dossierTemplateId: null,
-    opacity: 70,
+    text: 'Watermark',
-    fontSize: 11,
+    name: '',
+    enabled: true,
+    hexColor: '#000000',
+    opacity: 30,
+    fontSize: 40,
     fontType: 'sans-serif',
-    orientation: WatermarkOrientations.DIAGONAL,
+    orientation: WatermarkOrientations.HORIZONTAL,
+    createdBy: null,
+    dateAdded: null,
+    dateModified: null,
 } as const;
 
 @Component({
@@ -33,8 +40,9 @@ export class WatermarkScreenComponent implements OnInit {
     readonly iconButtonTypes = IconButtonTypes;
     readonly form: UntypedFormGroup = this._getForm();
     readonly #dossierTemplateId: string;
+    readonly #watermarkId: string;
     private _instance: WebViewerInstance;
-    private _watermark: IWatermark = {};
+    private _watermark: IWatermark = {} as IWatermark;
     @ViewChild('viewer', { static: true })
     private _viewer: ElementRef;
 
@@ -50,15 +58,14 @@ export class WatermarkScreenComponent implements OnInit {
         private readonly _watermarkService: WatermarkService,
         private readonly _changeDetectorRef: ChangeDetectorRef,
         private readonly _userPreferenceService: UserPreferenceService,
+        private readonly _router: Router,
     ) {
         this._loadingService.start();
         this.#dossierTemplateId = route.snapshot.paramMap.get(DOSSIER_TEMPLATE_ID);
+        this.#watermarkId = route.snapshot.paramMap.get(WATERMARK_ID);
     }
 
     get changed(): boolean {
-        if (this._watermark === DEFAULT_WATERMARK) {
-            return true;
-        }
         for (const key of Object.keys(this._watermark)) {
             if (this._watermark[key] !== this.form.get(key)?.value) {
                 return true;
@@ -67,6 +74,13 @@ export class WatermarkScreenComponent implements OnInit {
         return false;
     }
 
+    get valid(): boolean {
+        if (!this.form.get('name')?.value || !this.form.get('text')?.value) {
+            return false;
+        }
+        return this.form.valid;
+    }
+
     async ngOnInit(): Promise<void> {
         await firstValueFrom(this._loadWatermark());
     }
@@ -79,19 +93,21 @@ export class WatermarkScreenComponent implements OnInit {
     async save(): Promise<void> {
         const watermark: IWatermark = this.form.getRawValue();
 
-        const observable = watermark.text
-            ? this._watermarkService.saveWatermark(watermark, this.#dossierTemplateId)
-            : this._watermarkService.deleteWatermark(this.#dossierTemplateId);
-
         try {
             await firstValueFrom(
-                observable.pipe(
+                this._watermarkService.saveWatermark(watermark).pipe(
-                    switchMap(() => this._loadWatermark()),
                     tap(() => {
                         this._toaster.success(
-                            watermark.text ? _('watermark-screen.action.change-success') : _('watermark-screen.action.delete-success'),
+                            watermark.id ? _('watermark-screen.action.change-success') : _('watermark-screen.action.created-success'),
                         );
                     }),
+                    tap(async () => {
+                        if (!watermark.id) {
+                            await this._router.navigate([`/main/admin/dossier-templates/${this.#dossierTemplateId}/watermarks`]);
+                        } else {
+                            await firstValueFrom(this._loadWatermark());
+                        }
+                    }),
                 ),
             );
         } catch (error) {
@@ -114,10 +130,11 @@ export class WatermarkScreenComponent implements OnInit {
     }
 
     private _loadWatermark(): Observable<IWatermark> {
-        return this._watermarkService.getWatermark(this.#dossierTemplateId).pipe(
+        return this._watermarkService.getWatermark(this.#watermarkId).pipe(
             catchError(() => of(DEFAULT_WATERMARK)),
             tap(watermark => {
                 this._watermark = watermark;
+                this._watermark.dossierTemplateId = this.#dossierTemplateId;
                 this.form.setValue({ ...watermark });
                 this._loadViewer();
             }),
@@ -199,12 +216,19 @@ export class WatermarkScreenComponent implements OnInit {
         const defaultFormControl = [{ ...defaultValue }, Validators.required];
 
         return this._formBuilder.group({
-            text: [{ ...defaultValue }],
+            id: [{ ...defaultValue }],
+            name: [{ ...defaultFormControl }],
+            enabled: [{ ...defaultValue }],
+            dossierTemplateId: [{ ...defaultValue }],
+            text: [{ ...defaultFormControl }],
             hexColor: [...defaultFormControl],
             opacity: [...defaultFormControl],
             fontSize: [...defaultFormControl],
             fontType: [...defaultFormControl],
             orientation: [...defaultFormControl],
+            createdBy: [{ ...defaultValue }],
+            dateAdded: [{ ...defaultValue }],
+            dateModified: [{ ...defaultValue }],
         });
     }
 }

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

@@ -0,0 +1,105 @@
+<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">
+            <iqser-table
+                [bulkActions]="bulkActions"
+                [headerTemplate]="headerTemplate"
+                [itemSize]="80"
+                [noDataText]="'watermarks-listing.no-data.title' | translate"
+                [selectionEnabled]="true"
+                [tableColumnConfigs]="tableColumnConfigs"
+                emptyColumnWidth="1fr"
+                noDataIcon="red:attribute"
+            ></iqser-table>
+        </div>
+    </div>
+</section>
+
+<ng-template #headerTemplate>
+    <div class="table-header-actions">
+        <iqser-icon-button
+            [routerLink]="getRouterLink()"
+            *ngIf="currentUser.isAdmin"
+            [label]="'watermarks-listing.add-new' | translate"
+            [type]="iconButtonTypes.primary"
+            icon="iqser:plus"
+        ></iqser-icon-button>
+    </div>
+</ng-template>
+
+<ng-template #bulkActions>
+    <iqser-circle-button
+        *ngIf="currentUser.isAdmin && (listingService.areSomeSelected$ | async)"
+        [tooltip]="'watermarks-listing.action.delete' | translate"
+        [type]="circleButtonTypes.dark"
+        icon="iqser:trash"
+    ></iqser-circle-button>
+</ng-template>
+
+<ng-template #tableItemTemplate let-entity="entity">
+    <div *ngIf="cast(entity) as watermark">
+        <div class="label cell">
+            <span>{{ watermark.name }}</span>
+        </div>
+
+        <div class="center cell">
+            <mat-slide-toggle (toggleChange)="toggleStatus(watermark)" [checked]="watermark.enabled" color="primary"></mat-slide-toggle>
+        </div>
+
+        <div class="cell user-column">
+            <redaction-initials-avatar
+                [defaultValue]="'unknown' | translate"
+                [user]="watermark.createdBy || 'system'"
+            ></redaction-initials-avatar>
+        </div>
+
+        <div class="cell">
+            <div class="small-label">
+                {{ watermark.dateAdded | date: 'd MMM yyyy' }}
+            </div>
+        </div>
+
+        <div class="cell">
+            <div class="small-label">
+                {{ watermark.dateModified | date: 'd MMM yyyy' }}
+            </div>
+        </div>
+
+        <div class="cell">
+            <div class="action-buttons">
+                <iqser-circle-button
+                    [routerLink]="getRouterLink(watermark)"
+                    [tooltip]="'watermarks-listing.action.edit' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="iqser:edit"
+                ></iqser-circle-button>
+
+                <iqser-circle-button
+                    (action)="openConfirmDeleteWatermarkDialog($event, watermark)"
+                    [tooltip]="'watermarks-listing.action.delete' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="iqser:trash"
+                ></iqser-circle-button>
+            </div>
+        </div>
+    </div>
+</ng-template>

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

@@ -0,0 +1,106 @@
+import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit } from '@angular/core';
+import {
+    CircleButtonTypes,
+    ConfirmationDialogInput,
+    DefaultListingServices,
+    IconButtonTypes,
+    ListingComponent,
+    LoadingService,
+    TableColumnConfig,
+    Toaster,
+} from '@iqser/common-ui';
+import { DOSSIER_TEMPLATE_ID, User, Watermark } from '@red/domain';
+import { UserService } from '../../../../services/user.service';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { firstValueFrom } from 'rxjs';
+import { WatermarkService } from '../../../../services/entity-services/watermark.service';
+import { ActivatedRoute } from '@angular/router';
+import { AdminDialogService } from '../../services/admin-dialog.service';
+
+@Component({
+    templateUrl: './watermarks-listing-screen.component.html',
+    styleUrls: ['./watermarks-listing-screen.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => WatermarksListingScreenComponent) }],
+})
+export class WatermarksListingScreenComponent extends ListingComponent<Watermark> implements OnInit {
+    private readonly _dossierTemplateId: string;
+
+    readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
+    readonly currentUser: User;
+
+    readonly tableColumnConfigs: TableColumnConfig<Watermark>[] = [
+        { label: _('watermarks-listing.table-col-names.name'), width: '2fr' },
+        { label: _('watermarks-listing.table-col-names.status'), class: 'flex-center' },
+        { label: _('watermarks-listing.table-col-names.created-by'), class: 'user-column' },
+        { label: _('watermarks-listing.table-col-names.created-on') },
+        { label: _('watermarks-listing.table-col-names.modified-on') },
+    ];
+    readonly tableHeaderLabel: string = _('watermarks-listing.table-header.title');
+
+    constructor(
+        protected readonly _injector: Injector,
+        private readonly _route: ActivatedRoute,
+        private readonly _userService: UserService,
+        private readonly _loadingService: LoadingService,
+        private readonly _watermarkService: WatermarkService,
+        private readonly _dialogService: AdminDialogService,
+        private readonly _toaster: Toaster,
+    ) {
+        super(_injector);
+        this.currentUser = _userService.currentUser;
+        this._dossierTemplateId = _route.snapshot.paramMap.get(DOSSIER_TEMPLATE_ID);
+    }
+
+    async ngOnInit(): Promise<void> {
+        await this._loadData();
+    }
+
+    private async _loadData(): Promise<void> {
+        this._loadingService.start();
+
+        try {
+            const response = await firstValueFrom(this._watermarkService.getWatermarks(this._dossierTemplateId));
+            const watermarkConfig = response?.map(item => new Watermark(item)) || [];
+            this.entitiesService.setEntities(watermarkConfig);
+        } catch (e) {}
+
+        this._loadingService.stop();
+    }
+
+    async openConfirmDeleteWatermarkDialog($event: MouseEvent, watermark: Watermark): Promise<void> {
+        const isUsed = await firstValueFrom(this._watermarkService.isWatermarkUsed(watermark.id));
+
+        if (!isUsed) {
+            await this._deleteWatermark(watermark);
+            return;
+        }
+
+        const data = new ConfirmationDialogInput({
+            question: _('watermarks-listing.watermark-is-used'),
+        });
+        this._dialogService.openDialog('confirm', $event, data, async () => {
+            await this._deleteWatermark(watermark);
+        });
+    }
+
+    private async _deleteWatermark(watermark: Watermark): Promise<void> {
+        this._loadingService.start();
+        await firstValueFrom(this._watermarkService.deleteWatermark(watermark.id));
+        this._toaster.success(_('watermarks-listing.action.delete-success'));
+        await this._loadData();
+        this._loadingService.stop();
+    }
+
+    async toggleStatus(watermark?: Watermark): Promise<void> {
+        watermark.enabled = !watermark.enabled;
+        this._loadingService.start();
+        await firstValueFrom(this._watermarkService.saveWatermark(watermark));
+        this._loadingService.stop();
+    }
+
+    getRouterLink(watermark: Watermark = null): string {
+        return `/main/admin/dossier-templates/${this._dossierTemplateId}/watermarks/${watermark ? watermark.id : 0}`;
+    }
+}

apps/red-ui/src/app/modules/admin/services/digital-signature.service.ts

@@ -1,6 +1,6 @@
 import { Injectable, Injector } from '@angular/core';
 import { filterEach, GenericService, RequiredParam, Validate } from '@iqser/common-ui';
-import { filter, forkJoin, Observable, of } from 'rxjs';
+import { forkJoin, Observable, of } from 'rxjs';
 import {
     IDigitalSignatureRequest,
     IKmsDigitalSignature,
@@ -8,7 +8,7 @@ import {
     IPkcsDigitalSignature,
     IPkcsDigitalSignatureRequest,
 } from '@red/domain';
-import { catchError, map, tap } from 'rxjs/operators';
+import { catchError, map } from 'rxjs/operators';
 
 @Injectable()
 export class DigitalSignatureService extends GenericService<IDigitalSignatureRequest> {

apps/red-ui/src/app/modules/file-preview/services/stamp.service.ts

@@ -43,7 +43,7 @@ export class StampService {
 
         if (this._viewModeService.isRedacted) {
             const dossier = this._state.dossier;
-            if (dossier.watermarkPreviewEnabled) {
+            if (dossier.previewWatermarkId) {
                 await this._stampPreview(pdfDoc, dossier.dossierTemplateId);
             }
         } else {

apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.html

@@ -15,17 +15,41 @@
         ></redaction-select>
     </div>
 
-    <div class="mt-32 mb-14">
+    <ng-container *ngIf="watermarks.length">
-        <mat-checkbox class="watermark" color="primary" formControlName="watermarkEnabled">
+        <div class="iqser-input-group watermark">
-            {{ 'edit-dossier-dialog.general-info.form.watermark' | translate }}
+            <mat-checkbox
-        </mat-checkbox>
+                color="primary"
-    </div>
+                [checked]="isWatermarkEnabled('watermarkId')"
+                (change)="enableDisableWatermark($event.checked, 'watermarkId')"
+            >
+                {{ 'add-dossier-dialog.form.watermark' | translate }}
+            </mat-checkbox>
+            <mat-form-field *ngIf="isWatermarkEnabled('watermarkId')">
+                <mat-select formControlName="watermarkId">
+                    <mat-option *ngFor="let watermark of watermarks" [value]="watermark.id">
+                        {{ watermark.name }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
 
-    <div>
+        <div class="iqser-input-group watermark">
-        <mat-checkbox class="watermark-preview" color="primary" formControlName="watermarkPreviewEnabled">
+            <mat-checkbox
-            {{ 'edit-dossier-dialog.general-info.form.watermark-preview' | translate }}
+                color="primary"
-        </mat-checkbox>
+                [checked]="isWatermarkEnabled('previewWatermarkId')"
-    </div>
+                (change)="enableDisableWatermark($event.checked, 'previewWatermarkId')"
+            >
+                {{ 'add-dossier-dialog.form.watermark' | translate }}
+            </mat-checkbox>
+            <mat-form-field *ngIf="isWatermarkEnabled('previewWatermarkId')">
+                <mat-select formControlName="previewWatermarkId">
+                    <mat-option *ngFor="let watermark of watermarks" [value]="watermark.id">
+                        {{ watermark.name }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+    </ng-container>
 </form>
 
 <ng-template #reportTemplateOptionTemplate let-option="option">

apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.scss

@@ -16,3 +16,13 @@ form {
         display: flex;
     }
 }
+
+.watermark {
+    width: 315px;
+    max-width: 315px;
+
+    mat-form-field {
+        margin-left: 22px;
+        margin-top: -10px;
+    }
+}

apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Dossier, DownloadFileType, IReportTemplate } from '@red/domain';
+import { Dossier, DownloadFileType, IReportTemplate, IWatermark } from '@red/domain';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-dossier-section.interface';
 import { downloadTypesTranslations } from '@translations/download-types-translations';
@@ -7,6 +7,7 @@ import { ReportTemplateService } from '@services/report-template.service';
 import { PermissionsService } from '@services/permissions.service';
 import { firstValueFrom } from 'rxjs';
 import { DossiersService } from '@services/dossiers/dossiers.service';
+import { WatermarkService } from '@services/entity-services/watermark.service';
 
 @Component({
     selector: 'redaction-edit-dossier-download-package',
@@ -22,6 +23,9 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
         }),
     );
     availableReportTypes: IReportTemplate[] = [];
+    watermarks: IWatermark[] = [];
+    oldWatermarkId: string;
+    oldPreviewWatermarkID: string;
 
     @Input() dossier: Dossier;
 
@@ -30,6 +34,7 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
         private readonly _reportTemplateController: ReportTemplateService,
         private readonly _formBuilder: UntypedFormBuilder,
         private readonly _permissionsService: PermissionsService,
+        private readonly _watermarkService: WatermarkService,
     ) {}
 
     get reportTypesLength() {
@@ -46,7 +51,7 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
         }
 
         for (const key of Object.keys(this.form.getRawValue())) {
-            if (key.startsWith('watermark')) {
+            if (key.startsWith('watermark') || key.startsWith('previewWatermark')) {
                 if (this.dossier[key] !== this.form.get(key).value) {
                     return true;
                 }
@@ -54,7 +59,6 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
                 if (this.dossier[key].length !== this.form.get(key).value.length) {
                     return true;
                 }
-
                 const originalItems = [...this.dossier[key]].sort();
                 const newItems = [...this.form.get(key).value].sort();
 
@@ -74,19 +78,24 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
     }
 
     get valid(): boolean {
-        return this.form.valid;
+        return this.form && this.form.valid;
     }
 
     reportTemplateValueMapper = (reportTemplate: IReportTemplate) => reportTemplate.templateId;
 
     async ngOnInit() {
+        const dossierTemplateId = this.dossier.dossierTemplateId;
         this.availableReportTypes =
-            (await firstValueFrom(this._reportTemplateController.getAvailableReportTemplates(this.dossier.dossierTemplateId))) || [];
+            (await firstValueFrom(this._reportTemplateController.getAvailableReportTemplates(dossierTemplateId))) || [];
 
         this.form = this._getForm();
         if (!this._permissionsService.canEditDossier(this.dossier)) {
             this.form.disable();
         }
+
+        this.watermarks = await firstValueFrom(this._watermarkService.getWatermarks(dossierTemplateId));
+        this.oldWatermarkId = this.form.get('watermarkId').value || this.watermarks[0]?.id;
+        this.oldPreviewWatermarkID = this.form.get('previewWatermarkId').value || this.watermarks[0]?.id;
     }
 
     async save(): EditDossierSaveResult {
@@ -94,8 +103,8 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
             ...this.dossier,
             downloadFileTypes: this.form.get('downloadFileTypes').value,
             reportTemplateIds: this.form.get('reportTemplateIds').value,
-            watermarkEnabled: this.form.get('watermarkEnabled').value,
+            watermarkId: this.form.get('watermarkId').value,
-            watermarkPreviewEnabled: this.form.get('watermarkPreviewEnabled').value,
+            previewWatermarkId: this.form.get('previewWatermarkId').value,
         };
 
         const updatedDossier = await firstValueFrom(this._dossiersService.createOrUpdate(dossier));
@@ -106,8 +115,8 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
         this.form.reset({
             downloadFileTypes: this.dossier.downloadFileTypes,
             reportTemplateIds: this.dossier.reportTemplateIds,
-            watermarkEnabled: this.dossier.watermarkEnabled,
+            watermarkId: [this.dossier.watermarkId],
-            watermarkPreviewEnabled: this.dossier.watermarkPreviewEnabled,
+            previewWatermarkId: [this.dossier.previewWatermarkId],
         });
     }
 
@@ -116,8 +125,8 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
             {
                 reportTemplateIds: [this.dossier.reportTemplateIds],
                 downloadFileTypes: [this.dossier.downloadFileTypes],
-                watermarkEnabled: [this.dossier.watermarkEnabled],
+                watermarkId: [this.dossier.watermarkId],
-                watermarkPreviewEnabled: [this.dossier.watermarkPreviewEnabled],
+                previewWatermarkId: [this.dossier.previewWatermarkId],
             },
             {
                 validators: control =>
@@ -127,4 +136,20 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
             },
         );
     }
+
+    isWatermarkEnabled(key: string): boolean {
+        return this.form.get(key).value;
+    }
+
+    enableDisableWatermark(checked: boolean, key: string): void {
+        let oldValue: string;
+        if (key === 'watermarkId') {
+            this.oldWatermarkId = !checked ? this.form.get(key).value : this.oldWatermarkId;
+            oldValue = this.oldWatermarkId;
+        } else {
+            this.oldPreviewWatermarkID = !checked ? this.form.get(key).value : this.oldPreviewWatermarkID;
+            oldValue = this.oldPreviewWatermarkID;
+        }
+        this.form.get(key).setValue(checked ? oldValue : null);
+    }
 }

apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html

@@ -47,17 +47,41 @@
                 ></textarea>
             </div>
 
-            <div>
+            <ng-container *ngIf="watermarks.length">
-                <mat-checkbox class="watermark" color="primary" formControlName="watermarkEnabled">
+                <div class="iqser-input-group watermark">
-                    {{ 'add-dossier-dialog.form.watermark' | translate }}
+                    <mat-checkbox
-                </mat-checkbox>
+                        color="primary"
-            </div>
+                        [checked]="isWatermarkEnabled('watermarkId')"
+                        (change)="enableDisableWatermark($event.checked, 'watermarkId')"
+                    >
+                        {{ 'add-dossier-dialog.form.watermark' | translate }}
+                    </mat-checkbox>
+                    <mat-form-field *ngIf="isWatermarkEnabled('watermarkId')">
+                        <mat-select formControlName="watermarkId">
+                            <mat-option *ngFor="let watermark of watermarks" [value]="watermark.id">
+                                {{ watermark.name }}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </div>
 
-            <div>
+                <div class="iqser-input-group watermark">
-                <mat-checkbox class="watermark-preview" color="primary" formControlName="watermarkPreviewEnabled">
+                    <mat-checkbox
-                    {{ 'add-dossier-dialog.form.watermark-preview' | translate }}
+                        color="primary"
-                </mat-checkbox>
+                        [checked]="isWatermarkEnabled('previewWatermarkId')"
-            </div>
+                        (change)="enableDisableWatermark($event.checked, 'previewWatermarkId')"
+                    >
+                        {{ 'add-dossier-dialog.form.watermark' | translate }}
+                    </mat-checkbox>
+                    <mat-form-field *ngIf="isWatermarkEnabled('previewWatermarkId')">
+                        <mat-select formControlName="previewWatermarkId">
+                            <mat-option *ngFor="let watermark of watermarks" [value]="watermark.id">
+                                {{ watermark.name }}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </div>
+            </ng-container>
 
             <div class="due-date">
                 <mat-checkbox (change)="hasDueDate = !hasDueDate" [checked]="hasDueDate" class="filter-menu-checkbox" color="primary">

apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss

@@ -1,11 +1,3 @@
-.watermark {
-    margin-top: 24px;
-}
-
-.watermark-preview {
-    margin-top: 8px;
-}
-
 .due-date {
     margin-top: 8px;
     min-height: 34px;
@@ -27,3 +19,13 @@
 redaction-select {
     flex: 1;
 }
+
+.watermark {
+    width: 315px;
+    max-width: 315px;
+
+    mat-form-field {
+        margin-left: 22px;
+        margin-top: -10px;
+    }
+}

apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, Injector, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { DOSSIER_TEMPLATE_ID, DownloadFileType, IDossierRequest, IDossierTemplate, IReportTemplate } from '@red/domain';
+import { DOSSIER_TEMPLATE_ID, DownloadFileType, IDossierRequest, IDossierTemplate, IReportTemplate, IWatermark } from '@red/domain';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { downloadTypesTranslations } from '@translations/download-types-translations';
 import { BaseDialogComponent, IconButtonTypes, LoadingService, SaveOptions } from '@iqser/common-ui';
@@ -11,6 +11,7 @@ import { firstValueFrom } from 'rxjs';
 import dayjs from 'dayjs';
 import { Router } from '@angular/router';
 import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
+import { WatermarkService } from '@services/entity-services/watermark.service';
 
 interface DialogData {
     readonly dossierTemplateId?: string;
@@ -32,6 +33,9 @@ export class AddDossierDialogComponent extends BaseDialogComponent implements On
     );
     dossierTemplates: IDossierTemplate[];
     availableReportTypes = [];
+    watermarks: IWatermark[] = [];
+    oldWatermarkId: string;
+    oldPreviewWatermarkID: string;
 
     constructor(
         private readonly _activeDossiersService: ActiveDossiersService,
@@ -41,6 +45,7 @@ export class AddDossierDialogComponent extends BaseDialogComponent implements On
         private readonly _router: Router,
         private readonly _dialogService: DossiersDialogService,
         private readonly _loadingService: LoadingService,
+        private readonly _watermarkService: WatermarkService,
         protected readonly _injector: Injector,
         protected readonly _dialogRef: MatDialogRef<AddDossierDialogComponent>,
         @Inject(MAT_DIALOG_DATA) readonly data: DialogData,
@@ -68,7 +73,11 @@ export class AddDossierDialogComponent extends BaseDialogComponent implements On
     }
 
     async ngOnInit(): Promise<void> {
-        await this.dossierTemplateChanged(this.form.get('dossierTemplateId').value);
+        const dossierTemplateId = this.form.get('dossierTemplateId').value;
+        await this.dossierTemplateChanged(dossierTemplateId);
+        this.watermarks = await firstValueFrom(this._watermarkService.getWatermarks(dossierTemplateId));
+        this.oldWatermarkId = this.watermarks[0]?.id;
+        this.oldPreviewWatermarkID = this.watermarks[0]?.id;
     }
 
     reportTemplateValueMapper = (reportTemplate: IReportTemplate) => reportTemplate.templateId;
@@ -125,8 +134,8 @@ export class AddDossierDialogComponent extends BaseDialogComponent implements On
                 reportTemplateIds: [null],
                 description: [null],
                 dueDate: [null],
-                watermarkEnabled: [true],
+                watermarkId: [null],
-                watermarkPreviewEnabled: [false],
+                previewWatermarkId: [null],
             },
             {
                 validators: control =>
@@ -155,8 +164,24 @@ export class AddDossierDialogComponent extends BaseDialogComponent implements On
             dossierTemplateId: this.form.get(DOSSIER_TEMPLATE_ID).value,
             downloadFileTypes: this.form.get('downloadFileTypes').value,
             reportTemplateIds: this.form.get('reportTemplateIds').value,
-            watermarkEnabled: this.form.get('watermarkEnabled').value,
+            watermarkId: this.form.get('watermarkId').value,
-            watermarkPreviewEnabled: this.form.get('watermarkPreviewEnabled').value,
+            previewWatermarkId: this.form.get('previewWatermarkId').value,
         };
     }
+
+    isWatermarkEnabled(key: string): boolean {
+        return !!this.form.get(key).value;
+    }
+
+    enableDisableWatermark(checked: boolean, key: string): void {
+        let oldValue: string;
+        if (key === 'watermarkId') {
+            this.oldWatermarkId = !checked ? this.form.get(key).value : this.oldWatermarkId;
+            oldValue = this.oldWatermarkId;
+        } else {
+            this.oldPreviewWatermarkID = !checked ? this.form.get(key).value : this.oldPreviewWatermarkID;
+            oldValue = this.oldPreviewWatermarkID;
+        }
+        this.form.get(key).setValue(checked ? oldValue : null);
+    }
 }

apps/red-ui/src/app/services/entity-services/watermark.service.ts

@@ -1,6 +1,12 @@
 import { Injectable, Injector } from '@angular/core';
-import { GenericService, RequiredParam, Validate } from '@iqser/common-ui';
+import { GenericService, QueryParam, RequiredParam, Validate } from '@iqser/common-ui';
 import { IWatermark } from '@red/domain';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+interface IsUsedResponse {
+    value: boolean;
+}
 
 @Injectable({
     providedIn: 'root',
@@ -11,17 +17,29 @@ export class WatermarkService extends GenericService<IWatermark> {
     }
 
     @Validate()
-    saveWatermark(@RequiredParam() body: IWatermark, @RequiredParam() dossierTemplateId: string) {
+    saveWatermark(@RequiredParam() body: IWatermark) {
-        return this._post(body, `${this._defaultModelPath}/${dossierTemplateId}`);
+        return this._post(body, `${this._defaultModelPath}`);
     }
 
     @Validate()
-    deleteWatermark(@RequiredParam() dossierTemplateId: string) {
+    deleteWatermark(@RequiredParam() watermarkId: string) {
-        return super.delete({}, `${this._defaultModelPath}/${dossierTemplateId}`);
+        return super.delete({}, `${this._defaultModelPath}/${watermarkId}`);
     }
 
     @Validate()
-    getWatermark(@RequiredParam() dossierTemplateId: string) {
+    getWatermark(@RequiredParam() watermarkId: string) {
-        return this._getOne([dossierTemplateId]);
+        return this._getOne([watermarkId]);
+    }
+
+    @Validate()
+    getWatermarks(@RequiredParam() dossierTemplateId: string): Observable<IWatermark[]> {
+        const queryParams: QueryParam[] = [{ key: 'dossierTemplateId', value: dossierTemplateId }];
+        return this.getAll<IWatermark[]>(this._defaultModelPath, queryParams);
+    }
+
+    @Validate()
+    isWatermarkUsed(@RequiredParam() watermarkId: string): Observable<boolean> {
+        const queryParams: QueryParam[] = [{ key: 'watermarkId', value: watermarkId }];
+        return this.getAll<IsUsedResponse>(`${this._defaultModelPath}/used`, queryParams).pipe(map(result => result.value));
     }
 }

apps/red-ui/src/assets/i18n/de.json

@@ -31,8 +31,7 @@
         "label": "Dossier-Vorlage",
         "placeholder": ""
       },
-      "watermark": "Geschwärzte Dokumente mit Wasserzeichen versehen",
+      "watermark": "Geschwärzte Dokumente mit Wasserzeichen versehen"
-      "watermark-preview": "Vorschau Dokumente mit Wasserzeichen versehen"
     },
     "header-new": "Dossier erstellen"
   },
@@ -188,7 +187,7 @@
     "rule-editor": "",
     "settings": "Einstellungen",
     "user-management": "",
-    "watermark": ""
+    "watermarks": ""
   },
   "annotation-actions": {
     "accept-recommendation": {
@@ -1089,9 +1088,7 @@
           "label": "Dossier-Name",
           "placeholder": "Namen eingeben"
         },
-        "template": "Dossier-Vorlage",
+        "template": "Dossier-Vorlage"
-        "watermark": "Geschwärzte Dokumente mit Wasserzeichen versehen",
-        "watermark-preview": "Vorschau Dokumente mit Wasserzeichen versehen"
       }
     },
     "header": "{dossierName} bearbeiten",
@@ -2081,7 +2078,7 @@
   "watermark-screen": {
     "action": {
       "change-success": "Das Wasserzeichen wurde aktualisiert!",
-      "delete-success": "Das Wasserzeichen wurde gelöscht.",
+      "created-success": "",
       "error": "Fehler beim Aktualisieren des Wasserzeichens",
       "revert": "Rückgängig machen",
       "save": "Änderungen speichern"
@@ -2091,11 +2088,35 @@
       "color-placeholder": "",
       "font-size": "Schriftgröße",
       "font-type": "Schriftart",
+      "name-label": "",
+      "name-placeholder": "",
       "opacity": "Deckkraft",
       "orientation": "Ausrichtung",
+      "text-label": "",
       "text-placeholder": "Text eingeben"
+    }
+  },
+  "watermarks-listing": {
+    "action": {
+      "delete": "",
+      "delete-success": "",
+      "edit": ""
     },
-    "title": "Wasserzeichen"
+    "add-new": "",
+    "no-data": {
+      "title": ""
+    },
+    "table-col-names": {
+      "created-by": "",
+      "created-on": "",
+      "modified-on": "",
+      "name": "",
+      "status": ""
+    },
+    "table-header": {
+      "title": ""
+    },
+    "watermark-is-used": ""
   },
   "workflow": {
     "selection": {

apps/red-ui/src/assets/i18n/en.json

@@ -31,8 +31,7 @@
         "label": "Dossier Template",
         "placeholder": "Choose Dossier Template"
       },
-      "watermark": "Watermark application on redacted documents",
+      "watermark": "Watermark application on redacted documents"
-      "watermark-preview": "Watermark application on preview documents"
     },
     "header-new": "Create Dossier"
   },
@@ -188,7 +187,7 @@
     "rule-editor": "Rule Editor",
     "settings": "Settings",
     "user-management": "User Management",
-    "watermark": "Watermark"
+    "watermarks": "Watermarks"
   },
   "annotation-actions": {
     "accept-recommendation": {
@@ -1089,9 +1088,7 @@
           "label": "Dossier Name",
           "placeholder": "Enter Name"
         },
-        "template": "Dossier Template",
+        "template": "Dossier Template"
-        "watermark": "Watermark application on redacted documents",
-        "watermark-preview": "Watermark application on preview documents"
       }
     },
     "header": "Edit {dossierName}",
@@ -2080,8 +2077,8 @@
   },
   "watermark-screen": {
     "action": {
-      "change-success": "Watermark updated!",
+      "change-success": "Watermark has been updated!",
-      "delete-success": "Watermark deleted.",
+      "created-success": "Watermark has been created!",
       "error": "Failed to update Watermark",
       "revert": "Revert",
       "save": "Save Changes"
@@ -2091,11 +2088,35 @@
       "color-placeholder": "#",
       "font-size": "Font Size",
       "font-type": "Font Type",
+      "name-label": "Watermark Name",
+      "name-placeholder": "Choose a name to identify the watermark",
       "opacity": "Opacity",
       "orientation": "Orientation",
+      "text-label": "Watermark Text",
       "text-placeholder": "Enter text"
+    }
+  },
+  "watermarks-listing": {
+    "action": {
+      "delete": "Delete",
+      "delete-success": "Watermark has been deleted!",
+      "edit": "Edit"
     },
-    "title": "Watermark"
+    "add-new": "New Watermark",
+    "no-data": {
+      "title": "There are no watermarks yet."
+    },
+    "table-col-names": {
+      "created-by": "Created by",
+      "created-on": "Created on",
+      "modified-on": "Modified on",
+      "name": "Name",
+      "status": "Status"
+    },
+    "table-header": {
+      "title": "Watermarks"
+    },
+    "watermark-is-used": "This watermark is already in use, are you sure you want to delete it?"
   },
   "workflow": {
     "selection": {

libs/red-domain/src/index.ts

@@ -26,3 +26,4 @@ export * from './lib/text-highlight';
 export * from './lib/permissions';
 export * from './lib/license';
 export * from './lib/digital-signature';
+export * from './lib/watermarks';

libs/red-domain/src/lib/dossier-templates/constants.ts

@@ -8,3 +8,4 @@ export type DossierTemplateStatus = keyof typeof DossierTemplateStatuses;
 
 export const DOSSIER_TEMPLATE_ID = 'dossierTemplateId';
 export const ENTITY_TYPE = 'entity';
+export const WATERMARK_ID = 'watermarkId';

libs/red-domain/src/lib/dossiers/dossier.model.ts

@@ -19,8 +19,8 @@ export class Dossier implements IDossier, IListable {
     readonly hardDeletedTime?: string;
     readonly softDeletedTime?: string;
     readonly startDate?: string;
-    readonly watermarkEnabled: boolean;
+    readonly watermarkId: number;
-    readonly watermarkPreviewEnabled: boolean;
+    readonly previewWatermarkId: number;
     readonly archivedTime: string;
     readonly hasReviewers: boolean;
     readonly routerLink: string;
@@ -43,8 +43,8 @@ export class Dossier implements IDossier, IListable {
         this.reportTemplateIds = dossier.reportTemplateIds;
         this.softDeletedTime = dossier.softDeletedTime;
         this.startDate = dossier.startDate;
-        this.watermarkEnabled = dossier.watermarkEnabled;
+        this.watermarkId = dossier.watermarkId;
-        this.watermarkPreviewEnabled = dossier.watermarkPreviewEnabled;
+        this.previewWatermarkId = dossier.previewWatermarkId;
         this.archivedTime = dossier.archivedTime;
         this.hasReviewers = !!this.memberIds && this.memberIds.length > 1;
 

libs/red-domain/src/lib/dossiers/dossier.request.ts

@@ -53,4 +53,12 @@ export interface IDossierRequest {
      * Whether a watermark will be applied to the preview files or not.
      */
     readonly watermarkPreviewEnabled?: boolean;
+    /**
+     * Watermark id that will be applied  to the redacted files.
+     */
+    readonly watermarkId?: number;
+    /**
+     * Watermark id that will be applied  to the preview files.
+     */
+    readonly previewWatermarkId?: number;
 }

libs/red-domain/src/lib/dossiers/dossier.ts

@@ -17,7 +17,7 @@ export interface IDossier {
     readonly reportTemplateIds: List;
     readonly softDeletedTime?: string;
     readonly startDate?: string;
-    readonly watermarkEnabled: boolean;
+    readonly watermarkId: number;
-    readonly watermarkPreviewEnabled: boolean;
+    readonly previewWatermarkId: number;
     readonly archivedTime: string;
 }

libs/red-domain/src/lib/file-attributes/file-attributes-config.ts

@@ -3,7 +3,7 @@ import { IFileAttributeConfig } from './file-attribute-config';
 export interface IFileAttributesConfig {
     delimiter?: string;
     encoding?: string;
-    keyColumn?: string
+    keyColumn?: string;
     filenameMappingColumnHeaderName?: string;
     fileAttributeConfigs?: IFileAttributeConfig[];
 }

libs/red-domain/src/lib/shared/index.ts

@@ -2,7 +2,6 @@ export * from './sorters/status-sorter';
 export * from './breadcrumb-types';
 export * from './types';
 export * from './rules';
-export * from './watermark';
 export * from './default-color-type';
 export * from './colors';
 export * from './view-mode';

libs/red-domain/src/lib/shared/watermark.ts

@@ -1,15 +0,0 @@
-export interface IWatermark {
-    fontSize?: number;
-    fontType?: string;
-    hexColor?: string;
-    opacity?: number;
-    orientation?: WatermarkOrientation;
-    text?: string;
-}
-
-export const WatermarkOrientations = {
-    DIAGONAL: 'DIAGONAL',
-    HORIZONTAL: 'HORIZONTAL',
-    VERTICAL: 'VERTICAL',
-} as const;
-export type WatermarkOrientation = keyof typeof WatermarkOrientations;

libs/red-domain/src/lib/watermarks/index.ts

@@ -0,0 +1,2 @@
+export * from './watermark';
+export * from './watermark.model';

libs/red-domain/src/lib/watermarks/watermark.model.ts

@@ -0,0 +1,38 @@
+import { IWatermark, WatermarkOrientation } from './watermark';
+import { IListable } from '@iqser/common-ui';
+
+export class Watermark implements IListable, IWatermark {
+    readonly id: string;
+    readonly dossierTemplateId: string;
+    enabled: boolean;
+    readonly fontSize: number;
+    readonly fontType: string;
+    readonly hexColor: string;
+    readonly opacity: number;
+    readonly orientation: WatermarkOrientation;
+    readonly text: string;
+    readonly name: string;
+    readonly createdBy?: string;
+    readonly dateAdded?: string;
+    readonly dateModified?: string;
+
+    constructor(watermark: IWatermark) {
+        this.id = watermark.id;
+        this.dossierTemplateId = watermark.dossierTemplateId;
+        this.enabled = watermark.enabled;
+        this.fontSize = watermark.fontSize;
+        this.fontType = watermark.fontType;
+        this.hexColor = watermark.hexColor;
+        this.opacity = watermark.opacity;
+        this.orientation = watermark.orientation;
+        this.text = watermark.text;
+        this.name = watermark.name;
+        this.createdBy = watermark.createdBy;
+        this.dateAdded = watermark.dateAdded;
+        this.dateModified = watermark.dateModified;
+    }
+
+    get searchKey(): string {
+        return this.name;
+    }
+}

libs/red-domain/src/lib/watermarks/watermark.ts

@@ -0,0 +1,22 @@
+export interface IWatermark {
+    id: string;
+    dossierTemplateId: string;
+    enabled: boolean;
+    fontSize: number;
+    fontType: string;
+    hexColor: string;
+    opacity: number;
+    orientation: WatermarkOrientation;
+    text: string;
+    name: string;
+    createdBy?: string;
+    dateAdded?: string;
+    dateModified?: string;
+}
+
+export const WatermarkOrientations = {
+    DIAGONAL: 'DIAGONAL',
+    HORIZONTAL: 'HORIZONTAL',
+    VERTICAL: 'VERTICAL',
+} as const;
+export type WatermarkOrientation = keyof typeof WatermarkOrientations;