From 5bfe76f5c67a7390078ee6fb7a8e844e69962090 Mon Sep 17 00:00:00 2001 From: amentis Date: Tue, 23 Apr 2024 14:51:52 +0300 Subject: [PATCH] add description save validation error dialog --- .../editor/description-editor.component.ts | 220 ++++++++++-------- 1 file changed, 119 insertions(+), 101 deletions(-) diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts b/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts index f1ea2cc50..c7345aef5 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts +++ b/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts @@ -48,6 +48,7 @@ import { DescriptionTemplate, DescriptionTemplateField, DescriptionTemplateField import { DmpDescriptionTemplate } from '@app/core/model/dmp/dmp'; import { FileTransformerEntityType } from '@app/core/common/enum/file-transformer-entity-type'; import { nameof } from 'ts-simple-nameof'; +import { AbstractControl, UntypedFormArray, UntypedFormGroup } from '@angular/forms'; @Component({ selector: 'app-description-editor-component', @@ -661,8 +662,11 @@ export class DescriptionEditorComponent extends BaseEditor { + if (controlName != 'properties' && this.formGroup.get(controlName).invalid) { + errmess.push(...this._buildErrorMessagesForAbstractControl(this.formGroup.get(controlName), controlName)); + } + }) + + return errmess; + } + + // takes as an input an abstract control and gets its error messages[] + private _buildErrorMessagesForAbstractControl(aControl: AbstractControl, controlName: string): string[] { + const errmess: string[] = []; + + if (aControl.invalid) { + + if (aControl.errors) { + //check if has placeholder + if ((aControl).nativeElement !== undefined && (aControl).nativeElement !== null) { + const placeholder = this._getPlaceHolder(aControl); + if (placeholder) { + controlName = placeholder; + } + } + const errorMessage = this._getErrorMessage(aControl, controlName); + + errmess.push(...errorMessage); + } + + /*in case the aControl is FormControl then the it should have provided its error messages above. + No need to check case of FormControl below*/ + + if (aControl instanceof UntypedFormGroup) { + + const fg = aControl as UntypedFormGroup; + //check children + Object.keys(fg.controls).forEach(controlName => { + errmess.push(...this._buildErrorMessagesForAbstractControl(fg.get(controlName), controlName)); + }); + } else if (aControl instanceof UntypedFormArray) { + + const fa = aControl as UntypedFormArray; + + fa.controls.forEach((control, index) => { + errmess.push(...this._buildErrorMessagesForAbstractControl(control, `${controlName} --> ${index + 1}`)); + }); + + } + } + + return errmess; + } + + private _getErrorMessage(formControl: AbstractControl, name: string): string[] { + const errors: string[] = []; + Object.keys(formControl.errors).forEach(key => { + if (key === 'required') { + // errors.push(this.language.instant(name + ": " + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.REQUIRED'))); + if(name == 'label') errors.push(this.language.instant(this.language.instant('DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION') + ": " + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.REQUIRED'))); + else if(name == 'descriptionTemplateId') errors.push(this.language.instant(this.language.instant('DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION-TEMPLATE') + ": " + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.REQUIRED'))); + } + else if (key === 'email') { + errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.EMAIL')); + } else if (key === 'min') { + errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.MIN-VALUE', {'min': formControl.getError('min').min})); + } else if (key === 'max') { + errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.MAX-VALUE', {'max': formControl.getError('max').max})); + } else { + errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + formControl.errors[key].message); + } + }); + return errors; + } + + private _getPlaceHolder(formControl: any): string { + if (formControl.nativeElement.localName === 'input' || formControl.nativeElement.localName === 'textarea' + || formControl.nativeElement.localName === 'richTextarea') { + return formControl.nativeElement.getAttribute('placeholder'); + } else if (formControl.nativeElement.localName === 'mat-select') { + return formControl.nativeElement.getAttribute('placeholder'); + } else if (formControl.nativeElement.localName === 'app-single-auto-complete') { + return (Array.from(formControl.nativeElement.firstChild.children).filter((x: any) => x.localName === 'input')[0] as any).getAttribute('placeholder'); + } else if (formControl.nativeElement.localName === 'app-multiple-auto-complete') { + return (Array.from(formControl.nativeElement.firstChild.firstChild.firstChild.children).filter((x: any) => x.localName === 'input')[0] as any).getAttribute('placeholder'); + } + } + + // // // Misc @@ -1854,26 +1972,6 @@ export class DescriptionEditorComponent extends BaseEditor { -// if (key === 'required') { -// errors.push(this.language.instant(name + ": " + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.REQUIRED'))); -// } -// // if (key === 'required') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + this.getPlaceHolder(formControl) + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.REQUIRED')); } -// else if (key === 'email') { -// errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.EMAIL')); -// } else if (key === 'min') { -// errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.MIN-VALUE', { 'min': formControl.getError('min').min })); -// } else if (key === 'max') { -// errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.MAX-VALUE', { 'max': formControl.getError('max').max })); -// } else { -// errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + formControl.errors[key].message); -// } -// }); -// return errors; -// } - // private _getPlaceHolder(formControl: any): string { // if (formControl.nativeElement.localName === 'input' || formControl.nativeElement.localName === 'textarea' // || formControl.nativeElement.localName === 'richTextarea') { @@ -1888,60 +1986,6 @@ export class DescriptionEditorComponent extends BaseEditor { -// if (controlName != 'descriptionProfileDefinition' && this.formGroup.get(controlName).invalid) { -// errmess.push(...this._buildErrorMessagesForAbstractControl(this.formGroup.get(controlName), controlName)); -// } -// }) - -// return errmess; -// } - -// // takes as an input an abstract control and gets its error messages[] -// private _buildErrorMessagesForAbstractControl(aControl: AbstractControl, controlName: string): string[] { -// const errmess: string[] = []; - -// if (aControl.invalid) { - -// if (aControl.errors) { -// //check if has placeholder -// if ((aControl).nativeElement !== undefined && (aControl).nativeElement !== null) { -// const placeholder = this._getPlaceHolder(aControl); -// if (placeholder) { -// controlName = placeholder; -// } -// } -// const errorMessage = this._getErrorMessage(aControl, controlName); - -// errmess.push(...errorMessage); -// } - -// /*in case the aControl is FormControl then the it should have provided its error messages above. -// No need to check case of FormControl below*/ - -// if (aControl instanceof UntypedFormGroup) { - -// const fg = aControl as UntypedFormGroup; -// //check children -// Object.keys(fg.controls).forEach(controlName => { -// errmess.push(...this._buildErrorMessagesForAbstractControl(fg.get(controlName), controlName)); -// }); -// } else if (aControl instanceof UntypedFormArray) { - -// const fa = aControl as UntypedFormArray; - -// fa.controls.forEach((control, index) => { -// errmess.push(...this._buildErrorMessagesForAbstractControl(control, `${controlName} --> ${index + 1}`)); -// }); - -// } -// } - -// return errmess; -// } - // save(saveType?: SaveType) { // this.saving = true; // Object.keys(this.formGroup.controls).forEach(controlName => { @@ -1964,32 +2008,6 @@ export class DescriptionEditorComponent extends BaseEditor