#440 decouple component and it's demo content

- moved demo-related code to ‘demo app’
- clean alfresco-form component api

demo-shell-ng2/app/components/activiti/activiti-demo.component.css

@@ -0,0 +1,4 @@
+.activiti-task-list__item:hover {
+    cursor: pointer;
+    font-weight: bold;
+}

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -0,0 +1,22 @@
+<div class="mdl-grid">
+
+    <div class="mdl-cell mdl-cell--2-col">
+        <div *ngIf="!hasTasks()">No tasks found</div>
+        <div *ngIf="hasTasks()">
+            <ul class="mdl-list">
+                <li *ngFor="let task of tasks"
+                    class="mdl-list__item activiti-task-list__item"
+                    (click)="onTaskClicked(task, $event)">
+                    <span class="mdl-list__item-primary-content">
+                    <i class="material-icons mdl-list__item-icon">launch</i>
+                    {{task.name}}
+                </span>
+            </ul>
+        </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--10-col">
+        <activiti-form [taskId]="selectedTask?.id"></activiti-form>
+    </div>
+
+</div>

demo-shell-ng2/app/components/activiti/activiti-demo.component.ts

@@ -15,16 +15,45 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { ActivitiForm } from 'ng2-alfresco-activiti-form';
+import { Component, OnInit, AfterViewChecked } from '@angular/core';
+import { ActivitiForm, FormService } from 'ng2-alfresco-activiti-form';
+
+
+declare let __moduleName: string;
+declare var componentHandler;
 
 @Component({
+    moduleId: __moduleName,
     selector: 'activiti-demo',
-    template: `
-        <activiti-form></activiti-form>
-    `,
-    directives: [ActivitiForm]
+    templateUrl: './activiti-demo.component.html',
+    styleUrls: ['./activiti-demo.component.css'],
+    directives: [ActivitiForm],
+    providers: [FormService]
 })
-export class ActivitiDemoComponent {
+export class ActivitiDemoComponent implements OnInit, AfterViewChecked {
+
+    tasks: any[] = [];
+    selectedTask: any;
+
+    hasTasks(): boolean {
+        return this.tasks && this.tasks.length > 0;
+    }
+
+    constructor(private formService: FormService) {}
+
+    ngOnInit() {
+        this.formService.getTasks().subscribe(val => this.tasks = val || []);
+    }
+
+    ngAfterViewChecked() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+    onTaskClicked(task, e) {
+        this.selectedTask = task;
+    }
 
 }

ng2-components/ng2-alfresco-activiti-form/README.md

@@ -1,3 +1,7 @@
 # Alfresco Activiti Form component for Angular 2
 
-TBD
+TBD
+
+```html
+<activiti-form [taskId]="selectedTask?.id"></activiti-form>
+```

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

@@ -16,3 +16,5 @@
  */
 
 export * from './src/components/activiti-form.component';
+export * from './src/services/form.service';
+export * from './src/components/widgets/index';

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

@@ -7,12 +7,6 @@
     background-color: #fff;
 }
 
-.activiti-task-list__item:hover {
-    cursor: pointer;
-    font-weight: bold;
-}
-
-
 .activiti-form-debug-container {
     padding: 10px;
 }

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

@@ -1,53 +1,38 @@
-<div class="mdl-grid">
-
-    <div class="mdl-cell mdl-cell--2-col">
-        <div *ngIf="!hasTasks()">No tasks found</div>
-        <div *ngIf="hasTasks()">
-            <ul class="mdl-list">
-                <li *ngFor="let task of tasks"
-                    class="mdl-list__item activiti-task-list__item"
-                    (click)="onTaskClicked(task, $event)">
-                    <span class="mdl-list__item-primary-content">
-                    <i class="material-icons mdl-list__item-icon">launch</i>
-                    {{task.name}}
-                </span>
-            </ul>
-        </div>
+<div>
+    <div *ngIf="!hasForm()">
+        <h3 style="text-align: center">Please select a Task</h3>
     </div>
+    <div *ngIf="hasForm()">
 
-    <div class="mdl-cell mdl-cell--10-col">
-        <div *ngIf="!hasForm()">
-            <h3 style="text-align: center">Please select a Task</h3>
-        </div>
-        <div *ngIf="hasForm()">
+        <div class="mdl-card mdl-shadow--2dp activiti-form-container">
+            <div *ngIf="form.taskName" class="mdl-card__title">
+                <h2 class="mdl-card__title-text">{{form.taskName}}</h2>
+            </div>
+            <div class="mdl-card__media">
+                <div *ngIf="form.hasTabs()">
+                    <tabs-widget [tabs]="form.tabs"></tabs-widget>
+                </div>
 
-            <div class="mdl-card mdl-shadow--2dp activiti-form-container">
-                <div *ngIf="task" class="mdl-card__title">
-                    <h2 class="mdl-card__title-text">{{task.name}}</h2>
-                </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 *ngFor="let outcome of form.outcomes"
-                            alfresco-mdl-button
-                            [class.mdl-button--colored]="!outcome.isSystem"
-                            (click)="onOutcomeClicked(outcome, $event)">
-                        {{outcome.name}}
-                    </button>
+                <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 *ngFor="let outcome of form.outcomes"
+                        alfresco-mdl-button
+                        [class.mdl-button--colored]="!outcome.isSystem"
+                        (click)="onOutcomeClicked(outcome, $event)">
+                    {{outcome.name}}
+                </button>
+            </div>
         </div>
     </div>
-
 </div>
 
+<!--
+For debugging and data visualisation purposes,
+will be removed during future revisions
+-->
 <div class="activiti-form-debug-container">
 
     <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1" [class.is-checked]="debugMode">
@@ -62,8 +47,5 @@
 
         <h4>Form</h4>
         <pre>{{form.json | json}}</pre>
-
-        <h4>Task</h4>
-        <pre>{{task | json}}</pre>
     </div>
 </div>

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

@@ -17,8 +17,9 @@
 
 import {
     Component,
-    OnInit,
-    AfterViewChecked
+    OnInit, AfterViewChecked, OnChanges,
+    SimpleChange,
+    Input
 } from '@angular/core';
 import { MATERIAL_DESIGN_DIRECTIVES } from 'ng2-alfresco-core';
 
@@ -39,26 +40,24 @@ declare var componentHandler;
     directives: [MATERIAL_DESIGN_DIRECTIVES, ContainerWidget, TabsWidget],
     providers: [FormService]
 })
-export class ActivitiForm implements OnInit, AfterViewChecked {
+export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
+
+    @Input()
+    taskId: string;
 
-    task: any;
     form: FormModel;
-    tasks: any[] = [];
-
     debugMode: boolean = false;
 
     hasForm(): boolean {
         return this.form ? true : false;
     }
 
-    hasTasks(): boolean {
-        return this.tasks && this.tasks.length > 0;
-    }
-
     constructor(private formService: FormService) {}
 
     ngOnInit() {
-        this.formService.getTasks().subscribe(val => this.tasks = val || []);
+        if (this.taskId) {
+            this.loadForm(this.taskId);
+        }
     }
 
     ngAfterViewChecked() {
@@ -68,14 +67,14 @@ 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));
+    ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
+        let taskId = changes['taskId'];
+        if (taskId && taskId.currentValue) {
+            this.loadForm(taskId.currentValue);
+        }
     }
 
+
     onOutcomeClicked(outcome: FormOutcomeModel, event?: Event) {
         if (outcome) {
             if (outcome.isSystem) {
@@ -87,6 +86,15 @@ export class ActivitiForm implements OnInit, AfterViewChecked {
         }
     }
 
+    private loadForm(taskId: string) {
+        this.formService
+            .getTaskForm(taskId)
+            .subscribe(
+                form => this.form = new FormModel(form),
+                err => console.log(err)
+            );
+    }
+
     private saveTaskForm() {
         let form = {
             values: this.form.values