From 29843efeb0ca2a229a33a5de353bd2d13d6e4a1b Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Wed, 23 Nov 2016 18:10:38 +0000
Subject: [PATCH] #875 initial support for ng2-based stencils

---
 demo-shell-ng2/index.html                     |  5 +
 .../form-field/form-field.component.ts        | 95 ++++++++++++++++---
 .../widgets/core/form-field-templates.ts      | 20 ++++
 .../src/components/widgets/core/form.model.ts |  3 +
 .../src/components/widgets/core/index.ts      |  1 +
 .../ng2-activiti-form/stencils/runtime.adf.js |  8 ++
 .../ng2-activiti-form/stencils/runtime.ng1.js | 13 +++
 7 files changed, 131 insertions(+), 14 deletions(-)
 create mode 100644 ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-templates.ts
 create mode 100644 ng2-components/ng2-activiti-form/stencils/runtime.adf.js
 create mode 100644 ng2-components/ng2-activiti-form/stencils/runtime.ng1.js

diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index aec2e4da25..2fe2040a7f 100644
--- a/demo-shell-ng2/index.html
+++ b/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>
diff --git a/ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.ts b/ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.ts
index f324b07f1f..dcd962b7a0 100644
--- a/ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.ts
+++ b/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);
-            if (componentType) {
-                let factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
+            let customTemplate = this.field.form.customFieldTemplates[this.field.type];
+            if (customTemplate && this.hasController(this.field.type)) {
+                let factory = this.getComponentFactorySync(this.field.type, customTemplate);
                 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);
-                    }
-                });
+                let instance: any = this.componentRef.instance;
+                if (instance) {
+                    instance.field = this.field;
+                }
+            } else {
+                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);
+    }
+
 }
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-templates.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-templates.ts
new file mode 100644
index 0000000000..9a595a014a
--- /dev/null
+++ b/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;
+}
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts
index 25f7fca3b9..73938624fb 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts
+++ b/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> = {};
 
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/index.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/index.ts
index 3db8211a73..fdcdeec974 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/core/index.ts
+++ b/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';
diff --git a/ng2-components/ng2-activiti-form/stencils/runtime.adf.js b/ng2-components/ng2-activiti-form/stencils/runtime.adf.js
new file mode 100644
index 0000000000..4154b1ce78
--- /dev/null
+++ b/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
+    };
+};
diff --git a/ng2-components/ng2-activiti-form/stencils/runtime.ng1.js b/ng2-components/ng2-activiti-form/stencils/runtime.ng1.js
new file mode 100644
index 0000000000..411ee66cf2
--- /dev/null
+++ b/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 {
+                }
+            }
+        }
+    }
+};