refactoring implementation to support composite fields

dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html

@@ -0,0 +1,8 @@
+<div [formGroup]="form">
+    <h4>{{compositeField.title}}</h4>
+    <div *ngFor="let field of compositeField.fields; let i = index;">
+        <df-field [field]="field" [form]="form.get('fields').get(''+i)" [pathName]="pathName+'.fields.'+i"></df-field>
+    </div>
+
+</div>
+<!-- class = "form-group" [class]="customStyle"  [ngStyle] = "customStyle"-->

dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts

@@ -0,0 +1,21 @@
+import { CompositeField } from '../../models/CompositeField';
+import { FormGroup } from '@angular/forms';
+import { Section } from '../../entities/model/section';
+import { DataModel } from '../../entities/DataModel';
+import { Component, Input, OnInit } from '@angular/core';
+@Component({
+    selector: 'df-composite-field',
+    templateUrl: './dynamic-form-composite-field.html',
+  })
+  export class DynamicFormCompositeFieldComponent implements OnInit{
+
+    @Input() compositeField: CompositeField
+    @Input() form: FormGroup;
+    @Input() pathName:string;
+    
+    constructor(){}
+
+    ngOnInit(){
+
+    }
+  }

dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html

@@ -1,27 +1,8 @@
-<div [formGroup]="form" [ngStyle] = "customStyle" [class]="classFromJson" >
+<div [formGroup]="form" >
-    <h4 [id]= "group.key">{{group.title}}</h4>
+    <h4 >{{group.title}}</h4>
-	<div *ngFor="let field of group.groupFields" >
+    <div *ngFor="let compositeField of group.compositeFields; let i = index;">
-                
+        <df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)" [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
-      <df-field [field]="field" [form]="form" [dataModel] = "dataModel"></df-field>
- 
-      
     </div>
 
-    <div *ngIf ="group.compositeFields != undefined">
-                    <div *ngFor="let field of group.compositeFields.groupFields" >
-                            <df-field [field]="field" [form]="form" [dataModel] = "dataModel"></df-field>                    
-                    </div>
-                    <div *ngIf = "shouldIShow()">
-                        <a (click)="addFieldSet(form)" style="cursor: default">
-                            Add another fieldSet +
-                          </a> 
-                    </div>
-                        
-
-                     
-
-            </div>
-            
-
 </div>
 <!-- class = "form-group" [class]="customStyle"  [ngStyle] = "customStyle"-->

dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts

@@ -1,3 +1,4 @@
+import { FieldGroup } from '../../models/FieldGroup';
 import { DataModel } from '../../entities/DataModel';
 import { GroupBase } from './group-base';
 import { Component, Input, OnInit } from '@angular/core';
@@ -16,8 +17,10 @@ import { Rule } from '../../entities/common/rule';
 })
 export class DynamicFormGroupComponent implements OnInit {
   @Input() dataModel: DataModel;
-  @Input() group: GroupBase<any>;
+  @Input() group: FieldGroup
   @Input() form: FormGroup;
+  @Input() pathName:string;
+  
   @Input() customStyle: {};
   @Input() classFromJson: string;
 
@@ -25,10 +28,10 @@ export class DynamicFormGroupComponent implements OnInit {
   }
 
   ngOnInit() {
-    let st = this.group.style == "any" ? "" : this.group.style;
+    //let st = this.group.style == "any" ? "" : this.group.style;
-    this.classFromJson = this.group.class == "" ? "" : this.group.class;
+    //this.classFromJson = this.group.class == "" ? "" : this.group.class;
 
-    this.customStyle = {};
+    /* this.customStyle = {};
     if (st != "") {
       st.replace(/"/g, '\\"');
 
@@ -39,16 +42,15 @@ export class DynamicFormGroupComponent implements OnInit {
           //this.customStyle[entry[0]] = '2px solid #c1baba';
           var a = entry[0];
           this.customStyle[a] =  entry[1];
-      }
+      } */
   }
 
 
-}
-
   addFieldSet() {
-    debugger;  
+    /* debugger;
     let subgroup: any = {};
-    this.group.compositeFields.groupFields.forEach((field, i )=>{    debugger;
+    this.group.compositeFields.groupFields.forEach((field, i) => {
+      debugger;
       this.form.addControl(field.key + "_" + i, new FormControl(""))
 
       if (field.controlType == "textbox") {
@@ -67,16 +69,7 @@ export class DynamicFormGroupComponent implements OnInit {
         this.group.compositeFields.groupFields.push(newfield)
       }
 
-    });
+    }); */
-  }
-
-  shouldIShow(){
-    let show = false;
-    this.group.compositeFields.groupFields.forEach((field, i )=>{
-      if(field.visible) 
-        show = true;
-    })
-    return show;
   }
 
 }

dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html

@@ -0,0 +1,13 @@
+<div [formGroup]="form">
+    <h3>{{section.title}}</h3>
+    <div *ngIf="section.fieldGroups">
+        <div *ngFor="let group of section.fieldGroups; let j = index;">
+            <df-group [group]="group" [form]="form.get('fieldGroups').get(''+j)" [pathName]="pathName+'.fieldGroups.'+j"></df-group>
+        </div>
+    </div>
+    <div *ngIf="section.sections">
+        <div *ngFor="let itemsection of section.sections; let j = index;">
+            <df-section [section]="itemsection" [form]="form.get('sections').get(''+j)" [pathName]="pathName+'.sections.'+j"></df-section>
+        </div>
+    </div>   
+</div>

dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts

@@ -0,0 +1,20 @@
+import { FormGroup } from '@angular/forms';
+import { Section } from '../../entities/model/section';
+import { DataModel } from '../../entities/DataModel';
+import { Component, Input, OnInit } from '@angular/core';
+@Component({
+    selector: 'df-section',
+    templateUrl: './dynamic-form-section.html',
+  })
+  export class DynamicFormSectionComponent implements OnInit{
+
+    @Input() section: Section
+    @Input() form: FormGroup;
+    @Input() pathName:string;
+
+    constructor(){}
+
+    ngOnInit(){
+
+    }
+  }

dmp-frontend/src/app/form/fields/dynamic-form-field.component.html

@@ -26,43 +26,63 @@
 
 </div> -->
 
-<div [formGroup]="form" class="form-group" [ngSwitch]="field.controlType">
+<div *ngIf="this.visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" class="form-group" [ngSwitch]="field.viewStyle">
   <div [ngClass]="{true:'show', false:'hide'}[field.visible]">
 
-    <label *ngIf="field.controlType != 'checkbox'" [attr.for]="field.key">{{field.label}}</label>
+    <label>{{field.description}}</label>
-    <div>{{field.description}}</div>
+    <div>{{field.extendedDescription}}</div>
 
-    <input  *ngSwitchCase="'textbox'" class="form-control" [formControlName]="field.key" [id]="field.key" [type]="field.type"
+    <div *ngSwitchCase="'freetext'">
-       [required]="field.required" [pattern] = "field.regex" (ngModelChange) = "toggleVisibility($event, field,false)"> <!--input or change event
+      <input class="form-control" formControlName="value">
+    </div>
+
+    <!--input or change event
       on change event the listener is triggered on blur -->
 
-      <div *ngSwitchCase="'dropdown'">    
+    <!-- <div *ngSwitchCase="'dropdown'">
 
-        <autocomplete-remote *ngIf="field.url" [formControlName]="field.key" [url]="field.url" ></autocomplete-remote>
+        <autocomplete-remote *ngIf="field.url" formControlName="value" [url]="field.url" ></autocomplete-remote>
         
-        <select *ngIf="!field.url"  class="form-control" [id]="field.key" [formControlName]="field.key"  [required]="field.required" (change)="toggleVisibility($event, field, false)">
+        <select *ngIf="!field.url"  class="form-control" [id]="field.key" formControlName="field.key"  [required]="field.required" (change)="toggleVisibility($event, field, false)">
           <option *ngFor="let opt of field.options" [value]="opt._value"  >{{opt._label}}</option>
         </select>
+      </div> -->
+
+    <div *ngSwitchCase="'comboBox'">
+      <!--TODO-->
+      <autocomplete-remote *ngIf="field.url" formControlName="value" [url]="field.url"></autocomplete-remote>
+
+      <select *ngIf="!field.url" class="form-control" [id]="field.key" formControlName="value">
+                  <option *ngFor="let opt of field.options" >{{opt._label}}</option>
+                </select>
     </div>
 
 
-    <div *ngSwitchCase="'checkbox'" class="checkbox">
+    <!--     <div *ngSwitchCase="'checkbox'" class="checkbox">
         <label class="checkBoxLabelCustom">
-            <input *ngSwitchCase="'checkbox'" class="form-check" [formControlName]="field.key" [type]="field.type"
+            <input *ngSwitchCase="'checkbox'" class="form-check" formControlName="value" [type]="field.type"
-            (change)="toggleVisibility($event, field, true)"  [required]="field.required" [checked]="form.get(field.key).value">{{field.label}} <!--(change)="field.value = ckb.checked" has moved into the toggleVisibility 
+            (change)="toggleVisibility($event, field, true)"  [required]="field.required" [checked]="form.get(field.key).value">{{field.label}}
-             // without property [checked] as pages change the checkboxes of the previous pages lose the checked pro  [checked] = "field.value" #ckb -->
+        </label>
+      </div> -->
+
+    <div *ngSwitchCase="'checkBox'" class="checkbox">
+      <label class="checkBoxLabelCustom">
+              <input class="form-check" formControlName="value" type="checkbox">{{field.title}}
           </label>
     </div>
 
+    <div *ngSwitchCase="'textarea'">
+      <textarea class="form-control" formControlName="value"> </textarea>
+    </div>
+
 
-      <textarea *ngSwitchCase="'textarea'"  class="form-control" [formControlName]="field.key" [id]="field.key" 
-      [required]="field.required"  (ngModelChange) = "toggleVisibility($event, field,false)"> </textarea> 
 
     <div *ngSwitchCase="'radiobox'">
       <ng-container *ngFor="let answrBase of field.answers">
         <div style="display: inline-block;margin-right:10px;" [id]="field.key">
           <label for="{{answrBase.id}}" style="padding: 8px 10px; padding-right:5px;">{{answrBase.answer}}</label>
-                    <input type="radio" [formControlName]="field.key" [id]= "answrBase.id" [value]= "answrBase.value" [(ngModel)]="field.value" (change) = "toggleVisibility($event, field,false)"  [required]="field.required"/>
+          <input type="radio" [formControlName]="value" [id]="answrBase.id" [value]="answrBase.value" [(ngModel)]="field.value" (change)="toggleVisibility($event, field,false)"
+            [required]="field.required" />
         </div>
       </ng-container>
     </div>

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

@@ -1,3 +1,6 @@
+import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
+import { VisibilityRuleSource } from '../../visibility-rules/models/VisibilityRuleSource';
+import { Field } from '../../models/Field';
 import { DataModel } from '../../entities/DataModel';
 import { Component, Input, OnInit } from '@angular/core';
 import { FormGroup, ValidatorFn, AbstractControl, Validators } from '@angular/forms';
@@ -17,42 +20,32 @@ import { RuleStyle } from '../../entities/common/rulestyle';
 
 export class DynamicFormFieldComponent {
     @Input() dataModel: DataModel;
-    @Input() field: FieldBase<any>;
+    @Input() field: Field;
     @Input() form: FormGroup;
+    @Input() pathName:string;
     
     private fragment: string;
 
-    constructor(private route: ActivatedRoute) { }
+    constructor(private route: ActivatedRoute,private visibilityRulesService:VisibilityRulesService) { }
 
     ngOnChanges(changeRecord) {
     }
 
 
     get isValid() {
-        return this.form.controls[this.field.key].valid;
+        return this.form.get("value").valid;
     }
     get isValidRequired() {
-        return this.form.controls[this.field.key].hasError("required");
+        return this.form.get("value").hasError("required");
     }
     get isValidPattern() {
-        return this.form.controls[this.field.key].hasError("pattern");
+        return this.form.get("value").hasError("pattern");
     }
     get isValidCustom() {
-        return this.form.controls[this.field.key].hasError("forbiddenName");
+        return this.form.get("value").hasError("forbiddenName");
     }
 
-    public ngOnInit() { //dropdown lists take only one of the available sources
+    public ngOnInit() {                 
-        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].value;
-            }
-
-        }
-        this.toggleVisibility(null, this.field, this.field.controlType == "checkbox")
-
         this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); //navigate to certain section of the page
     }
 

dmp-frontend/src/app/models/BaseModel.ts

@@ -0,0 +1,4 @@
+import { FormBuilder } from '@angular/forms';
+export abstract class BaseModel{
+    public formBuilder:FormBuilder = new FormBuilder();
+}

dmp-frontend/src/app/models/CompositeField.ts

@@ -0,0 +1,27 @@
+import { FormGroup } from '@angular/forms';
+import { JsonSerializer } from '../utilities/JsonSerializer';
+import { Serializable } from './interfaces/Serializable';
+import { BaseModel } from './BaseModel';
+import {Field} from './Field' 
+export class CompositeField extends BaseModel implements Serializable<CompositeField> {
+    public fields:Array<Field> = new Array<Field>();
+    
+
+    fromJSONObject(item:any):CompositeField{
+        
+        this.fields = new JsonSerializer<Field>().fromJSONArray(item.fields,Field);
+        return this;
+    }
+
+    buildForm():FormGroup{
+        let formGroup = this.formBuilder.group({});
+
+        let fieldsFormArray = new Array<FormGroup>();        
+        this.fields.forEach(item => {
+            let form: FormGroup = item.buildForm();
+            fieldsFormArray.push(form)
+        })
+        formGroup.addControl('fields', this.formBuilder.array(fieldsFormArray));
+        return formGroup;
+    }
+}

dmp-frontend/src/app/models/DatasetModel.ts

@@ -0,0 +1,26 @@
+import { BaseModel } from './BaseModel';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormGenerator } from './interfaces/FormGenerator';
+import { JsonSerializer } from '../utilities/JsonSerializer';
+import { Section } from './Section';
+import { Serializable } from './interfaces/Serializable';
+export class DatasetModel extends BaseModel implements Serializable<DatasetModel>,FormGenerator<FormGroup>{
+
+    public sections:Array<Section>
+    fromJSONObject(item:any):DatasetModel{
+        this.sections = new JsonSerializer<Section>().fromJSONArray(item.sections,Section);
+        return this;
+    }
+
+    buildForm():FormGroup{
+        let formGroup:FormGroup = new FormBuilder().group({});
+        let sectionsFormArray = new Array<FormGroup>();
+        this.sections.forEach(item => {
+            let form: FormGroup = item.buildForm();
+            sectionsFormArray.push(form)
+        })
+        formGroup.addControl('sections', this.formBuilder.array(sectionsFormArray));
+        return formGroup;
+    }
+
+}

dmp-frontend/src/app/models/Field.ts

@@ -0,0 +1,42 @@
+import { BaseModel } from './BaseModel';
+import { FormGroup } from '@angular/forms';
+import { FormGenerator } from './interfaces/FormGenerator';
+import { JsonSerializer } from '../utilities/JsonSerializer';
+import { Serializable } from './interfaces/Serializable';
+export class Field extends BaseModel implements Serializable<Field>,FormGenerator<FormGroup>{
+
+    public id:string;
+    public title:string;
+    public value:string;
+    public description:string;
+    public extendedDescription:string;
+    public viewStyle:string;
+    public defaultVisibility:boolean;
+    public page:number;
+
+    fromJSONObject(item:any):Field{
+        this.id = item.id;
+        this.title = item.title;
+        this.value = item.value;
+        this.description = item.description;
+        this.extendedDescription = item.extendedDescription;        
+        this.viewStyle = item.viewStyle;
+        this.defaultVisibility = item.defaultVisibility;
+        this.page = item.page;
+        return this;
+    }
+
+    buildForm():FormGroup{
+        let formGroup = this.formBuilder.group({
+            id: [this.id],
+            title: [this.title],
+            value: [this.value],
+            description: [this.description],
+            extendedDescription:[this.extendedDescription],
+            viewStyle: [this.viewStyle],
+            defaultVisibility:[this.defaultVisibility],
+            page:[this.page]            
+        });        
+        return formGroup;
+    }
+}

dmp-frontend/src/app/models/FieldGroup.ts

@@ -0,0 +1,55 @@
+import { CompositeField } from './CompositeField';
+import { BaseModel } from './BaseModel';
+import { FormGroup } from '@angular/forms';
+import { FormGenerator } from './interfaces/FormGenerator';
+import { Validation } from './Validation';
+import { Rule } from './Rule';
+import { JsonSerializer } from '../utilities/JsonSerializer';
+import { Serializable } from './interfaces/Serializable';
+import { Field } from './Field';
+
+export class FieldGroup extends BaseModel implements Serializable<FieldGroup>, FormGenerator<FormGroup>{
+    public id: string;
+    public title: string;
+    public section: string;
+    public value: string;
+    public description: string;
+    public extendedDescription: string;
+    public defaultVisibility: boolean;
+    public page: number;
+    public compositeFields: Array<CompositeField> = new Array<CompositeField>();
+
+    fromJSONObject(item: any): FieldGroup {
+        this.id = item.id;
+        this.title = item.title;
+        this.value = item.value;
+        this.description = item.description;
+        this.extendedDescription = item.extendedDescription;        
+        this.defaultVisibility = item.defaultVisibility;
+        this.page = item.page;        
+        this.compositeFields = new JsonSerializer<CompositeField>().fromJSONArray(item.compositeFields, CompositeField);
+        return this;
+    }
+
+    buildForm(): FormGroup {
+        let formGroup: FormGroup = this.formBuilder.group({
+            id: [this.id],
+            title: [this.title],
+            value: [this.value],
+            description: [this.description],
+            extendedDescription: [this.extendedDescription],
+            defaultVisibility: [this.defaultVisibility],
+            page: [this.page]
+        });
+        let compositeFieldsFormArray = new Array<FormGroup>();
+        if (this.compositeFields) {
+            this.compositeFields.forEach(item => {
+                let form: FormGroup = item.buildForm();
+                compositeFieldsFormArray.push(form)
+            })
+        }
+        formGroup.addControl('compositeFields', this.formBuilder.array(compositeFieldsFormArray));
+
+        return formGroup;
+    }
+}

dmp-frontend/src/app/models/Rule.ts

@@ -0,0 +1,18 @@
+import { BaseModel } from './BaseModel';
+import { FormGroup } from '@angular/forms';
+import { FormGenerator } from './interfaces/FormGenerator';
+import { Serializable } from './interfaces/Serializable';
+export class Rule extends BaseModel implements Serializable<Rule>{
+    public sourceField:string;
+    public targetField:string;
+    public requiredValue;
+    public type: string;
+
+    fromJSONObject(item:any):Rule{
+        this.sourceField = item.sourceField;
+        this.targetField = item.targetField;
+        this.requiredValue = item.requiredValue;
+        this.type = item.type;
+        return this;
+    }
+}

dmp-frontend/src/app/models/Section.ts

@@ -0,0 +1,52 @@
+import { BaseModel } from './BaseModel';
+import { FormGenerator } from './interfaces/FormGenerator';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { JsonSerializer } from '../utilities/JsonSerializer';
+import { Serializable } from './interfaces/Serializable';
+import { FieldGroup } from './FieldGroup';
+export class Section extends BaseModel implements Serializable<Section>, FormGenerator<FormGroup>{
+    public sections: Array<Section> = new Array<Section>();
+    public fieldGroups: Array<FieldGroup>;
+    public defaultVisibility: boolean;
+    public page: number;
+    public id: string
+    public title: string
+    public description: string;
+
+    fromJSONObject(item: any): Section {
+        this.sections = new JsonSerializer<Section>().fromJSONArray(item.sections, Section);
+        this.fieldGroups = new JsonSerializer<FieldGroup>().fromJSONArray(item.fieldGroups, FieldGroup);
+        this.page = item.page;
+        this.defaultVisibility = item.defaultVisibility;
+        this.id = item.id;
+        this.title = item.title;
+        this.description = item.description;
+        return this;
+    }
+
+    buildForm(): FormGroup {
+        let formGroup: FormGroup = new FormBuilder().group({});
+        let sectionsFormArray = new Array<FormGroup>();
+        if (this.sections) {
+            this.sections.forEach(item => {
+                let form: FormGroup = item.buildForm();
+                sectionsFormArray.push(form)
+            })
+        }
+        let fieldGroupsFormArray = new Array<FormGroup>();
+        if (this.fieldGroups) {
+            this.fieldGroups.forEach(item => {
+                let form: FormGroup = item.buildForm();
+                fieldGroupsFormArray.push(form)
+            })
+        }
+        formGroup.addControl('sections', this.formBuilder.array(sectionsFormArray));
+        formGroup.addControl('fieldGroups', this.formBuilder.array(fieldGroupsFormArray));
+        formGroup.addControl('defaultVisibility', new FormControl(this.defaultVisibility))
+        formGroup.addControl('page', new FormControl(this.page))
+        formGroup.addControl('id', new FormControl(this.id))
+        formGroup.addControl('title', new FormControl(this.title))
+        formGroup.addControl('description', new FormControl(this.description))        
+        return formGroup;
+    }
+}

dmp-frontend/src/app/models/Validation.ts

@@ -0,0 +1,21 @@
+import { BaseModel } from './BaseModel';
+import { FormGroup } from '@angular/forms';
+import { FormGenerator } from './interfaces/FormGenerator';
+import { Serializable } from './interfaces/Serializable';
+export class Validation extends BaseModel implements Serializable<Validation>,FormGenerator<FormGroup>{
+    public type:string;
+    public value:string;
+
+    fromJSONObject(item:any):Validation{
+        this.type = item.type;
+        this.value = item.value;
+        return this;
+    }
+
+    buildForm():FormGroup{
+        return this.formBuilder.group({
+            type: [this.type],
+            value: [this.value],
+        });
+    }
+}

dmp-frontend/src/app/models/interfaces/FormGenerator.ts

@@ -0,0 +1,4 @@
+import { AbstractControl } from '@angular/forms';
+export interface FormGenerator<T extends AbstractControl>{
+    buildForm():T
+}

dmp-frontend/src/app/models/interfaces/Serializable.ts

@@ -0,0 +1,3 @@
+export interface Serializable<T> {
+    fromJSONObject(item: Object): T;
+}

dmp-frontend/src/app/testModel/testmodel.ts

@@ -0,0 +1,313 @@
+export const TestModel = {
+    "rules": [
+        {
+            "sourceField": "useMetadataQ211",
+            "targetField": "metadataStandarsA211",
+            "requiredValue": "true",
+            "type": "visibility",
+        },
+        {
+            "sourceField": "dataSummary",
+            "targetField": "freeOfChargeGroupCommentA213",
+            "requiredValue": "true",
+            "type": "visibility",
+        },
+        {
+            "sourceField": "useMetadataQ211",
+            "targetField": "noMetadata",
+            "requiredValue": "true",
+            "type": "visibility",
+        },
+        {
+            "sourceField": "FindDataMetadataGroup",
+            "targetField": "notlistedUrlA211",
+            "requiredValue": "true",
+            "type": "visibility",
+        },
+        {
+            "sourceField": "FindDataMetadataGroup",
+            "targetField": "notlistedCommentA211",
+            "requiredValue": "true",
+            "type": "visibility",
+        },
+        {
+            "sourceField": "useVocabulariesQ212",
+            "targetField": "standardisedVocabulariesA212",
+            "requiredValue": "true",
+            "type": "visibility",
+        },
+        {
+            "sourceField": "useVocabulariesQ212",
+            "targetField": "notlistedVocabularyA212",
+            "requiredValue": "true",
+            "type": "visibility",
+        },
+        {
+            "sourceField": "useVocabulariesQ212",
+            "targetField": "noMetadataVocabularyA212",
+            "requiredValue": "false",
+            "type": "visibility",
+        },
+        {
+            "sourceField": "notlistedVocabularyA212",
+            "targetField": "notlistedVocUrlA212",
+            "requiredValue": "true",
+            "type": "visibility",
+        },
+        {
+            "sourceField": "notlistedVocabularyA212",
+            "targetField": "notlistedVocCommentA212",
+            "requiredValue": "true",
+            "type": "visibility",
+        }
+    ],
+    "sections": [
+        {
+            "id": "sumData",
+            "defaultVisibility": "true",
+            "page": "1",
+            "title": "1 Data Summary",
+            "description": " Fill in the fields to describe your data model ",
+            "sections": [],
+            "fieldGroups":
+            [
+                {
+                    "id": "dataSummaryGroup",
+                    "defaultVisibility": "true",
+                    "page": "1",
+                    "title": "Data Summary",
+                    "description": "",
+                    "extendedDescription": "",
+                    "compositeFields": [
+                        {
+                            "fields":
+                            [
+                                {
+                                    "id": "dataSummary",
+                                    "defaultVisibility": "true",
+                                    "title": "",
+                                    "description": "",
+                                    "extendedDescription": "",
+                                    "viewStyle": "checkBox"
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "id": "fairData",
+            "ordinal": "2",
+            "defaultVisibility": "true",
+            "page": "1",
+            "title": "2 Fair Data",
+            "sections": [
+                {
+                    "id": "dataMetadata",
+                    "defaultVisibility": "true",
+                    "page": "1",
+                    "title": "2.1 Making data findable, including provisions for metadata",
+                    "sections": [],
+                    "fieldGroups": [
+                        {
+                            "id": "FindDataMetadataGroup",
+                            "section": "dataMetadata",
+                            "defaultVisibility": "true",
+                            "page": "1",
+                            "title": "Making data findable, including provisions for metadata",
+                            "description": "Making data findable, including provisions for metadata",
+                            "extendedDescription": "FieldGroup Description",
+                            "compositeFields": [
+                                {
+                                    "fields":
+                                    [
+                                        {
+                                            "id": "useMetadataQ211",
+                                            "defaultVisibility": "true",
+                                            "title": "Q2.1.1 Will you use metadata to describe the data?",
+                                            "description": "User can select from a list of metadata standards. If they cannot find the standard in the list provided then they should choose \"not listed\". Selecting this will result in a field in which the user can insert the URL to the description of the metadata scheme used. A \"comments\" box should exist to allow users to add comments. They may select more than one metadata standard. They may specify more than one URL when selecting \"not listed\". They are also presented with a field in which to specify the location of the metadata service. Users can select the \"no metadata\" button to specify no metadata will be used to describe the data.",
+                                            "extendedDescription": "FieldGroup Description",
+                                            "viewStyle": "booleanDesicion"
+                                        }
+                                    ]
+                                },
+                                {
+                                    "fields":
+                                    [
+                                        {
+                                            "id": "metadataStandarsA211",
+                                            "defaultVisibility": "false",
+                                            "title": "Metadata standards",
+                                            "description": "The data will be described by metadata that follows the metadata standards described in <url1>, <url2>, ? The data will be described by metadata that follows the metadata schema described in <not-listed-url1>, <not-listed-url2>. The metadata will be stored in the service located at <metadata-repo-url>",
+                                            "extendedDescription": "",
+                                            "viewStyle": "combobox"
+                                        }]
+                                },
+                                {
+                                    "fields":
+                                    [
+                                        {
+                                            "id": "notlistedA211",
+                                            "defaultVisibility": "false",
+                                            "title": "Not listed",
+                                            "description": "",
+                                            "extendedDescription": "",
+                                            "viewStyle": "checkBox"
+                                        }]
+                                },
+                                {
+                                    "fields":
+                                    [
+                                        {
+                                            "id": "notlistedUrlA211",
+                                            "defaultVisibility": "false",
+                                            "title": "Url",
+                                            "description": "URL to the description of the metadata scheme used",
+                                            "extendedDescription": "",
+                                            "viewStyle": "freetext"
+                                        }]
+                                },
+                                {
+                                    "fields":
+                                    [
+                                        {
+                                            "id": "notlistedCommentA211",
+                                            "defaultVisibility": "false",
+                                            "title": "Comments",
+                                            "description": "",
+                                            "extendedDescription": "",
+                                            "viewStyle": "freetext"
+                                        }]
+                                },
+                                {
+                                    "fields":
+                                    [
+                                        {
+                                            "id": "noMetadata",
+                                            "defaultVisibility": "false",
+                                            "title": "The data will not be described by any metadata.",
+                                            "description": "",
+                                            "extendedDescription": "",
+                                            "viewStyle": "checkBox"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "id": "VocabulariesGroup",
+                            "defaultVisibility": "true",
+                            "page": "1",
+                            "title": "Vocabularies",
+                            "description": "Vocabularies",
+                            "extendedDescription": "FieldGroup Description",
+                            "compositeFields": [
+                                {
+                                    "fields": [
+                                        {
+                                            "id": "useVocabulariesQ212",
+                                            "defaultVisibility": "true",
+                                            "title": "Q2.1.2 Will your metadata use standardised vocabularies?",
+                                            "description": "User selects from a drop-down list of existing standardised vocabularies or \"not listed\" or \"none\". There should be a \"comments\" fields for additional information. If \"not listed\" is selected the user is presented with two additional fields in which the user can put the URL to the new vocabulary along with a short description. The user should be allowed to select more than one option.",
+                                            "extendedDescription": "FieldGroup Description",
+                                            "viewStyle": "booleanDesicion"
+                                        }]
+                                },
+                                {
+                                    "fields": [
+                                        {
+                                            "id": "standardisedVocabulariesA212",
+                                            "defaultVisibility": "false",
+                                            "title": "Existing standardised vocabularies",
+                                            "description": "The metadata will make use of the standardised vocabulary <url>",
+                                            "extendedDescription": "",
+                                            "viewStyle": "combobox"
+                                        }]
+                                },
+                                {
+                                    "fields": [
+                                        {
+                                            "id": "notlistedVocabularyA212",
+                                            "defaultVisibility": "false",
+                                            "title": "Not listed vocabulary",
+                                            "description": "",
+                                            "extendedDescription": "",
+                                            "viewStyle": "checkBox"
+                                        }]
+                                },
+                                {
+                                    "fields": [
+                                        {
+                                            "id": "notlistedVocUrlA212",
+                                            "defaultVisibility": "false",
+                                            "title": "Vocabulary Url",
+                                            "description": "The user can put the URL to the new vocabulary",
+                                            "extendedDescription": "",
+                                            "viewStyle": "freetext"
+                                        }]
+                                },
+                                {
+                                    "fields": [
+                                        {
+                                            "id": "notlistedVocCommentA212",
+                                            "defaultVisibility": "false",
+                                            "title": "Comments",
+                                            "description": "Vocabulary short description",
+                                            "extendedDescription": "",
+                                            "viewStyle": "freetext"
+                                        }]
+                                },
+                                {
+                                    "fields": [
+                                        {
+                                            "id": "noMetadataVocabularyA212",
+                                            "defaultVisibility": "false",
+                                            "title": "The metadata will not make use of any vocabulary",
+                                            "description": "",
+                                            "extendedDescription": "",
+                                            "viewStyle": "checkBox"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "id": "FreeOfChargeGroup",
+                            "defaultVisibility": "true",
+                            "page": "1",
+                            "title": "Metadata Available",
+                            "description": "Metadata Available",
+                            "extendedDescription": "FieldGroup Description",
+                            "compositeFields": [
+                                {
+                                "fields": [
+                                    {
+                                        "id": "freeOfChargeGroupQ213",
+                                        "defaultVisibility": "true",
+                                        "title": "Q2.1.3 Will you use standardised formats for some or all of your data.",
+                                        "description": "User is presented with a choice of ?yes?, ?no?. There should be a ?comments? field for additional information.",
+                                        "extendedDescription": "Field Description",
+                                        "viewStyle": "booleanDesicion"
+                                    }]
+                            },
+                            {
+                                "fields": [
+                                    {
+                                        "id": "freeOfChargeGroupCommentA213",
+                                        "defaultVisibility": "true",
+                                        "title": "Comments",
+                                        "description": "",
+                                        "extendedDescription": "",
+                                        "viewStyle": "freetext"
+                                    }
+                                ]
+                            }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}

dmp-frontend/src/app/utilities/JsonSerializer.ts

@@ -0,0 +1,17 @@
+import { Serializable } from '../models/interfaces/Serializable';
+export class JsonSerializer<T extends Serializable<T>>{
+
+    public fromJSONArray(items: any[], type: { new(): T; }): T[] {
+        if(!items)return null;        
+        const objectList: T[] = new Array<T>();
+        for (let i = 0; i < items.length; i++) {
+            objectList.push(new type().fromJSONObject(items[i]))
+        }
+        return objectList;
+    }
+
+    public fromJSONObject(item: any, type: { new(): T; }): T {
+        if(!item)return null;
+        return new type().fromJSONObject(item);
+    }
+} 

dmp-frontend/src/app/visibility-rules/models/VisibilityRule.ts

@@ -0,0 +1,5 @@
+import { VisibilityRuleSource } from './VisibilityRuleSource';
+export class VisibilityRule{
+    public targetControlId:string;
+    public sourceVisibilityRules:Array<VisibilityRuleSource>
+}

dmp-frontend/src/app/visibility-rules/models/VisibilityRuleSource.ts

@@ -0,0 +1,4 @@
+export class VisibilityRuleSource{
+    public sourceControlId:string;
+    public sourceControlValue:string;
+}

dmp-frontend/src/app/visibility-rules/models/VisibilityRulesContext.ts

@@ -0,0 +1,32 @@
+import { VisibilityRuleSource } from './VisibilityRuleSource';
+import { VisibilityRule } from './VisibilityRule';
+import { Rule } from '../../models/Rule'
+export class VisibilityRulesContext {
+    public rules: Array<VisibilityRule> = new Array();
+
+    public getRulesFromKey(id: string): VisibilityRule {
+        
+        for (let i = 0; i < this.rules.length; i++) {
+            if (id == this.rules[i].targetControlId) return this.rules[i]
+        }
+        return null;
+    }
+
+    public buildVisibilityRuleContext(items: Array<Rule>) {
+        items.forEach(item => {
+            this.addToVisibilityRulesContext(item)
+        });
+    }
+
+    private addToVisibilityRulesContext(item: Rule): void {
+        for (let i = 0; i < this.rules.length; i++) {
+            if (this.rules[i].targetControlId == item.targetField) {
+                this.rules[i].sourceVisibilityRules.push({ sourceControlId: item.sourceField, sourceControlValue: item.requiredValue });
+                return;
+            }
+        }
+        let newVisibilityRuleArray = [({ sourceControlId: item.sourceField, sourceControlValue: item.requiredValue })];        
+        this.rules.push({ targetControlId: item.targetField, sourceVisibilityRules: newVisibilityRuleArray })
+        return;
+    }
+}

dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts

@@ -0,0 +1,35 @@
+import { VisibilityRule } from './models/VisibilityRule';
+import { VisibilityRulesContext } from './models/VisibilityRulesContext';
+import { FormGroup } from '@angular/forms';
+import { Injectable } from '@angular/core';
+import { Rule } from '../models/Rule'
+@Injectable()
+export class VisibilityRulesService {
+
+    public formGroup: FormGroup;
+    public visibilityRuleContext: VisibilityRulesContext;
+
+    public isElementVisible(pathKey: string,id:string) {
+        let visibilityRule = this.visibilityRuleContext.getRulesFromKey(id);
+        if(!visibilityRule) return true;
+        return this.checkElementVisibility(visibilityRule);
+    }
+
+    public checkElementVisibility(visibilityRule: VisibilityRule): boolean {
+        let sourceVisibilityRules = visibilityRule.sourceVisibilityRules;
+        for (let i = 0; i < sourceVisibilityRules.length; i++) {
+            let sourceVisibilityRule = sourceVisibilityRules[i];
+            if (sourceVisibilityRule.sourceControlValue != this.formGroup.get(this.getParentPath(sourceVisibilityRule.sourceControlId)).value) return false;
+        }
+        return true;
+    }
+
+    public buildVisibilityRules(item: Array<Rule>) {
+        this.visibilityRuleContext = new VisibilityRulesContext();
+        this.visibilityRuleContext.buildVisibilityRuleContext(item);
+    }
+
+    private getParentPath(parentId:string):string{
+        return '';
+    }
+}

dmp-frontend/src/index.html

@@ -1,67 +0,0 @@
-<!doctype html>
-<html lang="en">
-		
-	<head>
-		
-		<meta charset="utf-8">
-		<title>Data Management Plans Creator</title>
-		<base href="/">
-		<meta name="csrf-token" content="2c64def7de30197c40276fe1a7ea874ca8871f70be7d7dc3305465a4d5c565e4">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<link rel="icon" type="image/x-icon" href="favicon.ico">
-		<meta name="google-signin-client_id" content="524432312250-vhgidft856v8qftsc81kls4c74v87d8o.apps.googleusercontent.com">
-		
-		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-<!--
-  <script src="https://apis.google.com/js/platform.js" ></script>
--->
-  <link rel="stylesheet" href="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc.min.css"><!--bootstrap plugin for ToC-->		
-  <script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc.min.js"></script>
-  
-
-  <!-- XML to json and vice versa lib -->
-  <script src="assets/xml2json.min.js"></script>
-	
-		<!-- Json formatter lib -->
-		<link rel="stylesheet" type="text/css" href="assets/jquery.json-viewer.css">
-		<script src="assets/jquery.json-viewer.js"></script>
-		
-		<!-- lib 4 pretty-printing xml and json -->
-		<script src="assets/vkbeautify.0.99.00.js"></script>
-		
-		<!-- Nice BS notifications -->
-		<script src="assets/bootstrap-notify.min.js"></script>
-	
-		<!-- that's google sign in library -->
-		<script src="https://apis.google.com/js/platform.js"></script>
-		
-		<!-- font-awesome css -->
-		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-
-
-		<!-- Customized scrollbars source: https://github.com/utatti/perfect-scrollbar -->
-		<link rel="stylesheet" type="text/css" href="assets/perfect-scrollbar/perfect-scrollbar.css">
-		<script src="assets/perfect-scrollbar/perfect-scrollbar.js"></script>
-
-
-		<!-- my custom global code and css --> 
-		<link rel="stylesheet" type="text/css" href="assets/custom.css">
-		<script src="assets/custom.js"></script>
-	
-
-</head>
-<body>
-		<script>
-		  function signOut() {
-		    var auth2 = gapi.auth2.getAuthInstance();
-		    auth2.signOut().then(function () {
-		      console.log('User signed out.');
-					localStorage.removeItem('currentUser');
-		    });
-		  }
-		</script>
-
-	<app-root></app-root>
-
-</body>
-</html>