argos/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.ts

import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { FormArray, FormGroup } from '@angular/forms';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../../core/common/base/base.component';
import { VisibilityRulesService } from '../../utilities/visibility-rules/visibility-rules.service';

@Component({
	selector: 'app-progress-bar',
	templateUrl: './progress-bar.component.html',
	styles: ['.alwaysVisible .ui-progressbar-label { display:block!important; }'],
	encapsulation: ViewEncapsulation.None
})
export class ProgressBarComponent extends BaseComponent implements OnInit {
	@Input() formGroup: FormGroup;
	@Input() public progressValueAccuracy = 1;
	determinateProgressValue: number;

	constructor(private visibilityRulesService: VisibilityRulesService) { super(); }

	public value = 0;
	ngOnInit() {
		this.calculateValueForProgressbar();
		this.formGroup
			.valueChanges
			.pipe(takeUntil(this._destroyed))
			.subscribe(control => {
				this.calculateValueForProgressbar();
			});
	}

	calculateValueForProgressbar() {
		const progressSoFar = this.countFormControlsWithValue(this.formGroup);
		const total = this.getFormControlDepthLength(this.formGroup);
		const perc = (progressSoFar / total) * 100;
		this.value = Number.parseFloat(perc.toPrecision(this.progressValueAccuracy));
	}

	countFormControlsWithValue(form: FormGroup): number {
		let value = 0;
		Object.keys(form.controls).forEach(key => {
			const control = form.controls[key];
			if (control instanceof FormGroup) { value += this.countFormControlsWithValue(control); } else if (control instanceof FormArray) {
				const formArray = (<FormArray>control);
				for (let i = 0; i < formArray.length; i++) {
					value += this.countFormControlsWithValue(<FormGroup>formArray.get('' + i));
				}
			} else if (key === 'value' && control.value != null && control.value !== '') { value++; }
		});
		return value;
	}

	getFormControlDepthLength(form: FormGroup): number {
		let value = 0;
		Object.keys(form.controls).forEach(key => {
			const control = form.controls[key];
			if (control instanceof FormGroup) { value += this.getFormControlDepthLength(control); } else if (control instanceof FormArray) {
				const formArray = (<FormArray>control);
				for (let i = 0; i < formArray.length; i++) {
					if (<FormGroup>formArray.get('' + i).value && this.visibilityRulesService.checkElementVisibility(formArray.get('' + i).value.id)) {
						value += this.getFormControlDepthLength(<FormGroup>formArray.get('' + i));
					}
				}
			} else if (key === 'value' && this.visibilityRulesService.checkElementVisibility(form.controls['id'].value)) {
				value++;
			}
		});
		return value;
	}
}