Restyles Warnign Dialog
This commit is contained in:
parent
794ef0142a
commit
6bc2d37bda
|
@ -391,6 +391,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
|
||||||
private showValidationErrorsDialog(projectOnly?: boolean) {
|
private showValidationErrorsDialog(projectOnly?: boolean) {
|
||||||
const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
|
const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
|
||||||
disableClose: true,
|
disableClose: true,
|
||||||
|
autoFocus: false,
|
||||||
|
restoreFocus: false,
|
||||||
data: {
|
data: {
|
||||||
errorMessages: this.errorMessages,
|
errorMessages: this.errorMessages,
|
||||||
projectOnly: projectOnly
|
projectOnly: projectOnly
|
||||||
|
|
|
@ -564,6 +564,8 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
|
||||||
private showValidationErrorsDialog(projectOnly?: boolean) {
|
private showValidationErrorsDialog(projectOnly?: boolean) {
|
||||||
const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
|
const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
|
||||||
disableClose: true,
|
disableClose: true,
|
||||||
|
autoFocus: false,
|
||||||
|
restoreFocus: false,
|
||||||
data: {
|
data: {
|
||||||
formGroup: this.formGroup,
|
formGroup: this.formGroup,
|
||||||
projectOnly: projectOnly
|
projectOnly: projectOnly
|
||||||
|
|
|
@ -472,6 +472,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
||||||
private showValidationErrorsDialog(projectOnly?: boolean) {
|
private showValidationErrorsDialog(projectOnly?: boolean) {
|
||||||
const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
|
const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
|
||||||
disableClose: true,
|
disableClose: true,
|
||||||
|
autoFocus: false,
|
||||||
|
restoreFocus: false,
|
||||||
data: {
|
data: {
|
||||||
formGroup: this.formGroup,
|
formGroup: this.formGroup,
|
||||||
projectOnly: projectOnly
|
projectOnly: projectOnly
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
<div class="col-auto ml-auto">
|
<div class="col-auto ml-auto">
|
||||||
<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{ 'DATASET-WIZARD.DIALOGUE.CANCEL' | translate }}</button>
|
<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{ 'DATASET-WIZARD.DIALOGUE.CANCEL' | translate }}</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto pl-0">
|
<div class="col-auto p-0">
|
||||||
<button mat-button *ngIf="formGroup.get('dmp').value" type="button" class="next-btn" (click)="next()">{{ 'DATASET-WIZARD.DIALOGUE.NEXT' | translate }}</button>
|
<button mat-button *ngIf="formGroup.get('dmp').value" type="button" class="next-btn" (click)="next()">{{ 'DATASET-WIZARD.DIALOGUE.NEXT' | translate }}</button>
|
||||||
<button mat-button *ngIf="!formGroup.get('dmp').value" type="button" class="disabled-btn">{{ 'DATASET-WIZARD.DIALOGUE.NEXT' | translate }}</button>
|
<button mat-button *ngIf="!formGroup.get('dmp').value" type="button" class="disabled-btn">{{ 'DATASET-WIZARD.DIALOGUE.NEXT' | translate }}</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,11 +1,18 @@
|
||||||
<div class="form-content-editor-content">
|
<div class="form-content-editor-content">
|
||||||
<h1 id="warningText" mat-dialog-title>{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.WARNING' | translate}}</h1>
|
<div mat-dialog-title class="row d-flex justify-content-between m-0">
|
||||||
<div mat-dialog-content>
|
<span class="title">{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.WARNING' | translate}}</span>
|
||||||
<ul>
|
<mat-icon class="close-icon" (click)="onClose()">close</mat-icon>
|
||||||
<li *ngFor="let error of errorMessages">{{error}}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div mat-dialog-actions>
|
<div class="row content">
|
||||||
<button mat-raised-button color="primary" type="button" (click)="onClose()">{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.ACTIONS.CANCEL' | translate}}</button>
|
<div class="col p-0">
|
||||||
|
<ul class="error-list">
|
||||||
|
<li *ngFor="let error of errorMessages">{{error}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col actions">
|
||||||
|
<button mat-button type="button" class="ml-auto cancel-btn" (click)="onClose()">{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.ACTIONS.CANCEL' | translate}}</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,89 @@
|
||||||
|
.form-content-editor-content {
|
||||||
|
width: 33rem;
|
||||||
|
min-height: 14rem;
|
||||||
|
padding: 0.28rem 0.34rem 0rem 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 8.44rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin: 2.17rem 0rem 1.1875rem 0rem;
|
||||||
|
min-height: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: lighter;
|
||||||
|
color: #000000;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
color: #f16868;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin-bottom: 2.9375rem;
|
||||||
|
line-height: 1.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
background: #ffffff 0% 0% no-repeat padding-box;
|
||||||
|
border: 1px solid #b5b5b5;
|
||||||
|
border-radius: 30px;
|
||||||
|
width: 101px;
|
||||||
|
height: 43px;
|
||||||
|
color: #212121;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-btn {
|
||||||
|
background: #ffffff 0% 0% no-repeat padding-box;
|
||||||
|
border: 1px solid #129d99;
|
||||||
|
border-radius: 30px;
|
||||||
|
opacity: 1;
|
||||||
|
width: 101px;
|
||||||
|
height: 43px;
|
||||||
|
color: #129d99;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled-btn {
|
||||||
|
border: 1px solid #b5b5b5;
|
||||||
|
border-radius: 30px;
|
||||||
|
opacity: 1;
|
||||||
|
width: 101px;
|
||||||
|
height: 43px;
|
||||||
|
color: #b5b5b5;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-list {
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
li {
|
||||||
|
line-height: 1.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#warningText {
|
#warningText {
|
||||||
color: red;
|
color: red;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-decoration-color: red;
|
text-decoration-color: red;
|
||||||
}
|
}
|
||||||
|
|
|
@ -51,7 +51,8 @@ export class FormValidationErrorsDialogComponent {
|
||||||
getErrorMessage(formControl: FormControl): string[] {
|
getErrorMessage(formControl: FormControl): string[] {
|
||||||
const errors: string[] = [];
|
const errors: string[] = [];
|
||||||
Object.keys(formControl.errors).forEach(key => {
|
Object.keys(formControl.errors).forEach(key => {
|
||||||
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')); }
|
if (key === 'required') { errors.push(this.language.instant(this.getPlaceHolder(formControl) + ": " + 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') + ' "' + this.getPlaceHolder(formControl) + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.EMAIL')); }
|
else if (key === 'email') { 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.EMAIL')); }
|
||||||
else if (key === 'min') { 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.MIN-VALUE', { 'min': formControl.getError('min').min })); }
|
else if (key === 'min') { 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.MIN-VALUE', { 'min': formControl.getError('min').min })); }
|
||||||
else if (key === 'max') { 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.MAX-VALUE', { 'max': formControl.getError('max').max })); }
|
else if (key === 'max') { 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.MAX-VALUE', { 'max': formControl.getError('max').max })); }
|
||||||
|
@ -61,22 +62,23 @@ export class FormValidationErrorsDialogComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
getPlaceHolder(formControl: any): string {
|
getPlaceHolder(formControl: any): string {
|
||||||
// if (formControl.nativeElement.localName === 'input') {
|
if (formControl.nativeElement.localName === 'input') {
|
||||||
// return formControl.nativeElement.getAttribute('placeholder');
|
return formControl.nativeElement.getAttribute('placeholder');
|
||||||
// } else if (formControl.nativeElement.localName === 'mat-select') {
|
} else if (formControl.nativeElement.localName === 'mat-select') {
|
||||||
// return formControl.nativeElement.getAttribute('aria-label');
|
return formControl.nativeElement.getAttribute('aria-label');
|
||||||
// } else if (formControl.nativeElement.localName === 'app-single-auto-complete') {
|
} 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');
|
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') {
|
} else if (formControl.nativeElement.localName === 'app-multiple-auto-complete') {
|
||||||
// return (Array.from(formControl.nativeElement.firstChild.children).filter((x: any) => x.localName === 'input')[0] as any).getAttribute('placeholder');
|
return (Array.from(formControl.nativeElement.firstChild.children).filter((x: any) => x.localName === 'input')[0] as any).getAttribute('placeholder');
|
||||||
// }
|
}
|
||||||
|
|
||||||
let result = '';
|
// Needs to have <mat-label> in <mat-form-field> in html in order to fill results
|
||||||
try {
|
// let result = '';
|
||||||
result = (Array.from(formControl.nativeElement.parentElement.children).filter((x: any) => Array.from(x.classList).includes('mat-form-field-label-wrapper'))[0] as any).innerText;
|
// try {
|
||||||
result = result.replace(' *', '');
|
// result = (Array.from(formControl.nativeElement.parentElement.children).filter((x: any) => Array.from(x.classList).includes('mat-form-field-label-wrapper'))[0] as any).innerText;
|
||||||
} catch (error) { }
|
// result = result.replace(' *', '');
|
||||||
|
// } catch (error) { }
|
||||||
|
|
||||||
return result;
|
// return result;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue