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

Progress bar improvements, validators

This commit is contained in:
annampak 2017-10-04 12:39:45 +03:00
parent 14335cce29
commit 6c0d9946ee
7 changed files with 121 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dmp-frontend/src/app/entities/common/rulestyle.ts
View File

@ -1,5 +1,6 @@
export enum RuleStyle {
existence,
regex
regex,
customValidation
}

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

@ -50,11 +50,10 @@
<div class="panel-footer">
{{dirtyValues}}
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
{{dirtyValues}}
{{dirtyValues}}%
</div>
</div>
<!-- <button type="button" class="btn btn-info" onclick="signOut();">Sign out</button> -->

71
dmp-frontend/src/app/form/dynamic-form.component.ts
View File

@ -1,7 +1,7 @@
import { Component, Input, OnInit, AfterViewChecked, ViewChild } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';
import { NgForm } from '@angular/forms';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import 'rxjs/add/operator/switchMap';
//import { FieldBase } from '../../app/form/fields/field-base';
@ -20,52 +20,64 @@ import { GroupBase } from './dynamic-form-group/group-base';
export class DynamicFormComponent implements OnInit {
@Input() dataModel: DataModel = new DataModel();
form: FormGroup;
payLoad = '';
@Input() dirtyValues:number = 0;
form: FormGroup;
payLoad = '';
@Input() dirtyValues: number = 0;
constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router, private route: ActivatedRoute) {
constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router, private route: ActivatedRoute) {
this.form = this.qcs.toFormGroup(new Array(), new Array());
}
getSubForm(subformName){
getSubForm(subformName) {
return this.form.controls[subformName];
}
ngOnInit() {
console.log("DynamicFormComponent.ngOnInit() -- RUNNIGN");
this.serverService.getData()
.subscribe(
(data: any[]) => {
console.log("this.serverService.getFields");
this.dataModel = new DataModel();
this.dataModel = this.dataModelService.getDataModel(data);
this.form = this.qcs.toFormGroup(this.dataModel.fields, this.dataModel.groups);
this.form.valueChanges.subscribe(data => {
console.log('Form changes', data);
// console.log('Form changes', data);
let dirtyValuesArray: Array<any> = [];
let count = 0;
Object.keys(this.form.controls).forEach((c) => {
count++;
let currentControl = this.form.controls[c];
if(currentControl.dirty)
dirtyValuesArray.push(currentControl.value);
});
var percentage = Math.floor(dirtyValuesArray.length * 100 / count);
this.dirtyValues = percentage;
let countDirtyValues = 0;
Object.keys(this.form.controls).forEach((c) => {
//count++;
let currentControl = this.form.controls[c];
if (currentControl.dirty)
dirtyValuesArray.push(currentControl.value);
});
this.dataModel.groups.forEach(grp => {
grp.groupFields.forEach((fld) => {
if (fld.visible == true || fld.visible == "true")
count++;
if(fld.value != undefined)
countDirtyValues++;
});
});
//console.log(count);
// var percentage = Math.floor(dirtyValuesArray.length * 100 / count);
var percentage = Math.floor(countDirtyValues * 100 / count);
this.dirtyValues = percentage;
})
//this.form = this.qcs.toFormGroup(this.fields);
console.log("SUMMARY: ======>");
console.log(this.dataModel);
console.log(this.form);
@ -74,7 +86,7 @@ export class DynamicFormComponent implements OnInit {
},
(error) => console.log(error)
);
}
onSubmit() {
@ -91,7 +103,8 @@ export class DynamicFormComponent implements OnInit {
this.onValueChanged(); // (re)set validation messages now
}
onValueChanged(data?: any) {debugger;
onValueChanged(data?: any) {
debugger;
if (!this.form) { return; }
const form = this.form;

103
dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts
View File

@ -1,10 +1,11 @@
import { DataModel } from '../../entities/DataModel';
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormGroup, ValidatorFn, AbstractControl } from '@angular/forms';
import { FieldBase } from './field-base';
import { FieldBase } from './field-base';
import { GroupBase } from '../../form/dynamic-form-group/group-base';
import { DropdownField } from '../../form/fields/dropdown/field-dropdown';
import { RuleStyle } from '../../entities/common/rulestyle';
@Component({
@ -16,67 +17,99 @@ export class DynamicFormFieldComponent {
@Input() dataModel: DataModel;
@Input() field: FieldBase<any>;
@Input() form: FormGroup;
get isValid() { debugger;
return this.form.controls[this.field.key].valid;
get isValid() {
return this.form.controls[this.field.key].valid;
}
get isValidRequired() {
return this.form.controls[this.field.key].hasError("required");
}
get isValidPattern() {
return this.form.controls[this.field.key].hasError("pattern");
}
get isValidCustom() {
return this.form.controls[this.field.key].hasError("forbiddenName");
}
public ngOnInit() { //dropdown lists take only one of the available sources
for (var i=0, len = this.dataModel.groups.length; i<len; i++){
let dropdownField:any;
dropdownField = this.dataModel.groups[i].groupFields.find(x=>x.controlType == "dropdown");
if(dropdownField != undefined){
if(dropdownField.attributes.sources != undefined)
dropdownField.options = dropdownField.attributes.sources[0].params;
for (var i = 0, len = this.dataModel.groups.length; i < len; i++) {
let dropdownField: any;
dropdownField = this.dataModel.groups[i].groupFields.find(x => x.controlType == "dropdown");
if (dropdownField != undefined) {
if (dropdownField.attributes.sources != undefined)
dropdownField.options = dropdownField.attributes.sources[0].params;
}
}
}
ruleVisibleMethod(field, rule, dataModel){ //visibility rule -- checks if target field is visible
ruleVisibleMethod(field, rule, dataModel) { //visibility rule -- checks if target field is visible
dataModel.fields.forEach(fld => {
if (fld.label == rule._target && fld.visible == true)
field.visible = true;
});
if(field.visible == true)
if (field.visible == true)
return true;
}
FieldValueRuleMethod(field, rule){ //fieldValue rule -- checks the value of target
if (rule._ruleStyle == "range"){
}
FieldValueRuleMethod(field, rule) { //fieldValue rule -- checks the value of target
if (rule._ruleStyle == "range") {
this.dataModel.fields.forEach(fld => {
if (fld.key == rule._target && rule._from< fld.value <rule._to){
console.log("visible"+ fld.value)
if (fld.key == rule._target && rule._from < fld.value < rule._to) {
console.log("visible" + fld.value)
field.visible = true;
}
});
}
if (rule._ruleStyle == "boolean"){ //boolean Decision field
let ruleValue = rule.value.__text;
if (field.value.value.toString() == ruleValue){
if (rule._ruleStyle == "boolean") { //boolean Decision field
let ruleValue = rule.value.__text;
if (field.value.value.toString() == ruleValue) {
this.dataModel.getFieldByKey(rule._target).visible = true;
}else{
this.AddvalidationRules(rule._target);
} else {
this.dataModel.getFieldByKey(rule._target).visible = false;
}
}
if (rule._ruleStyle == "checked"){ //checkbox field
if (field.value == true){
if (rule._ruleStyle == "checked") { //checkbox field
if (field.value == true) {
this.dataModel.getFieldByKey(rule._target).visible = true;
}else{
this.AddvalidationRules(rule._target);
} else {
this.dataModel.getFieldByKey(rule._target).visible = false;
}
}
}
}
toggleVisibility(e, field, ckb){ //ckb the checkbox only send this parameter, it's essential to change the field value
if(ckb)
toggleVisibility(e, field, ckb) { //ckb the checkbox only send this parameter, it's essential to change the field value
if (ckb)
field.value = ckb.checked;
field.rules.forEach(rule => {
if (rule._type=="fieldValue"){
field.rules.forEach(rule => {
if (rule._type == "fieldValue") {
this.FieldValueRuleMethod(field, rule);
}
});
}
});
}
}
AddvalidationRules(field) {
if (this.dataModel.getFieldByKey(field).attributes.validation != undefined) {
this.dataModel.getFieldByKey(field).attributes.validation.forEach(rule => {
if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.existence])
this.dataModel.getFieldByKey(field).required = true;
if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.regex])
this.dataModel.getFieldByKey(field).regex = rule.regex;
if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.customValidation])
this.form.controls[field].setValidators(this.forbiddenNameValidator(/bob/i));
});
}
}
forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } => {
const forbidden = nameRe.test(control.value);
return forbidden ? { 'forbiddenName': { value: control.value } } : null;
};
}
}

4
dmp-frontend/src/app/form/fields/field-base.ts
View File

@ -8,7 +8,7 @@ export class FieldBase<T>{
required:boolean;
order:number;
rules: Rule[];
visible: boolean;
visible: boolean | string;
controlType:string;
group:string;
description:string;
@ -22,7 +22,7 @@ export class FieldBase<T>{
required?:boolean,
order?: number,
rules?: Rule[],
visible?: boolean,
visible?: boolean | string,
controlType?: string
group?: string
description?: string,

4
dmp-frontend/src/app/services/dataModelBuilder.service.ts
View File

@ -75,7 +75,7 @@ export class dataModelBuilder {
newfield = new CheckBoxField({
label: element.title.__cdata,
key:element._id,
value: true,
value: element.value,
order:element._ordinal,
rules: element.visible.rule != undefined ? element.visible.rule: rule,
visible: element._defaultVisibility,
@ -91,7 +91,7 @@ export class dataModelBuilder {
newfield = new RadioBoxField({
label: element.title.__cdata,
key:element._id,
value: true,
value: element.value,
order:element._ordinal,
rules: element.visible.rule != undefined ? element.visible.rule: rule,
visible: element._defaultVisibility,

8
dmp-frontend/src/app/services/field-control.service.ts
View File

@ -29,16 +29,16 @@ export class FieldControlService {
});
//PLEASE CHANGE THE group.key TO BE SAME AS THE ONE ON THE DYNAMIC-FORM-GROUP-COMPONENT.html
form[group.key] = new FormGroup(subgroup);
console.log("FORM_GROUP_GROUP: ");
console.log(form);
//console.log("FORM_GROUP_GROUP: ");
//console.log(form);
});
//add also the spare fields into the form
fields.forEach(field => {
form[field.key] = field.required ? new FormControl(field.value || '', Validators.required) : new FormControl(field.value || '')
});
console.log("FORM_GROUP: ");
console.log(form);
//console.log("FORM_GROUP: ");
//console.log(form);
return new FormGroup(form);
}