[ADF-1329] Fix grid style in the activiti form (#2223)

* Fix form grid style

* Tests

ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html

@@ -11,15 +11,10 @@
     </h4>
 </div>
 
-<md-grid-list rowHeight="100px" [cols]="content.field.numberOfColumns"
-              [ngClass]="{'hidden':!(content?.isVisible && content?.isExpanded)}">
-    <md-grid-tile *ngFor="let col of content.columns"
-                  [colspan]="content.colspan"
-                  [rowspan]="content.rowspan">
-        <ul class="adf-field-list">
-            <li *ngFor="let field of col.fields">
-                <form-field [field]="field"></form-field>
-            </li>
-        </ul>
-    </md-grid-tile>
-</md-grid-list>
+<section class="grid-list" [ngClass]="{'hidden':!(content?.isVisible && content?.isExpanded)}">
+    <div class="grid-list-item" *ngFor="let field of fields" [style.width]="getColumnWith(field)">
+        <form-field *ngIf="field" [field]="field"></form-field>
+    </div>
+</section>
+
+

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{

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 = <FormFieldModel> {id: '1'},
+                field2 = <FormFieldModel> {id: '2'},
+                field3 = <FormFieldModel> {id: '3'},
+                field4 = <FormFieldModel> {id: '4'},
+                field5 = <FormFieldModel> {id: '5'},
+                field6 = <FormFieldModel> {id: '6'};
+
+            let container = new ContainerWidgetComponentModel(new FormFieldModel(new FormModel()));
+            container.columns = [
+                <ContainerColumnModel> { fields: [
+                    field1,
+                    field2,
+                    field3
+                ] },
+                <ContainerColumnModel> { fields: [
+                    field4,
+                    field5
+                ] },
+                <ContainerColumnModel> { 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(<FormFieldModel> { colspan: 1 })).toBe('25%');
+            expect(widget.getColumnWith(<FormFieldModel> { colspan: 3 })).toBe('75%');
+        });
+    });
 });

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 + '%';
+    }
 }

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 {