RED-7774: Redact text validators

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

@@ -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';
@@ -24,45 +24,20 @@ 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;
-
-    constructor(
-        private readonly _justificationsService: JustificationsService,
-        private readonly _dictionaryService: DictionaryService,
-        private readonly _formBuilder: FormBuilder,
-    ) {
-        super();
-        this.form.controls.option.valueChanges
-            .pipe(
-                tap((option: DetailsRadioOption<RedactOrHintOption>) => {
-                    this.dictionaryRequest = option.value === RedactOrHintOptions.IN_DOSSIER;
-                    if (this.dictionaryRequest) {
-                        this.#setDictionaries();
-                        this.form.patchValue({ selectedText: this.modifiedText });
-                    } else {
-                        this.isEditingSelectedText = false;
-                        this.modifiedText = this.form.controls.selectedText.value;
-                        this.form.patchValue({ selectedText: this.initialText });
-                    }
-                    this.#resetValues();
-                }),
-                takeUntilDestroyed(),
-            )
-            .subscribe();
-    }
+    readonly options: DetailsRadioOption<RedactOrHintOption>[];
+    readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
+    readonly #manualRedactionTypeExists = inject(DictionaryService).hasManualType(this.#dossier.dossierTemplateId);
+    #applyToAllDossiers = this.data.applyToAllDossiers ?? true;
 
     get displayedDictionaryLabel() {
         const dictType = this.form.controls.dictionary.value;
@@ -79,6 +54,36 @@ export class RedactTextDialogComponent
         return !this.form.controls.dictionary.value;
     }
 
+    constructor(
+        private readonly _justificationsService: JustificationsService,
+        private readonly _dictionaryService: DictionaryService,
+        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>) => {
+                    this.dictionaryRequest = option.value === RedactOrHintOptions.IN_DOSSIER;
+                    if (this.dictionaryRequest) {
+                        this.#setDictionaries();
+                        this.form.patchValue({ selectedText: this.modifiedText });
+                    } else {
+                        this.isEditingSelectedText = false;
+                        this.modifiedText = this.form.controls.selectedText.value;
+                        this.form.patchValue({ selectedText: this.initialText }, { emitEvent: true });
+                    }
+                    this.#setupValidators(option.value);
+                    this.#resetValues();
+                }),
+                takeUntilDestroyed(),
+            )
+            .subscribe();
+    }
+
     async ngOnInit(): Promise<void> {
         const data = await firstValueFrom(this._justificationsService.getForDossierTemplate(this.#dossier.dossierTemplateId));
         this.legalOptions = data.map(lbm => ({
@@ -134,14 +139,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],