Merge branch 'RED-7774' into 'master'

Resolve RED-7774

Closes RED-7774

See merge request redactmanager/red-ui!152

apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html

@@ -86,7 +86,7 @@
 
                 <mat-form-field>
                     <mat-select [placeholder]="'redact-text.dialog.content.type-placeholder' | translate" formControlName="dictionary">
-                        <mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
+                        <mat-select-trigger>{{ displayedDictionaryLabel$ | async }}</mat-select-trigger>
                         <mat-option
                             (click)="typeChanged()"
                             *ngFor="let dictionary of dictionaries"
@@ -115,7 +115,7 @@
 
         <div class="dialog-actions">
             <iqser-icon-button
-                [disabled]="disabled"
+                [disabled]="!form.valid"
                 [label]="'redact-text.dialog.actions.save' | translate"
                 [submit]="true"
                 [type]="iconButtonTypes.primary"

apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, inject, OnInit } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormBuilder } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { DetailsRadioOption, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
 import { Dictionary, IAddRedactionRequest, SuperTypes } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
@@ -8,8 +8,8 @@ import { DictionaryService } from '@services/entity-services/dictionary.service'
 import { JustificationsService } from '@services/entity-services/justifications.service';
 import { Roles } from '@users/roles';
 import { calcTextWidthInPixels } from '@utils/functions';
-import { firstValueFrom } from 'rxjs';
-import { tap } from 'rxjs/operators';
+import { firstValueFrom, Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
 import { getRedactOrHintOptions, RedactOrHintOption, RedactOrHintOptions } from '../../utils/dialog-options';
 import { RedactTextData, RedactTextResult } from '../../utils/dialog-types';
 import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
@@ -24,20 +24,21 @@ export class RedactTextDialogComponent
     extends IqserDialogComponent<RedactTextDialogComponent, RedactTextData, RedactTextResult>
     implements OnInit
 {
-    readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
-    readonly #manualRedactionTypeExists = inject(DictionaryService).hasManualType(this.#dossier.dossierTemplateId);
-    #applyToAllDossiers = this.data.applyToAllDossiers ?? true;
     readonly roles = Roles;
     readonly iconButtonTypes = IconButtonTypes;
-    readonly options = getRedactOrHintOptions(this.#dossier, this.#applyToAllDossiers, this.data.isApprover);
     readonly initialText = this.data?.manualRedactionEntryWrapper?.manualRedactionEntry?.value;
-    readonly form = this.#getForm();
+    readonly form: FormGroup;
     dictionaryRequest = false;
     legalOptions: LegalBasisOption[] = [];
     dictionaries: Dictionary[] = [];
     isEditingSelectedText = false;
     modifiedText = this.initialText;
     selectedTextRows = 1;
+    readonly options: DetailsRadioOption<RedactOrHintOption>[];
+    readonly displayedDictionaryLabel$: Observable<string>;
+    readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
+    readonly #manualRedactionTypeExists = inject(DictionaryService).hasManualType(this.#dossier.dossierTemplateId);
+    #applyToAllDossiers = this.data.applyToAllDossiers ?? true;
 
     constructor(
         private readonly _justificationsService: JustificationsService,
@@ -45,6 +46,10 @@ export class RedactTextDialogComponent
         private readonly _formBuilder: FormBuilder,
     ) {
         super();
+
+        this.options = getRedactOrHintOptions(this.#dossier, this.#applyToAllDossiers, this.data.isApprover);
+        this.form = this.#getForm();
+
         this.form.controls.option.valueChanges
             .pipe(
                 tap((option: DetailsRadioOption<RedactOrHintOption>) => {
@@ -55,28 +60,18 @@ export class RedactTextDialogComponent
                     } else {
                         this.isEditingSelectedText = false;
                         this.modifiedText = this.form.controls.selectedText.value;
-                        this.form.patchValue({ selectedText: this.initialText });
+                        this.form.patchValue({ selectedText: this.initialText }, { emitEvent: true });
                     }
+                    this.#setupValidators(option.value);
                     this.#resetValues();
                 }),
                 takeUntilDestroyed(),
             )
             .subscribe();
-    }
 
-    get displayedDictionaryLabel() {
-        const dictType = this.form.controls.dictionary.value;
-        if (dictType) {
-            return this.dictionaries.find(d => d.type === dictType)?.label ?? null;
-        }
-        return null;
-    }
-
-    get disabled() {
-        if (this.dictionaryRequest) {
-            return !this.form.controls.dictionary.value;
-        }
-        return !this.form.controls.dictionary.value;
+        this.displayedDictionaryLabel$ = this.form.controls.dictionary.valueChanges.pipe(
+            map(dictionary => this.dictionaries.find(d => d.type === dictionary)?.label ?? null),
+        );
     }
 
     async ngOnInit(): Promise<void> {
@@ -134,14 +129,30 @@ export class RedactTextDialogComponent
         }
     }
 
+    #setupValidators(option: RedactOrHintOption) {
+        switch (option) {
+            case RedactOrHintOptions.IN_DOSSIER:
+                this.form.controls.reason.clearValidators();
+                this.form.controls.dictionary.addValidators(Validators.required);
+                break;
+            case RedactOrHintOptions.ONLY_HERE:
+                this.form.controls.dictionary.clearValidators();
+                this.form.controls.reason.addValidators(Validators.required);
+                break;
+        }
+
+        this.form.controls.reason.updateValueAndValidity();
+        this.form.controls.dictionary.updateValueAndValidity();
+    }
+
     #setDictionaries() {
         this.dictionaries = this._dictionaryService.getRedactTextDictionaries(this.#dossier.dossierTemplateId, !this.#applyToAllDossiers);
     }
 
-    #getForm() {
+    #getForm(): FormGroup {
         return this._formBuilder.group({
             selectedText: this.data?.manualRedactionEntryWrapper?.manualRedactionEntry?.value,
-            reason: null as LegalBasisOption,
+            reason: [null as LegalBasisOption, Validators.required],
             comment: [null],
             dictionary: [this.#manualRedactionTypeExists ? SuperTypes.ManualRedaction : null],
             option: this.options[0],