Tabs widget enhancements, Form Viewer route

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

@@ -25,7 +25,8 @@ import {
     LoginDemoComponent,
     ActivitiDemoComponent,
     WebscriptComponent,
-    AboutComponent
+    AboutComponent,
+    FormViewer
 } from './components/index';
 
 export const routes: RouterConfig = [
@@ -37,6 +38,7 @@ export const routes: RouterConfig = [
     { path: 'login', component: LoginDemoComponent },
     { path: 'search', component: SearchComponent },
     { path: 'activiti', component: ActivitiDemoComponent },
+    { path: 'activiti/tasks/:id', component: FormViewer },
     { path: 'webscript', component: WebscriptComponent },
     { path: 'about', component: AboutComponent }
 ];

demo-shell-ng2/app/components/activiti/form-viewer.component.css

@@ -0,0 +1,3 @@
+.activiti-form-viewer {
+    margin: 10px;
+}

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

@@ -0,0 +1,3 @@
+<div class="activiti-form-viewer" *ngIf="taskId">
+    <activiti-form [taskId]="taskId"></activiti-form>
+</div>

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

@@ -0,0 +1,62 @@
+/*!
+ * @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, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ActivitiForm, FormService } from 'ng2-activiti-form';
+import { Subscription } from 'rxjs/Rx';
+
+declare let __moduleName: string;
+declare var componentHandler;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'form-viewer',
+    templateUrl: './form-viewer.component.html',
+    styleUrls: ['./form-viewer.component.css'],
+    directives: [ActivitiForm],
+    providers: [FormService]
+})
+export class FormViewer implements OnInit, OnDestroy, AfterViewChecked {
+
+    private sub: Subscription;
+
+    taskId: string;
+
+    constructor(private formService: FormService,
+                private route: ActivatedRoute,
+                private router: Router) {
+    }
+
+    ngOnInit() {
+        this.sub = this.route.params.subscribe(params => {
+            this.taskId = params['id'];
+        });
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+
+    ngAfterViewChecked() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+}

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

@@ -90,6 +90,11 @@
                         title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
                         handler="delete">
                 </content-action>
+                <content-action
+                        target="document"
+                        title="Activiti: View Form"
+                        (execute)="viewActivitiForm($event)">
+                </content-action>
             </content-actions>
         </alfresco-document-list>
         <alfresco-pagination

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

@@ -16,6 +16,7 @@
  */
 
 import { Component, OnInit, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
 import {
     DOCUMENT_LIST_DIRECTIVES,
     DOCUMENT_LIST_PROVIDERS,
@@ -72,7 +73,8 @@ export class FilesComponent implements OnInit {
 
     constructor(private contentService: AlfrescoContentService,
                 private documentActions: DocumentActionsService,
-                private formService: FormService) {
+                private formService: FormService,
+                private router: Router) {
         documentActions.setHandler('my-handler', this.myDocumentActionHandler.bind(this));
     }
 
@@ -122,13 +124,16 @@ export class FilesComponent implements OnInit {
     }
 
     ngOnInit() {
-        console.log(this.documentList);
         this.formService.getProcessDefinitions().subscribe(
             defs => this.setupBpmActions(defs || []),
             err => console.log(err)
         );
     }
 
+    viewActivitiForm(event?: any) {
+        this.router.navigate(['/activiti/tasks', '1']);
+    }
+
     private setupBpmActions(actions: any[]) {
         actions.map(def => {
             let documentAction = new DocumentActionModel();

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 { FormViewer } from './activiti/form-viewer.component';
 export { WebscriptComponent } from './webscript/webscript.component';
 export { AboutComponent } from './about/about.component';
 export { FilesComponent } from './files/files.component';