#875 initial support for ng2-based stencils

demo-shell-ng2/index.html

@@ -48,6 +48,11 @@
     <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
     <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
 
+    <!-- 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>
     <script>

ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.ts

@@ -15,12 +15,29 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ViewChild, ViewContainerRef, Input, ComponentRef, ComponentFactoryResolver } from '@angular/core';
+import {
+    Component,
+    OnInit, OnDestroy
+    ViewChild,
+    ViewContainerRef,
+    Input,
+    ComponentRef,
+    ComponentFactoryResolver,
+    ComponentFactory,
+    Compiler,
+    NgModule,
+    ModuleWithComponentFactories
+} from '@angular/core';
+
+import { CoreModule } from 'ng2-alfresco-core';
+
 import { WidgetVisibilityService } from './../../services/widget-visibility.service';
 import { FormRenderingService } from './../../services/form-rendering.service';
 import { WidgetComponent } from './../widgets/widget.component';
 import { FormFieldModel } from './../widgets/core/index';
 
+declare var adf: any;
+
 @Component({
     selector: 'form-field',
     template: `
@@ -29,7 +46,7 @@ import { FormFieldModel } from './../widgets/core/index';
         </div>
     `
 })
-export class FormFieldComponent implements OnInit {
+export class FormFieldComponent implements OnInit, OnDestroy {
 
     @ViewChild('container', { read: ViewContainerRef })
     container: ViewContainerRef;
@@ -42,25 +59,75 @@ export class FormFieldComponent implements OnInit {
     constructor(
         private formRenderingService: FormRenderingService,
         private componentFactoryResolver: ComponentFactoryResolver,
-        private visibilityService: WidgetVisibilityService) {
+        private visibilityService: WidgetVisibilityService,
+        private compiler: Compiler) {
     }
 
     ngOnInit() {
         if (this.field) {
-            let componentType = this.formRenderingService.resolveComponentType(this.field);
+            let customTemplate = this.field.form.customFieldTemplates[this.field.type];
-            if (componentType) {
+            if (customTemplate && this.hasController(this.field.type)) {
-                let factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
+                let factory = this.getComponentFactorySync(this.field.type, customTemplate);
                 this.componentRef = this.container.createComponent(factory);
-                let instance = <WidgetComponent>this.componentRef.instance;
+                let instance: any = this.componentRef.instance;
-                instance.field = this.field;
+                if (instance) {
-                instance.fieldChanged.subscribe(field => {
+                    instance.field = this.field;
-                    console.log('WidgetComponent.fieldChanged was used only to trigger visibility engine, components should do that internally if needed');
+                }
-                    if (field && field.form) {
+            } else {
-                        this.visibilityService.refreshVisibility(field.form);
+                let componentType = this.formRenderingService.resolveComponentType(this.field);
-                    }
+                if (componentType) {
-                });
+                    let factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
+                    this.componentRef = this.container.createComponent(factory);
+                    let instance = <WidgetComponent>this.componentRef.instance;
+                    instance.field = this.field;
+                    instance.fieldChanged.subscribe(field => {
+                        console.log('WidgetComponent.fieldChanged was used only to trigger visibility engine, components should do that internally if needed');
+                        if (field && field.form) {
+                            this.visibilityService.refreshVisibility(field.form);
+                        }
+                    });
+                }
             }
         }
     }
 
+    ngOnDestroy() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+
+    private hasController(type: string): boolean {
+        return (adf && adf.components && adf.components[type]);
+    }
+
+    private getComponentFactorySync(type: string, template: string): ComponentFactory<any> {
+        let componentInfo = adf.components[type];
+
+        if (componentInfo.factory) {
+            return componentInfo.factory;
+        }
+
+        let metadata = {
+            selector: `runtime-component-${type}`,
+            template: template
+        };
+
+        let factory = this.createComponentFactorySync(this.compiler, metadata, componentInfo.class);
+        componentInfo.factory = factory;
+        return factory;
+    }
+
+    private createComponentFactorySync(compiler: Compiler, metadata: Component, componentClass: any): ComponentFactory<any> {
+        const cmpClass = componentClass || class RuntimeComponent { };
+        const decoratedCmp = Component(metadata)(cmpClass);
+
+        @NgModule({ imports: [CoreModule], declarations: [decoratedCmp] })
+        class RuntimeComponentModule { }
+
+        let module: ModuleWithComponentFactories<any> = compiler.compileModuleAndAllComponentsSync(RuntimeComponentModule);
+        return module.componentFactories.find(x => x.componentType === decoratedCmp);
+    }
+
 }

ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-templates.ts

@@ -0,0 +1,20 @@
+/*!
+ * @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.
+ */
+
+export interface FormFieldTemplates {
+     [key: string]: string;
+}

ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts

@@ -22,6 +22,7 @@ import { TabModel } from './tab.model';
 import { FormOutcomeModel } from './form-outcome.model';
 import { FormFieldModel } from './form-field.model';
 import { FormFieldTypes } from './form-field-types';
+import { FormFieldTemplates } from './form-field-templates';
 
 export class FormModel {
 
@@ -45,6 +46,7 @@ export class FormModel {
     /** Stores root containers */
     fields: FormWidgetModel[] = [];
     outcomes: FormOutcomeModel[] = [];
+    customFieldTemplates: FormFieldTemplates = {};
 
     values: FormValues = {};
 
@@ -73,6 +75,7 @@ export class FormModel {
             this.taskId = json.taskId;
             this.taskName = json.taskName || json.name || FormModel.UNSET_TASK_NAME;
             this.processDefinitionId = json.processDefinitionId;
+            this.customFieldTemplates = json.customFieldTemplates || {};
 
             let tabCache: FormWidgetModelCache<TabModel> = {};
 

ng2-components/ng2-activiti-form/src/components/widgets/core/index.ts

@@ -19,6 +19,7 @@ export * from './form-field-metadata';
 export * from './form-values';
 export * from './form-field-types';
 export * from './form-field-option';
+export * from './form-field-templates';
 export * from './form-widget.model';
 export * from './form-field.model';
 export * from './form.model';

ng2-components/ng2-activiti-form/stencils/runtime.adf.js

@@ -0,0 +1,8 @@
+var adf = (window.adf = window.adf || { components: {} });
+adf.registerComponent = function (componentKey, componentClass) {
+    var components = (adf.components = adf.components || {});
+    components[componentKey] = {
+        class: componentClass,
+        factory: null
+    };
+};

ng2-components/ng2-activiti-form/stencils/runtime.ng1.js

@@ -0,0 +1,13 @@
+/** stubs for Angular 1 api */
+window.angular = {
+    module: function (moduleName) {
+        console.info('ng1: module %s requested', moduleName);
+        return {
+            controller: function (controllerName) {
+                console.info('ng1: controller %s requested', controllerName);
+                return {
+                }
+            }
+        }
+    }
+};