RED-5387 - Header and explanation for Watermarks options in Edit Dossier/Download Package settings

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

@@ -1,4 +1,4 @@
-<form *ngIf="form" [formGroup]="form">
+<form *ngIf="form && componentContext$ | async as ctx" [formGroup]="form">
     <div>
         <redaction-select
             [label]="'report-type.label' | translate: { length: reportTypesLength }"
@@ -15,21 +15,28 @@
         ></redaction-select>
     </div>
 
-    <redaction-watermark-selector
+    <p class="heading">{{ 'dossier-watermark-selector.heading' | translate }}</p>
-        [dossierTemplateId]="dossier.dossierTemplateId"
+    <ng-container *ngIf="ctx.existsWatermarks; else noWatermarks">
-        [isReadonly]="!canEditDossier"
+        <redaction-watermark-selector
-        [label]="'dossier-watermark-selector.watermark' | translate"
+            [dossierTemplateId]="dossier.dossierTemplateId"
-        formControlName="watermarkId"
+            [isReadonly]="!canEditDossier"
-    >
+            [label]="'dossier-watermark-selector.watermark' | translate"
-    </redaction-watermark-selector>
+            formControlName="watermarkId"
+        >
+        </redaction-watermark-selector>
 
-    <redaction-watermark-selector
+        <redaction-watermark-selector
-        [dossierTemplateId]="dossier.dossierTemplateId"
+            [dossierTemplateId]="dossier.dossierTemplateId"
-        [isReadonly]="!canEditDossier"
+            [isReadonly]="!canEditDossier"
-        [label]="'dossier-watermark-selector.preview' | translate"
+            [label]="'dossier-watermark-selector.preview' | translate"
-        formControlName="previewWatermarkId"
+            formControlName="previewWatermarkId"
-    >
+        >
-    </redaction-watermark-selector>
+        </redaction-watermark-selector>
+    </ng-container>
+
+    <ng-template #noWatermarks>
+        <p class="no-watermark" [innerHTML]="'dossier-watermark-selector.no-watermark' | translate"></p>
+    </ng-template>
 </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

@@ -1,7 +1,4 @@
-.download-includes {
+@use '../../../../../apps/red-ui/src/assets/styles/variables';
-    margin: 16px 0 10px;
-    font-weight: 500;
-}
 
 redaction-select {
     flex: 1;
@@ -26,3 +23,12 @@ form {
         margin-top: -10px;
     }
 }
+
+.heading {
+    margin-top: 32px !important;
+    margin-bottom: 0 !important;
+}
+
+.no-watermark {
+    color: variables.$grey-7;
+}

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

@@ -5,15 +5,25 @@ import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-doss
 import { downloadTypesTranslations } from '@translations/download-types-translations';
 import { ReportTemplateService } from '@services/report-template.service';
 import { PermissionsService } from '@services/permissions.service';
-import { firstValueFrom } from 'rxjs';
+import { firstValueFrom, Observable } from 'rxjs';
 import { DossiersService } from '@services/dossiers/dossiers.service';
+import { WatermarksMapService } from '@services/entity-services/watermarks-map.service';
+import { ContextComponent, shareLast } from '@iqser/common-ui';
+import { tap } from 'rxjs/operators';
+
+interface EditDossierDownloadPackageContext {
+    existsWatermarks: boolean;
+}
 
 @Component({
     selector: 'redaction-edit-dossier-download-package',
     templateUrl: './edit-dossier-download-package.component.html',
     styleUrls: ['./edit-dossier-download-package.component.scss'],
 })
-export class EditDossierDownloadPackageComponent implements OnInit, EditDossierSectionInterface {
+export class EditDossierDownloadPackageComponent
+    extends ContextComponent<EditDossierDownloadPackageContext>
+    implements OnInit, EditDossierSectionInterface
+{
     form: UntypedFormGroup;
     downloadTypes: { key: DownloadFileType; label: string }[] = ['ORIGINAL', 'PREVIEW', 'DELTA_PREVIEW', 'REDACTED'].map(
         (type: DownloadFileType) => ({
@@ -23,6 +33,8 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
     );
     availableReportTypes: IReportTemplate[] = [];
 
+    #existsWatermarks$: Observable<boolean>;
+
     @Input() dossier: Dossier;
 
     constructor(
@@ -30,7 +42,10 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
         private readonly _reportTemplateController: ReportTemplateService,
         private readonly _formBuilder: UntypedFormBuilder,
         private readonly _permissionsService: PermissionsService,
-    ) {}
+        private readonly _watermarksMapService: WatermarksMapService,
+    ) {
+        super();
+    }
 
     get reportTypesLength() {
         return this.form.controls['reportTemplateIds']?.value?.length || 0;
@@ -84,6 +99,13 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
 
     async ngOnInit() {
         const dossierTemplateId = this.dossier.dossierTemplateId;
+
+        this.#existsWatermarks$ = this._watermarksMapService.watchChanged$(dossierTemplateId).pipe(shareLast());
+
+        super._initContext({
+            existsWatermarks: this.#existsWatermarks$,
+        });
+
         this.availableReportTypes =
             (await firstValueFrom(this._reportTemplateController.getAvailableReportTemplates(dossierTemplateId))) || [];
 

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

@@ -1007,6 +1007,8 @@
     }
   },
   "dossier-watermark-selector": {
+    "heading": "",
+    "no-watermark": "",
     "preview": "",
     "watermark": ""
   },

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

@@ -1007,6 +1007,8 @@
     }
   },
   "dossier-watermark-selector": {
+    "heading": "Watermarks on documents",
+    "no-watermark": "There is no watermark defined for the dossier template.<br>Contact your app admin to define one.",
     "preview": "Watermark application on preview documents",
     "watermark": "Watermark application on redacted documents"
   },