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

addition of progress bar

This commit is contained in:
annabakouli 2017-12-07 11:26:06 +02:00
parent a9c05943e0
commit 73c38f3ff3
3 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html
View File

@ -1,5 +1,5 @@
<div [formGroup]="form"> <div [formGroup]="form">
<p-radioButton name="{{field.id}}" value="true" label="Yes" formControlName="value"></p-radioButton> <p-radioButton name="{{field.id}}" [value]="true" label="Yes" formControlName="value"></p-radioButton>
<br> <br>
<p-radioButton name="{{field.id}}" value="false" label="No" formControlName="value"></p-radioButton> <p-radioButton name="{{field.id}}" [value]="false" label="No" formControlName="value"></p-radioButton>
</div> </div>

9
dmp-frontend/src/app/form/dynamic-form.component.html
View File

@ -9,14 +9,19 @@
<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button> <button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
<progress-bar class="ui-g" *ngIf="progressbar" [formGroup]=form></progress-bar> <progress-bar class="ui-g" *ngIf="progressbar" [formGroup]=form></progress-bar>
<div class="ui-g-12"> <div class="ui-g-12">
<p-steps [model]="stepperItems" [activeIndex]="this.paginationService.getCurrentIndex()" (activeIndex)="this.paginationService.setCurrentIndex($event)"[readonly]="false"></p-steps> <p-steps [model]="stepperItems" [activeIndex]="this.paginationService.getCurrentIndex()" (activeIndex)="this.paginationService.setCurrentIndex($event)"
[readonly]="false"></p-steps>
</div>
<div class="ui-g-12">
<progress-bar *ngIf="form" [formGroup]="form"></progress-bar>
</div> </div>
<div class="col-md-12 form-body-container" id="form-container"> <div class="col-md-12 form-body-container" id="form-container">
<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()"> <form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
<div *ngFor="let section of dataModel.sections; let i = index;"> <div *ngFor="let section of dataModel.sections; let i = index;">
<df-section *ngIf='this.paginationService.isElementVisible(section.page)' [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1" [pathName]="'sections.'+i"></df-section> <df-section *ngIf='this.paginationService.isElementVisible(section.page)' [section]="section" [form]="form.get('sections').get(''+i)"
[path]="i+1" [pathName]="'sections.'+i"></df-section>
</div> </div>
</form> </form>
</div> </div>

15
dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.ts
View File

@ -1,3 +1,4 @@
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms' import { FormGroup, FormControl, FormArray } from '@angular/forms'
@ -8,27 +9,29 @@ import { FormGroup, FormControl, FormArray } from '@angular/forms'
export class ProgressBarComponent implements OnInit { export class ProgressBarComponent implements OnInit {
@Input() formGroup: FormGroup @Input() formGroup: FormGroup
constructor(private visibilityRulesService: VisibilityRulesService) { }
private value: number; private value: number;
ngOnInit() { ngOnInit() {
this.formGroup this.formGroup
.valueChanges .valueChanges
.subscribe(control => { .subscribe(control => {
this.value = (this.getDirtyValues(this.formGroup) / this.getFormControlDepthLength(this.formGroup)) * 100 this.value = (this.countFormControlsWithValue(this.formGroup) / this.getFormControlDepthLength(this.formGroup)) * 100
}) })
} }
getDirtyValues(form: FormGroup): number { countFormControlsWithValue(form: FormGroup): number {
let value = 0; let value = 0;
Object.keys(form.controls).forEach(key => { Object.keys(form.controls).forEach(key => {
let control = form.controls[key] let control = form.controls[key]
if (control instanceof FormGroup) value += this.getDirtyValues(control); if (control instanceof FormGroup) value += this.countFormControlsWithValue(control);
else if (control instanceof FormArray) { else if (control instanceof FormArray) {
let formArray = (<FormArray>control); let formArray = (<FormArray>control);
for (let i = 0; i < formArray.length; i++) { for (let i = 0; i < formArray.length; i++) {
value += this.getDirtyValues(<FormGroup>formArray.get("" + i)) value += this.countFormControlsWithValue(<FormGroup>formArray.get("" + i))
} }
} }
else if (control.valid) value++; else if (key === "value" && control.value != null) value++;
}); });
return value; return value;
} }
@ -44,7 +47,7 @@ export class ProgressBarComponent implements OnInit {
value += this.getFormControlDepthLength(<FormGroup>formArray.get("" + i)) value += this.getFormControlDepthLength(<FormGroup>formArray.get("" + i))
} }
} }
else if (control instanceof FormControl) value++; else if (key === "value" && this.visibilityRulesService.isElementVisible(null, form.controls["id"].value)) value++;
}); });
return value; return value;
} }