Improve the task list component

- Customize the task list column passing the json schema instead of DataTableAdapter
 - Add function to add people
 - Add function to add comments
 - Add function to add checklist
 - TaskFilter as a differenct component
 - Change the layout in the demo shell
 - Using Tabs instead of dropdown

ng2-components/ng2-activiti-tasklist/src/components/activiti-checklist.component.ts

@@ -15,10 +15,12 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit, OnChanges } from '@angular/core';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { AlfrescoTranslationService, AlfrescoAuthenticationService, AlfrescoPipeTranslate } from 'ng2-alfresco-core';
 import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
 import { TaskDetailsModel } from '../models/task-details.model';
+import { Observer } from 'rxjs/Observer';
+import { Observable } from 'rxjs/Observable';
 
 declare let componentHandler: any;
 declare let __moduleName: string;
@@ -29,16 +31,24 @@ declare let __moduleName: string;
     templateUrl: './activiti-checklist.component.html',
     styleUrls: ['./activiti-checklist.component.css'],
     providers: [ActivitiTaskListService],
-    pipes: [ AlfrescoPipeTranslate ]
+    pipes: [AlfrescoPipeTranslate]
 
 })
-export class ActivitiChecklist implements OnInit, OnChanges {
+export class ActivitiChecklist implements OnInit {
 
     @Input()
     taskId: string;
 
+    @ViewChild('dialog')
+    dialog: any;
+
+    taskName: string;
+
     checklist: TaskDetailsModel [] = [];
 
+    private taskObserver: Observer<TaskDetailsModel>;
+    task$: Observable<TaskDetailsModel>;
+
     /**
      * Constructor
      * @param auth
@@ -51,31 +61,60 @@ export class ActivitiChecklist implements OnInit, OnChanges {
         if (translate) {
             translate.addTranslationFolder('node_modules/ng2-activiti-tasklist');
         }
+        this.task$ = new Observable<TaskDetailsModel>(observer =>  this.taskObserver = observer).share();
     }
 
     ngOnInit() {
+        this.task$.subscribe((task: TaskDetailsModel) => {
+            this.checklist.push(task);
+        });
+
         if (this.taskId) {
             this.load(this.taskId);
         }
     }
 
-    ngOnChanges(change) {
-        this.load(this.taskId);
-    }
-
-    public add() {
-        alert('Add CheckList');
-    }
-
     public load(taskId: string) {
+        this.checklist = [];
         if (this.taskId) {
             this.activitiTaskList.getTaskChecklist(this.taskId).subscribe(
                 (res: TaskDetailsModel[]) => {
-                    this.checklist = res;
+                    res.forEach((task) => {
+                        this.taskObserver.next(task);
+                    });
+                },
+                (err) => {
+                    console.log(err);
                 }
             );
         } else {
             this.checklist = [];
         }
     }
+
+    public showDialog() {
+        if (this.dialog) {
+            this.dialog.nativeElement.showModal();
+        }
+    }
+
+    public add() {
+        let newTask = new TaskDetailsModel({name: this.taskName, parentTaskId: this.taskId, assignee: {id: '1'}});
+        this.activitiTaskList.addTask(newTask).subscribe(
+            (res: TaskDetailsModel) => {
+                this.checklist.push(res);
+            },
+            (err) => {
+                console.log(err);
+            }
+        );
+
+        this.cancel();
+    }
+
+    public cancel() {
+        if (this.dialog) {
+            this.dialog.nativeElement.close();
+        }
+    }
 }