#440 simple form renderer draft

ng2-components/ng2-alfresco-activiti-form/src/components/activiti-form.component.html

@@ -1,9 +1,23 @@
+<div *ngIf="hasForm()" style="padding: 10px;">
+    <div *ngIf="form.hasTabs()">
+        <tabs-widget [tabs]="form.tabs"></tabs-widget>
+    </div>
+    <div *ngIf="!form.hasTabs() && form.hasFields()">
+        <container-widget [content]="form.fields[0]"></container-widget>
+    </div>
+
+</div>
+
+<!--
 <div style="padding: 10px">
+
     <h2>Task form content</h2>
 
-    <h3>Task</h3>
-    <pre>{{debugTask | json}}</pre>
-
     <h3>Form</h3>
-    <pre>{{debugForm | json}}</pre>
+    <pre *ngIf="form">{{form.json | json}}</pre>
+
+    <h3>Task</h3>
+    <pre *ngIf="task">{{task | json}}</pre>
+
 </div>
+-->

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

@@ -15,38 +15,63 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, Injectable } from '@angular/core';
+import {
+    Component,
+    OnInit,
+    AfterViewChecked
+} from '@angular/core';
 import { FormService } from './../services/form.service';
+import { WIDGET_DIRECTIVES } from './widgets/index';
+import { FormModel } from './widgets/widget.model';
 
 declare let __moduleName: string;
+declare var componentHandler;
+
+@Component({
+    selector: 'child-component',
+    template: 'Hello {{name}}'
+})
+class ChildComponent {
+    name: string;
+}
 
 @Component({
     moduleId: __moduleName,
     selector: 'activiti-form',
     templateUrl: './activiti-form.component.html',
+    directives: [WIDGET_DIRECTIVES],
     providers: [
         FormService
     ]
 })
-export class ActivitiForm implements OnInit {
+export class ActivitiForm implements OnInit, AfterViewChecked {
 
-    debugTask: any;
+    task: any;
-    debugForm: any;
+    form: FormModel;
-
-    constructor(private formService: FormService) {
 
+    hasForm(): boolean {
+        return this.form ? true : false;
     }
 
+    constructor(private formService: FormService) {}
+
     ngOnInit() {
         this.formService.getTask('1').subscribe(task => {
-            console.log(task);
+            // console.log(task);
-            this.debugTask = task;
+            this.task = task;
 
             this.formService.getTaskForm('1').subscribe(form => {
-                console.log(form);
+                // console.log(form);
-                this.debugForm = form;
+                this.form = new FormModel(form);
-            })
+            });
         });
     }
 
+    ngAfterViewChecked() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
 }

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/checkbox/checkbox.widget.html

@@ -0,0 +1,4 @@
+<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [attr.for]="field.id">
+    <input type="checkbox" [attr.id]="field.id" class="mdl-checkbox__input">
+    <span class="mdl-checkbox__label">{{field.name}}</span>
+</label>

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/checkbox/checkbox.widget.ts

@@ -0,0 +1,45 @@
+/*!
+ * @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, Input, AfterViewInit } from '@angular/core';
+import { FormFieldModel } from './../widget.model';
+
+declare let __moduleName: string;
+declare var componentHandler;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'checkbox-widget',
+    templateUrl: './checkbox.widget.html'
+})
+export class CheckboxWidget implements AfterViewInit {
+
+    @Input()
+    field: FormFieldModel;
+
+    hasField() {
+        return this.field ? true : false;
+    }
+
+    ngAfterViewInit() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+}

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/container/container.widget.html

@@ -0,0 +1,18 @@
+<div class="mdl-grid">
+    <div *ngFor="let field of content.fields" class="mdl-cell mdl-cell--{{field.metadata.size}}-col">
+        <div [ngSwitch]="field.type">
+            <div *ngSwitchCase="'integer'">
+                <number-widget [field]="field"></number-widget>
+            </div>
+            <div *ngSwitchCase="'text'">
+                <text-widget [field]="field"></text-widget>
+            </div>
+            <div *ngSwitchCase="'boolean'">
+                <checkbox-widget [field]="field"></checkbox-widget>
+            </div>
+            <div *ngSwitchDefault>
+                <span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
+            </div>
+        </div>
+    </div>
+</div>

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/container/container.widget.ts

@@ -0,0 +1,45 @@
+/*!
+ * @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, Input, AfterViewInit } from '@angular/core';
+import { TextWidget } from './../text/text.widget';
+import { NumberWidget } from './../number/number.widget';
+import { ContainerModel } from './../widget.model';
+import { CheckboxWidget } from './../checkbox/checkbox.widget';
+
+declare let __moduleName: string;
+declare var componentHandler;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'container-widget',
+    templateUrl: './container.widget.html',
+    directives: [TextWidget, NumberWidget, CheckboxWidget]
+})
+export class ContainerWidget implements AfterViewInit {
+
+    @Input()
+    content: ContainerModel;
+
+    ngAfterViewInit() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+}

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

@@ -0,0 +1,38 @@
+/*!
+ * @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 { TabsWidget } from './tabs/tabs.widget';
+import { ContainerWidget } from './container/container.widget';
+import { TextWidget } from './text/text.widget';
+import { NumberWidget } from './number/number.widget';
+import { CheckboxWidget } from './checkbox/checkbox.widget';
+
+export * from './widget.model';
+
+export * from './tabs/tabs.widget';
+export * from './container/container.widget';
+export * from './text/text.widget';
+export * from './number/number.widget';
+export * from './checkbox/checkbox.widget';
+
+export const WIDGET_DIRECTIVES: [any] = [
+    TabsWidget,
+    ContainerWidget,
+    TextWidget,
+    NumberWidget,
+    CheckboxWidget
+];

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.css

@@ -0,0 +1,3 @@
+:host .number-widget {
+    width: 100%;
+}

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.html

@@ -0,0 +1,5 @@
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label number-widget">
+    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" [attr.id]="field.id">
+    <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
+    <span class="mdl-textfield__error">Input is not a number!</span>
+</div>

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/number/number.widget.ts

@@ -0,0 +1,46 @@
+/*!
+ * @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, Input, AfterViewInit } from '@angular/core';
+import { FormFieldModel } from './../widget.model';
+
+declare let __moduleName: string;
+declare var componentHandler;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'number-widget',
+    templateUrl: './number.widget.html',
+    styleUrls: ['./number.widget.css']
+})
+export class NumberWidget implements AfterViewInit {
+
+    @Input()
+    field: FormFieldModel;
+
+    hasField() {
+        return this.field ? true : false;
+    }
+
+    ngAfterViewInit() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+}

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

@@ -0,0 +1,20 @@
+<div *ngIf="hasTabs()">
+    <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
+        <div class="mdl-tabs__tab-bar">
+            <a *ngFor="let tab of tabs; let isFirst = first"
+               [href]="'#' + tab.id"
+               class="mdl-tabs__tab" [class.is-active]="isFirst">
+                {{tab.title}}
+            </a>
+        </div>
+        <div *ngFor="let tab of tabs; let isFirst = first"
+             class="mdl-tabs__panel"
+             [class.is-active]="isFirst"
+             [attr.id]="tab.id">
+            <container-widget
+                *ngFor="let field of tab.fields"
+                [content]="field">
+            </container-widget>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,47 @@
+/*!
+ * @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, Input, AfterViewInit } from '@angular/core';
+import { TabModel } from './../widget.model';
+import { ContainerWidget } from './../container/container.widget';
+
+declare let __moduleName: string;
+declare var componentHandler;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'tabs-widget',
+    templateUrl: './tabs.widget.html',
+    directives: [ContainerWidget]
+})
+export class TabsWidget implements AfterViewInit {
+
+    @Input()
+    tabs: TabModel[] = [];
+
+    hasTabs() {
+        return this.tabs && this.tabs.length > 0;
+    }
+
+    ngAfterViewInit() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+}

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.css

@@ -0,0 +1,3 @@
+:host .text-widget {
+    width: 100%;
+}

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.html

@@ -0,0 +1,4 @@
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label text-widget">
+    <input class="mdl-textfield__input" type="text" [attr.id]="field.id">
+    <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
+</div>

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/text/text.widget.ts

@@ -0,0 +1,46 @@
+/*!
+ * @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, Input, AfterViewInit } from '@angular/core';
+import { FormFieldModel } from './../widget.model';
+
+declare let __moduleName: string;
+declare var componentHandler;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'text-widget',
+    templateUrl: './text.widget.html',
+    styleUrls: ['./text.widget.css']
+})
+export class TextWidget implements AfterViewInit {
+
+    @Input()
+    field: FormFieldModel;
+
+    hasField() {
+        return this.field ? true : false;
+    }
+
+    ngAfterViewInit() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+}

ng2-components/ng2-alfresco-activiti-form/src/components/widgets/widget.model.ts

@@ -0,0 +1,179 @@
+/*!
+ * @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 FormFieldMetadata {
+    [key: string]: any;
+}
+
+export class FormWidgetModel {
+
+    private _form: FormModel;
+    private _json: any;
+
+    get form(): FormModel {
+        return this._form;
+    }
+
+    get json(): any {
+        return this._json;
+    }
+
+    constructor(form: FormModel, json: any) {
+        this._form = form;
+        this._json = json;
+    }
+}
+
+export class FormFieldModel extends FormWidgetModel {
+
+    id: string;
+    name: string;
+    type: string;
+    tab: string;
+    colspan: number = 1;
+
+    metadata: FormFieldMetadata = {};
+
+    constructor(form: FormModel, json?: any) {
+        super(form, json);
+
+        if (json) {
+            this.id = json.id;
+            this.name = json.name;
+            this.type = json.type;
+            this.tab = json.tab;
+            this.colspan = <number> json.colspan;
+        }
+    }
+}
+
+export class ContainerModel extends FormWidgetModel {
+
+    fieldType: string;
+    id: string;
+    name: string;
+    type: string;
+    tab: string;
+    numberOfColumns: number = 1;
+
+    fields: FormFieldModel[] = [];
+
+    constructor(form: FormModel, json?: any) {
+        super(form, json);
+
+        if (json) {
+            this.fieldType = json.fieldType;
+            this.id = json.id;
+            this.name = json.name;
+            this.type = json.type;
+            this.tab = json.tab;
+            this.numberOfColumns = <number> json.numberOfColumns;
+
+            let columnSize: number = 12;
+            if (this.numberOfColumns > 1) {
+                columnSize = 12 / this.numberOfColumns;
+            }
+
+            let fields = [];
+
+            Object.keys(json.fields).map(key => {
+                fields = fields.concat(json.fields[key] || []);
+            });
+
+            // this.fields = fields.map(f => new FormFieldModel(form, f));
+            this.fields = fields.map(f => {
+                let field = new FormFieldModel(form, f);
+                field.metadata['size'] = columnSize;
+                return field;
+            });
+        }
+    }
+}
+
+export class TabModel extends FormWidgetModel {
+
+    id: string;
+    title: string;
+    visibilityCondition: any;
+
+    fields: ContainerModel[] = [];
+
+    hasContent(): boolean {
+        return this.fields && this.fields.length > 0;
+    }
+
+    constructor(form: FormModel, json?: any) {
+        super(form, json);
+
+        if (json) {
+            this.id = json.id;
+            this.title = json.title;
+            this.visibilityCondition = json.visibilityCondition;
+        }
+    }
+}
+
+export interface WidgetModelCache<T extends FormWidgetModel> {
+    [key: string]: T;
+}
+
+export class FormModel {
+
+    tabs: TabModel[] = [];
+    fields: ContainerModel[] = [];
+
+    private _json: any;
+
+    get json() {
+        return this._json;
+    }
+
+    hasTabs(): boolean {
+        return this.tabs && this.tabs.length > 0;
+    }
+
+    hasFields(): boolean {
+        return this.fields && this.fields.length > 0;
+    }
+
+    constructor(json?: any) {
+        if (json) {
+            this._json = json;
+            let tabCache: WidgetModelCache<TabModel> = {};
+
+            // this.tabs = (json.tabs || []).map(t => new TabModel(this, t));
+            this.tabs = (json.tabs || []).map(t => {
+                let model = new TabModel(this, t);
+                tabCache[model.id] = model;
+                return model;
+            });
+            this.fields = (json.fields || []).map(f => new ContainerModel(this, f));
+
+            for (let i = 0; i < this.fields.length; i++) {
+                let field = this.fields[i];
+                if (field.tab) {
+                    let tab = tabCache[field.tab];
+                    if (tab) {
+                        // tab.content = new ContainerModel(this, field.json);
+                        // tab.fields.push(field);
+                        tab.fields.push(new ContainerModel(this, field.json));
+                    }
+                }
+            }
+        }
+    }
+}