#440 layout improvements, multiline-text widget

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

@@ -1,17 +1,24 @@
 <div class="mdl-grid">
-    <div *ngFor="let field of content.fields" class="mdl-cell mdl-cell--{{field.metadata.size}}-col">
+    <div *ngFor="let col of content.columns" class="mdl-cell mdl-cell--{{col.size}}-col">
-        <div [ngSwitch]="field.type">
+        <div class="mdl-grid" *ngIf="col.hasFields()">
-            <div *ngSwitchCase="'integer'">
+            <div *ngFor="let field of col.fields" class="mdl-cell mdl-cell--12-col">
-                <number-widget [field]="field"></number-widget>
+                <div [ngSwitch]="field.type">
-            </div>
+                    <div *ngSwitchCase="'integer'">
-            <div *ngSwitchCase="'text'">
+                        <number-widget [field]="field"></number-widget>
-                <text-widget [field]="field"></text-widget>
+                    </div>
-            </div>
+                    <div *ngSwitchCase="'text'">
-            <div *ngSwitchCase="'boolean'">
+                        <text-widget [field]="field"></text-widget>
-                <checkbox-widget [field]="field"></checkbox-widget>
+                    </div>
-            </div>
+                    <div *ngSwitchCase="'multi-line-text'">
-            <div *ngSwitchDefault>
+                        <multiline-text-widget [field]="field"></multiline-text-widget>
-                <span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
+                    </div>
+                    <div *ngSwitchCase="'boolean'">
+                        <checkbox-widget [field]="field"></checkbox-widget>
+                    </div>
+                    <div *ngSwitchDefault>
+                        <span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
+                    </div>
+                </div>
             </div>
         </div>
     </div>

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/container/container.widget.ts

@@ -16,10 +16,12 @@
  */
 
 import { Component, Input, AfterViewInit } from '@angular/core';
+import { ContainerModel } from './../widget.model';
+
 import { TextWidget } from './../text/text.widget';
 import { NumberWidget } from './../number/number.widget';
-import { ContainerModel } from './../widget.model';
 import { CheckboxWidget } from './../checkbox/checkbox.widget';
+import { MultilineTextWidget } from './../multiline-text/multiline-text.widget';
 
 declare let __moduleName: string;
 declare var componentHandler;
@@ -28,7 +30,7 @@ declare var componentHandler;
     moduleId: __moduleName,
     selector: 'container-widget',
     templateUrl: './container.widget.html',
-    directives: [TextWidget, NumberWidget, CheckboxWidget]
+    directives: [TextWidget, NumberWidget, CheckboxWidget, MultilineTextWidget]
 })
 export class ContainerWidget implements AfterViewInit {
 

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/index.ts

@@ -20,6 +20,7 @@ import { ContainerWidget } from './container/container.widget';
 import { TextWidget } from './text/text.widget';
 import { NumberWidget } from './number/number.widget';
 import { CheckboxWidget } from './checkbox/checkbox.widget';
+import { MultilineTextWidget } from './multiline-text/multiline-text.widget';
 
 export * from './widget.model';
 
@@ -28,11 +29,13 @@ export * from './container/container.widget';
 export * from './text/text.widget';
 export * from './number/number.widget';
 export * from './checkbox/checkbox.widget';
+export * from './multiline-text/multiline-text.widget';
 
 export const WIDGET_DIRECTIVES: [any] = [
     TabsWidget,
     ContainerWidget,
     TextWidget,
     NumberWidget,
-    CheckboxWidget
+    CheckboxWidget,
+    MultilineTextWidget
 ];

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.css

@@ -0,0 +1,3 @@
+:host .multiline-text-widget {
+    width: 100%;
+}

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.html

@@ -0,0 +1,4 @@
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label multiline-text-widget">
+    <textarea class="mdl-textfield__input" type="text" rows= "3" [attr.id]="field.id"></textarea>
+    <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
+</div>

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.ts

@@ -0,0 +1,46 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input, AfterViewInit } from '@angular/core';
+import { FormFieldModel } from './../widget.model';
+
+declare let __moduleName: string;
+declare var componentHandler;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'multiline-text-widget',
+    templateUrl: './multiline-text.widget.html',
+    styleUrls: ['./multiline-text.widget.css']
+})
+export class MultilineTextWidget implements AfterViewInit {
+
+    @Input()
+    field: FormFieldModel;
+
+    hasField() {
+        return this.field ? true : false;
+    }
+
+    ngAfterViewInit() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+}

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/widget.model.ts

@@ -61,6 +61,16 @@ export class FormFieldModel extends FormWidgetModel {
     }
 }
 
+export class ContainerColumnModel {
+
+    size: number = 12;
+    fields: FormFieldModel[] = [];
+
+    hasFields(): boolean {
+        return this.fields && this.fields.length > 0;
+    }
+}
+
 export class ContainerModel extends FormWidgetModel {
 
     fieldType: string;
@@ -70,7 +80,7 @@ export class ContainerModel extends FormWidgetModel {
     tab: string;
     numberOfColumns: number = 1;
 
-    fields: FormFieldModel[] = [];
+    columns: ContainerColumnModel[] = [];
 
     constructor(form: FormModel, json?: any) {
         super(form, json);
@@ -88,17 +98,16 @@ export class ContainerModel extends FormWidgetModel {
                 columnSize = 12 / this.numberOfColumns;
             }
 
-            let fields = [];
+            for (let i = 0; i < this.numberOfColumns; i++) {
+                let col = new ContainerColumnModel();
+                col.size = columnSize;
+                this.columns.push(col);
+            }
 
             Object.keys(json.fields).map(key => {
-                fields = fields.concat(json.fields[key] || []);
+                let fields = (json.fields[key] || []).map(f => new FormFieldModel(form, f));
-            });
+                let col = this.columns[parseInt(key) - 1];
-
+                col.fields = fields;
-            // this.fields = fields.map(f => new FormFieldModel(form, f));
-            this.fields = fields.map(f => {
-                let field = new FormFieldModel(form, f);
-                field.metadata['size'] = columnSize;
-                return field;
             });
         }
     }