Adds progress bar on dataset editor
This commit is contained in:
parent
a631594f5f
commit
9c2f1b12bd
|
@ -50,7 +50,8 @@
|
|||
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
|
||||
<div class="stepper-options">
|
||||
<div class="col stepper-list">
|
||||
<div (click)="changeStep(0)" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (5)</div>
|
||||
<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}">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 #spacer></div>
|
||||
<table-of-contents class="toc-pane-container" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)"></table-of-contents>
|
||||
|
@ -74,6 +75,9 @@
|
|||
<div (click)="save(saveAnd.addNew)">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto pr-0">
|
||||
<app-form-progress-indication class="col-12" *ngIf="formGroup" [formGroup]="formGroup" [isDatasetEditor]="true"></app-form-progress-indication>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto form">
|
||||
<app-dataset-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [dmpId]="formGroup.get('dmp').value.id" [availableProfiles]="formGroup.get('dmp').value.profiles" (formChanged)="formChanged()"></app-dataset-editor-component>
|
||||
|
|
|
@ -481,6 +481,14 @@ mat-icon.size-18 {
|
|||
margin-top: 70px !important;
|
||||
}
|
||||
|
||||
.done-icon {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
font-size: 16px !important;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// ::ng-deep .mat-tab-labels {
|
||||
// justify-content: space-between;
|
||||
// }
|
||||
|
|
|
@ -884,4 +884,8 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
|
|||
backToDmp(id: string) {
|
||||
this.router.navigate(['/plans', 'edit', id]);
|
||||
}
|
||||
|
||||
datasetInfoValid(): boolean {
|
||||
return this.formGroup.get('label') && this.formGroup.get('label').valid && this.formGroup.get('profile') && this.formGroup.get('profile').valid;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -28,6 +28,7 @@ import { DatasetCriteriaDialogComponent } from './listing/criteria/dataset-crite
|
|||
import { DmpEditorComponent } from '../dmp/editor/dmp-editor.component';
|
||||
import { DatasetEditorDetailsComponent } from '../dmp/editor/dataset-editor-details/dataset-editor-details.component';
|
||||
import { DatasetEditorDetailsModule } from '../dmp/editor/dataset-editor-details/dataset-editor-details.module';
|
||||
import { FormProgressIndicationModule } from '../misc/dataset-description-form/components/form-progress-indication/form-progress-indication.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
@ -44,7 +45,8 @@ import { DatasetEditorDetailsModule } from '../dmp/editor/dataset-editor-details
|
|||
DatasetRoutingModule,
|
||||
FormValidationErrorsDialogModule,
|
||||
DatasetCopyDialogModule,
|
||||
DatasetOverviewModule
|
||||
DatasetOverviewModule,
|
||||
FormProgressIndicationModule
|
||||
],
|
||||
declarations: [
|
||||
DatasetListingComponent,
|
||||
|
|
|
@ -79,7 +79,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-auto pr-0">
|
||||
<app-form-progress-indication class="col-12" *ngIf="formGroup" [formGroup]="formGroup" [isEditor]="true"></app-form-progress-indication>
|
||||
<app-form-progress-indication class="col-12" *ngIf="formGroup" [formGroup]="formGroup" [isDmpEditor]="true"></app-form-progress-indication>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto form">
|
||||
|
|
|
@ -11,7 +11,8 @@ import { takeUntil } from 'rxjs/operators';
|
|||
})
|
||||
export class FormProgressIndicationComponent extends BaseComponent implements OnInit {
|
||||
@Input() formGroup: FormGroup;
|
||||
@Input() isEditor: boolean;
|
||||
@Input() isDmpEditor: boolean;
|
||||
@Input() isDatasetEditor: boolean;
|
||||
@Input() public progressValueAccuracy = 2;
|
||||
determinateProgressValue: number;
|
||||
progressSoFar: number;
|
||||
|
@ -32,9 +33,12 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
|
|||
}
|
||||
|
||||
calculateValueForProgressbar() {
|
||||
if (this.isEditor) {
|
||||
if (this.isDmpEditor) {
|
||||
this.progressSoFar = this.countFormControlsValidForProgress(this.formGroup);
|
||||
this.total = this.countFormControlsRequiredFieldsForTotal(this.formGroup);
|
||||
} else if (this.isDatasetEditor) {
|
||||
this.progressSoFar = this.countFormControlsValidForProgress(this.formGroup) + this.countFormControlsWithValueForProgress(this.formGroup);
|
||||
this.total = this.countFormControlsRequiredFieldsForTotal(this.formGroup) + this.CountFormControlDepthLengthFotTotal(this.formGroup);
|
||||
} else {
|
||||
this.progressSoFar = this.countFormControlsWithValueForProgress(this.formGroup);
|
||||
this.total = this.CountFormControlDepthLengthFotTotal(this.formGroup);
|
||||
|
@ -46,11 +50,11 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
|
|||
countFormControlsWithValueForProgress(formControl: AbstractControl): number {
|
||||
let valueCurent = 0;
|
||||
if (formControl instanceof FormGroup) {
|
||||
if (this.checkFormsIfIsFieldsAndVisible(formControl)) {
|
||||
if (this.checkFormsIfIsFieldsAndVisible(formControl) && this.checkIfIsRequired((formControl as FormGroup))) {
|
||||
if (this.haseValue(formControl))
|
||||
valueCurent++;
|
||||
}
|
||||
if (this.chechFieldIfIsFieldSetAndVisible((formControl as FormGroup))) {
|
||||
if (this.chechFieldIfIsFieldSetAndVisible((formControl as FormGroup)) && this.checkIfIsRequired((formControl as FormGroup))) {
|
||||
valueCurent = valueCurent + this.compositeFieldsGetChildsForProgress(formControl);
|
||||
} else {
|
||||
Object.keys(formControl.controls).forEach(item => {
|
||||
|
@ -86,7 +90,12 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
|
|||
return valueCurent;
|
||||
}
|
||||
|
||||
|
||||
private checkIfIsRequired(formControl: FormGroup): boolean {
|
||||
if (formControl.get('validationRequired') && formControl.get('validationRequired').value) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
private checkFormsIfIsFieldsAndVisible(formControl: FormGroup): boolean {
|
||||
if (formControl.contains('id') && formControl.contains('value')) {
|
||||
|
@ -108,7 +117,7 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
|
|||
valueCurent = valueCurent + this.CountFormControlDepthLengthFotTotal(item);
|
||||
});
|
||||
} else if (formControl instanceof FormGroup) {
|
||||
if ((formControl as FormGroup).contains('id') && (formControl as FormGroup).contains('value') && (this.visibilityRulesService.checkElementVisibility((formControl as FormGroup).get('id').value))) {
|
||||
if ((formControl as FormGroup).contains('id') && (formControl as FormGroup).contains('value') && (this.visibilityRulesService.checkElementVisibility((formControl as FormGroup).get('id').value)) && this.checkIfIsRequired((formControl as FormGroup))) {
|
||||
valueCurent++;
|
||||
} else if ((formControl as FormGroup).contains('id') && (formControl as FormGroup).contains('fields')) {
|
||||
valueCurent = valueCurent + this.compositeFieldsGetChildsForTotal(formControl);
|
||||
|
@ -188,4 +197,8 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
|
|||
return true;
|
||||
} else { return false }
|
||||
}
|
||||
|
||||
isEditor(): boolean {
|
||||
return this.isDmpEditor || this.isDatasetEditor;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue