#440 task selector

- simple task selector for dev/demo purposes

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

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

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

@@ -1,23 +1,32 @@
-<div *ngIf="hasForm()" style="padding: 10px;">
+<div class="mdl-grid">
-    <div *ngIf="form.hasTabs()">
+
-        <tabs-widget [tabs]="form.tabs"></tabs-widget>
+    <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="!form.hasTabs() && form.hasFields()">
+
-        <container-widget [content]="form.fields[0]"></container-widget>
+    <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 *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>
 
 </div>
-
-<!--
-<div style="padding: 10px">
-
-    <h2>Task form content</h2>
-
-    <h3>Form</h3>
-    <pre *ngIf="form">{{form.json | json}}</pre>
-
-    <h3>Task</h3>
-    <pre *ngIf="task">{{task | json}}</pre>
-
-</div>
--->

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

@@ -27,18 +27,11 @@ import { FormModel } from './widgets/widget.model';
 declare let __moduleName: string;
 declare var componentHandler;
 
-@Component({
-    selector: 'child-component',
-    template: 'Hello {{name}}'
-})
-class ChildComponent {
-    name: string;
-}
-
 @Component({
     moduleId: __moduleName,
     selector: 'activiti-form',
     templateUrl: './activiti-form.component.html',
+    styleUrls: ['./activiti-form.component.css'],
     directives: [WIDGET_DIRECTIVES],
     providers: [
         FormService
@@ -48,23 +41,20 @@ export class ActivitiForm implements OnInit, AfterViewChecked {
 
     task: any;
     form: FormModel;
+    tasks: any[] = [];
 
     hasForm(): boolean {
         return this.form ? true : false;
     }
 
+    hasTasks(): boolean {
+        return this.tasks && this.tasks.length > 0;
+    }
+
     constructor(private formService: FormService) {}
 
     ngOnInit() {
-        this.formService.getTask('1').subscribe(task => {
+        this.formService.getTasks().subscribe(val => this.tasks = val || []);
-            // console.log(task);
-            this.task = task;
-
-            this.formService.getTaskForm('1').subscribe(form => {
-                // console.log(form);
-                this.form = new FormModel(form);
-            });
-        });
     }
 
     ngAfterViewChecked() {
@@ -74,4 +64,11 @@ export class ActivitiForm implements OnInit, AfterViewChecked {
         }
     }
 
+    onTaskClicked(task, e) {
+        // alert(`Task: ${task.name} clicked.`);
+        this.formService
+            .getTaskForm(task.id)
+            .subscribe(form => this.form = new FormModel(form));
+    }
+
 }

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

@@ -106,7 +106,7 @@ export class ContainerModel extends FormWidgetModel {
 
             Object.keys(json.fields).map(key => {
                 let fields = (json.fields[key] || []).map(f => new FormFieldModel(form, f));
-                let col = this.columns[parseInt(key) - 1];
+                let col = this.columns[parseInt(key, 10) - 1];
                 col.fields = fields;
             });
         }

ng2-components/ng2-alfresco-activiti-form/src/services/form.service.ts

@@ -27,6 +27,16 @@ export class FormService {
     constructor(private http: Http) {
     }
 
+    getTasks(): Observable<any> {
+        let url = `${this.basePath}/api/enterprise/tasks/query`;
+        let body = JSON.stringify({});
+        let options = this.getRequestOptions();
+
+        return this.http.post(url, body, options)
+            .map(this.toJsonArray)
+            .catch(this.handleError);
+    }
+
     getTask(id: string): Observable<any> {
         let url = `${this.basePath}/api/enterprise/tasks/${id}`;
         let options = this.getRequestOptions();
@@ -63,6 +73,11 @@ export class FormService {
         return body || {};
     }
 
+    private toJsonArray(res: Response) {
+        let body = res.json();
+        return body.data || [];
+    }
+
     private handleError (error: any) {
         // In a real world app, we might use a remote logging infrastructure
         // We'd also dig deeper into the error to get a better message