2020-10-15 12:46:59 +02:00
|
|
|
|
import { Component, ElementRef, Input, OnInit } from '@angular/core';
|
|
|
|
|
import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
|
2019-12-11 15:51:03 +01:00
|
|
|
|
import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
|
|
|
|
|
import { BaseComponent } from '@common/base/base.component';
|
2018-11-27 18:33:17 +01:00
|
|
|
|
import { takeUntil } from 'rxjs/operators';
|
2017-12-05 17:56:21 +01:00
|
|
|
|
|
|
|
|
|
@Component({
|
2019-01-18 18:03:45 +01:00
|
|
|
|
selector: 'app-form-progress-indication',
|
2020-10-15 12:46:59 +02:00
|
|
|
|
templateUrl: './form-progress-indication.component.html',
|
|
|
|
|
styleUrls: ['./form-progress-indication.component.scss']
|
2017-12-05 17:56:21 +01:00
|
|
|
|
})
|
2019-01-18 18:03:45 +01:00
|
|
|
|
export class FormProgressIndicationComponent extends BaseComponent implements OnInit {
|
2018-10-05 17:00:54 +02:00
|
|
|
|
@Input() formGroup: FormGroup;
|
2020-10-16 15:48:28 +02:00
|
|
|
|
@Input() isDmpEditor: boolean;
|
|
|
|
|
@Input() isDatasetEditor: boolean;
|
2019-02-12 13:19:03 +01:00
|
|
|
|
@Input() public progressValueAccuracy = 2;
|
2018-10-05 17:00:54 +02:00
|
|
|
|
determinateProgressValue: number;
|
2020-10-15 12:46:59 +02:00
|
|
|
|
progressSoFar: number;
|
|
|
|
|
total: number;
|
|
|
|
|
percent: number;
|
2017-12-05 17:56:21 +01:00
|
|
|
|
|
2018-11-27 18:33:17 +01:00
|
|
|
|
constructor(private visibilityRulesService: VisibilityRulesService) { super(); }
|
2017-12-07 10:26:06 +01:00
|
|
|
|
|
2018-10-05 17:00:54 +02:00
|
|
|
|
public value = 0;
|
|
|
|
|
ngOnInit() {
|
2020-10-15 12:46:59 +02:00
|
|
|
|
setTimeout(() => {this.calculateValueForProgressbar();});
|
2018-10-05 17:00:54 +02:00
|
|
|
|
this.formGroup
|
|
|
|
|
.valueChanges
|
2018-11-27 18:33:17 +01:00
|
|
|
|
.pipe(takeUntil(this._destroyed))
|
2018-10-05 17:00:54 +02:00
|
|
|
|
.subscribe(control => {
|
2020-10-15 12:46:59 +02:00
|
|
|
|
setTimeout(() => {this.calculateValueForProgressbar();});
|
2018-10-05 17:00:54 +02:00
|
|
|
|
});
|
|
|
|
|
}
|
2018-01-11 12:15:15 +01:00
|
|
|
|
|
2018-10-05 17:00:54 +02:00
|
|
|
|
calculateValueForProgressbar() {
|
2020-10-16 15:48:28 +02:00
|
|
|
|
if (this.isDmpEditor) {
|
2020-10-15 12:46:59 +02:00
|
|
|
|
this.progressSoFar = this.countFormControlsValidForProgress(this.formGroup);
|
|
|
|
|
this.total = this.countFormControlsRequiredFieldsForTotal(this.formGroup);
|
2020-10-16 15:48:28 +02:00
|
|
|
|
} else if (this.isDatasetEditor) {
|
|
|
|
|
this.progressSoFar = this.countFormControlsValidForProgress(this.formGroup) + this.countFormControlsWithValueForProgress(this.formGroup);
|
|
|
|
|
this.total = this.countFormControlsRequiredFieldsForTotal(this.formGroup) + this.CountFormControlDepthLengthFotTotal(this.formGroup);
|
2020-10-15 12:46:59 +02:00
|
|
|
|
} else {
|
|
|
|
|
this.progressSoFar = this.countFormControlsWithValueForProgress(this.formGroup);
|
|
|
|
|
this.total = this.CountFormControlDepthLengthFotTotal(this.formGroup);
|
|
|
|
|
}
|
|
|
|
|
this.percent = (this.progressSoFar / this.total) * 100;
|
|
|
|
|
this.value = Number.parseFloat(this.percent.toPrecision(this.progressValueAccuracy));
|
2018-10-05 17:00:54 +02:00
|
|
|
|
}
|
2017-12-12 13:12:13 +01:00
|
|
|
|
|
2019-02-12 13:19:03 +01:00
|
|
|
|
countFormControlsWithValueForProgress(formControl: AbstractControl): number {
|
|
|
|
|
let valueCurent = 0;
|
|
|
|
|
if (formControl instanceof FormGroup) {
|
2020-10-16 15:48:28 +02:00
|
|
|
|
if (this.checkFormsIfIsFieldsAndVisible(formControl) && this.checkIfIsRequired((formControl as FormGroup))) {
|
2019-02-12 13:19:03 +01:00
|
|
|
|
if (this.haseValue(formControl))
|
|
|
|
|
valueCurent++;
|
2019-02-04 14:41:54 +01:00
|
|
|
|
}
|
2020-10-16 15:48:28 +02:00
|
|
|
|
if (this.chechFieldIfIsFieldSetAndVisible((formControl as FormGroup)) && this.checkIfIsRequired((formControl as FormGroup))) {
|
2019-02-12 13:19:03 +01:00
|
|
|
|
valueCurent = valueCurent + this.compositeFieldsGetChildsForProgress(formControl);
|
|
|
|
|
} else {
|
|
|
|
|
Object.keys(formControl.controls).forEach(item => {
|
|
|
|
|
const control = formControl.get(item);
|
|
|
|
|
valueCurent = valueCurent + this.countFormControlsWithValueForProgress(control);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
} else if (formControl instanceof FormArray) {
|
|
|
|
|
formControl.controls.forEach(item => {
|
|
|
|
|
valueCurent = valueCurent + this.countFormControlsWithValueForProgress(item);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
return valueCurent;
|
|
|
|
|
}
|
|
|
|
|
private haseValue(formGroup: FormGroup): boolean {
|
|
|
|
|
if (formGroup.get('value').value != null && formGroup.get('value').value !== '' && this.visibilityRulesService.checkElementVisibility(formGroup.get('id').value)) {
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private compositeFieldsGetChildsForProgress(formGroup: FormGroup): number {
|
|
|
|
|
let valueCurent = 0;
|
|
|
|
|
if (this.visibilityRulesService.checkElementVisibility(formGroup.get('id').value)) {
|
|
|
|
|
(formGroup.get('fields') as FormArray).controls.forEach((element: FormGroup) => {
|
|
|
|
|
valueCurent = valueCurent + this.countFormControlsWithValueForProgress(element);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
(formGroup.get('multiplicityItems') as FormArray).controls.forEach((element: FormGroup) => {
|
|
|
|
|
valueCurent = valueCurent + this.countFormControlsWithValueForProgress(element);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
return valueCurent;
|
2018-10-05 17:00:54 +02:00
|
|
|
|
}
|
2017-12-05 17:56:21 +01:00
|
|
|
|
|
2020-10-16 15:48:28 +02:00
|
|
|
|
private checkIfIsRequired(formControl: FormGroup): boolean {
|
|
|
|
|
if (formControl.get('validationRequired') && formControl.get('validationRequired').value) {
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
return false;
|
|
|
|
|
}
|
2019-02-12 13:19:03 +01:00
|
|
|
|
|
|
|
|
|
private checkFormsIfIsFieldsAndVisible(formControl: FormGroup): boolean {
|
|
|
|
|
if (formControl.contains('id') && formControl.contains('value')) {
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
private chechFieldIfIsFieldSetAndVisible(formControl: FormGroup): boolean {
|
|
|
|
|
if (formControl.contains('id') && formControl.contains('fields')) {
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
CountFormControlDepthLengthFotTotal(formControl: AbstractControl): number {
|
|
|
|
|
let valueCurent = 0;
|
|
|
|
|
if (formControl instanceof FormArray) {
|
|
|
|
|
formControl.controls.forEach(item => {
|
|
|
|
|
valueCurent = valueCurent + this.CountFormControlDepthLengthFotTotal(item);
|
|
|
|
|
});
|
|
|
|
|
} else if (formControl instanceof FormGroup) {
|
2020-10-16 15:48:28 +02:00
|
|
|
|
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))) {
|
2019-02-12 13:19:03 +01:00
|
|
|
|
valueCurent++;
|
|
|
|
|
} else if ((formControl as FormGroup).contains('id') && (formControl as FormGroup).contains('fields')) {
|
|
|
|
|
valueCurent = valueCurent + this.compositeFieldsGetChildsForTotal(formControl);
|
|
|
|
|
} else {
|
|
|
|
|
Object.keys(formControl.controls).forEach(item => {
|
|
|
|
|
const control = formControl.get(item);
|
|
|
|
|
valueCurent = valueCurent + this.CountFormControlDepthLengthFotTotal(control);
|
|
|
|
|
});
|
2018-10-05 17:00:54 +02:00
|
|
|
|
}
|
2019-02-12 13:19:03 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return valueCurent;
|
2018-10-05 17:00:54 +02:00
|
|
|
|
}
|
2019-02-12 13:19:03 +01:00
|
|
|
|
|
|
|
|
|
private compositeFieldsGetChildsForTotal(formGroup: FormGroup): number {
|
|
|
|
|
let valueCurent = 0;
|
|
|
|
|
if (this.visibilityRulesService.checkElementVisibility(formGroup.get('id').value)) {
|
|
|
|
|
(formGroup.get('fields') as FormArray).controls.forEach((element: FormGroup) => {
|
|
|
|
|
valueCurent = valueCurent + this.CountFormControlDepthLengthFotTotal(element);
|
|
|
|
|
});
|
|
|
|
|
(formGroup.get('multiplicityItems') as FormArray).controls.forEach((element: FormGroup) => {
|
|
|
|
|
valueCurent = valueCurent + this.CountFormControlDepthLengthFotTotal(element);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
return valueCurent;
|
|
|
|
|
}
|
2020-10-15 12:46:59 +02:00
|
|
|
|
|
|
|
|
|
countFormControlsValidForProgress(formControl: AbstractControl): number {
|
|
|
|
|
let valueCurrent = 0;
|
|
|
|
|
if (formControl instanceof FormControl) {
|
|
|
|
|
if (this.controlRequired(formControl) && this.controlEnabled(formControl) && formControl['nativeElement'] && formControl.valid) {
|
|
|
|
|
valueCurrent++;
|
|
|
|
|
}
|
|
|
|
|
} else if (formControl instanceof FormGroup) {
|
|
|
|
|
Object.keys(formControl.controls).forEach(item => {
|
|
|
|
|
const control = formControl.get(item);
|
|
|
|
|
valueCurrent = valueCurrent + this.countFormControlsValidForProgress(control);
|
|
|
|
|
});
|
|
|
|
|
} else if (formControl instanceof FormArray) {
|
|
|
|
|
formControl.controls.forEach(item => {
|
|
|
|
|
valueCurrent = valueCurrent + this.countFormControlsValidForProgress(item);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
return valueCurrent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
countFormControlsRequiredFieldsForTotal(formControl: AbstractControl): number {
|
|
|
|
|
let valueCurrent = 0;
|
|
|
|
|
if (formControl instanceof FormControl) {
|
|
|
|
|
if (this.controlRequired(formControl) && this.controlEnabled(formControl) && formControl['nativeElement']) {
|
|
|
|
|
valueCurrent++;
|
|
|
|
|
}
|
|
|
|
|
} else if (formControl instanceof FormGroup) {
|
|
|
|
|
Object.keys(formControl.controls).forEach(item => {
|
|
|
|
|
const control = formControl.get(item);
|
|
|
|
|
valueCurrent = valueCurrent + this.countFormControlsRequiredFieldsForTotal(control);
|
|
|
|
|
});
|
|
|
|
|
} else if (formControl instanceof FormArray) {
|
|
|
|
|
formControl.controls.forEach(item => {
|
|
|
|
|
valueCurrent = valueCurrent + this.countFormControlsRequiredFieldsForTotal(item);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
return valueCurrent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
controlRequired(formControl: AbstractControl) {
|
|
|
|
|
if (formControl.validator) {
|
|
|
|
|
const validator = formControl.validator({} as AbstractControl);
|
|
|
|
|
if (validator && validator.required) {
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
} else { return false }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
controlEnabled(formControl: AbstractControl) {
|
|
|
|
|
if (formControl.enabled) {
|
|
|
|
|
return true;
|
|
|
|
|
} else { return false }
|
|
|
|
|
}
|
2020-10-16 15:48:28 +02:00
|
|
|
|
|
|
|
|
|
isEditor(): boolean {
|
|
|
|
|
return this.isDmpEditor || this.isDatasetEditor;
|
|
|
|
|
}
|
2018-05-28 11:50:42 +02:00
|
|
|
|
}
|