#440 card UI, render form outcomes

ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.css

@@ -1,3 +1,12 @@
+.activiti-form-container {
+    width: 100%;
+    min-height: 100px;
+}
+
+.activiti-form-container > .mdl-card__media {
+    background-color: #fff;
+}
+
 .activiti-task-list__item:hover {
     cursor: pointer;
     font-weight: bold;

ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.html

@@ -20,13 +20,30 @@
             <h3 style="text-align: center">Please select a Task</h3>
         </div>
         <div *ngIf="hasForm()">
-            <div *ngIf="form.hasTabs()">
+
-                <tabs-widget [tabs]="form.tabs"></tabs-widget>
+            <div class="mdl-card mdl-shadow--2dp activiti-form-container">
-            </div>
+                <div *ngIf="task" class="mdl-card__title">
-            <div *ngIf="!form.hasTabs() && form.hasFields()">
+                    <h2 class="mdl-card__title-text">{{task.name}}</h2>
-                <container-widget [content]="form.fields[0]"></container-widget>
+                </div>
+                <div class="mdl-card__media">
+                    <div *ngIf="form.hasTabs()">
+                        <tabs-widget [tabs]="form.tabs"></tabs-widget>
+                    </div>
+
+                    <div *ngIf="!form.hasTabs() && form.hasFields()">
+                        <container-widget [content]="form.fields[0]"></container-widget>
+                    </div>
+                </div>
+                <div *ngIf="form.hasOutcomes()" class="mdl-card__actions mdl-card--border">
+                    <button class="mdl-button mdl-js-button mdl-js-ripple-effect activiti-form-outcomes__item"
+                            [class.mdl-button--colored]="!action.isSystem"
+                            *ngFor="let action of form.outcomes">
+                        {{action.name}}
+                    </button>
+                </div>
             </div>
         </div>
     </div>
 
 </div>
+

ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.ts

@@ -66,6 +66,7 @@ export class ActivitiForm implements OnInit, AfterViewChecked {
 
     onTaskClicked(task, e) {
         // alert(`Task: ${task.name} clicked.`);
+        this.task = task;
         this.formService
             .getTaskForm(task.id)
             .subscribe(form => this.form = new FormModel(form));

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

@@ -142,10 +142,36 @@ export interface WidgetModelCache<T extends FormWidgetModel> {
     [key: string]: T;
 }
 
+export class FormOutcomeModel extends FormWidgetModel {
+
+    private _id: string;
+    private _name: string;
+
+    isSystem: boolean = false;
+
+    get id() {
+        return this._id;
+    }
+
+    get name() {
+        return this._name;
+    }
+
+    constructor(form: FormModel, json?: any) {
+        super(form, json);
+
+        if (json) {
+            this._id = json.id;
+            this._name = json.name;
+        }
+    }
+}
+
 export class FormModel {
 
     tabs: TabModel[] = [];
     fields: ContainerModel[] = [];
+    outcomes: FormOutcomeModel[] = [];
 
     private _json: any;
 
@@ -161,6 +187,10 @@ export class FormModel {
         return this.fields && this.fields.length > 0;
     }
 
+    hasOutcomes(): boolean {
+        return this.outcomes && this.outcomes.length > 0;
+    }
+
     constructor(json?: any) {
         if (json) {
             this._json = json;
@@ -172,19 +202,26 @@ export class FormModel {
                 tabCache[model.id] = model;
                 return model;
             });
-            this.fields = (json.fields || []).map(f => new ContainerModel(this, f));
 
+            this.fields = (json.fields || []).map(obj => new ContainerModel(this, obj));
             for (let i = 0; i < this.fields.length; i++) {
                 let field = this.fields[i];
                 if (field.tab) {
                     let tab = tabCache[field.tab];
                     if (tab) {
-                        // tab.content = new ContainerModel(this, field.json);
-                        // tab.fields.push(field);
                         tab.fields.push(new ContainerModel(this, field.json));
                     }
                 }
             }
+
+            let saveOutcome = new FormOutcomeModel(this, { id: '$save', name: 'Save' });
+            saveOutcome.isSystem = true;
+
+            let systemOutcomes = [saveOutcome];
+
+            this.outcomes = systemOutcomes.concat(
+                (json.outcomes || []).map(obj => new FormOutcomeModel(this, obj))
+            );
         }
     }
 }