RED-2514, base dialog updates

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

@@ -3,7 +3,7 @@
         {{ dialogHeader }}
     </div>
 
-    <form (submit)="save()" [formGroup]="form">
+    <form [formGroup]="form">
         <div class="dialog-content">
             <div class="iqser-input-group mb-14">
                 <label translate="add-edit-dictionary.form.technical-name"></label>
@@ -95,7 +95,7 @@
         </div>
 
         <div class="dialog-actions">
-            <button [disabled]="form.invalid || !changed" color="primary" mat-flat-button type="submit">
+            <button [disabled]="!valid || !changed" color="primary" mat-flat-button>
                 {{ 'add-edit-dictionary.save' | translate }}
             </button>
         </div>

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

@@ -29,6 +29,7 @@ export class AddEditDictionaryDialogComponent extends BaseDialogComponent {
         name: this._data.dictionary?.label,
     });
     readonly hasColor$: Observable<boolean>;
+    readonly disabled = false;
     private readonly _dossierTemplateId = this._data.dossierTemplateId;
 
     constructor(
@@ -47,20 +48,8 @@ export class AddEditDictionaryDialogComponent extends BaseDialogComponent {
         this.technicalName$ = this.form.get('label').valueChanges.pipe(map(value => this._toTechnicalName(value)));
     }
 
-    private _getForm(dictionary: Dictionary): FormGroup {
+    get valid(): boolean {
-        return this._formBuilder.group({
+        return this.form.valid;
-            label: [dictionary?.label, [Validators.required, Validators.minLength(3)]],
-            description: [dictionary?.description],
-            rank: [dictionary?.rank, Validators.required],
-            hexColor: [dictionary?.hexColor, [Validators.required, Validators.minLength(7)]],
-            hint: [!!dictionary?.hint],
-            addToDictionaryAction: [!!dictionary?.addToDictionaryAction],
-            caseSensitive: [this.getDictCaseSensitive(dictionary)],
-        });
-    }
-
-    getDictCaseSensitive(dictionary: Dictionary): boolean {
-        return dictionary ? !dictionary.caseInsensitive : false;
     }
 
     get changed(): boolean {
@@ -92,6 +81,10 @@ export class AddEditDictionaryDialogComponent extends BaseDialogComponent {
         return this.form.get('hexColor').valueChanges.pipe(map((value: string) => !value || value?.length === 0));
     }
 
+    getDictCaseSensitive(dictionary: Dictionary): boolean {
+        return dictionary ? !dictionary.caseInsensitive : false;
+    }
+
     async save(): Promise<void> {
         const dictionary = this._formToObject();
         let observable: Observable<unknown>;
@@ -119,6 +112,18 @@ export class AddEditDictionaryDialogComponent extends BaseDialogComponent {
             });
     }
 
+    private _getForm(dictionary: Dictionary): FormGroup {
+        return this._formBuilder.group({
+            label: [dictionary?.label, [Validators.required, Validators.minLength(3)]],
+            description: [dictionary?.description],
+            rank: [dictionary?.rank, Validators.required],
+            hexColor: [dictionary?.hexColor, [Validators.required, Validators.minLength(7)]],
+            hint: [!!dictionary?.hint],
+            addToDictionaryAction: [!!dictionary?.addToDictionaryAction],
+            caseSensitive: [this.getDictCaseSensitive(dictionary)],
+        });
+    }
+
     private _toTechnicalName(value: string) {
         const existingTechnicalNames = Object.keys(this._appStateService.dictionaryData[this._dossierTemplateId]);
         const baseTechnicalName = toKebabCase(value.trim());

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

@@ -8,7 +8,7 @@
         class="dialog-header heading-l"
     ></div>
 
-    <form (submit)="saveDossierAttribute()" [formGroup]="form">
+    <form [formGroup]="form">
         <div class="dialog-content">
             <div class="iqser-input-group required w-300">
                 <label translate="add-edit-dossier-attribute.form.label"></label>
@@ -35,7 +35,7 @@
             </div>
         </div>
         <div class="dialog-actions">
-            <button [disabled]="form.invalid || !changed" color="primary" mat-flat-button type="submit">
+            <button [disabled]="form.invalid || !changed" color="primary" mat-flat-button>
                 {{ 'add-edit-dossier-attribute.save' | translate }}
             </button>
         </div>

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

@@ -8,7 +8,7 @@
         class="dialog-header heading-l"
     ></div>
 
-    <form (submit)="save()" [formGroup]="form">
+    <form [formGroup]="form">
         <div class="dialog-content">
             <div class="iqser-input-group required w-300">
                 <label translate="add-edit-dossier-template.form.name"></label>
@@ -87,7 +87,7 @@
         </div>
 
         <div class="dialog-actions">
-            <button [disabled]="form.invalid || !changed" color="primary" mat-flat-button type="submit">
+            <button [disabled]="!valid || !changed" color="primary" mat-flat-button>
                 {{ 'add-edit-dossier-template.save' | translate }}
             </button>
         </div>

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

@@ -25,7 +25,7 @@ export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent {
         key: type,
         label: downloadTypesTranslations[type],
     }));
-
+    readonly disabled = false;
     private _previousValidFrom: Moment;
     private _previousValidTo: Moment;
 
@@ -49,20 +49,8 @@ export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent {
         });
     }
 
-    private _getForm(): FormGroup {
+    get valid(): boolean {
-        return this._formBuilder.group({
+        return this.form.valid;
-            name: [this.dossierTemplate?.name, Validators.required],
-            description: [this.dossierTemplate?.description],
-            validFrom: [
-                this.dossierTemplate?.validFrom ? moment(this.dossierTemplate?.validFrom) : null,
-                this._requiredIfValidator(() => this.hasValidFrom),
-            ],
-            validTo: [
-                this.dossierTemplate?.validTo ? moment(this.dossierTemplate?.validTo) : null,
-                this._requiredIfValidator(() => this.hasValidTo),
-            ],
-            downloadFileTypes: [this.dossierTemplate?.downloadFileTypes || ['PREVIEW', 'REDACTED']],
-        });
     }
 
     get changed(): boolean {
@@ -119,6 +107,22 @@ export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent {
         }
     }
 
+    private _getForm(): FormGroup {
+        return this._formBuilder.group({
+            name: [this.dossierTemplate?.name, Validators.required],
+            description: [this.dossierTemplate?.description],
+            validFrom: [
+                this.dossierTemplate?.validFrom ? moment(this.dossierTemplate?.validFrom) : null,
+                this._requiredIfValidator(() => this.hasValidFrom),
+            ],
+            validTo: [
+                this.dossierTemplate?.validTo ? moment(this.dossierTemplate?.validTo) : null,
+                this._requiredIfValidator(() => this.hasValidTo),
+            ],
+            downloadFileTypes: [this.dossierTemplate?.downloadFileTypes || ['PREVIEW', 'REDACTED']],
+        });
+    }
+
     private _applyValidityIntervalConstraints(value): boolean {
         if (applyIntervalConstraints(value, this._previousValidFrom, this._previousValidTo, this.form, 'validFrom', 'validTo')) {
             return true;

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

@@ -8,7 +8,7 @@
         class="dialog-header heading-l"
     ></div>
 
-    <form (submit)="save()" [formGroup]="form">
+    <form [formGroup]="form">
         <div class="dialog-content">
             <div class="iqser-input-group required w-300">
                 <label translate="add-edit-file-attribute.form.name"></label>
@@ -53,20 +53,38 @@
                 </div>
 
                 <div class="red-input-group mt-0">
-                    <mat-checkbox color="primary" formControlName="filterable" name="filterable">
+                    <mat-checkbox
+                        [matTooltipDisabled]="canSetFilterable"
+                        [matTooltip]="
+                            'add-edit-file-attribute.form.filterable-disabled' | translate: { maxNumber: DISPLAYED_FILTERABLE_LIMIT }
+                        "
+                        color="primary"
+                        formControlName="filterable"
+                        matTooltipPosition="above"
+                        name="filterable"
+                    >
                         {{ 'add-edit-file-attribute.form.filterable' | translate }}
                     </mat-checkbox>
                 </div>
 
                 <div class="red-input-group mt-0">
-                    <mat-checkbox color="primary" formControlName="displayedInFileList" name="displayedInFileList">
+                    <mat-checkbox
+                        [matTooltipDisabled]="canSetDisplayed"
+                        [matTooltip]="
+                            'add-edit-file-attribute.form.displayed-disabled' | translate: { maxNumber: DISPLAYED_FILTERABLE_LIMIT }
+                        "
+                        color="primary"
+                        formControlName="displayedInFileList"
+                        matTooltipPosition="above"
+                        name="displayedInFileList"
+                    >
                         {{ 'add-edit-file-attribute.form.displayedInFileList' | translate }}
                     </mat-checkbox>
                 </div>
             </div>
         </div>
         <div class="dialog-actions">
-            <button [disabled]="form.invalid || !changed" color="primary" mat-flat-button type="submit">
+            <button [disabled]="!valid || !changed" color="primary" mat-flat-button>
                 {{ 'add-edit-file-attribute.save' | translate }}
             </button>
         </div>

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

@@ -1,29 +1,48 @@
-import { Component, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { fileAttributeTypesTranslations } from '../../translations/file-attribute-types-translations';
+import { FileAttributesService } from '@services/entity-services/file-attributes.service';
 import { BaseDialogComponent } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-add-edit-file-attribute-dialog',
     templateUrl: './add-edit-file-attribute-dialog.component.html',
     styleUrls: ['./add-edit-file-attribute-dialog.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AddEditFileAttributeDialogComponent extends BaseDialogComponent {
+    readonly disabled = false;
+    DISPLAYED_FILTERABLE_LIMIT = 3;
+    translations = fileAttributeTypesTranslations;
     fileAttribute: IFileAttributeConfig = this.data.fileAttribute;
     dossierTemplateId: string = this.data.dossierTemplateId;
-    readonly form: FormGroup = this._getForm(this.fileAttribute);
+    readonly form!: FormGroup;
     readonly typeOptions = Object.keys(FileAttributeConfigTypes);
-    translations = fileAttributeTypesTranslations;
+    readonly canSetDisplayed!: boolean;
+    readonly canSetFilterable!: boolean;
 
     constructor(
         private readonly _formBuilder: FormBuilder,
+        private readonly _fileAttributesService: FileAttributesService,
         public dialogRef: MatDialogRef<AddEditFileAttributeDialogComponent>,
         @Inject(MAT_DIALOG_DATA)
-        public data: { fileAttribute: IFileAttributeConfig; dossierTemplateId: string },
+        public data: {
+            fileAttribute: IFileAttributeConfig;
+            dossierTemplateId: string;
+            numberOfDisplayedAttrs: number;
+            numberOfFilterableAttrs: number;
+        },
     ) {
         super();
+        this.canSetDisplayed = data.numberOfDisplayedAttrs < this.DISPLAYED_FILTERABLE_LIMIT || data.fileAttribute?.displayedInFileList;
+        this.canSetFilterable = data.numberOfFilterableAttrs < this.DISPLAYED_FILTERABLE_LIMIT || data.fileAttribute?.filterable;
+        this.form = this._getForm(this.fileAttribute);
+    }
+
+    get valid(): boolean {
+        return this.form.valid;
     }
 
     get changed(): boolean {
@@ -60,8 +79,8 @@ export class AddEditFileAttributeDialogComponent extends BaseDialogComponent {
             type: [fileAttribute?.type || FileAttributeConfigTypes.TEXT, Validators.required],
             readonly: [fileAttribute ? !fileAttribute.editable : false],
             primaryAttribute: [fileAttribute?.primaryAttribute],
-            filterable: [fileAttribute?.filterable],
+            filterable: { value: fileAttribute?.filterable, disabled: !this.canSetFilterable },
-            displayedInFileList: [fileAttribute?.displayedInFileList],
+            displayedInFileList: { value: fileAttribute?.displayedInFileList, disabled: !this.canSetDisplayed },
         });
     }
 }

apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html

@@ -1,7 +1,7 @@
 <section class="dialog">
     <div [translate]="translations[data.colorKey]" class="dialog-header heading-l"></div>
 
-    <form (submit)="save()" [formGroup]="form">
+    <form [formGroup]="form">
         <div class="dialog-content">
             <div class="iqser-input-group required">
                 <label translate="edit-color-dialog.form.color"></label>
@@ -28,7 +28,7 @@
         </div>
 
         <div class="dialog-actions">
-            <button [disabled]="form.invalid || !changed" color="primary" mat-flat-button type="submit">
+            <button [disabled]="!valid || !changed" color="primary" mat-flat-button>
                 {{ 'edit-color-dialog.save' | translate }}
             </button>
         </div>

apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts

@@ -21,6 +21,7 @@ interface IEditColorData {
 export class EditColorDialogComponent extends BaseDialogComponent {
     readonly form: FormGroup;
     translations = defaultColorsTranslations;
+    readonly disabled = false;
     private readonly _initialColor: string;
     private readonly _dossierTemplateId: string;
 
@@ -44,10 +45,8 @@ export class EditColorDialogComponent extends BaseDialogComponent {
         return this.form.get('color').value !== this._initialColor;
     }
 
-    private _getForm(): FormGroup {
+    get valid(): boolean {
-        return this._formBuilder.group({
+        return this.form.valid;
-            color: [this.data.colors[this.data.colorKey], [Validators.required, Validators.minLength(7)]],
-        });
     }
 
     async save() {
@@ -65,4 +64,10 @@ export class EditColorDialogComponent extends BaseDialogComponent {
             this._toaster.error(_('edit-color-dialog.error'));
         }
     }
+
+    private _getForm(): FormGroup {
+        return this._formBuilder.group({
+            color: [this.data.colors[this.data.colorKey], [Validators.required, Validators.minLength(7)]],
+        });
+    }
 }

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts

@@ -63,19 +63,28 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
         super(_injector);
     }
 
+    private get _numberOfDisplayedAttrs(): number {
+        return this.entitiesService.all.filter(attr => attr.displayedInFileList).length;
+    }
+
+    private get _numberOfFilterableAttrs(): number {
+        return this.entitiesService.all.filter(attr => attr.filterable).length;
+    }
+
     async ngOnInit() {
         await this._loadData();
     }
 
     openAddEditAttributeDialog($event: MouseEvent, fileAttribute?: IFileAttributeConfig) {
-        this._dialogService.openDialog(
+        const data = {
-            'addEditFileAttribute',
+            fileAttribute,
-            $event,
+            dossierTemplateId: this._dossierTemplatesService.activeDossierTemplateId,
-            { fileAttribute, dossierTemplateId: this._dossierTemplatesService.activeDossierTemplateId },
+            numberOfDisplayedAttrs: this._numberOfDisplayedAttrs,
-            (newValue: IFileAttributeConfig) => {
+            numberOfFilterableAttrs: this._numberOfFilterableAttrs,
-                this._loadingService.loadWhile(this._createNewFileAttributeAndRefreshView(newValue));
+        };
-            },
+        this._dialogService.openDialog('addEditFileAttribute', $event, data, (newValue: IFileAttributeConfig) => {
-        );
+            this._loadingService.loadWhile(this._createNewFileAttributeAndRefreshView(newValue));
+        });
     }
 
     openConfirmDeleteAttributeDialog($event: MouseEvent, fileAttribute?: IFileAttributeConfig) {

apps/red-ui/src/app/modules/admin/screens/justifications/add-edit-justification-dialog/add-edit-justification-dialog.component.ts

@@ -4,7 +4,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Justification } from '@red/domain';
 import { JustificationsService } from '@services/entity-services/justifications.service';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
-import { BaseDialogComponent, LoadingService } from '@iqser/common-ui';
+import { LoadingService } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-add-edit-justification-dialog',
@@ -12,7 +12,7 @@ import { BaseDialogComponent, LoadingService } from '@iqser/common-ui';
     styleUrls: ['./add-edit-justification-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AddEditJustificationDialogComponent extends BaseDialogComponent {
+export class AddEditJustificationDialogComponent {
     readonly form: FormGroup = this._getForm();
 
     constructor(
@@ -22,17 +22,7 @@ export class AddEditJustificationDialogComponent extends BaseDialogComponent {
         private readonly _loadingService: LoadingService,
         public dialogRef: MatDialogRef<AddEditJustificationDialogComponent>,
         @Inject(MAT_DIALOG_DATA) public justification: Justification,
-    ) {
+    ) {}
-        super();
-    }
-
-    private _getForm(): FormGroup {
-        return this._formBuilder.group({
-            name: [{ value: this.justification?.name, disabled: !!this.justification }, Validators.required],
-            reason: [this.justification?.reason, Validators.required],
-            description: [this.justification?.description, Validators.required],
-        });
-    }
 
     get changed(): boolean {
         return (
@@ -50,4 +40,12 @@ export class AddEditJustificationDialogComponent extends BaseDialogComponent {
         this._loadingService.stop();
         this.dialogRef.close(true);
     }
+
+    private _getForm(): FormGroup {
+        return this._formBuilder.group({
+            name: [{ value: this.justification?.name, disabled: !!this.justification }, Validators.required],
+            reason: [this.justification?.reason, Validators.required],
+            description: [this.justification?.description, Validators.required],
+        });
+    }
 }

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="form" [formGroup]="form">
+<form *ngIf="form" [formGroup]="form">
     <div>
         <div *ngIf="customAttributes.length" class="heading">
             {{ 'edit-dossier-dialog.attributes.custom-attributes' | translate }}
@@ -57,7 +57,7 @@
                 <iqser-icon-button
                     (action)="fileInputClick(attr)"
                     *ngIf="!currentAttrValue(attr)"
-                    [disabled]="!canEdit"
+                    [disabled]="disabled"
                     [label]="'edit-dossier-dialog.attributes.upload-image' | translate"
                     [type]="iconButtonTypes.dark"
                     class="upload-button"
@@ -75,7 +75,7 @@
                     type="file"
                 />
             </div>
-            <div *ngIf="currentAttrValue(attr) && canEdit">
+            <div *ngIf="currentAttrValue(attr) && !disabled">
                 <iqser-circle-button
                     (action)="deleteAttr(attr)"
                     [tooltip]="'edit-dossier-dialog.attributes.delete-image' | translate"

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

@@ -48,12 +48,12 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa
         return false;
     }
 
-    get disabled() {
+    get disabled(): boolean {
         return !this._permissionsService.isOwner(this.dossier);
     }
 
-    get canEdit(): boolean {
+    get valid(): boolean {
-        return this._permissionsService.isOwner(this.dossier);
+        return this.form.valid;
     }
 
     async ngOnInit() {
@@ -134,7 +134,7 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa
     private _getForm(): FormGroup {
         const controlsConfig = {};
         for (const attribute of this.attributes) {
-            controlsConfig[attribute.id] = [{ value: attribute.value, disabled: !this.canEdit }];
+            controlsConfig[attribute.id] = [{ value: attribute.value, disabled: this.disabled }];
         }
         return this._formBuilder.group(controlsConfig);
     }

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

@@ -39,6 +39,7 @@ interface FileListItem extends IFile, IListable {
 export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileListItem> implements EditDossierSectionInterface, OnInit {
     @Input() dossier: Dossier;
     readonly changed = false;
+    readonly valid = false;
     readonly canRestoreSelected$ = this._canRestoreSelected$;
     disabled: boolean;
     readonly tableColumnConfigs: TableColumnConfig<FileListItem>[] = [

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

@@ -29,14 +29,18 @@ export class EditDossierDictionaryComponent implements EditDossierSectionInterfa
         private readonly _toaster: Toaster,
     ) {}
 
-    get changed() {
+    get changed(): boolean {
         return this._dictionaryManager.editor.hasChanges;
     }
 
-    get disabled() {
+    get disabled(): boolean {
         return !this.canEdit;
     }
 
+    get valid(): boolean {
+        return this._dictionaryManager.editor.hasChanges;
+    }
+
     async ngOnInit() {
         this._loadingService.start();
         this.canEdit = this._permissionsService.isDossierMember(this.dossier);

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

@@ -1,9 +1,9 @@
-<form [formGroup]="dossierForm" *ngIf="dossierForm">
+<form *ngIf="form" [formGroup]="form">
     <redaction-select
         [label]="'report-type.label' | translate: { length: reportTypesLength }"
+        [optionTemplate]="reportTemplateOptionTemplate"
         [options]="availableReportTypes"
         [valueMapper]="reportTemplateValueMapper"
-        [optionTemplate]="reportTemplateOptionTemplate"
         class="mr-16"
         formControlName="reportTemplateIds"
     ></redaction-select>

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

@@ -12,7 +12,7 @@ import { ReportTemplateService } from '@services/report-template.service';
     styleUrls: ['./edit-dossier-download-package.component.scss'],
 })
 export class EditDossierDownloadPackageComponent implements OnInit, EditDossierSectionInterface {
-    dossierForm: FormGroup;
+    form: FormGroup;
     downloadTypes: { key: DownloadFileType; label: string }[] = ['ORIGINAL', 'PREVIEW', 'REDACTED'].map((type: DownloadFileType) => ({
         key: type,
         label: downloadTypesTranslations[type],
@@ -28,22 +28,22 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
     ) {}
 
     get reportTypesLength() {
-        return this.dossierForm.controls['reportTemplateIds']?.value?.length || 0;
+        return this.form.controls['reportTemplateIds']?.value?.length || 0;
     }
 
     get downloadFileTypesLength() {
-        return this.dossierForm.controls['downloadFileTypes']?.value?.length || 0;
+        return this.form.controls['downloadFileTypes']?.value?.length || 0;
     }
 
     get changed() {
-        if (this.dossierForm) {
+        if (this.form) {
-            for (const key of Object.keys(this.dossierForm.getRawValue())) {
+            for (const key of Object.keys(this.form.getRawValue())) {
-                if (this.dossier[key].length !== this.dossierForm.get(key).value.length) {
+                if (this.dossier[key].length !== this.form.get(key).value.length) {
                     return true;
                 }
 
                 const originalItems = [...this.dossier[key]].sort();
-                const newItems = [...this.dossierForm.get(key).value].sort();
+                const newItems = [...this.form.get(key).value].sort();
 
                 for (let idx = 0; idx < originalItems.length; ++idx) {
                     if (originalItems[idx] !== newItems[idx]) {
@@ -57,7 +57,11 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
     }
 
     get disabled() {
-        return this.dossierForm?.invalid || !this.dossierForm?.value?.downloadFileTypes?.length;
+        return !this.form?.value?.downloadFileTypes?.length;
+    }
+
+    get valid(): boolean {
+        return this.form.valid;
     }
 
     reportTemplateValueMapper = (reportTemplate: IReportTemplate) => reportTemplate.templateId;
@@ -66,14 +70,14 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
         this.availableReportTypes =
             (await this._reportTemplateController.getAvailableReportTemplates(this.dossier.dossierTemplateId).toPromise()) || [];
 
-        this.dossierForm = this._getForm();
+        this.form = this._getForm();
     }
 
     async save(): EditDossierSaveResult {
         const dossier = {
             ...this.dossier,
-            downloadFileTypes: this.dossierForm.get('downloadFileTypes').value,
+            downloadFileTypes: this.form.get('downloadFileTypes').value,
-            reportTemplateIds: this.dossierForm.get('reportTemplateIds').value,
+            reportTemplateIds: this.form.get('reportTemplateIds').value,
         };
         try {
             await this._dossiersService.createOrUpdate(dossier).toPromise();
@@ -84,7 +88,7 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
     }
 
     revert() {
-        this.dossierForm.reset({
+        this.form.reset({
             downloadFileTypes: this.dossier.downloadFileTypes,
             reportTemplateIds: this.dossier.reportTemplateIds,
         });

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

@@ -49,17 +49,12 @@
             </div>
 
             <div *ngIf="showActionButtons" class="dialog-actions">
-                <button
+                <button (click)="save()" [disabled]="disabled || !valid || !changed" color="primary" mat-flat-button>
-                    (click)="save()"
-                    [disabled]="activeComponent?.disabled || !activeComponent?.changed"
-                    color="primary"
-                    mat-flat-button
-                >
                     {{ 'edit-dossier-dialog.actions.save' | translate }}
                 </button>
                 <iqser-icon-button
                     (action)="save(true)"
-                    [disabled]="activeComponent?.disabled || !activeComponent?.changed"
+                    [disabled]="disabled || !valid || !changed"
                     [label]="'edit-dossier-dialog.actions.save-and-close' | translate"
                     [type]="iconButtonTypes.dark"
                 >

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

@@ -4,7 +4,7 @@ import { Dossier } from '@red/domain';
 import { EditDossierGeneralInfoComponent } from './general-info/edit-dossier-general-info.component';
 import { EditDossierDownloadPackageComponent } from './download-package/edit-dossier-download-package.component';
 import { EditDossierSectionInterface } from './edit-dossier-section.interface';
-import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
+import { BaseDialogComponent, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
 import { EditDossierDictionaryComponent } from './dictionary/edit-dossier-dictionary.component';
 import { EditDossierAttributesComponent } from './attributes/edit-dossier-attributes.component';
 
@@ -21,7 +21,7 @@ type Section = 'dossierInfo' | 'downloadPackage' | 'dossierDictionary' | 'member
     templateUrl: './edit-dossier-dialog.component.html',
     styleUrls: ['./edit-dossier-dialog.component.scss'],
 })
-export class EditDossierDialogComponent {
+export class EditDossierDialogComponent extends BaseDialogComponent {
     readonly navItems: { key: Section; title?: string; sideNavTitle?: string }[];
     readonly iconButtonTypes = IconButtonTypes;
     activeNav: Section;
@@ -47,6 +47,7 @@ export class EditDossierDialogComponent {
             section?: Section;
         },
     ) {
+        super();
         this.navItems = [
             {
                 key: 'dossierInfo',
@@ -111,6 +112,18 @@ export class EditDossierDialogComponent {
         return !['deletedDocuments'].includes(this.activeNav);
     }
 
+    get changed(): boolean {
+        return this.activeComponent?.changed;
+    }
+
+    get valid(): boolean {
+        return this.activeComponent?.valid;
+    }
+
+    get disabled(): boolean {
+        return this.activeComponent?.disabled;
+    }
+
     afterSave() {
         this._toaster.success(_('edit-dossier-dialog.change-successful'), { params: { dossierName: this._dossierName } });
     }
@@ -134,7 +147,7 @@ export class EditDossierDialogComponent {
     }
 
     changeTab(key: Section) {
-        if (this.activeComponent.changed) {
+        if (this.changed) {
             this._toaster.error(_('edit-dossier-dialog.unsaved-changes'));
             return;
         }

apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-section.interface.ts

@@ -2,6 +2,7 @@ export type EditDossierSaveResult = Promise<{ success: boolean }>;
 
 export interface EditDossierSectionInterface {
     changed: boolean;
+    valid: boolean;
     disabled: boolean;
     save: (...args: any) => EditDossierSaveResult;
     revert: Function;

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

@@ -1,4 +1,4 @@
-<form (submit)="save()" [formGroup]="form">
+<form [formGroup]="form">
     <div class="iqser-input-group w-300">
         <mat-form-field floatLabel="always">
             <mat-label>{{ 'assign-dossier-owner.dialog.single-user' | translate }}</mat-label>

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

@@ -1,4 +1,4 @@
-<form (submit)="save()" [formGroup]="dossierForm">
+<form [formGroup]="form">
     <div class="iqser-input-group required w-300">
         <label translate="edit-dossier-dialog.general-info.form.name.label"></label>
         <input

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

@@ -24,7 +24,7 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
 
     @Input() dossier: Dossier;
 
-    dossierForm: FormGroup;
+    form: FormGroup;
     hasDueDate: boolean;
     dossierTemplates: IDossierTemplate[];
 
@@ -40,16 +40,16 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
         private readonly _toaster: Toaster,
     ) {}
 
-    get changed() {
+    get changed(): boolean {
-        for (const key of Object.keys(this.dossierForm.getRawValue())) {
+        for (const key of Object.keys(this.form.getRawValue())) {
             if (key === 'dueDate') {
                 if (this.hasDueDate !== !!this.dossier.dueDate) {
                     return true;
                 }
-                if (this.hasDueDate && !moment(this.dossier.dueDate).isSame(moment(this.dossierForm.get(key).value))) {
+                if (this.hasDueDate && !moment(this.dossier.dueDate).isSame(moment(this.form.get(key).value))) {
                     return true;
                 }
-            } else if (this.dossier[key] !== this.dossierForm.get(key).value) {
+            } else if (this.dossier[key] !== this.form.get(key).value) {
                 return true;
             }
         }
@@ -57,22 +57,22 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
         return false;
     }
 
-    get disabled() {
+    get valid(): boolean {
-        if (this.hasDueDate && this.dossierForm.get('dueDate').value === null) {
+        return this.form.valid;
-            return true;
+    }
-        }
 
-        return this.dossierForm.invalid;
+    get disabled(): boolean {
+        return this.hasDueDate && this.form.get('dueDate').value === null;
     }
 
     ngOnInit() {
         this._filterInvalidDossierTemplates();
-        this.dossierForm = this._getForm();
+        this.form = this._getForm();
         this.hasDueDate = !!this.dossier.dueDate;
     }
 
     revert() {
-        this.dossierForm.reset({
+        this.form.reset({
             dossierName: this.dossier.dossierName,
             dossierTemplateId: this.dossier.dossierTemplateId,
             description: this.dossier.description,
@@ -85,12 +85,12 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
     async save(): EditDossierSaveResult {
         const dossier = {
             ...this.dossier,
-            dossierName: this.dossierForm.get('dossierName').value,
+            dossierName: this.form.get('dossierName').value,
-            description: this.dossierForm.get('description').value,
+            description: this.form.get('description').value,
-            watermarkEnabled: this.dossierForm.get('watermarkEnabled').value,
+            watermarkEnabled: this.form.get('watermarkEnabled').value,
-            watermarkPreviewEnabled: this.dossierForm.get('watermarkPreviewEnabled').value,
+            watermarkPreviewEnabled: this.form.get('watermarkPreviewEnabled').value,
-            dueDate: this.hasDueDate ? this.dossierForm.get('dueDate').value : undefined,
+            dueDate: this.hasDueDate ? this.form.get('dueDate').value : undefined,
-            dossierTemplateId: this.dossierForm.get('dossierTemplateId').value,
+            dossierTemplateId: this.form.get('dossierTemplateId').value,
         } as IDossierRequest;
         try {
             await this._dossiersService.createOrUpdate(dossier).toPromise();

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

@@ -88,8 +88,10 @@
     "form": {
       "column-header": "CSV Column Header",
       "column-header-placeholder": "Enter CSV Column Header",
+      "displayed-disabled": "The maximum number of displayed attributes ({maxNumber}) has been reached.",
       "displayedInFileList": "Displayed In File List",
       "filterable": "Filterable",
+      "filterable-disabled": "The maximum number of filterable attributes ({maxNumber}) has been reached.",
       "name": "Attribute Name",
       "name-placeholder": "Enter Name",
       "primary": "Set as Primary",

libs/common-ui

@@ -1 +1 @@
-Subproject commit 1f5df2f7308d757d39df78b5b06a63c69e1865f4
+Subproject commit af9adfd5799e20d8f674a5523ebfeda87897ef97