From 211a7f22b32ce849d5ea78ec4ee5841aaeb0257f Mon Sep 17 00:00:00 2001
From: Maurizio Vitale <maurizio.vitale@alfresco.com>
Date: Mon, 24 Jul 2017 17:58:32 +0100
Subject: [PATCH] Add the show diagram button (#2121)

---
 .../components/process-instance-details.component.html    | 3 +++
 .../src/components/process-instance-details.component.ts  | 8 ++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.html b/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.html
index 8b887f4dab..4c883a0f13 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.html
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.html
@@ -8,6 +8,9 @@
     <div class="mdl-cell mdl-cell--4-col">
         <button type="button" md-button md-raised-button (click)="showCommentsDialog()">{{'DETAILS.LABELS.COMMENTS'|translate}}</button>
     </div>
+    <div class="mdl-cell mdl-cell--4-col">
+        <button id="show-diagram-button" type="button" md-button md-raised-button [disabled]="isDiagramDisabled()" (click)="onShowProcessDiagram(processInstanceId)">{{ 'DETAILS.BUTTON.SHOW_DIAGRAM' | translate }}</button>
+    </div>
     <div class="mdl-card mdl-shadow--2dp activiti-process-container">
         <div class="mdl-cell mdl-cell--12-col">
             <adf-process-instance-tasks
diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.ts b/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.ts
index 7507d3f89c..57fc0ca468 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.ts
@@ -126,6 +126,10 @@ export class ProcessInstanceDetailsComponent implements OnChanges {
         return this.processInstanceDetails && !this.processInstanceDetails.ended;
     }
 
+    isDiagramDisabled(): boolean {
+        return !this.isRunning() ? true : undefined;
+    }
+
     cancelProcess() {
         this.activitiProcess.cancelProcess(this.processInstanceId).subscribe(
             (data) => {
@@ -158,8 +162,8 @@ export class ProcessInstanceDetailsComponent implements OnChanges {
         }
     }
 
-    onShowProcessDiagram(event: any) {
-        this.showProcessDiagram.emit(event);
+    onShowProcessDiagram(processInstanceId: any) {
+        this.showProcessDiagram.emit({value: this.processInstanceId});
     }
 
 }