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

ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html

@@ -1,5 +1,5 @@
-<div *ngIf="hasTabs()">
-    <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
+<div *ngIf="hasTabs()" class="alfresco-tabs-widget">
+    <div alfresco-mdl-tabs>
         <div class="mdl-tabs__tab-bar">
             <a *ngFor="let tab of tabs; let isFirst = first"
                [href]="'#' + tab.id"

ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts

@@ -16,6 +16,7 @@
  */
 
 import { Component, Input, AfterViewInit } from '@angular/core';
+import { MATERIAL_DESIGN_DIRECTIVES } from 'ng2-alfresco-core';
 import { TabModel } from './../widget.model';
 import { ContainerWidget } from './../container/container.widget';
 
@@ -26,7 +27,7 @@ declare var componentHandler;
     moduleId: __moduleName,
     selector: 'tabs-widget',
     templateUrl: './tabs.widget.html',
-    directives: [ContainerWidget]
+    directives: [MATERIAL_DESIGN_DIRECTIVES, ContainerWidget]
 })
 export class TabsWidget implements AfterViewInit {
 
@@ -43,5 +44,4 @@ export class TabsWidget implements AfterViewInit {
             componentHandler.upgradeAllRegistered();
         }
     }
-
 }

ng2-components/ng2-alfresco-core/src/components/material/index.ts

@@ -18,13 +18,16 @@
 import { MDL } from './MaterialDesignLiteUpgradeElement';
 import { AlfrescoMdlButtonDirective } from './mdl-button.directive';
 import { AlfrescoMdlMenuDirective } from './mdl-menu.directive';
+import { AlfrescoMdlTabsDirective } from './mdl-tabs.directive';
 
 export * from './MaterialDesignLiteUpgradeElement';
 export * from './mdl-button.directive';
 export * from './mdl-menu.directive';
+export * from './mdl-tabs.directive';
 
 export const MATERIAL_DESIGN_DIRECTIVES: [any] = [
     MDL,
     AlfrescoMdlButtonDirective,
-    AlfrescoMdlMenuDirective
+    AlfrescoMdlMenuDirective,
+    AlfrescoMdlTabsDirective
 ];

ng2-components/ng2-alfresco-core/src/components/material/mdl-tabs.directive.ts

@@ -0,0 +1,79 @@
+/*!
+ * @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 {
+    Directive,
+    ElementRef,
+    AfterViewInit,
+    OnDestroy
+} from '@angular/core';
+
+declare var componentHandler;
+
+@Directive({
+    selector: '[alfresco-mdl-tabs]'
+})
+export class AlfrescoMdlTabsDirective implements AfterViewInit, OnDestroy {
+
+    private observer: MutationObserver;
+
+    constructor(private element: ElementRef) {}
+
+    ngAfterViewInit() {
+        if (componentHandler) {
+            let el = this.element.nativeElement;
+
+            el.classList.add('mdl-tabs');
+            el.classList.add('mdl-js-tabs');
+            el.classList.add('mdl-js-ripple-effect');
+            componentHandler.upgradeElement(el, 'MaterialTabs');
+
+            // watch widget DOM changes and re-upgrade MDL content
+            let tabBar = el.querySelector('.mdl-tabs__tab-bar');
+            if (tabBar) {
+                this.observer = new MutationObserver((mutations: any[]) => {
+                    let upgrade = false;
+                    mutations.forEach((mutation: MutationRecord) => {
+                        if (mutation.addedNodes && mutation.addedNodes.length > 0) {
+                            upgrade = true;
+                        }
+
+                        if (mutation.removedNodes && mutation.removedNodes.length > 0) {
+                            upgrade = true;
+                        }
+                    });
+
+                    if (upgrade) {
+                        componentHandler.downgradeElements([el]);
+                        componentHandler.upgradeElement(el);
+                    }
+                });
+
+                this.observer.observe(tabBar, {
+                    childList: true,
+                    subtree: false
+                });
+            }
+        }
+    }
+
+    ngOnDestroy() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+}