After cancelling a process list is not refreshed #1050 bubbling events and implements reload

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

@@ -71,7 +71,7 @@
                         </div>
                         <div class="mdl-cell mdl-cell--7-col task-column">
                             <span>Process Details</span>
-                            <activiti-process-instance-details [processInstanceId]="currentProcessInstanceId" (taskFormCompleted)="taskFormCompleted()" (processCancelled)="processCancelled()" #activitiprocessdetails></activiti-process-instance-details>
+                            <activiti-process-instance-details [processInstanceId]="currentProcessInstanceId" (activitiprocesslist)="taskFormCompleted()" (processCancelled)="processCancelled()" #activitiprocessdetails></activiti-process-instance-details>
                         </div>
                     </div>
                 </div>

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

@@ -181,6 +181,10 @@ export class ActivitiDemoComponent implements AfterViewChecked {
         this.activitiprocesslist.reload();
     }
 
+    onSuccessNewProcess(data: any) {
+        this.activitiprocesslist.reload();
+    }
+
     taskFormCompleted(data: any) {
         this.activitiprocesslist.reload();
     }

ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.html

@@ -1,10 +1,10 @@
 <div *ngIf="!processInstanceDetails">{{ 'DETAILS.MESSAGES.NONE'|translate }}</div>
 <div *ngIf="processInstanceDetails">
     <h2 class="mdl-card__title-text">{{processInstanceDetails.name}}</h2>
-    <activiti-process-instance-header [processInstance]="processInstanceDetails" (processCancelled)="processCancelled()" #activitiprocessheader></activiti-process-instance-header>
+    <activiti-process-instance-header [processInstance]="processInstanceDetails" (processCancelled)="bubbleProcessCancelled()" #activitiprocessheader></activiti-process-instance-header>
     <div class="mdl-grid">
         <div class="mdl-cell mdl-cell--8-col">
-            <activiti-process-instance-tasks [processInstanceId]="processInstanceDetails.id" (taskFormCompleted)="taskFormCompleted()" #activitiprocesstasks></activiti-process-instance-tasks>
+            <activiti-process-instance-tasks [processInstanceId]="processInstanceDetails.id" (taskFormCompleted)="bubbleTaskFormCompleted()" #activitiprocesstasks></activiti-process-instance-tasks>
         </div>
         <div class="mdl-cell mdl-cell--4-col">
             <activiti-process-instance-comments [processInstanceId]="processInstanceDetails.id" #activitiprocesscomments></activiti-process-instance-comments>

ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.ts

@@ -52,10 +52,10 @@ export class ActivitiProcessInstanceDetails implements OnInit, OnChanges {
     showRefreshButton: boolean = true;
 
     @Output()
-    processCancelledEmitter = new EventEmitter();
+    processCancelled: EventEmitter<string> = new EventEmitter<string>();
 
     @Output()
-    taskFormCompletedEmitter = new EventEmitter();
+    taskFormCompleted: EventEmitter<any> = new EventEmitter<any>();
 
     processInstanceDetails: ProcessInstance;
 
@@ -113,11 +113,11 @@ export class ActivitiProcessInstanceDetails implements OnInit, OnChanges {
         }
     }
 
-    processCancelled(data: any) {
+    bubbleProcessCancelled(data: any) {
-        this.processCancelledEmitter.emit(data);
+        this.processCancelled.emit(data);
     }
 
-    taskFormCompleted(data: any) {
+    bubbleTaskFormCompleted(data: any) {
-        this.taskFormCompletedEmitter.emit(data);
+        this.taskFormCompleted.emit(data);
     }
 }

ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.ts

@@ -35,7 +35,10 @@ export class ActivitiProcessInstanceHeader {
     processInstance: ProcessInstance;
 
     @Output()
-    processCancelled = new EventEmitter();
+    processCancelled: EventEmitter<any> = new EventEmitter();
+
+    @Output()
+    onError: EventEmitter<any> = new EventEmitter<any>();
 
     constructor(private translate: AlfrescoTranslationService,
                 private activitiProcess: ActivitiProcessService) {
@@ -64,6 +67,12 @@ export class ActivitiProcessInstanceHeader {
     }
 
     cancelProcess() {
-        this.processCancelled.emit(this.activitiProcess.cancelProcess(this.processInstance.id));
+        this.activitiProcess.cancelProcess(this.processInstance.id).subscribe(
+            (res) => {
+                this.processCancelled.emit(res);
+            }, (err) => {
+                console.error(err);
+                this.onError.emit(err);
+            });
     }
 }

ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts

@@ -70,10 +70,7 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
         if (!this.data) {
             this.data = this.initDefaultSchemaColumns();
         }
-        if (this.filter) {
+        this.reload();
-            let requestNode = this.convertProcessInstanceToTaskQuery(this.filter);
-            this.load(requestNode);
-        }
     }
 
     ngOnChanges(changes: SimpleChanges) {
@@ -192,6 +189,13 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
         return tasks;
     }
 
+    public reload() {
+        if (this.filter) {
+            let requestNode = this.convertProcessInstanceToTaskQuery(this.filter);
+            this.load(requestNode);
+        }
+    }
+
     private convertProcessInstanceToTaskQuery(processFilter: FilterRepresentationModel) {
         let requestNode = {
             appDefinitionId: processFilter.appId,