#1190 routing improvements, bug fixes (#1193)

- split apps view and single app view to reflect Activiti UI
- dedicated route for each app tasks: /activiti/apps/:appId/tasks
- remove performance bottleneck for activiti demo (AfterViewChecked)
- load stencil controllers together with Tasks view (fixes #1190)

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,

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 },

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

@@ -4,28 +4,18 @@
 
         <!-- TABS -->
 
-        <div class="mdl-layout__tab-bar mdl-js-ripple-effect" #tabheader>
-            <a id="apps-header" href="#apps" class="mdl-layout__tab is-active">APPS</a>
-            <a id="tasks-header" href="#tasks" class="mdl-layout__tab">TASK LIST</a>
-            <a id="processes-header" href="#processes" class="mdl-layout__tab">PROCESS LIST</a>
-            <a id="report-header" href="#report" class="mdl-layout__tab">ANALYTICS</a>
+        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
+            <a id="tasks-header" href="#tasks" class="mdl-layout__tab is-active">TASKS</a>
+            <a id="processes-header" href="#processes" class="mdl-layout__tab">PROCESSES</a>
+            <a id="report-header" href="#report" class="mdl-layout__tab">REPORTS</a>
         </div>
     </header>
 
-    <main class="mdl-layout__content activiti" #tabmain>
-
-        <!--  APPPS COMPONENT -->
-
-        <section class="mdl-layout__tab-panel is-active" id="apps">
-            <div class="page-content">
-                <activiti-apps [layoutType]="layoutType" (appClick)="onAppClick($event)" #activitiapps></activiti-apps>
-            </div>
-        </section>
-
+    <main class="mdl-layout__content activiti">
 
         <!--  TASKS COMPONENT -->
 
-        <section class="mdl-layout__tab-panel" id="tasks">
+        <section class="mdl-layout__tab-panel is-active" id="tasks">
             <div class="page-content">
                 <div class="mdl-grid">
                     <div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">

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);
     }
 
 }

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: `
+        <activiti-apps (appClick)="onAppClicked($event)"></activiti-apps>
+    `
+})
+export class ActivitiAppsView {
+
+    constructor(private router: Router, private route: ActivatedRoute) {
+    }
+
+     onAppClicked(app: AppDefinitionRepresentationModel) {
+         this.router.navigate(['/activiti/apps', app.id || 0, 'tasks']);
+     }
+
+}

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';

demo-shell-ng2/index.html

@@ -51,7 +51,6 @@
     <!-- Stencils integration -->
     <script src="node_modules/ng2-activiti-form/stencils/runtime.ng1.js"></script>
     <script src="node_modules/ng2-activiti-form/stencils/runtime.adf.js"></script>
-    <script src="http://localhost:9999/activiti-app/app/rest/script-files/controllers"></script>
 
     <!-- 2. Configure SystemJS -->
     <script src="systemjs.config.js"></script>