chnage on section model

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

@@ -1,6 +1,6 @@
 <div [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">
 
-  <h5 *ngIf="field.title">{{field.title}}</h5>
+  <!-- <h5 *ngIf="field.title">{{field.title}}</h5> -->
 
 
   <div [class.content-left-margin]="field.title">
@@ -11,7 +11,7 @@
 
     <div *ngSwitchCase="'freetext'">
       <mat-form-field>
-        <input matInput formControlName="value">
+        <input matInput formControlName="value" placeholder={{field.title}}>
       </mat-form-field>
     </div>
 

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

@@ -1,16 +1,16 @@
 <div *ngIf="visibilityRulesService.isElementVisible(pathName,compositeField.id)" [id]="compositeField.id" [formGroup]="form">
 
-
+    <h5 *ngIf="compositeField.title">{{compositeField.title}}</h5>
     <df-field *ngIf="compositeField.fields.length == 1" [field]="compositeField.fields[0]" [form]="form.get('fields').get(''+0)"
         [pathName]="pathName+'.fields.'+0"></df-field>
 
     <div *ngIf="compositeField.fields.length > 1" class="fieldset-component">
-        <h4 *ngIf="compositeField.title">{{compositeField.title}}</h4>
+        <h5 *ngIf="compositeField.title">{{compositeField.title}}</h5>
         <div class="content-left-margin">
-            <h4 *ngIf="compositeField.description">{{compositeField.description}}</h4>
-            <h4 *ngIf="compositeField.extendedDescription" class="fieldset-extended-desc">
+            <h5 *ngIf="compositeField.description">{{compositeField.description}}</h5>
+            <h5 *ngIf="compositeField.extendedDescription" class="fieldset-extended-desc">
                 <i>{{compositeField.extendedDescription}}</i>
-            </h4>
+            </h5>
             <div *ngFor="let field of compositeField.fields; let i = index;">
                 <div *ngIf="visibilityRulesService.isElementVisible(null,field.id)">
                     <div *ngIf="(field?.multiplicity?.max - 1) > (field?.multiplicityItems?.length)">

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

@@ -46,10 +46,25 @@
                 </mat-panel-description>
             </mat-expansion-panel-header>
 
-            <div *ngIf="section.fieldGroups">
+            <!-- <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 *ngFor="let compositeField of section.compositeFields; let i = index;">
+                <div *ngIf="visibilityRulesService.isElementVisible(null,compositeField.id)">
+                    <div *ngIf="(compositeField?.multiplicity?.max - 1) > (compositeField?.multiplicityItems?.length)">
+                        <a (click)="addMultipleField(i)" style="cursor: pointer">
+                            Add one more fieldset +
+                        </a>
+                    </div>
+                </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)"
+                        [pathName]="pathName+'.compositeFields.'+i+'.multiplicityItems.'+j"></df-composite-field>
+                </div>
             </div>
 
             <div *ngIf="section.sections">

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

@@ -10,12 +10,14 @@ export class CompositeField extends BaseModel implements Serializable<CompositeF
     public id: string
     public multiplicity: Multiplicity;
     public multiplicityItems: Array<CompositeField> = new Array<CompositeField>();
+    public title: string
 
     fromJSONObject(item: any): CompositeField {
 
         this.fields = new JsonSerializer<Field>().fromJSONArray(item.fields, Field);
         this.ordinal = item.ordinal;
         this.id = item.id;
+        this.title = item.title;
         this.multiplicity = new JsonSerializer<Multiplicity>().fromJSONObject(item.multiplicity, Multiplicity);
         //this.multiplicity = new Multiplicity();
         //this.multiplicity.max = 2;
@@ -26,7 +28,8 @@ export class CompositeField extends BaseModel implements Serializable<CompositeF
     buildForm(): FormGroup {
         let formGroup = this.formBuilder.group({
             id: this.id,
-            ordinal: this.ordinal
+            ordinal: this.ordinal,
+            title: this.title
         });
 
         let fieldsFormArray = new Array<FormGroup>();

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

@@ -4,23 +4,27 @@ import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { JsonSerializer } from '../utilities/JsonSerializer';
 import { Serializable } from './interfaces/Serializable';
 import { FieldGroup } from './FieldGroup';
+import { CompositeField } from '@app/models/CompositeField';
+
 export class Section extends BaseModel implements Serializable<Section>, FormGenerator<FormGroup>{
     public sections: Array<Section> = new Array<Section>();
-    public fieldGroups: Array<FieldGroup>;
+    //public fieldGroups: Array<FieldGroup>;
     public defaultVisibility: boolean;
     public page: number;
     public id: string
     public title: string
     public description: string;
+    public compositeFields: Array<CompositeField> = new Array<CompositeField>();
 
     fromJSONObject(item: any): Section {
         this.sections = new JsonSerializer<Section>().fromJSONArray(item.sections, Section);
-        this.fieldGroups = new JsonSerializer<FieldGroup>().fromJSONArray(item.fieldGroups, FieldGroup);
+        //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;
+        this.compositeFields = new JsonSerializer<CompositeField>().fromJSONArray(item.fieldSets, CompositeField);
         return this;
     }
 
@@ -34,14 +38,22 @@ export class Section extends BaseModel implements Serializable<Section>, FormGen
             })
         }
         let fieldGroupsFormArray = new Array<FormGroup>();
-        if (this.fieldGroups) {
-            this.fieldGroups.forEach(item => {
+        // if (this.fieldGroups) {
+        //     this.fieldGroups.forEach(item => {
+        //         let form: FormGroup = item.buildForm();
+        //         fieldGroupsFormArray.push(form)
+        //     })
+        // }
+        let compositeFieldsFormArray = new Array<FormGroup>();
+        if (this.compositeFields) {
+            this.compositeFields.forEach(item => {
                 let form: FormGroup = item.buildForm();
-                fieldGroupsFormArray.push(form)
+                compositeFieldsFormArray.push(form)
             })
         }
+        formGroup.addControl('compositeFields', this.formBuilder.array(compositeFieldsFormArray));
         formGroup.addControl('sections', this.formBuilder.array(sectionsFormArray));
-        formGroup.addControl('fieldGroups', this.formBuilder.array(fieldGroupsFormArray));
+       // 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))