Dataset Wizard. Fix "Previous" and "Next " steps behaviour. Uncompleted guide steps appear with red when user attempts to save.

This commit is contained in:
Kristian Ntavidi 2021-03-19 14:32:17 +02:00
parent abaf61cf02
commit c8ce77ff81
3 changed files with 30 additions and 9 deletions

View File

@ -50,11 +50,11 @@
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div> <div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
<div class="stepper-options" id="stepper-options"> <div class="stepper-options" id="stepper-options">
<div class="col stepper-list"> <div class="col stepper-list">
<div (click)="changeStep(0)" *ngIf="!datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div> <div (click)="changeStep(0)" *ngIf="!datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div>
<div (click)="changeStep(0)" *ngIf="datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div> <div (click)="changeStep(0)" *ngIf="datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
<div class="row toc-pane-container" #boundary (click)="changeStep(1)"> <div class="row toc-pane-container" #boundary (click)="changeStep(1)">
<div #spacer></div> <div #spacer></div>
<table-of-contents [showErrors]="showtocentriesErrors" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hasFocus]="step === 1" [formGroup]="formGroup" *ngIf="formGroup && formGroup.get('datasetProfileDefinition')" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" [visibilityRules]="formGroup.get('datasetProfileDefinition').get('rules').value"></table-of-contents> <table-of-contents #table0fContents [showErrors]="showtocentriesErrors" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hasFocus]="step === 1" [formGroup]="formGroup" *ngIf="formGroup && formGroup.get('datasetProfileDefinition')" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" [visibilityRules]="formGroup.get('datasetProfileDefinition').get('rules').value"></table-of-contents>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms'; import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
@ -23,7 +23,7 @@ import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset
import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item'; import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item';
import { IBreadCrumbComponent } from '@app/ui/misc/breadcrumb/definition/IBreadCrumbComponent'; import { IBreadCrumbComponent } from '@app/ui/misc/breadcrumb/definition/IBreadCrumbComponent';
import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model'; import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
import { Link, LinkToScroll } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents'; import { Link, LinkToScroll, TableOfContents } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents';
import { BaseComponent } from '@common/base/base.component'; import { BaseComponent } from '@common/base/base.component';
import { FormService } from '@common/forms/form-service'; import { FormService } from '@common/forms/form-service';
import { FormValidationErrorsDialogComponent } from '@common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component'; import { FormValidationErrorsDialogComponent } from '@common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component';
@ -93,6 +93,8 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
//the table seraches for elements to scroll on page with id (TOCENTRY_ID_PREFIX+fieldsetId<Tocentry>) //the table seraches for elements to scroll on page with id (TOCENTRY_ID_PREFIX+fieldsetId<Tocentry>)
TOCENTRY_ID_PREFIX="TocEntRy"; TOCENTRY_ID_PREFIX="TocEntRy";
showtocentriesErrors = false; showtocentriesErrors = false;
@ViewChild('table0fContents', {static: false}) table0fContents: TableOfContents;
hintErrors: boolean = false;
constructor( constructor(
private datasetWizardService: DatasetWizardService, private datasetWizardService: DatasetWizardService,
@ -654,11 +656,21 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
} }
save(saveType?: SaveType) { save(saveType?: SaveType) {
this.formService.touchAllFormFields(this.formGroup);
Object.keys(this.formGroup.controls).forEach(controlName=>{
if(controlName == 'datasetProfileDefinition'){
return;
}
this.formService.touchAllFormFields(this.formGroup.get(controlName));
})
// this.formService.touchAllFormFields(this.formGroup);
if (!this.isSemiFormValid(this.formGroup)) { if (!this.isSemiFormValid(this.formGroup)) {
//build messages //build messages
const errorMessages = this._buildSemiFormErrorMessages(); const errorMessages = this._buildSemiFormErrorMessages();
this.showValidationErrorsDialog(undefined, errorMessages); this.showValidationErrorsDialog(undefined, errorMessages);
this.hintErrors = true;
return; return;
} }
this.submit(saveType); this.submit(saveType);
@ -998,17 +1010,19 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
public nextStep() { public nextStep() {
if(this.step < this.maxStep){//view is changing if(this.step < this.maxStep){//view is changing
this.step +=1; if(this.step === 0 && this.table0fContents){
this.table0fContents.seekToFirstElement();
}
this.step++;
this.resetScroll(); this.resetScroll();
} }
// this.step = this.step < this.maxStep ? this.step + 1 : this.step; // this.step = this.step < this.maxStep ? this.step + 1 : this.step;
} }
public previousStep() { public previousStep() {
if(this.step !== 0){ if(this.step > 0){
this.resetScroll(); this.resetScroll();
this.step =-1; this.step--;
} }
// this.step = this.step !== 0 ? this.step - 1 : this.step; // this.step = this.step !== 0 ? this.step - 1 : this.step;
@ -1025,6 +1039,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
discardChanges() { discardChanges() {
this.isDiscarded = true; this.isDiscarded = true;
this.hasChanges = false; this.hasChanges = false;
this.hintErrors = false;
if (this.isNew) { if (this.isNew) {
Object.keys(this.formGroup['controls']).forEach((key: string) => { Object.keys(this.formGroup['controls']).forEach((key: string) => {
if (key !== 'dmp') { if (key !== 'dmp') {

View File

@ -310,6 +310,12 @@ export class TableOfContents extends BaseComponent implements OnInit {
} }
public seekToFirstElement(){//only on tocentry mode
if(this.tocentries && this.tocentries.length){
this.tocentrySelected = this.tocentries[0];
}
}
} }
export interface LinkToScroll { export interface LinkToScroll {