From 9b7588cf11656678ba6d9efbdcddeb7d45c5d587 Mon Sep 17 00:00:00 2001 From: Maurizio Vitale Date: Thu, 1 Jun 2017 12:15:52 +0100 Subject: [PATCH] ADF-402 add the show diagram button (#1917) --- demo-shell-ng2/app/app.module.ts | 4 ++ demo-shell-ng2/app/app.routes.ts | 6 +++ .../activiti/activiti-demo.component.html | 1 + .../activiti/activiti-demo.component.ts | 7 ++- .../activiti-show-diagram.component.css | 0 .../activiti-show-diagram.component.html | 6 +++ .../activiti-show-diagram.component.ts | 49 +++++++++++++++++++ demo-shell-ng2/app/components/index.ts | 1 + .../ng2-activiti-processlist/README.md | 4 +- .../src/assets/activiti-process.model.mock.ts | 13 +++++ ...ti-process-instance-details.component.html | 5 +- ...viti-process-instance-details.component.ts | 24 ++++++--- ...iti-process-instance-header.component.html | 3 ++ ...-process-instance-header.component.spec.ts | 33 ++++++++++++- ...iviti-process-instance-header.component.ts | 18 +++++++ .../ng2-activiti-processlist/src/i18n/en.json | 3 +- .../ng2-alfresco-upload/index.js.map | 1 + .../ng2-alfresco-viewer/index.js.map | 1 + 18 files changed, 166 insertions(+), 13 deletions(-) create mode 100644 demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.css create mode 100644 demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.html create mode 100644 demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.ts create mode 100644 ng2-components/ng2-alfresco-upload/index.js.map create mode 100644 ng2-components/ng2-alfresco-viewer/index.js.map diff --git a/demo-shell-ng2/app/app.module.ts b/demo-shell-ng2/app/app.module.ts index e9cce76e20..2502062119 100644 --- a/demo-shell-ng2/app/app.module.ts +++ b/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, diff --git a/demo-shell-ng2/app/app.routes.ts b/demo-shell-ng2/app/app.routes.ts index 08ff178d0f..2b6cdac847 100644 --- a/demo-shell-ng2/app/app.routes.ts +++ b/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', diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html index f0d51fef29..91a53fa0d8 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html +++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html @@ -133,6 +133,7 @@ diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts index cdf820b5f4..e8f1fe1afc 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts +++ b/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'; diff --git a/demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.css b/demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.html b/demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.html new file mode 100644 index 0000000000..6e7793c395 --- /dev/null +++ b/demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.html @@ -0,0 +1,6 @@ +
+ + +
diff --git a/demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.ts b/demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.ts new file mode 100644 index 0000000000..89e4eb6cc2 --- /dev/null +++ b/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(); + } + +} diff --git a/demo-shell-ng2/app/components/index.ts b/demo-shell-ng2/app/components/index.ts index 95e9466cd1..f5fd02e22c 100644 --- a/demo-shell-ng2/app/components/index.ts +++ b/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'; diff --git a/ng2-components/ng2-activiti-processlist/README.md b/ng2-components/ng2-activiti-processlist/README.md index 7c9581e2c4..3c5bcae34a 100644 --- a/ng2-components/ng2-activiti-processlist/README.md +++ b/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 diff --git a/ng2-components/ng2-activiti-processlist/src/assets/activiti-process.model.mock.ts b/ng2-components/ng2-activiti-processlist/src/assets/activiti-process.model.mock.ts index 08c6d83361..67c243198e 100644 --- a/ng2-components/ng2-activiti-processlist/src/assets/activiti-process.model.mock.ts +++ b/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, diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.html b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.html index 18ca467cf2..dc3535307e 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.html +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.html @@ -1,7 +1,10 @@
{{ 'DETAILS.MESSAGES.NONE'|translate }}

{{ getProcessNameOrDescription('medium') }}

- + +
= new EventEmitter(); + /** * 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); + } + } diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.html b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.html index 864ff26f1b..cee39f13a2 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.html +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.html @@ -15,5 +15,8 @@ {{ 'DETAILS.LABELS.ENDED' | translate }}: {{getFormatDate(processInstance.ended, 'medium')}}
+
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.spec.ts index 08407533d8..ad5231554e 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.spec.ts +++ b/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; + 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 = 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 = 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(); + }); + + }); diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.ts index d1877a47ec..811834a304 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.ts +++ b/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 = new EventEmitter(); + @Output() + showProcessDiagram: EventEmitter = new EventEmitter(); + 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; + } } diff --git a/ng2-components/ng2-activiti-processlist/src/i18n/en.json b/ng2-components/ng2-activiti-processlist/src/i18n/en.json index b76a6b5dd2..da1c7edfef 100644 --- a/ng2-components/ng2-activiti-processlist/src/i18n/en.json +++ b/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." diff --git a/ng2-components/ng2-alfresco-upload/index.js.map b/ng2-components/ng2-alfresco-upload/index.js.map new file mode 100644 index 0000000000..76d0432ed5 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/ng2-components/ng2-alfresco-viewer/index.js.map b/ng2-components/ng2-alfresco-viewer/index.js.map new file mode 100644 index 0000000000..521c7810bf --- /dev/null +++ b/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"} \ No newline at end of file