no message

dmp-frontend/src/app/app.component.css

@@ -18,5 +18,5 @@ app-root {
 }
 
 html {
-    overflow-y: hidden
+    /* overflow-y: hidden */
 }

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

@@ -6,7 +6,16 @@
             <i>{{group.extendedDescription}}</i>
         </h5> -->
         <div *ngFor="let compositeField of group.compositeFields; let i = index;">
+            <div *ngIf="(compositeField?.multiplicity?.max - 1) > (compositeField?.multiplicityItems?.length)">
+                <a (click)="addMultipleField(i)" style="cursor: pointer">
+                    Add one more field +
+                </a>
+            </div>
             <df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)" [path]="path" [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
+            <div *ngFor="let multipleCompositeField of compositeField.multiplicityItems; let j = index;">
+                <df-composite-field [compositeField]="multipleCompositeField" [form]="form.get('compositeFields').get(''+i).get('multiplicityItems').get(''+j)"
+                    [path]="path" [pathName]="pathName+'.compositeFields.'+i+'.multiplicityItems.'+j"></df-composite-field>
+            </div>
         </div>
     </div>
 </div>

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

@@ -1,9 +1,10 @@
 import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
 import { FieldGroup } from '../../models/FieldGroup';
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormGroup, Validators, FormControl } from '@angular/forms';
+import { FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
 import { NgForm } from '@angular/forms';
 import { Rule } from '../../entities/common/rule';
+import { CompositeField } from '../../models/CompositeField';
 
 
 
@@ -16,12 +17,12 @@ import { Rule } from '../../entities/common/rule';
 export class DynamicFormGroupComponent implements OnInit {
   @Input() group: FieldGroup
   @Input() form: FormGroup;
-  @Input() pathName:string;
+  @Input() pathName: string;
 
-  @Input() path:string;
+  @Input() path: string;
 
 
-  constructor(private visibilityRulesService:VisibilityRulesService) {
+  constructor(private visibilityRulesService: VisibilityRulesService) {
   }
 
   ngOnInit() {
@@ -43,6 +44,12 @@ export class DynamicFormGroupComponent implements OnInit {
   }
 
 
+  addMultipleField(fieldsetIndex: number) {
+    let compositeField: CompositeField = this.group.compositeFields[fieldsetIndex].cloneForMultiplicity();
+    this.group.compositeFields[fieldsetIndex].multiplicityItems.push(compositeField);
+    (<FormArray>(this.form.get("compositeFields").get('' + fieldsetIndex).get('multiplicityItems'))).push(compositeField.buildForm());
+  }
+
   addFieldSet() {
     /* debugger;
     let subgroup: any = {};

dmp-frontend/src/app/form/dynamic-form.component.css

@@ -17,3 +17,11 @@
 .ui-steps .ui-steps-item {
     min-width: 10%;
 }
+
+ng-sidebar-container {
+    overflow: inherit !important; 
+}
+
+/* .ng-sidebar__content {
+    overflow: inherit !important; 
+} */

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

@@ -19,8 +19,8 @@
 				<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
 
 					<div *ngFor="let section of dataModel.sections; let i = index;">
-						<df-section *ngIf='this.shouldDisplaySection(section)' [section]="section" [form]="form.get('sections').get(''+i)"
+						<df-section *ngIf='this.shouldDisplaySection(section)' [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1"
-						 [path]="i+1" [pathName]="'sections.'+i"></df-section>
+						 [pathName]="'sections.'+i"></df-section>
 					</div>
 				</form>
 			</div>

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

@@ -2,22 +2,30 @@ import { FormGroup } from '@angular/forms';
 import { JsonSerializer } from '../utilities/JsonSerializer';
 import { Serializable } from './interfaces/Serializable';
 import { BaseModel } from './BaseModel';
-import {Field} from './Field' 
+import { Field } from './Field'
+import { Multiplicity } from './Multiplicity';
 export class CompositeField extends BaseModel implements Serializable<CompositeField> {
-    public fields:Array<Field> = new Array<Field>();
+    public fields: Array<Field> = new Array<Field>();
-    public ordinal:number
+    public ordinal: number
-    public id:number
+    public id: number
-    fromJSONObject(item:any):CompositeField{
+    public multiplicity: Multiplicity;
+    public multiplicityItems: Array<CompositeField> = new Array<CompositeField>();
 
-        this.fields = new JsonSerializer<Field>().fromJSONArray(item.fields,Field);
+    fromJSONObject(item: any): CompositeField {
+
+        this.fields = new JsonSerializer<Field>().fromJSONArray(item.fields, Field);
         this.ordinal = item.ordinal;
         this.id = item.id;
+        //this.multiplicity = new JsonSerializer<Multiplicity>().fromJSONObject(item.multiplicity, Multiplicity);
+        this.multiplicity = new Multiplicity();
+        this.multiplicity.max = 2;
+        this.multiplicityItems = new JsonSerializer<CompositeField>().fromJSONArray(item.multiplicityItems, CompositeField);
         return this;
     }
 
-    buildForm():FormGroup{
+    buildForm(): FormGroup {
         let formGroup = this.formBuilder.group({
-            ordinal:this.ordinal
+            ordinal: this.ordinal
         });
 
         let fieldsFormArray = new Array<FormGroup>();
@@ -26,6 +34,24 @@ export class CompositeField extends BaseModel implements Serializable<CompositeF
             fieldsFormArray.push(form)
         })
         formGroup.addControl('fields', this.formBuilder.array(fieldsFormArray));
+
+        let multiplicityItemsFormArray = new Array<FormGroup>();
+        this.multiplicityItems.forEach(item => {
+            let form: FormGroup = item.buildForm();
+            multiplicityItemsFormArray.push(form)
+        })
+        formGroup.addControl('multiplicityItems', this.formBuilder.array(multiplicityItemsFormArray));
+
         return formGroup;
     }
+
+    cloneForMultiplicity(): CompositeField {
+        let newItem: CompositeField = new CompositeField();
+        this.fields.forEach(field => {
+            newItem.fields.push(field.cloneForMultiplicity());
+        });
+        newItem.ordinal = this.ordinal;
+
+        return newItem;
+    }
 }

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

@@ -3,18 +3,20 @@ 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>{
+import { Multiplicity } from './Multiplicity';
+export class Field extends BaseModel implements Serializable<Field>, FormGenerator<FormGroup>{
 
-    public id:string;
+    public id: string;
-    public title:string;
+    public title: string;
-    public value:string;
+    public value: string;
-    public description:string;
+    public description: string;
-    public extendedDescription:string;
+    public extendedDescription: string;
-    public viewStyle:string;
+    public viewStyle: string;
-    public defaultVisibility:boolean;
+    public defaultVisibility: boolean;
-    public page:number;
+    public page: number;
-    public data:any;
+    public multiplicity: Multiplicity;
-    fromJSONObject(item:any):Field{
+    public data: any;
+    fromJSONObject(item: any): Field {
         this.id = item.id;
         this.title = item.title;
         this.value = item.value;
@@ -23,11 +25,12 @@ export class Field extends BaseModel implements Serializable<Field>,FormGenerato
         this.viewStyle = item.viewStyle;
         this.defaultVisibility = item.defaultVisibility;
         this.page = item.page;
+        this.multiplicity = new JsonSerializer<Multiplicity>().fromJSONObject(item.multiplicity, Multiplicity);
         this.data = item.data;
         return this;
     }
 
-    buildForm():FormGroup{
+    buildForm(): FormGroup {
         let formGroup = this.formBuilder.group({
             id: [this.id],
             /* title: [this.title], */
@@ -41,4 +44,20 @@ export class Field extends BaseModel implements Serializable<Field>,FormGenerato
         });
         return formGroup;
     }
+
+    cloneForMultiplicity(): Field {
+        let newItem: Field = new Field();
+
+        newItem.id = this.id;
+        newItem.title = this.title;
+        newItem.description = this.description;
+        newItem.extendedDescription = this.extendedDescription;
+        newItem.viewStyle = this.viewStyle;
+        newItem.defaultVisibility = this.defaultVisibility;
+        newItem.page = this.page;
+        newItem.multiplicity = null;
+        newItem.data = this.data;
+
+        return newItem;
+    }
 }

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

@@ -0,0 +1,23 @@
+import { BaseModel } from './BaseModel';
+import { FormGroup } from '@angular/forms';
+import { FormGenerator } from './interfaces/FormGenerator';
+import { Serializable } from './interfaces/Serializable';
+export class Multiplicity extends BaseModel implements Serializable<Multiplicity>, FormGenerator<FormGroup>{
+    public min: number;
+    public max: number;
+
+    fromJSONObject(item: any): Multiplicity {
+        this.min = item.min;
+        this.max = item.max;
+        return this;
+    }
+
+    buildForm(): FormGroup {
+        let formGroup = this.formBuilder.group({
+            min: [this.min],
+            max: [this.max]
+
+        });
+        return formGroup;
+    }
+}

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

@@ -2,7 +2,7 @@ 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;        
+        if(!items)return new Array<T>();        
         const objectList: T[] = new Array<T>();
         for (let i = 0; i < items.length; i++) {
             objectList.push(new type().fromJSONObject(items[i]))

dmp-frontend/src/index.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
 
-	<head>
+<head>
 
 	<meta charset="utf-8">
 	<title>Data Management Plans Creator</title>
@@ -12,10 +12,11 @@
 	<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-->		
+	<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>
 
 
@@ -50,7 +51,9 @@
 
 
 </head>
+
 <body>
-	<app-root class="full-height full-width"></app-root>
+	<app-root ></app-root>
 </body>
+
 </html>