diff --git a/demo-shell-ng2/app/app.module.ts b/demo-shell-ng2/app/app.module.ts index bf2cdc287f..5238bf1d03 100644 --- a/demo-shell-ng2/app/app.module.ts +++ b/demo-shell-ng2/app/app.module.ts @@ -43,6 +43,7 @@ import { SearchBarComponent, LoginDemoComponent, ActivitiDemoComponent, + ActivitiAppsView, FormViewer, WebscriptComponent, TagComponent, @@ -80,6 +81,7 @@ import { SearchBarComponent, LoginDemoComponent, ActivitiDemoComponent, + ActivitiAppsView, FormViewer, WebscriptComponent, TagComponent, diff --git a/demo-shell-ng2/app/app.routes.ts b/demo-shell-ng2/app/app.routes.ts index 234bfcdc6f..c7898ccb12 100644 --- a/demo-shell-ng2/app/app.routes.ts +++ b/demo-shell-ng2/app/app.routes.ts @@ -24,6 +24,7 @@ import { SearchComponent, LoginDemoComponent, ActivitiDemoComponent, + ActivitiAppsView, WebscriptComponent, TagComponent, AboutComponent, @@ -42,7 +43,11 @@ export const appRoutes: Routes = [ { path: 'uploader', component: UploadButtonComponent }, { path: 'login', component: LoginDemoComponent }, { path: 'search', component: SearchComponent }, - { path: 'activiti', component: ActivitiDemoComponent }, + + { path: 'activiti', component: ActivitiAppsView }, + { path: 'activiti/apps', component: ActivitiAppsView }, + { path: 'activiti/apps/:appId/tasks', component: ActivitiDemoComponent }, + { path: 'activiti/appId/:appId', component: ActivitiDemoComponent }, { path: 'activiti/tasks/:id', component: FormViewer }, { path: 'activiti/tasksnode/:id', component: FormNodeViewer }, 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 3ab75114d5..31cad9fd3b 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html +++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html @@ -4,28 +4,18 @@ -
- APPS - TASK LIST - PROCESS LIST - ANALYTICS +
+ TASKS + PROCESSES + REPORTS
-
- - - -
-
- -
-
- +
-
+
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 82feddfefd..0bfe181719 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts +++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts @@ -15,13 +15,8 @@ * limitations under the License. */ -import { Component, AfterViewChecked, ViewChild, Input } from '@angular/core'; -import { - AppDefinitionRepresentationModel, - FilterRepresentationModel, - ActivitiApps, - ActivitiTaskList -} from 'ng2-activiti-tasklist'; +import { Component, AfterViewInit, ViewChild, Input, ElementRef } from '@angular/core'; +import { FilterRepresentationModel, ActivitiApps, ActivitiTaskList } from 'ng2-activiti-tasklist'; import { ActivitiProcessInstanceListComponent, ActivitiStartProcessInstance, @@ -48,7 +43,7 @@ const currentProcessIdNew = '__NEW__'; templateUrl: './activiti-demo.component.html', styleUrls: ['./activiti-demo.component.css'] }) -export class ActivitiDemoComponent implements AfterViewChecked { +export class ActivitiDemoComponent implements AfterViewInit { @ViewChild('activitiapps') activitiapps: ActivitiApps; @@ -74,12 +69,6 @@ export class ActivitiDemoComponent implements AfterViewChecked { @ViewChild(ActivitiStartProcessInstance) activitiStartProcess: ActivitiStartProcessInstance; - @ViewChild('tabmain') - tabMain: any; - - @ViewChild('tabheader') - tabHeader: any; - @Input() appId: number; @@ -99,7 +88,9 @@ export class ActivitiDemoComponent implements AfterViewChecked { dataTasks: ObjectDataTableAdapter; dataProcesses: ObjectDataTableAdapter; - constructor(private route: ActivatedRoute, private formRenderingService: FormRenderingService) { + constructor(private elementRef: ElementRef, + private route: ActivatedRoute, + private formRenderingService: FormRenderingService) { this.dataTasks = new ObjectDataTableAdapter( [], [ @@ -126,7 +117,15 @@ export class ActivitiDemoComponent implements AfterViewChecked { ngOnInit() { this.sub = this.route.params.subscribe(params => { - this.appId = params['appId']; + let applicationId = params['appId']; + if (applicationId && applicationId !== '0') { + this.appId = params['appId']; + } + + this.taskFilter = null; + this.currentTaskId = null; + this.processFilter = null; + this.currentProcessInstanceId = null; }); this.layoutType = ActivitiApps.LAYOUT_GRID; } @@ -135,25 +134,6 @@ export class ActivitiDemoComponent implements AfterViewChecked { this.sub.unsubscribe(); } - onAppClick(app: AppDefinitionRepresentationModel) { - this.appId = app.id; - this.taskFilter = null; - this.currentTaskId = null; - - this.processFilter = null; - this.currentProcessInstanceId = null; - - this.changeTab('apps', 'tasks'); - } - - changeTab(origin: string, destination: string) { - this.tabMain.nativeElement.children[origin].classList.remove('is-active'); - this.tabMain.nativeElement.children[destination].classList.add('is-active'); - - this.tabHeader.nativeElement.children[`${origin}-header`].classList.remove('is-active'); - this.tabHeader.nativeElement.children[`${destination}-header`].classList.add('is-active'); - } - onTaskFilterClick(event: FilterRepresentationModel) { this.taskFilter = event; } @@ -225,11 +205,17 @@ export class ActivitiDemoComponent implements AfterViewChecked { this.currentTaskId = null; } - ngAfterViewChecked() { + ngAfterViewInit() { // workaround for MDL issues with dynamic components if (componentHandler) { componentHandler.upgradeAllRegistered(); } + + // Load Activiti stencil controllers + let s = document.createElement('script'); + s.type = 'text/javascript'; + s.src = 'http://localhost:9999/activiti-app/app/rest/script-files/controllers'; + this.elementRef.nativeElement.appendChild(s); } } diff --git a/demo-shell-ng2/app/components/activiti/apps.view.ts b/demo-shell-ng2/app/components/activiti/apps.view.ts new file mode 100644 index 0000000000..3deca72972 --- /dev/null +++ b/demo-shell-ng2/app/components/activiti/apps.view.ts @@ -0,0 +1,37 @@ +/*! + * @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 { Router, ActivatedRoute } from '@angular/router'; +import { AppDefinitionRepresentationModel } from 'ng2-activiti-tasklist'; + +@Component({ + selector: 'activiti-apps-view', + template: ` + + ` +}) +export class ActivitiAppsView { + + constructor(private router: Router, private route: ActivatedRoute) { + } + + onAppClicked(app: AppDefinitionRepresentationModel) { + this.router.navigate(['/activiti/apps', app.id || 0, 'tasks']); + } + +} diff --git a/demo-shell-ng2/app/components/index.ts b/demo-shell-ng2/app/components/index.ts index 28ca7a9b56..d627441a3c 100644 --- a/demo-shell-ng2/app/components/index.ts +++ b/demo-shell-ng2/app/components/index.ts @@ -27,3 +27,4 @@ export { AboutComponent } from './about/about.component'; export { FilesComponent } from './files/files.component'; export { FormNodeViewer } from './activiti/form-node-viewer.component'; export { SettingComponent } from './setting/setting.component'; +export { ActivitiAppsView } from './activiti/apps.view'; diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html index aef1ee50c4..84b8234b90 100644 --- a/demo-shell-ng2/index.html +++ b/demo-shell-ng2/index.html @@ -51,7 +51,6 @@ -