From 720684967151d60952de8319cbc260ebcb9a9076 Mon Sep 17 00:00:00 2001 From: annampak Date: Tue, 3 Oct 2017 18:36:09 +0300 Subject: [PATCH] custom validator, progress bar --- dmp-frontend/src/app/entities/DataModel.ts | 4 +- dmp-frontend/src/app/entities/common/rule.ts | 3 +- .../src/app/form/dynamic-form.component.html | 95 +++++++++++-------- .../src/app/form/dynamic-form.component.ts | 24 ++++- .../fields/dynamic-form-field.component.html | 15 +-- .../src/app/form/fields/field-base.ts | 5 +- dmp-frontend/src/app/login/login-page.html | 20 ++-- .../app/services/dataModelBuilder.service.ts | 52 +++++++--- .../src/app/services/field-control.service.ts | 15 +-- 9 files changed, 154 insertions(+), 79 deletions(-) diff --git a/dmp-frontend/src/app/entities/DataModel.ts b/dmp-frontend/src/app/entities/DataModel.ts index a53bc12ec..ebc5f3908 100644 --- a/dmp-frontend/src/app/entities/DataModel.ts +++ b/dmp-frontend/src/app/entities/DataModel.ts @@ -27,13 +27,13 @@ export class DataModel { this.fIndex = new Map>(); this.fields.forEach((field) => { - console.log("fieldid:" +field.key); + //console.log("fieldid:" +field.key); this.fIndex.set(field.key, field); }); this.groups.forEach((group) => { group.groupFields.forEach((field) => { - console.log("groupid: "+group.key + "fieldid:" +field.key); + //console.log("groupid: "+group.key + "fieldid:" +field.key); this.fIndex.set(field.key, field); }); }); diff --git a/dmp-frontend/src/app/entities/common/rule.ts b/dmp-frontend/src/app/entities/common/rule.ts index 770f8ed5b..687c665b9 100644 --- a/dmp-frontend/src/app/entities/common/rule.ts +++ b/dmp-frontend/src/app/entities/common/rule.ts @@ -9,5 +9,6 @@ export class Rule { target: string; range: any[2]; ruleText: string; - + regex: string; + methodJs:string; } \ No newline at end of file diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html index 8c1474cf7..ac74afb9a 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.html +++ b/dmp-frontend/src/app/form/dynamic-form.component.html @@ -1,46 +1,63 @@ -
-
- -
-
-

{{section.title}}

-
+
+
+ + +
+
+

{{section.title}}

+
+ +
+
+ +

{{section.title}}

+ +
+ +
+
+ +
+
+ + + +
+ +
+ +
+ Saved the following values
{{payLoad}} +
+ + +

Form value: {{ form.value | json }}

- -

{{section.title}}

- -
+ + +
+

On this page:

+
+ +
+
-
-
- -
-
- - - -
- -
- -
- Saved the following values
{{payLoad}} -
- - -

Form value: {{ form.value | json }}

-
-

On this page:

-
- -
-
-Sign out + +
+ {{dirtyValues}} +
+
+ {{dirtyValues}} +
+
+ + Sign out +
+ diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts index cacaad3f6..79398eff9 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.ts +++ b/dmp-frontend/src/app/form/dynamic-form.component.ts @@ -21,8 +21,9 @@ export class DynamicFormComponent implements OnInit { @Input() dataModel: DataModel = new DataModel(); form: FormGroup; - payLoad = ''; - + payLoad = ''; + @Input() dirtyValues:number = 0; + 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()); } @@ -48,6 +49,21 @@ export class DynamicFormComponent implements OnInit { 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); + let dirtyValuesArray: Array = []; + 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; + }) + //this.form = this.qcs.toFormGroup(this.fields); console.log("SUMMARY: ======>"); @@ -58,7 +74,7 @@ export class DynamicFormComponent implements OnInit { }, (error) => console.log(error) ); - + } onSubmit() { @@ -75,7 +91,7 @@ export class DynamicFormComponent implements OnInit { this.onValueChanged(); // (re)set validation messages now } - onValueChanged(data?: any) { + onValueChanged(data?: any) {debugger; if (!this.form) { return; } const form = this.form; diff --git a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html index 9c6747eda..fd9c32563 100644 --- a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html +++ b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html @@ -33,14 +33,14 @@
{{field.description}}
+ [(ngModel)]="field.value" [required]="field.required" [pattern] = "field.regex"> - + (change)="toggleVisibility($event, field, ckb)" #ckb [required]="field.required"> @@ -48,14 +48,17 @@
- +
+
+
+
{{field.label}} is required
+
{{field.label}} must follow a regular expression
+
{{field.label}} custom Valid
- -
{{field.label}} is required
diff --git a/dmp-frontend/src/app/form/fields/field-base.ts b/dmp-frontend/src/app/form/fields/field-base.ts index da2c6f79b..7b1e9299a 100644 --- a/dmp-frontend/src/app/form/fields/field-base.ts +++ b/dmp-frontend/src/app/form/fields/field-base.ts @@ -13,6 +13,7 @@ export class FieldBase{ group:string; description:string; attributes: Attribute; + regex:string; constructor(options: { value?: T, @@ -25,7 +26,8 @@ export class FieldBase{ controlType?: string group?: string description?: string, - attributes?: Attribute + attributes?: Attribute, + regex?:string } = {}) { this.value = options.value; this.key = options.key || ''; @@ -38,5 +40,6 @@ export class FieldBase{ this.group = options.group || ''; this.description = options.description || ''; this.attributes = options.attributes || new Attribute(); + this.regex = options.regex || ''; } } \ No newline at end of file diff --git a/dmp-frontend/src/app/login/login-page.html b/dmp-frontend/src/app/login/login-page.html index 3980c73d2..b81717cca 100644 --- a/dmp-frontend/src/app/login/login-page.html +++ b/dmp-frontend/src/app/login/login-page.html @@ -1,14 +1,22 @@ - + - + + + +
+
+

Please Sign in

+
+
+
+ +
+
+
- - - -
diff --git a/dmp-frontend/src/app/services/dataModelBuilder.service.ts b/dmp-frontend/src/app/services/dataModelBuilder.service.ts index a5103f18c..805ed2971 100644 --- a/dmp-frontend/src/app/services/dataModelBuilder.service.ts +++ b/dmp-frontend/src/app/services/dataModelBuilder.service.ts @@ -27,7 +27,7 @@ export class dataModelBuilder { this.dataModel.groups = this.getGroups(data.dataset.profile.viewstyle.definition.root.fieldGroups.fieldGroup, this.fields); this.dataModel.semanticAttr = new Array(new Attribute); //this.dataModel.semanticAttr = data.dataset.profile.definition.root.fields.field; - this.dataModel.semanticAttr = this.getFieldsAttributes(data.dataset.profile.definition.root.fields.field, this.fields) ; + this.dataModel.semanticAttr = this.getFieldsAttributes(data.dataset.profile.definition.root.fields.field, data.dataset.profile.ruleset.definition.root.functions.function, this.fields) ; this.dataModel.sections = this.getSections(data.dataset.profile.viewstyle.definition.root.sections.section, this.dataModel.groups) ; this.dataModel.buildIndex(); @@ -203,7 +203,7 @@ export class dataModelBuilder { } - private getFieldsAttributes(attributes:any, fields:any[]){ + private getFieldsAttributes(attributes:any, functions:any, fields:any[]){ let attribute:Attribute[]=[]; attributes.forEach(attr => { let newAttribute = new Attribute(); @@ -213,27 +213,40 @@ export class dataModelBuilder { newAttribute.multiplicityMax = attr.multiplicity._max; newAttribute.multiplicityMin = attr.multiplicity._min; newAttribute.ordinal = attr._ordinal; - newAttribute.sources = new Array(); - newAttribute.sources.push(attr.sources.source); + newAttribute.sources = new Array(); newAttribute.validation = new Array(); //newAttribute.validation.push(attr.validation.rule); - newAttribute.sources.forEach(src => { - src.params=new Array(); - for (var i=0, len=attr.sources.source.value.length; i { + src.params=new Array(); + for (var i=0, len=attr.sources.source.value.length; i { + if(fnc._id == rule.method) + rule.methodJs = fnc.script.__cdata; + }); + } + newAttribute.validation.push(rule); } @@ -242,6 +255,17 @@ export class dataModelBuilder { let rule = new Rule(); rule.ruleStyle= attr.validation.rule._ruleStyle; rule.ruleType= attr.validation.rule._type; + if (attr.validation.rule._ruleStyle == "regex") + rule.regex= attr.validation.rule.__cdata; + if (attr.validation.rule._ruleStyle == "customValidation"){ + rule.method= attr.validation.rule._method; + functions.forEach(fnc => { + if(fnc._id == rule.method) debugger; + rule.methodJs = fnc.__cdata; + }); + + } + newAttribute.validation.push(rule); } } diff --git a/dmp-frontend/src/app/services/field-control.service.ts b/dmp-frontend/src/app/services/field-control.service.ts index e9a13d492..e9d47b087 100644 --- a/dmp-frontend/src/app/services/field-control.service.ts +++ b/dmp-frontend/src/app/services/field-control.service.ts @@ -16,12 +16,15 @@ export class FieldControlService { groups.forEach(group => { let subgroup: any = {}; group.groupFields.forEach(field => { - if(field.attributes.validation != undefined) - field.attributes.validation.forEach(val => { - if (val.ruleStyle.toString()=="existence"){ - field.required = true; - } - }); + //if(field.attributes.validation != undefined) + // field.attributes.validation.forEach(val => { + // if (val.ruleStyle.toString()=="existence"){ + // field.required = true; + // } + // if (val.ruleStyle.toString()=="regex"){ + // field.regex = val.regex; + // } + // }); subgroup[field.key] = field.required ? new FormControl(field.value || '', Validators.required) : new FormControl(field.value || '') }); //PLEASE CHANGE THE group.key TO BE SAME AS THE ONE ON THE DYNAMIC-FORM-GROUP-COMPONENT.html