ADF-402 add the show diagram button (#1917)

demo-shell-ng2/app/app.module.ts

@@ -34,6 +34,7 @@ import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
 import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
 import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
 import { AnalyticsModule } from 'ng2-activiti-analytics';
+import { DiagramsModule } from 'ng2-activiti-diagrams';
 import { AppComponent } from './app.component';
 import { routing } from './app.routes';
 import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
@@ -47,6 +48,7 @@ import {
     SearchBarComponent,
     LoginDemoComponent,
     ActivitiDemoComponent,
+    ActivitiShowDiagramComponent,
     ActivitiAppsView,
     FormViewer,
     WebscriptComponent,
@@ -80,6 +82,7 @@ import {
         ActivitiProcessListModule.forRoot(),
         UserInfoComponentModule.forRoot(),
         AnalyticsModule.forRoot(),
+        DiagramsModule.forRoot(),
         CustomEditorsModule,
         Editor3DModule.forRoot(),
         ChartsModule
@@ -92,6 +95,7 @@ import {
         SearchBarComponent,
         LoginDemoComponent,
         ActivitiDemoComponent,
+        ActivitiShowDiagramComponent,
         ActivitiAppsView,
         FormViewer,
         WebscriptComponent,

demo-shell-ng2/app/app.routes.ts

@@ -26,6 +26,7 @@ import {
     SearchComponent,
     LoginDemoComponent,
     ActivitiDemoComponent,
+    ActivitiShowDiagramComponent,
     ActivitiAppsView,
     WebscriptComponent,
     TagComponent,
@@ -90,6 +91,11 @@ export const appRoutes: Routes = [
         component: ActivitiDemoComponent,
         canActivate: [AuthGuardBpm]
     },
+    {
+        path: 'activiti/diagram/:processDefinitionId',
+        component: ActivitiShowDiagramComponent,
+        canActivate: [AuthGuardBpm]
+    },
     // TODO: check if neeeded
     {
         path: 'activiti/appId/:appId',

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

@@ -133,6 +133,7 @@
                             <activiti-process-instance-details
                                 [processInstanceId]="currentProcessInstanceId"
                                 (processCancelled)="processCancelled()"
+                                (showProcessDiagram)="onShowProcessDiagram($event)"
                                 (taskClick)="onProcessDetailsTaskClick($event)">
                             </activiti-process-instance-details>
                         </div>

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

@@ -32,7 +32,7 @@ import {
     ProcessInstance
 } from 'ng2-activiti-processlist';
 import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 import {
     ObjectDataTableAdapter,
@@ -106,6 +106,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
 
     constructor(private elementRef: ElementRef,
                 private route: ActivatedRoute,
+                private router: Router,
                 private apiService: AlfrescoApiService,
                 private formRenderingService: FormRenderingService,
                 private formService: FormService) {
@@ -289,6 +290,10 @@ export class ActivitiDemoComponent implements AfterViewInit {
         });
     }
 
+    onShowProcessDiagram(event: any) {
+        this.router.navigate(['/activiti/diagram/' + event.value]);
+    }
+
     onProcessDetailsTaskClick(event: TaskDetailsEvent) {
         event.preventDefault();
         this.activeTab = 'tasks';

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

@@ -0,0 +1,6 @@
+<div>
+    <button (click)="onClickBack()" class="mdl-button mdl-button--icon">
+        <i class="material-icons">keyboard_backspace</i>
+    </button>
+    <activiti-diagram [processInstanceId]="processDefinitionId"></activiti-diagram>
+</div>

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

@@ -0,0 +1,49 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { Subscription } from 'rxjs/Rx';
+import { ActivatedRoute } from '@angular/router';
+import {Location} from '@angular/common';
+
+@Component({
+    selector: 'activiti-show-diagram',
+    templateUrl: './activiti-show-diagram.component.html',
+    styleUrls: ['./activiti-show-diagram.component.css']
+})
+export class ActivitiShowDiagramComponent {
+
+    sub: Subscription;
+    processDefinitionId: string;
+
+    constructor(private route: ActivatedRoute,
+                private location: Location) {
+        this.sub = this.route.params.subscribe(params => {
+            this.processDefinitionId = params['processDefinitionId'];
+        });
+
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+
+    onClickBack() {
+        this.location.back();
+    }
+
+}

demo-shell-ng2/app/components/index.ts

@@ -21,6 +21,7 @@ export { SearchComponent } from './search/search.component';
 export { SearchBarComponent } from './search/search-bar.component';
 export { LoginDemoComponent } from './login/login-demo.component';
 export { ActivitiDemoComponent } from './activiti/activiti-demo.component';
+export { ActivitiShowDiagramComponent } from './activiti/activiti-show-diagram.component';
 export { FormViewer } from './activiti/form-viewer.component';
 export { WebscriptComponent } from './webscript/webscript.component';
 export { TagComponent } from './tag/tag.component';

ng2-components/ng2-activiti-processlist/README.md

@@ -315,6 +315,7 @@ This component displays detailed information on a specified process instance
 | --- | --- |
 | `processCancelledEmitter` |  Emitted when the current process is cancelled by the user from within the component |
 | `taskFormCompletedEmitter` |  Emitted when the form associated with an active task is completed from within the component |
+| `showProcessDiagram` |  Emitted when the show diagram button is clicked |
 
 ### Process Instance Details Header component
 
@@ -330,13 +331,14 @@ This is a sub-component of the process details component, which renders some gen
 | Name | Description |
 | --- | --- |
 | `processInstance` |  (required): Full details of the process instance to display information about |
+| `showDiagram` |  (optional): If the value is true the button show diagram is shown |
 
 #### Events
 
 
 | Name | Description |
 | --- | --- |
-| `processCancelled` |  Emitted when the Cancel Process button shown by the component is clicked |
+| `showProcessDiagram` |  Emitted when the show diagram button is clicked |
 
 ### Process Instance Tasks component
 

ng2-components/ng2-activiti-processlist/src/assets/activiti-process.model.mock.ts

@@ -51,6 +51,19 @@ export let exampleProcess = new ProcessInstance({
     }
 });
 
+export let processEnded = new ProcessInstance({
+    id: '123',
+    name: 'Process 123',
+    started: '2016-11-10T03:37:30.010+0000',
+    startedBy: {
+        id: 1001,
+        firstName: 'Bob',
+        lastName: 'Jones',
+        email: 'bob@app.activiti.com'
+    },
+    ended: '2016-11-11T03:37:30.010+0000',
+});
+
 export let exampleProcessNoName = new ProcessInstance({
     id: '123',
     name: null,

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

@@ -1,7 +1,10 @@
 <div *ngIf="!processInstanceDetails">{{ 'DETAILS.MESSAGES.NONE'|translate }}</div>
 <div *ngIf="processInstanceDetails">
     <h2 class="mdl-card__title-text">{{ getProcessNameOrDescription('medium') }}</h2>
-    <activiti-process-instance-header [processInstance]="processInstanceDetails"></activiti-process-instance-header>
+    <activiti-process-instance-header
+        [processInstance]="processInstanceDetails"
+        (showProcessDiagram)="onShowProcessDiagram($event)">
+    </activiti-process-instance-header>
     <div class="mdl-card mdl-shadow--2dp activiti-process-container">
         <div class="mdl-cell mdl-cell--12-col">
             <activiti-process-instance-tasks

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

@@ -58,6 +58,9 @@ export class ActivitiProcessInstanceDetails implements OnChanges {
 
     processInstanceDetails: ProcessInstance;
 
+    @Output()
+    showProcessDiagram: EventEmitter<any> = new EventEmitter<any>();
+
     /**
      * Constructor
      * @param translate Translation service
@@ -136,4 +139,9 @@ export class ActivitiProcessInstanceDetails implements OnChanges {
             this.logService.error(`ProcessListInstanceHeader: error parsing date ${value} to format ${format}`);
         }
     }
+
+    onShowProcessDiagram(event: any) {
+        this.showProcessDiagram.emit(event);
+    }
+
 }

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

@@ -15,5 +15,8 @@
             <span class="activiti-label">{{ 'DETAILS.LABELS.ENDED' | translate }}</span>:
             <span class="activiti-process-header__value">{{getFormatDate(processInstance.ended, 'medium')}}</span>
         </div>
+        <button data-automation-id="header-show-diagram" id="show-diagram-button" md-raised-button *ngIf="isShowDiagram()" [attr.disabled]="isDiagramDisabled()" (click)="showDiagramEvent()" >
+            {{ 'DETAILS.BUTTON.SHOW_DIAGRAM' | translate }}
+        </button>
     </div>
 </div>

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

@@ -20,7 +20,7 @@ import { By } from '@angular/platform-browser';
 import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
 import { ActivitiProcessInstanceHeader } from './activiti-process-instance-header.component';
 import { TranslationMock } from './../assets/translation.service.mock';
-import { exampleProcess } from './../assets/activiti-process.model.mock';
+import { exampleProcess, processEnded } from './../assets/activiti-process.model.mock';
 import { ProcessInstance } from './../models/process-instance.model';
 import { ActivitiProcessComments } from './activiti-process-comments.component';
 import { ActivitiProcessService } from './../services/activiti-process.service';
@@ -30,6 +30,7 @@ describe('ActivitiProcessInstanceHeader', () => {
     let componentHandler: any;
     let component: ActivitiProcessInstanceHeader;
     let fixture: ComponentFixture<ActivitiProcessInstanceHeader>;
+    let element: HTMLElement;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -51,6 +52,7 @@ describe('ActivitiProcessInstanceHeader', () => {
 
         fixture = TestBed.createComponent(ActivitiProcessInstanceHeader);
         component = fixture.componentInstance;
+        element = fixture.nativeElement;
 
         component.processInstance = new ProcessInstance(exampleProcess);
 
@@ -98,4 +100,33 @@ describe('ActivitiProcessInstanceHeader', () => {
         expect(formValueEl.nativeElement.innerText).toBe('Nov 10, 2016, 3:37:30 AM');
     });
 
+    it('should render the button show diagram as default', () => {
+        fixture.detectChanges();
+        let formValueEl = fixture.debugElement.query(By.css('[data-automation-id="header-show-diagram"]'));
+        expect(formValueEl).not.toBeNull();
+    });
+
+    it('should render the button show diagram enabled as default', () => {
+        fixture.detectChanges();
+        let showButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#show-diagram-button');
+        expect(showButton).toBeDefined();
+        expect(showButton.disabled).toBeFalsy();
+    });
+
+    it('should render the button show diagram disabled', () => {
+        component.processInstance = new ProcessInstance(processEnded);
+        fixture.detectChanges();
+        let showButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#show-diagram-button');
+        expect(showButton).toBeDefined();
+        expect(showButton.disabled).toBeTruthy();
+    });
+
+    it('should NOT render the button show diagram is the property showDiagram is false', () => {
+        component.showDiagram = false;
+        fixture.detectChanges();
+        let formValueEl = fixture.debugElement.query(By.css('[data-automation-id="header-show-pippo"]'));
+        expect(formValueEl).toBeNull();
+    });
+
+
 });

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

@@ -29,12 +29,18 @@ declare let componentHandler: any;
 })
 export class ActivitiProcessInstanceHeader {
 
+    @Input()
+    showDiagram: boolean = true;
+
     @Input()
     processInstance: ProcessInstance;
 
     @Output()
     onError: EventEmitter<any> = new EventEmitter<any>();
 
+    @Output()
+    showProcessDiagram: EventEmitter<any> = new EventEmitter<any>();
+
     constructor(private translate: AlfrescoTranslationService,
                 private logService: LogService) {
 
@@ -64,4 +70,16 @@ export class ActivitiProcessInstanceHeader {
     isRunning(): boolean {
         return this.processInstance && !this.processInstance.ended;
     }
+
+    isDiagramDisabled(): boolean {
+        return !this.isRunning() ? true : undefined;
+    }
+
+    showDiagramEvent() {
+        this.showProcessDiagram.emit({value: this.processInstance.id});
+    }
+
+    isShowDiagram(): boolean {
+        return this.showDiagram;
+    }
 }

ng2-components/ng2-activiti-processlist/src/i18n/en.json

@@ -24,7 +24,8 @@
             "TASK_SUBTITLE": "Assigned to {{user}}, created {{created}}"
         },
         "BUTTON": {
-            "CANCEL": "Cancel Process"
+            "CANCEL": "Cancel Process",
+            "SHOW_DIAGRAM": "Show Diagram"
         },
         "MESSAGES": {
             "NONE": "No process details found."

ng2-components/ng2-alfresco-upload/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;;;;;AAEH,sCAA8D;AAC9D,uDAA+C;AAE/C,0FAAsF;AACtF,sFAAmF;AACnF,oFAAiF;AACjF,oGAAgG;AAChG,gGAA4F;AAC5F,gEAA8D;AAkB9D,8DAAyD;AACzD,sEAAiE;AACjE,iEAA4D;AAC5D,mDAA8C;AAC9C,+DAA0D;AAC1D,oEAA+D;AAElD,QAAA,iBAAiB,GAAU;IACpC,iDAAsB;IACtB,oDAAuB;IACvB,+CAAqB;IACrB,8DAA4B;IAC5B,0DAA0B;CAC7B,CAAC;AAEW,QAAA,gBAAgB,GAAU;IACnC,8BAAa;CAChB,CAAC;AAgBF,IAAa,YAAY;IAAzB;IASA,CAAC;IARU,oBAAO,GAAd;QACI,MAAM,CAAC;YACH,QAAQ,EAAE,cAAY;YACtB,SAAS,EACF,wBAAgB,QACtB;SACJ,CAAC;IACN,CAAC;IACL,mBAAC;AAAD,CAAC,AATD,IASC;AATY,YAAY;IAdxB,eAAQ,CAAC;QACN,OAAO,EAAE;YACL,8BAAU;SACb;QACD,YAAY,EACL,yBAAiB,QACvB;QACD,SAAS,EACF,wBAAgB,QACtB;QACD,OAAO,EACA,yBAAiB,QACvB;KACJ,CAAC;GACW,YAAY,CASxB;AATY,oCAAY"}

ng2-components/ng2-alfresco-viewer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;;;;;AAWH,sCAA8D;AAC9D,uDAA+C;AAE/C,sEAAoE;AACpE,oFAAiF;AACjF,4EAA0E;AAC1E,gFAA8E;AAC9E,8FAAmF;AACnF,4EAA0E;AAC1E,0FAAuF;AAEvF,uDAAkD;AAClD,6DAAwD;AACxD,0DAAqD;AACrD,4DAAuD;AACvD,mEAA8D;AAC9D,0DAAqD;AAExC,QAAA,iBAAiB,GAAU;IACpC,kCAAe;IACf,wCAAkB;IAClB,4CAAoB;IACpB,iDAAkB;IAClB,wCAAkB;IAClB,qDAAwB;CAC3B,CAAC;AAEW,QAAA,gBAAgB,GAAU;IACnC,iDAAsB;CACzB,CAAC;AAgBF,IAAa,YAAY;IAAzB;IASA,CAAC;IARU,oBAAO,GAAd;QACI,MAAM,CAAC;YACH,QAAQ,EAAE,cAAY;YACtB,SAAS,EACF,wBAAgB,QACtB;SACJ,CAAC;IACN,CAAC;IACL,mBAAC;AAAD,CAAC,AATD,IASC;AATY,YAAY;IAdxB,eAAQ,CAAC;QACN,OAAO,EAAE;YACL,8BAAU;SACb;QACD,YAAY,EACL,yBAAiB,QACvB;QACD,SAAS,EACF,wBAAgB,QACtB;QACD,OAAO,EACA,yBAAiB,QACvB;KACJ,CAAC;GACW,YAAY,CASxB;AATY,oCAAY"}