MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Restyles Warnign Dialog

This commit is contained in:
apapachristou 2020-09-25 14:03:04 +03:00
parent 794ef0142a
commit 6bc2d37bda
7 changed files with 127 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
View File

@ -391,6 +391,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
private showValidationErrorsDialog(projectOnly?: boolean) {
const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
disableClose: true,
autoFocus: false,
restoreFocus: false,
data: {
errorMessages: this.errorMessages,
projectOnly: projectOnly

2
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts
View File

@ -564,6 +564,8 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
private showValidationErrorsDialog(projectOnly?: boolean) {
const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
disableClose: true,
autoFocus: false,
restoreFocus: false,
data: {
formGroup: this.formGroup,
projectOnly: projectOnly

2
dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts
View File

@ -472,6 +472,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
private showValidationErrorsDialog(projectOnly?: boolean) {
const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
disableClose: true,
autoFocus: false,
restoreFocus: false,
data: {
formGroup: this.formGroup,
projectOnly: projectOnly

2
dmp-frontend/src/app/ui/dmp/start-new-dataset-dialogue/start-new-dataset-dialog.component.html
View File

@ -20,7 +20,7 @@
<div class="col-auto ml-auto">
<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{ 'DATASET-WIZARD.DIALOGUE.CANCEL' | translate }}</button>
</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="disabled-btn">{{ 'DATASET-WIZARD.DIALOGUE.NEXT' | translate }}</button>
</div>

21
dmp-frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.html
View File

@ -1,11 +1,18 @@
<div class="form-content-editor-content">
<h1 id="warningText" mat-dialog-title>{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.WARNING' | translate}}</h1>
<div mat-dialog-content>
<ul>
<li *ngFor="let error of errorMessages">{{error}}</li>
</ul>
<div mat-dialog-title class="row d-flex justify-content-between m-0">
<span class="title">{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.WARNING' | translate}}</span>
<mat-icon class="close-icon" (click)="onClose()">close</mat-icon>
</div>
<div mat-dialog-actions>
<button mat-raised-button color="primary" type="button" (click)="onClose()">{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.ACTIONS.CANCEL' | translate}}</button>
<div class="row content">
<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>

92
dmp-frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss
View File

@ -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 {
color: red;
text-decoration: underline;
text-decoration-color: red;
}
color: red;
text-decoration: underline;
text-decoration-color: red;
}

34
dmp-frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.ts
View File

@ -51,7 +51,8 @@ export class FormValidationErrorsDialogComponent {
getErrorMessage(formControl: FormControl): string[] {
const errors: string[] = [];
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 === '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 })); }
@ -61,22 +62,23 @@ export class FormValidationErrorsDialogComponent {
}
getPlaceHolder(formControl: any): string {
// if (formControl.nativeElement.localName === 'input') {
// return formControl.nativeElement.getAttribute('placeholder');
// } else if (formControl.nativeElement.localName === 'mat-select') {
// return formControl.nativeElement.getAttribute('aria-label');
// } 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.children).filter((x: any) => x.localName === 'input')[0] as any).getAttribute('placeholder');
// }
if (formControl.nativeElement.localName === 'input') {
return formControl.nativeElement.getAttribute('placeholder');
} else if (formControl.nativeElement.localName === 'mat-select') {
return formControl.nativeElement.getAttribute('aria-label');
} 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.children).filter((x: any) => x.localName === 'input')[0] as any).getAttribute('placeholder');
}
let result = '';
try {
result = (Array.from(formControl.nativeElement.parentElement.children).filter((x: any) => Array.from(x.classList).includes('mat-form-field-label-wrapper'))[0] as any).innerText;
result = result.replace(' *', '');
} catch (error) { }
// Needs to have <mat-label> in <mat-form-field> in html in order to fill results
// let result = '';
// try {
// result = (Array.from(formControl.nativeElement.parentElement.children).filter((x: any) => Array.from(x.classList).includes('mat-form-field-label-wrapper'))[0] as any).innerText;
// result = result.replace(' *', '');
// } catch (error) { }
return result;
// return result;
}
}