Add Validation button for the Dataset Template Editor

This commit is contained in:
George Kalampokis 2020-09-22 11:27:10 +03:00
parent 3d323615e4
commit 9a9fed37ce
8 changed files with 84 additions and 7 deletions

View File

@ -81,6 +81,7 @@
<!-- SAVE BUTTON -->
<div class="col-6 d-flex" *ngIf="!viewOnly">
<div class="row mt-4">
<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto" (click)='checkFormValidation()' [disabled]="form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.VALIDATE' | translate}}</button>
<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto" (click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}</button>
<button mat-raised-button class="col-auto" color="primary" type="button col-auto" (click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate}}</button>
</div>
@ -88,6 +89,7 @@
<!-- SAVE BUTTON WHEN FINALIZED-->
<div class="col-6 d-flex" *ngIf="showUpdateButton()">
<div class="row mt-4">
<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto" (click)='checkFormValidation()' [disabled]="form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.VALIDATE' | translate}}</button>
<button mat-raised-button class="col-auto mr-2" color="primary" type="button col-auto" (click)='updateFinalized()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' | translate}}</button>
</div>
</div>

View File

@ -24,6 +24,7 @@ import { DatasetStatus } from '@app/core/common/enum/dataset-status';
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
import { LanguageInfo } from '@app/core/model/language-info';
import { LanguageInfoService } from '@app/core/services/culture/language-info-service';
import { FormValidationErrorsDialogComponent } from '@common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component';
const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
@ -47,6 +48,9 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
breadCrumbs: Observable<BreadcrumbItem[]>;
@ViewChild('stepper', { static: false }) stepper: MatHorizontalStepper;
viewOnly = false;
nestedCount: number[] = [];
nestedIndex: number = 0;
errorMessages: string[] = [];
constructor(
private datasetProfileService: DatasetProfileService,
@ -331,4 +335,66 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
getLanguageInfos(): LanguageInfo[] {
return this.languageInfoService.getLanguageInfoValues();
}
checkFormValidation() {
if (!this.form.valid) {
this.nestedIndex = -1;
this.form.markAllAsTouched();
this.printErrors(this.form);
this.showValidationErrorsDialog();
this.nestedCount = [];
this.nestedIndex = 0;
this.errorMessages = [];
}
}
printErrors(rootform: FormGroup) {
if (!rootform.valid) {
Object.keys(rootform.controls).forEach(key => {
const errors = rootform.get(key).errors;
if (errors !== null) {
let numbering: string = '';
for (let j = 0; j < this.nestedCount.length; j++) {
numbering += this.nestedCount[j];
if (j < this.nestedIndex) {
numbering += '.';
} else {
break;
}
}
Object.keys(errors).forEach(keyError => {
if (typeof errors[keyError] === 'boolean') {
this.errorMessages.push(numbering + ' ' + key + ' is ' + keyError);
} else {
this.errorMessages.push(numbering + ' ' + key + ': ' + keyError + ': ' + errors[keyError]);
}
});
} else {
if (rootform.get(key) instanceof FormGroup) {
this.printErrors(<FormGroup>rootform.get(key));
} else if (rootform.get(key) instanceof FormArray) {
this.nestedIndex++;
this.nestedCount[this.nestedIndex] = 0;
for (let childForm of (<FormArray>rootform.get(key)).controls) {
this.nestedCount[this.nestedIndex]++;
this.printErrors(<any>childForm);
}
this.nestedCount[this.nestedIndex] = 0;
this.nestedIndex--;
}
}
});
}
}
private showValidationErrorsDialog(projectOnly?: boolean) {
const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
disableClose: true,
data: {
errorMessages: this.errorMessages,
projectOnly: projectOnly
},
});
}
}

View File

@ -371,7 +371,8 @@
"CANCEL": "Cancel",
"DELETE": "Delete",
"ADD-PAGE": "Add Page +",
"ADD-SECTION": "Add Section +"
"ADD-SECTION": "Add Section +",
"VALIDATE": "Validate"
}
},
"GRANT-LISTING": {

View File

@ -391,7 +391,8 @@
"CANCEL": "Cancel",
"DELETE": "Delete",
"ADD-PAGE": "Add Page +",
"ADD-SECTION": "Add Section +"
"ADD-SECTION": "Add Section +",
"VALIDATE": "Validate"
}
},
"GRANT-LISTING": {

View File

@ -392,7 +392,8 @@
"CANCEL": "Cancelar",
"DELETE": "Borrar",
"ADD-PAGE": "Añadir página +",
"ADD-SECTION": "Añadir sección +"
"ADD-SECTION": "Añadir sección +",
"VALIDATE": "Validate"
}
},
"GRANT-LISTING": {

View File

@ -389,7 +389,8 @@
"CANCEL": "Ακύρωση",
"DELETE": "Διαγραφή",
"ADD-PAGE": "Προσθήκη Σελίδας +",
"ADD-SECTION": "Προσθήκη Ενότητας +"
"ADD-SECTION": "Προσθήκη Ενότητας +",
"VALIDATE": "Validate"
}
},
"GRANT-LISTING": {

View File

@ -389,7 +389,8 @@
"CANCEL": "İptal",
"DELETE": "Sil",
"ADD-PAGE": "Sayfa Ekle +",
"ADD-SECTION": "Bölüm Ekle +"
"ADD-SECTION": "Bölüm Ekle +",
"VALIDATE": "Validate"
}
},
"GRANT-LISTING": {

View File

@ -17,8 +17,12 @@ export class FormValidationErrorsDialogComponent {
@Inject(MAT_DIALOG_DATA) public data: any,
private language: TranslateService
) {
if (data.formGroup !== undefined && data.formGroup !== null) {
this.formGroup = data.formGroup;
this.errorMessages = this.getErrors(this.formGroup);
} else if (data.errorMessages !== undefined && data.errorMessages !== null) {
this.errorMessages = data.errorMessages;
}
}
onClose(): void {