readonly forms in admin module

apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts

@@ -14,7 +14,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 })
 export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribe implements OnDestroy {
     dossierAttribute: IDossierAttributeConfig = this.data.dossierAttribute;
-    form: FormGroup = this._getForm(this.dossierAttribute);
+    readonly form: FormGroup = this._getForm(this.dossierAttribute);
     readonly translations = dossierAttributeTypesTranslations;
     readonly typeOptions = Object.keys(DossierAttributeConfigTypes);
 

apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts

@@ -17,7 +17,7 @@ import { HttpStatusCode } from '@angular/common/http';
     styleUrls: ['./add-edit-dossier-template-dialog.component.scss'],
 })
 export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent {
-    form: FormGroup = this._getForm();
+    readonly form: FormGroup = this._getForm();
     hasValidFrom: boolean;
     hasValidTo: boolean;
     downloadTypesEnum: DownloadFileType[] = ['ORIGINAL', 'PREVIEW', 'REDACTED'];

apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts

@@ -14,7 +14,7 @@ import { BaseDialogComponent } from '@iqser/common-ui';
 export class AddEditFileAttributeDialogComponent extends BaseDialogComponent {
     fileAttribute: IFileAttributeConfig = this.data.fileAttribute;
     dossierTemplateId: string = this.data.dossierTemplateId;
-    form: FormGroup = this._getForm(this.fileAttribute);
+    readonly form: FormGroup = this._getForm(this.fileAttribute);
     readonly typeOptions = Object.keys(FileAttributeConfigTypes);
     translations = fileAttributeTypesTranslations;
 

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.html

@@ -1,6 +1,6 @@
 <div [translateParams]="{ userName: user | name }" [translate]="'reset-password-dialog.header'" class="dialog-header heading-l"></div>
 
-<form (submit)="save()" [formGroup]="passwordForm">
+<form (submit)="save()" [formGroup]="form">
     <div class="dialog-content">
         <div class="iqser-input-group required w-300">
             <label translate="reset-password-dialog.form.password"></label>
@@ -9,7 +9,7 @@
     </div>
 
     <div class="dialog-actions">
-        <button [disabled]="passwordForm.invalid" color="primary" mat-flat-button type="submit">
+        <button [disabled]="form.invalid" color="primary" mat-flat-button type="submit">
             {{ 'reset-password-dialog.actions.save' | translate }}
         </button>
 

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { UserService } from '@services/user.service';
 import { LoadingService } from '@iqser/common-ui';
 import { User } from '@red/domain';
@@ -10,9 +10,7 @@ import { User } from '@red/domain';
     styleUrls: ['./reset-password.component.scss'],
 })
 export class ResetPasswordComponent {
-    readonly passwordForm = this._formBuilder.group({
+    readonly form = this._getForm();
-        temporaryPassword: [null, Validators.required],
-    });
     @Input() user: User;
     @Output() readonly toggleResetPassword = new EventEmitter();
 
@@ -27,7 +25,7 @@ export class ResetPasswordComponent {
         await this._userService
             .resetPassword(
                 {
-                    password: this.passwordForm.get('temporaryPassword').value,
+                    password: this.form.get('temporaryPassword').value,
                     temporary: true,
                 },
                 this.user.id,
@@ -36,4 +34,10 @@ export class ResetPasswordComponent {
         this._loadingService.stop();
         this.toggleResetPassword.emit();
     }
+
+    private _getForm(): FormGroup {
+        return this._formBuilder.group({
+            temporaryPassword: [null, Validators.required],
+        });
+    }
 }

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AdminDialogService } from '../../../services/admin-dialog.service';
 import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
@@ -13,17 +13,17 @@ import { HttpStatusCode } from '@angular/common/http';
     templateUrl: './user-details.component.html',
     styleUrls: ['./user-details.component.scss'],
 })
-export class UserDetailsComponent implements OnInit {
+export class UserDetailsComponent {
     readonly iconButtonTypes = IconButtonTypes;
 
     @Input() user: User;
     @Output() readonly toggleResetPassword = new EventEmitter();
     @Output() readonly closeDialog = new EventEmitter();
 
-    form: FormGroup;
     readonly ROLES = ['RED_USER', 'RED_MANAGER', 'RED_USER_ADMIN', 'RED_ADMIN'];
     readonly translations = rolesTranslations;
     private readonly _ROLE_REQUIREMENTS = { RED_MANAGER: 'RED_USER', RED_ADMIN: 'RED_USER_ADMIN' };
+    readonly form: FormGroup = this._getForm();
 
     constructor(
         private readonly _formBuilder: FormBuilder,
@@ -31,7 +31,9 @@ export class UserDetailsComponent implements OnInit {
         private readonly _dialogService: AdminDialogService,
         private readonly _loadingService: LoadingService,
         readonly userService: UserService,
-    ) {}
+    ) {
+        this._setRolesRequirements();
+    }
 
     get changed(): boolean {
         if (!this.user) {
@@ -80,12 +82,8 @@ export class UserDetailsComponent implements OnInit {
         );
     }
 
-    ngOnInit() {
+    private _getForm(): FormGroup {
-        this._buildForm();
+        return this._formBuilder.group({
-    }
-
-    private _buildForm(): void {
-        this.form = this._formBuilder.group({
             firstName: [this.user?.firstName, Validators.required],
             lastName: [this.user?.lastName, Validators.required],
             email: [
@@ -97,7 +95,6 @@ export class UserDetailsComponent implements OnInit {
             ],
             ...this._rolesControls,
         });
-        this._setRolesRequirements();
     }
 
     private get _rolesControls(): any {

apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html

@@ -1,4 +1,4 @@
-<form (submit)="save()" *ngIf="attributesForm" [formGroup]="attributesForm">
+<form (submit)="save()" *ngIf="form" [formGroup]="form">
     <div>
         <div *ngIf="customAttributes.length" class="heading">
             {{ 'edit-dossier-dialog.attributes.custom-attributes' | translate }}
@@ -10,8 +10,11 @@
             icon="red:attribute"
         ></iqser-empty-state>
 
-        <div *ngFor="let attr of customAttributes" [class.datepicker-wrapper]="isSpecificType(attr, dossierAttributeConfigTypes.DATE)"
+        <div
-             class="iqser-input-group">
+            *ngFor="let attr of customAttributes"
+            [class.datepicker-wrapper]="isSpecificType(attr, dossierAttributeConfigTypes.DATE)"
+            class="iqser-input-group"
+        >
             <label>{{ attr.label }}</label>
             <input
                 *ngIf="isSpecificType(attr, dossierAttributeConfigTypes.NUMBER) || isSpecificType(attr, dossierAttributeConfigTypes.TEXT)"
@@ -21,7 +24,7 @@
             />
 
             <ng-container *ngIf="isSpecificType(attr, dossierAttributeConfigTypes.DATE)">
-                <input [formControlName]="attr.id" [matDatepicker]="picker" placeholder="dd/mm/yy"/>
+                <input [formControlName]="attr.id" [matDatepicker]="picker" placeholder="dd/mm/yy" />
                 <mat-datepicker-toggle [for]="picker" matSuffix>
                     <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
                 </mat-datepicker-toggle>

apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts

@@ -23,7 +23,7 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa
     imageAttributes: DossierAttributeWithValue[] = [];
     attributes: DossierAttributeWithValue[] = [];
 
-    attributesForm: FormGroup;
+    form: FormGroup;
     @ViewChildren('fileInput') private _fileInputs: QueryList<ElementRef>;
 
     constructor(
@@ -58,7 +58,7 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa
     async ngOnInit() {
         this._loadingService.start();
         await this._loadAttributes();
-        this._initForm();
+        this.form = this._getForm();
         this._loadingService.stop();
     }
 
@@ -91,22 +91,22 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa
 
         const image = $event.target.files[0];
         const result = await toBase64(image);
-        this.attributesForm.patchValue({
+        this.form.patchValue({
             [attr.id]: result,
         });
         this._getFileInputById(attr.id).nativeElement.value = null;
     }
 
     revert() {
-        this._initForm();
+        this.form = this._getForm();
     }
 
     currentAttrValue(attr: DossierAttributeWithValue): string {
-        return this.attributesForm.get(attr.id).value;
+        return this.form.get(attr.id).value;
     }
 
     deleteAttr(attr: DossierAttributeWithValue) {
-        this.attributesForm.patchValue({
+        this.form.patchValue({
             [attr.id]: null,
         });
     }
@@ -125,11 +125,11 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa
         this.imageAttributes = this.attributes.filter(attr => this.isSpecificType(attr, this.dossierAttributeConfigTypes.IMAGE));
     }
 
-    private _initForm() {
+    private _getForm(): FormGroup {
         const controlsConfig = {};
         for (const attribute of this.attributes) {
             controlsConfig[attribute.id] = [{ value: attribute.value, disabled: !this.canEdit }];
         }
-        this.attributesForm = this._formBuilder.group(controlsConfig);
+        return this._formBuilder.group(controlsConfig);
     }
 }

apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.ts

@@ -4,7 +4,6 @@ import { EditDossierSectionInterface } from '../edit-dossier-section.interface';
 import { PermissionsService } from '@services/permissions.service';
 import { DictionaryManagerComponent } from '@shared/components/dictionary-manager/dictionary-manager.component';
 import { DictionaryService } from '@shared/services/dictionary.service';
-import { FormBuilder } from '@angular/forms';
 import { CircleButtonTypes, LoadingService } from '@iqser/common-ui';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 
@@ -27,7 +26,6 @@ export class EditDossierDictionaryComponent implements EditDossierSectionInterfa
         private readonly _dictionaryService: DictionaryService,
         private readonly _permissionsService: PermissionsService,
         private readonly _loadingService: LoadingService,
-        private readonly _formBuilder: FormBuilder,
     ) {}
 
     get changed() {