RED-7523 add value/classification to rectangles

apps/red-ui/src/app/modules/admin/screens/general-config/smtp-form/smtp-form.component.ts

@@ -1,38 +1,38 @@
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
-import { ISmtpConfiguration } from '@red/domain';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { BaseFormComponent, IconButtonTypes, IqserPermissionsService, LoadingService, Toaster } from '@iqser/common-ui';
+import { ISmtpConfiguration } from '@red/domain';
+import { Roles } from '@users/roles';
+import { firstValueFrom } from 'rxjs';
 import { AdminDialogService } from '../../../services/admin-dialog.service';
 import { SmtpConfigService } from '../../../services/smtp-config.service';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { firstValueFrom } from 'rxjs';
-import { Roles } from '@users/roles';
 
 @Component({
     selector: 'redaction-smtp-form',
     templateUrl: './smtp-form.component.html',
 })
 export class SmtpFormComponent extends BaseFormComponent implements OnInit {
+    #initialConfiguration: ISmtpConfiguration;
     readonly iconButtonTypes = IconButtonTypes;
-    private _initialConfiguration: ISmtpConfiguration;
 
     constructor(
-        private readonly _formBuilder: UntypedFormBuilder,
+        private readonly _formBuilder: FormBuilder,
         private readonly _dialogService: AdminDialogService,
         private readonly _smtpConfigService: SmtpConfigService,
         private readonly _loadingService: LoadingService,
         private readonly _toaster: Toaster,
-        private readonly _permissionsService: IqserPermissionsService,
+        permissionsService: IqserPermissionsService,
     ) {
         super();
-        this.form = this._getForm();
+        this.form = this.#getForm();
-        if (!_permissionsService.has(Roles.smtp.write)) {
+        if (!permissionsService.has(Roles.smtp.write)) {
             this.form.disable();
         }
     }
 
     async ngOnInit(): Promise<void> {
-        await this._loadData();
+        await this.#loadData();
     }
 
     onToggleAuthentication(checked: boolean): void {
@@ -54,9 +54,9 @@ export class SmtpFormComponent extends BaseFormComponent implements OnInit {
     async save() {
         this._loadingService.start();
         await firstValueFrom(this._smtpConfigService.updateSMTPConfiguration(this.form.getRawValue()));
-        this._initialConfiguration = this.form.getRawValue();
+        this.#initialConfiguration = this.form.getRawValue();
         this._loadingService.stop();
-        await this._loadData();
+        await this.#loadData();
     }
 
     async testConnection() {
@@ -71,7 +71,7 @@ export class SmtpFormComponent extends BaseFormComponent implements OnInit {
         }
     }
 
-    private _getForm(): UntypedFormGroup {
+    #getForm() {
         return this._formBuilder.group({
             host: [undefined, Validators.required],
             port: [25],
@@ -88,12 +88,12 @@ export class SmtpFormComponent extends BaseFormComponent implements OnInit {
         });
     }
 
-    private async _loadData() {
+    async #loadData() {
         this._loadingService.start();
 
         try {
-            this._initialConfiguration = await firstValueFrom(this._smtpConfigService.getCurrentSMTPConfiguration());
+            this.#initialConfiguration = await firstValueFrom(this._smtpConfigService.getCurrentSMTPConfiguration());
-            this.form.patchValue(this._initialConfiguration, { emitEvent: false });
+            this.form.patchValue(this.#initialConfiguration, { emitEvent: false });
         } catch (e) {}
 
         this.initialFormValue = this.form.getRawValue();

apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html

@@ -7,7 +7,7 @@
         ></div>
 
         <div class="dialog-content redaction">
-            <div *ngIf="redactedText" class="iqser-input-group w-450">
+            <div *ngIf="!allRectangles && redactedText" class="iqser-input-group w-450">
                 <label [translate]="'edit-redaction.dialog.content.redacted-text'" class="selected-text"></label>
                 {{ redactedText }}
             </div>
@@ -50,7 +50,7 @@
 
                 <div class="iqser-input-group w-450">
                     <label [translate]="'edit-redaction.dialog.content.legal-basis'"></label>
-                    <input [value]="form.get('reason').value?.legalBasis" disabled type="text" />
+                    <input [value]="form.controls.reason.value?.legalBasis" disabled type="text" />
                 </div>
 
                 <div class="iqser-input-group w-450">
@@ -59,6 +59,11 @@
                 </div>
             </ng-container>
 
+            <div *ngIf="allRectangles" class="iqser-input-group w-400">
+                <label [translate]="'change-legal-basis-dialog.content.classification'"></label>
+                <input formControlName="value" name="classification" type="text" />
+            </div>
+
             <div class="iqser-input-group w-450">
                 <label [translate]="'edit-redaction.dialog.content.comment'"></label>
                 <textarea
@@ -78,12 +83,11 @@
                 [label]="'edit-redaction.dialog.actions.save' | translate"
                 [submit]="true"
                 [type]="iconButtonTypes.primary"
-            >
+            />
-            </iqser-icon-button>
 
             <div [translate]="'edit-redaction.dialog.actions.cancel'" class="all-caps-label cancel" mat-dialog-close></div>
         </div>
     </form>
 
-    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
+    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close" />
 </section>

apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts

@@ -1,11 +1,10 @@
 import { Component, inject, OnInit } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { DetailsRadioOption, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
 import { Dictionary, SuperTypes } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
 import { JustificationsService } from '@services/entity-services/justifications.service';
-import { Roles } from '@users/roles';
 import { firstValueFrom } from 'rxjs';
 import { IMAGE_CATEGORIES } from '../../utils/constants';
 import { getEditRedactionOptions, RedactOrHintOption } from '../../utils/dialog-options';
@@ -21,7 +20,6 @@ export class EditRedactionDialogComponent
 {
     readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
     readonly #applyToAllDossiers = this.data.applyToAllDossiers;
-    readonly roles = Roles;
     readonly iconButtonTypes = IconButtonTypes;
     readonly redactedText: string;
     readonly isModifyDictionary: boolean;
@@ -29,16 +27,23 @@ export class EditRedactionDialogComponent
     readonly isManualRedaction: boolean;
     readonly showLegalReason: boolean;
     readonly isHint: boolean;
+    readonly allRectangles = this.data.annotations.reduce((acc, a) => acc && a.rectangle, true);
     readonly showExtras: boolean;
     options: DetailsRadioOption<RedactOrHintOption>[] | undefined;
     legalOptions: LegalBasisOption[] = [];
     dictionaries: Dictionary[] = [];
-    readonly form;
+    readonly form = new FormGroup({
+        reason: new FormControl<LegalBasisOption>(null),
+        comment: new FormControl<string>(null),
+        type: new FormControl<string>(this.data.annotations[0].type),
+        section: new FormControl<string>(this.data.annotations[0].section),
+        option: new FormControl<LegalBasisOption>(null),
+        value: new FormControl<string>(this.allRectangles ? this.data.annotations[0].value : null),
+    });
 
     constructor(
         private readonly _justificationsService: JustificationsService,
         private readonly _dictionaryService: DictionaryService,
-        private readonly _formBuilder: FormBuilder,
     ) {
         super();
         const annotations = this.data.annotations;
@@ -49,11 +54,10 @@ export class EditRedactionDialogComponent
         this.isManualRedaction = firstEntry.type === SuperTypes.ManualRedaction;
         this.isHint = firstEntry.isHint;
         this.showExtras = !(this.isImage || this.isHint);
-        this.form = this.#getForm();
     }
 
     get displayedDictionaryLabel() {
-        const selectedDictionaryType = this.form.get('type').value;
+        const selectedDictionaryType = this.form.controls.type.value;
         if (selectedDictionaryType) {
             return this.dictionaries.find(d => d.type === selectedDictionaryType)?.label ?? null;
         }
@@ -61,10 +65,10 @@ export class EditRedactionDialogComponent
     }
 
     get disabled() {
-        return !this.form.get('reason').value;
+        return !this.form.controls.reason.value;
     }
 
-    async ngOnInit(): Promise<void> {
+    async ngOnInit() {
         this.#setTypes();
         const data = await firstValueFrom(this._justificationsService.loadAll(this.#dossier.dossierTemplateId));
         this.legalOptions = data.map(lbm => ({
@@ -73,26 +77,27 @@ export class EditRedactionDialogComponent
             label: lbm.name,
         }));
 
+        const reason = this.legalOptions.find(o => o.legalBasis === this.data.annotations[0].legalBasis);
         this.form.patchValue({
-            reason: this.legalOptions.find(o => o.legalBasis === this.data.annotations[0].legalBasis),
+            reason: reason,
         });
 
         this.legalOptions.sort((a, b) => a.label.localeCompare(b.label));
     }
 
     typeChanged() {
-        const selectedDictionaryType = this.form.get('type').value;
+        const selectedDictionaryType = this.form.controls.type.value;
         this.#setOptions(selectedDictionaryType);
     }
 
-    save(): void {
+    save() {
         const value = this.form.value;
         this.close({
             legalBasis: value.reason?.legalBasis ?? '',
             section: value.section,
             comment: value.comment,
             type: value.type,
-            value: this.#allRectangles() ? this.data.annotations[0].value : null,
+            value: this.allRectangles ? value.value : null,
         });
     }
 
@@ -120,18 +125,4 @@ export class EditRedactionDialogComponent
             { emitEvent: false },
         );
     }
-
-    #getForm() {
-        return this._formBuilder.group({
-            reason: [null],
-            comment: [null],
-            type: [this.data.annotations[0].type],
-            section: [this.data.annotations[0].section],
-            option: [null, { disabled: true }],
-        });
-    }
-
-    #allRectangles() {
-        return this.data.annotations.reduce((acc, a) => acc && a.rectangle, true);
-    }
 }