diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html index 813a69dab3..9052855031 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html @@ -11,15 +11,10 @@ - - - - - +
+
+ +
+
+ + diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.scss b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.scss index cd9eb7300a..dfe37c704b 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.scss +++ b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.scss @@ -29,12 +29,22 @@ } container-widget{ - md-grid-list { - height:100px; + .grid-list { + display: flex; + flex-wrap: wrap; + margin-left: -1%; + margin-right: -1%; + } + + .grid-list-item { + flex-grow: 1; + box-sizing: border-box; + padding-left: 1%; + padding-right: 1%; } md-input-container { - width: 95%; + width: 100%; } .mat-input-placeholder-wrapper{ diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts index 1016f63e26..4b0f5eb8a7 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts @@ -26,6 +26,7 @@ import { EcmModelService } from './../../../services/ecm-model.service'; import { FormService } from './../../../services/form.service'; import { FormFieldComponent } from './../../form-field/form-field.component'; import { ContentWidgetComponent } from './../content/content.widget'; +import { ContainerColumnModel } from './../core/container-column.model'; import { FormFieldTypes } from './../core/form-field-types'; import { FormFieldModel } from './../core/form-field.model'; import { FormModel } from './../core/form.model'; @@ -211,7 +212,57 @@ describe('ContainerWidgetComponent', () => { }); widget.onFieldChanged(null); })); - }); + describe('fields', () => { + + it('should serializes the content fields', () => { + const field1 = {id: '1'}, + field2 = {id: '2'}, + field3 = {id: '3'}, + field4 = {id: '4'}, + field5 = {id: '5'}, + field6 = {id: '6'}; + + let container = new ContainerWidgetComponentModel(new FormFieldModel(new FormModel())); + container.columns = [ + { fields: [ + field1, + field2, + field3 + ] }, + { fields: [ + field4, + field5 + ] }, + { fields: [ + field6 + ] } + ]; + + widget.content = container; + + expect(widget.fields[0].id).toEqual('1'); + expect(widget.fields[1].id).toEqual('4'); + expect(widget.fields[2].id).toEqual('6'); + expect(widget.fields[3].id).toEqual('2'); + expect(widget.fields[4].id).toEqual('5'); + expect(widget.fields[5]).toEqual(undefined); + expect(widget.fields[6].id).toEqual('3'); + expect(widget.fields[7]).toEqual(undefined); + expect(widget.fields[8]).toEqual(undefined); + }); + }); + + describe('getColumnWith', () => { + + it('should calculate the column width based on the numberOfColumns and current field\'s colspan property', () => { + let container = new ContainerWidgetComponentModel(new FormFieldModel(new FormModel(), { numberOfColumns: 4 })); + widget.content = container; + + expect(widget.getColumnWith(undefined)).toBe('25%'); + expect(widget.getColumnWith( { colspan: 1 })).toBe('25%'); + expect(widget.getColumnWith( { colspan: 3 })).toBe('75%'); + }); + }); }); diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts index ca0c175471..a4fa870ba8 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts @@ -19,6 +19,7 @@ import { AfterViewInit, Component, OnInit, ViewEncapsulation } from '@angular/core'; import { FormService } from './../../../services/form.service'; +import { FormFieldModel } from './../core/form-field.model'; import { baseHost , WidgetComponent } from './../widget.component'; import { ContainerWidgetComponentModel } from './container.widget.model'; @@ -48,4 +49,39 @@ export class ContainerWidgetComponent extends WidgetComponent implements OnInit, this.content = new ContainerWidgetComponentModel(this.field); } } + + /** + * Serializes column fields + */ + get fields(): FormFieldModel[] { + const fields = []; + + let rowContainsElement = true, + rowIndex = 0; + + while (rowContainsElement) { + rowContainsElement = false; + for (let i = 0; i < this.content.columns.length; i++ ) { + let field = this.content.columns[i].fields[rowIndex]; + if (field) { + rowContainsElement = true; + } + + fields.push(field); + } + rowIndex++; + } + + return fields; + } + + /** + * Calculate the column width based on the numberOfColumns and current field's colspan property + * + * @param field + */ + getColumnWith(field: FormFieldModel): string { + const colspan = field ? field.colspan : 1; + return (100 / this.content.json.numberOfColumns) * colspan + '%'; + } } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.scss b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.scss index cdff33bbaa..2f0ec62724 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.scss +++ b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.scss @@ -5,7 +5,6 @@ &-upload-widget-container{ margin-bottom: 15px; - max-height: 80px; } &-upload-widget {