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

<div *ngIf="!processInstanceDetails">{{ 'DETAILS.MESSAGES.NONE'|translate }}</div>
<div *ngIf="processInstanceDetails">
    <h2 class="mdl-card__title-text">{{ getProcessNameOrDescription('medium') }}</h2>
    <adf-process-instance-header
        [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-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
                [processInstanceDetails]="processInstanceDetails"
                (taskClick)="onTaskClicked($event)">
            </adf-process-instance-tasks>
        </div>
    </div>
    <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>