Merge branch 'Development' of https://gitlab.eudat.eu/dmp/OpenAIRE-EUDAT-DMP-service-pilot into Development

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

@@ -1,7 +1,8 @@
 <div *ngIf="visibilityRulesService.isElementVisible(pathName,compositeField.id)" [id]="compositeField.id" [formGroup]="form">
 
 
-    <df-field *ngIf="compositeField.fields.length == 1" [field]="compositeField.fields[0]" [form]="form.get('fields').get(''+0)" [path]="path" [pathName]="pathName+'.fields.'+0"></df-field>
+    <df-field *ngIf="compositeField.fields.length == 1" [field]="compositeField.fields[0]" [form]="form.get('fields').get(''+0)"
+        [path]="path" [pathName]="pathName+'.fields.'+0"></df-field>
 
     <div *ngIf="compositeField.fields.length > 1" class="fieldset-component">
         <h4 *ngIf="compositeField.title">{{compositeField.title}}</h4>
@@ -11,7 +12,16 @@
                 <i>{{compositeField.extendedDescription}}</i>
             </h4>
             <div *ngFor="let field of compositeField.fields; let i = index;">
-                    <df-field [field]="field" [form]="form.get('fields').get(''+i)" [path]="path" [pathName]="pathName+'.fields.'+i"></df-field>                    
+                <div *ngIf="(field?.multiplicity?.max - 1) > (field?.multiplicityItems?.length)">
+                    <a (click)="addMultipleField(i)" style="cursor: pointer">
+                        Add one more field +
+                    </a>
+                </div>
+                <df-field [field]="field" [form]="form.get('fields').get(''+i)" [path]="path" [pathName]="pathName+'.fields.'+i"></df-field>
+                <div *ngFor="let multipleField of field.multiplicityItems; let j = index;">
+                    <df-field [field]="multipleField" [form]="form.get('fields').get(''+i).get('multiplicityItems').get(''+j)" [path]="path"
+                        [pathName]="pathName+'.fields.'+i+'.multiplicityItems.'+j"></df-field>
+                </div>
             </div>
         </div>
     </div>

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

@@ -1,26 +1,33 @@
 import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
 import { CompositeField } from '../../models/CompositeField';
-import { FormGroup } from '@angular/forms';
+import { FormGroup, FormArray } from '@angular/forms';
 import { Section } from '../../entities/model/section';
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Field } from '../../models/Field';
 @Component({
-    selector: 'df-composite-field',
+  selector: 'df-composite-field',
-    templateUrl: './dynamic-form-composite-field.html',
+  templateUrl: './dynamic-form-composite-field.html',
-    styleUrls: [
+  styleUrls: [
-      './dynamic-form-composite-field.css'
+    './dynamic-form-composite-field.css'
-    ],
+  ],
-    encapsulation: ViewEncapsulation.None,
+  encapsulation: ViewEncapsulation.None,
-  })
+})
-  export class DynamicFormCompositeFieldComponent implements OnInit{
+export class DynamicFormCompositeFieldComponent implements OnInit {
 
-    @Input() compositeField: CompositeField
+  @Input() compositeField: CompositeField
-    @Input() form: FormGroup;
+  @Input() form: FormGroup;
-    @Input() pathName:string;
+  @Input() pathName: string;
-    @Input() path:string;
+  @Input() path: string;
-    
-    constructor(private visibilityRulesService:VisibilityRulesService){}
 
-    ngOnInit(){
+  constructor(private visibilityRulesService: VisibilityRulesService) { }
 
-    }
+  ngOnInit() {
-  }
+
+  }
+
+  addMultipleField(fieldIndex: number) {
+    let field: Field = this.compositeField.fields[fieldIndex].cloneForMultiplicity(fieldIndex);
+    this.compositeField.fields[fieldIndex].multiplicityItems.push(field);
+    (<FormArray>(this.form.get("fields").get('' + fieldIndex).get('multiplicityItems'))).push(field.buildForm());
+  }
+}

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

@@ -45,7 +45,7 @@ export class DynamicFormGroupComponent implements OnInit {
 
 
   addMultipleField(fieldsetIndex: number) {
-    let compositeField: CompositeField = this.group.compositeFields[fieldsetIndex].cloneForMultiplicity();
+    let compositeField: CompositeField = this.group.compositeFields[fieldsetIndex].cloneForMultiplicity(fieldsetIndex);
     this.group.compositeFields[fieldsetIndex].multiplicityItems.push(compositeField);
     (<FormArray>(this.form.get("compositeFields").get('' + fieldsetIndex).get('multiplicityItems'))).push(compositeField.buildForm());
   }

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

@@ -5,8 +5,8 @@
 		</ng-sidebar>
 
 		<div class="ui-g" ng-sidebar-content>
-			<button class="ui-g" pButton type="button" (click)="toggleSidebar()" icon="fa-arrow-left">Table Of Contents</button>
+			<button type="button" style="margin: 15px;" class="btn btn-primary" (click)="toggleSidebar()" icon="fa-arrow-left">Table Of Contents</button>
-			<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
+			<button type="button" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
 			<progress-bar class="ui-g" *ngIf="progressbar" [formGroup]=form></progress-bar>
 			<div class="ui-g-12">
 				<p-steps [model]="stepperItems" [activeIndex]="this.currentPageIndex" (activeIndexChange)="changePageIndex($event)" [readonly]="false"></p-steps>

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

@@ -7,7 +7,7 @@ import { Multiplicity } from './Multiplicity';
 export class CompositeField extends BaseModel implements Serializable<CompositeField> {
     public fields: Array<Field> = new Array<Field>();
     public ordinal: number
-    public id: number
+    public id: string
     public multiplicity: Multiplicity;
     public multiplicityItems: Array<CompositeField> = new Array<CompositeField>();
 
@@ -45,10 +45,11 @@ export class CompositeField extends BaseModel implements Serializable<CompositeF
         return formGroup;
     }
 
-    cloneForMultiplicity(): CompositeField {
+    cloneForMultiplicity(index: number): CompositeField {
         let newItem: CompositeField = new CompositeField();
+        newItem.id = 'multiple_' + this.id + '_' + index;
         this.fields.forEach(field => {
-            newItem.fields.push(field.cloneForMultiplicity());
+            newItem.fields.push(field.cloneForMultiplicity(this.fields.indexOf(field)));
         });
         newItem.ordinal = this.ordinal;
 

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

@@ -15,6 +15,7 @@ export class Field extends BaseModel implements Serializable<Field>, FormGenerat
     public defaultVisibility: boolean;
     public page: number;
     public multiplicity: Multiplicity;
+    public multiplicityItems: Array<Field> = new Array<Field>();
     public data: any;
     fromJSONObject(item: any): Field {
         this.id = item.id;
@@ -25,7 +26,10 @@ export class Field extends BaseModel implements Serializable<Field>, FormGenerat
         this.viewStyle = item.viewStyle;
         this.defaultVisibility = item.defaultVisibility;
         this.page = item.page;
-        this.multiplicity = new JsonSerializer<Multiplicity>().fromJSONObject(item.multiplicity, Multiplicity);
+        //this.multiplicity = new JsonSerializer<Multiplicity>().fromJSONObject(item.multiplicity, Multiplicity);
+        this.multiplicity = new Multiplicity();
+        this.multiplicity.max = 2;
+        this.multiplicityItems = new JsonSerializer<Field>().fromJSONArray(item.multiplicityItems, Field);
         this.data = item.data;
         return this;
     }
@@ -42,13 +46,21 @@ export class Field extends BaseModel implements Serializable<Field>, FormGenerat
             page:[this.page],
             data:[this.data]        */
         });
+
+        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(): Field {
+    cloneForMultiplicity(index: number): Field {
         let newItem: Field = new Field();
 
-        newItem.id = this.id;
+        newItem.id = 'multiple_' + this.id + '_' + index;
         newItem.title = this.title;
         newItem.description = this.description;
         newItem.extendedDescription = this.extendedDescription;