#469 collapsible headers

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

@@ -6,4 +6,15 @@
     border-bottom: 1px solid rgba(0,0,0,.87);
     margin-left: 10px;
     margin-right: 10px;
+    cursor: default;
+
+    user-select: none;
+    -webkit-user-select: none;   /* Chrome/Safari/Opera */
+    -moz-user-select: none;      /* Firefox */
+    -ms-user-select: none;       /* IE/Edge */
+    -webkit-touch-callout: none; /* iOS Safari */
+}
+
+.container-widget__header-text.collapsible {
+    cursor: pointer;
 }

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

@@ -1,8 +1,17 @@
 <div class="container-widget">
     <div *ngIf="content?.isGroup()" class="container-widget__header">
-        <h3 class="container-widget__header-text">{{content.name}}</h3>
+        <h3 class="container-widget__header-text"
+            [class.collapsible]="content?.isCollapsible()">
+            <button *ngIf="content?.isCollapsible()"
+                    alfresco-mdl-button
+                    class="mdl-button--icon"
+                    (click)="onExpanderClicked()">
+                <i class="material-icons">{{ content?.isExpanded ? 'expand_less' : 'expand_more' }}</i>
+            </button>
+            <span (click)="onExpanderClicked()">{{content.name}}</span>
+        </h3>
     </div>
-    <div class="mdl-grid">
+    <div class="mdl-grid" *ngIf="content?.isExpanded">
         <div *ngFor="let col of content.columns" class="mdl-cell mdl-cell--{{col.size}}-col">
             <div class="mdl-grid" *ngIf="col.hasFields()">
                 <div *ngFor="let field of col.fields" class="mdl-cell mdl-cell--12-col">

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

@@ -18,6 +18,7 @@
 import { Component, Input, AfterViewInit } from '@angular/core';
 import { ContainerModel } from './../widget.model';
 
+import { MATERIAL_DESIGN_DIRECTIVES } from 'ng2-alfresco-core';
 import { TextWidget } from './../text/text.widget';
 import { NumberWidget } from './../number/number.widget';
 import { CheckboxWidget } from './../checkbox/checkbox.widget';
@@ -33,6 +34,7 @@ declare var componentHandler;
     templateUrl: './container.widget.html',
     styleUrls: ['./container.widget.css'],
     directives: [
+        MATERIAL_DESIGN_DIRECTIVES,
         TextWidget,
         NumberWidget,
         CheckboxWidget,
@@ -45,6 +47,12 @@ export class ContainerWidget implements AfterViewInit {
     @Input()
     content: ContainerModel;
 
+    onExpanderClicked() {
+        if (this.content && this.content.isCollapsible()) {
+            this.content.isExpanded = !this.content.isExpanded;
+        }
+    }
+
     ngAfterViewInit() {
         // workaround for MDL issues with dynamic components
         if (componentHandler) {

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

@@ -159,6 +159,7 @@ export class ContainerColumnModel {
     }
 }
 
+// TODO: inherit FormFieldModel
 export class ContainerModel extends FormWidgetModel {
 
     fieldType: string;
@@ -167,6 +168,7 @@ export class ContainerModel extends FormWidgetModel {
     type: string;
     tab: string;
     numberOfColumns: number = 1;
+    params: FormFieldMetadata = {};
 
     columns: ContainerColumnModel[] = [];
 
@@ -174,6 +176,28 @@ export class ContainerModel extends FormWidgetModel {
         return this.type == FormFieldTypes.GROUP;
     }
 
+    isExpanded: boolean = true;
+
+    isCollapsible(): boolean {
+        let allowCollapse = false;
+
+        if (this.isGroup() && this.params['allowCollapse']) {
+            allowCollapse = <boolean> this.params['allowCollapse'];
+        }
+
+        return allowCollapse;
+    }
+
+    isCollapsedByDefault(): boolean {
+        let collapseByDefault = false;
+
+        if (this.isCollapsible() && this.params['collapseByDefault']) {
+            collapseByDefault = <boolean> this.params['collapseByDefault'];
+        }
+
+        return collapseByDefault;
+    }
+
     constructor(form: FormModel, json?: any) {
         super(form, json);
 
@@ -184,6 +208,7 @@ export class ContainerModel extends FormWidgetModel {
             this.type = json.type;
             this.tab = json.tab;
             this.numberOfColumns = <number> json.numberOfColumns;
+            this.params = <FormFieldMetadata> json.params || {};
 
             let columnSize: number = 12;
             if (this.numberOfColumns > 1) {
@@ -201,6 +226,8 @@ export class ContainerModel extends FormWidgetModel {
                 let col = this.columns[parseInt(key, 10) - 1];
                 col.fields = fields;
             });
+
+            this.isExpanded = !this.isCollapsedByDefault();
         }
     }
 }