This commit is contained in:
krommydas kyriakos 2017-12-11 18:39:44 +02:00
commit f47c2c5925
6 changed files with 59 additions and 29 deletions

View File

@ -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>

View File

@ -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',
templateUrl: './dynamic-form-composite-field.html',
styleUrls: [
'./dynamic-form-composite-field.css'
],
encapsulation: ViewEncapsulation.None,
})
export class DynamicFormCompositeFieldComponent implements OnInit{
selector: 'df-composite-field',
templateUrl: './dynamic-form-composite-field.html',
styleUrls: [
'./dynamic-form-composite-field.css'
],
encapsulation: ViewEncapsulation.None,
})
export class DynamicFormCompositeFieldComponent implements OnInit {
@Input() compositeField: CompositeField
@Input() form: FormGroup;
@Input() pathName:string;
@Input() path:string;
constructor(private visibilityRulesService:VisibilityRulesService){}
@Input() compositeField: CompositeField
@Input() form: FormGroup;
@Input() pathName: string;
@Input() path: string;
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());
}
}

View File

@ -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());
}

View File

@ -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" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
<button type="button" style="margin: 15px;" class="btn btn-primary" (click)="toggleSidebar()" icon="fa-arrow-left">Table Of Contents</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>

View File

@ -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;

View File

@ -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;