From b8da5bf45b847d152993f6e3c93c1cdab791caf5 Mon Sep 17 00:00:00 2001
From: Maurizio Vitale <maurizio.vitale@alfresco.com>
Date: Mon, 24 Jul 2017 14:35:40 +0100
Subject: [PATCH] [ADF-1142] Process instance details - should show the comment
 componen (#2116)

* Add a comment button in the process details component has we have for the task details

* Update process-instance-details.component.css

* Update process-instance-details.component.html
---
 .../process-instance-details.component.css     |  7 +++++++
 .../process-instance-details.component.html    | 13 +++++++++++++
 .../process-instance-details.component.ts      | 18 ++++++++++++++++++
 .../ng2-activiti-processlist/src/i18n/en.json  |  1 +
 4 files changed, 39 insertions(+)

diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.css b/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.css
index 71edb84940..364f257c09 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.css
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-details.component.css
@@ -8,3 +8,10 @@
     overflow: visible;
     padding: 10px;
 }
+
+.adf-comments-dialog {
+    position: fixed;
+    top: 50%;
+    transform: translate(0, -50%);
+    width: 40%;
+}
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 64d13a7d0e..8b887f4dab 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
@@ -5,6 +5,9 @@
         [processInstance]="processInstanceDetails"
         (showProcessDiagram)="onShowProcessDiagram($event)">
     </adf-process-instance-header>
+    <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-card mdl-shadow--2dp activiti-process-container">
         <div class="mdl-cell mdl-cell--12-col">
             <adf-process-instance-tasks
@@ -16,4 +19,14 @@
     <div class="mdl-cell mdl-cell--4-col" data-automation-id="header-status" *ngIf="isRunning()">
         <button type="button" (click)="cancelProcess()" class="mdl-button">{{ 'DETAILS.BUTTON.CANCEL' | translate }}</button>
     </div>
+    <dialog class="mdl-dialog adf-comments-dialog" #dialogComments>
+        <div class="mdl-dialog__content">
+            <adf-process-instance-comments #activiticomments
+                [readOnly]="!isRunning()"
+                [processInstanceId]="processInstanceDetails.id">
+            </adf-process-instance-comments>
+            <br><br>
+            <button type="button" md-button md-raised-button (click)="closeCommentsDialog()">{{ 'DETAILS.BUTTON.CLOSE' | translate }}</button>
+        </div>
+    </dialog>
 </div>
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 dbd4a84fce..7507d3f89c 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
@@ -25,6 +25,8 @@ import { ProcessService } from './../services/process.service';
 import { ProcessInstanceHeaderComponent } from './process-instance-header.component';
 import { ProcessInstanceTasksComponent } from './process-instance-tasks.component';
 
+declare let dialogPolyfill: any;
+
 @Component({
     selector: 'adf-process-instance-details, activiti-process-instance-details',
     templateUrl: './process-instance-details.component.html',
@@ -41,6 +43,9 @@ export class ProcessInstanceDetailsComponent implements OnChanges {
     @ViewChild(ProcessInstanceTasksComponent)
     tasksList: ProcessInstanceTasksComponent;
 
+    @ViewChild('dialogComments')
+    commentsDialog: any;
+
     @Input()
     showTitle: boolean = true;
 
@@ -104,6 +109,19 @@ export class ProcessInstanceDetailsComponent implements OnChanges {
         }
     }
 
+    public showCommentsDialog(): void {
+        if (!this.commentsDialog.nativeElement.showModal) {
+            dialogPolyfill.registerDialog(this.commentsDialog.nativeElement);
+        }
+        this.commentsDialog.nativeElement.showModal();
+    }
+
+    public closeCommentsDialog(): void {
+        if (this.commentsDialog) {
+            this.commentsDialog.nativeElement.close();
+        }
+    }
+
     isRunning(): boolean {
         return this.processInstanceDetails && !this.processInstanceDetails.ended;
     }
diff --git a/ng2-components/ng2-activiti-processlist/src/i18n/en.json b/ng2-components/ng2-activiti-processlist/src/i18n/en.json
index 5478d9223c..0e2383e288 100644
--- a/ng2-components/ng2-activiti-processlist/src/i18n/en.json
+++ b/ng2-components/ng2-activiti-processlist/src/i18n/en.json
@@ -25,6 +25,7 @@
         },
         "BUTTON": {
             "CANCEL": "Cancel Process",
+            "CLOSE": "Close",
             "SHOW_DIAGRAM": "Show Diagram",
             "DRAG-ATTACHMENT": "Drop Files Here...",
             "UPLOAD-ATTACHMENT": "Upload Attachment"