Dynamic-table widget placeholder

- project structure for dynamic-table widget
- support for multiple root element types (container, dynamic table,
etc)
- code improvements and updates

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

@@ -14,7 +14,19 @@
                 </div>
 
                 <div *ngIf="!form.hasTabs() && form.hasFields()">
-                    <container-widget *ngFor="let field of form.fields" [content]="field" (formValueChanged)="checkVisibility($event);"></container-widget>
+                    <div *ngFor="let field of form.fields">
+                        <div [ngSwitch]="field.type">
+                            <div *ngSwitchCase="'container'">
+                                <container-widget [content]="field" (formValueChanged)="checkVisibility($event);"></container-widget>
+                            </div>
+                            <div *ngSwitchCase="'dynamic-table'">
+                                <dynamic-table-widget [field]="field"></dynamic-table-widget>
+                            </div>
+                            <div *ngSwitchDefault>
+                                <span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div *ngIf="form.hasOutcomes()" class="mdl-card__actions mdl-card--border">

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

@@ -18,7 +18,7 @@
 import { Observable } from 'rxjs/Rx';
 import { SimpleChange } from '@angular/core';
 import { ActivitiForm } from './activiti-form.component';
-import { FormModel, FormOutcomeModel, FormFieldModel, FormOutcomeEvent } from './widgets/index';
+import { FormModel, FormOutcomeModel, FormFieldModel, FormOutcomeEvent, FormFieldTypes } from './widgets/index';
 import { FormService } from './../services/form.service';
 import { WidgetVisibilityService } from './../services/widget-visibility.service';
 import { NodeService } from './../services/node.service';
@@ -554,7 +554,7 @@ describe('ActivitiForm', () => {
         let form = formComponent.parseForm({
             id: '<id>',
             fields: [
-                { id: 'field1' }
+                { id: 'field1', type: FormFieldTypes.CONTAINER }
             ]
         });
 

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

@@ -87,4 +87,18 @@ export class ContainerModel extends FormWidgetModel {
             this.isExpanded = !this.isCollapsedByDefault();
         }
     }
+
+    getFormFields(): FormFieldModel[] {
+        let result: FormFieldModel[] = [];
+
+        for (let j = 0; j < this.columns.length; j++) {
+            let column = this.columns[j];
+            for (let k = 0; k < column.fields.length; k++) {
+                let field = column.fields[k];
+                result.push(field);
+            }
+        }
+
+        return result;
+    }
 }

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

@@ -0,0 +1,34 @@
+/*!
+ * @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 { FormWidgetModel } from './form-widget.model';
+import { FormModel } from './form.model';
+import { FormFieldModel } from './form-field.model';
+
+export class DynamicTableModel extends FormWidgetModel {
+
+    field: FormFieldModel;
+
+    constructor(form: FormModel, json?: any) {
+        super(form, json);
+
+        if (json) {
+            this.field = new FormFieldModel(form, json);
+        }
+    }
+
+}

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

@@ -20,15 +20,21 @@ import { FormWidgetModel } from './form-widget.model';
 
 describe('FormWidgetModel', () => {
 
+    class FormWidgetModelMock extends FormWidgetModel {
+        constructor(form: FormModel, json: any) {
+            super(form, json);
+        }
+    }
+
     it('should store the form reference', () => {
         let form = new FormModel();
-        let model = new FormWidgetModel(form, null);
+        let model = new FormWidgetModelMock(form, null);
         expect(model.form).toBe(form);
     });
 
     it('should store original json', () => {
         let json = {};
-        let model = new FormWidgetModel(null, json);
+        let model = new FormWidgetModelMock(null, json);
         expect(model.json).toBe(json);
     });
 

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

@@ -17,7 +17,7 @@
 
 import { FormModel } from './form.model';
 
-export class FormWidgetModel {
+export abstract class FormWidgetModel {
 
     readonly fieldType: string;
     readonly id: string;

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

@@ -20,6 +20,7 @@ import { TabModel } from './tab.model';
 import { ContainerModel } from './container.model';
 import { FormOutcomeModel } from './form-outcome.model';
 import { FormValues } from './form-values';
+import { FormFieldTypes } from './form-field-types';
 
 describe('FormModel', () => {
 
@@ -118,8 +119,14 @@ describe('FormModel', () => {
     it('should parse fields', () => {
         let json = {
             fields: [
-                { id: 'field1' },
-                { id: 'field2' }
+                {
+                    id: 'field1',
+                    type: FormFieldTypes.CONTAINER
+                },
+                {
+                    id: 'field2',
+                    type: FormFieldTypes.CONTAINER
+                }
             ]
         };
 
@@ -134,8 +141,14 @@ describe('FormModel', () => {
             fields: null,
             formDefinition: {
                 fields: [
-                    { id: 'field1' },
-                    { id: 'field2' }
+                    {
+                        id: 'field1',
+                        type: FormFieldTypes.CONTAINER
+                    },
+                    {
+                        id: 'field2',
+                        type: FormFieldTypes.CONTAINER
+                    }
                 ]
             }
         };
@@ -163,10 +176,10 @@ describe('FormModel', () => {
                 { id: 'tab2' }
             ],
             fields: [
-                { id: 'field1', tab: 'tab1' },
-                { id: 'field2', tab: 'tab2' },
-                { id: 'field3', tab: 'tab1' },
-                { id: 'field4', tab: 'missing-tab' }
+                { id: 'field1', tab: 'tab1', type: FormFieldTypes.CONTAINER },
+                { id: 'field2', tab: 'tab2', type: FormFieldTypes.CONTAINER },
+                { id: 'field3', tab: 'tab1', type: FormFieldTypes.DYNAMIC_TABLE },
+                { id: 'field4', tab: 'missing-tab', type: FormFieldTypes.DYNAMIC_TABLE }
             ]
         };
 
@@ -226,7 +239,7 @@ describe('FormModel', () => {
         let form = new FormModel(json, data);
         expect(form.fields.length).toBe(1);
 
-        let container = form.fields[0];
+        let container = <ContainerModel> form.fields[0];
         expect(container.columns.length).toBe(2);
 
         let column1 = container.columns[0];

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

@@ -15,12 +15,14 @@
  * limitations under the License.
  */
 
-import { FormWidgetModelCache } from './form-widget.model';
+import { FormWidgetModel, FormWidgetModelCache } from './form-widget.model';
 import { FormValues } from './form-values';
 import { ContainerModel } from './container.model';
 import { TabModel } from './tab.model';
 import { FormOutcomeModel } from './form-outcome.model';
 import { FormFieldModel } from './form-field.model';
+import { FormFieldTypes } from './form-field-types';
+import { DynamicTableModel } from './dynamic-table.model';
 
 export class FormModel {
 
@@ -41,7 +43,7 @@ export class FormModel {
 
     readOnly: boolean = false;
     tabs: TabModel[] = [];
-    fields: ContainerModel[] = [];
+    fields: FormWidgetModel[] = [];
     outcomes: FormOutcomeModel[] = [];
 
     values: FormValues = {};
@@ -62,6 +64,7 @@ export class FormModel {
 
     constructor(json?: any, data?: FormValues, readOnly: boolean = false) {
         this.readOnly = readOnly;
+
         if (json) {
             this.json = json;
 
@@ -78,7 +81,7 @@ export class FormModel {
                 return model;
             });
 
-            this.fields = this.parseContainerFields(json);
+            this.fields = this.parseRootFields(json);
 
             if (data) {
                 this.loadData(data);
@@ -89,7 +92,6 @@ export class FormModel {
                 if (field.tab) {
                     let tab = tabCache[field.tab];
                     if (tab) {
-                        // tab.fields.push(new ContainerModel(this, field.json));
                         tab.fields.push(field);
                     }
                 }
@@ -112,18 +114,21 @@ export class FormModel {
         this.validateField(field);
     }
 
-    // TODO: evaluate and cache once the form is loaded
-    private getFormFields(): FormFieldModel[] {
+    // TODO: consider evaluating and caching once the form is loaded
+    getFormFields(): FormFieldModel[] {
         let result: FormFieldModel[] = [];
 
         for (let i = 0; i < this.fields.length; i++) {
-            let container = this.fields[i];
-            for (let j = 0; j < container.columns.length; j++) {
-                let column = container.columns[j];
-                for (let k = 0; k < column.fields.length; k++) {
-                    let field = column.fields[k];
-                    result.push(field);
-                }
+            let field = this.fields[i];
+
+            if (field.type === FormFieldTypes.CONTAINER) {
+                let container = <ContainerModel> field;
+                result.push(...container.getFormFields());
+            }
+
+            if (field.type === FormFieldTypes.DYNAMIC_TABLE) {
+                let dynamicTable = <DynamicTableModel> field;
+                result.push(dynamicTable.field);
             }
         }
 
@@ -152,7 +157,8 @@ export class FormModel {
         this.validateForm();
     }
 
-    private parseContainerFields(json: any): ContainerModel[] {
+    // Activiti supports 2 types of root fields: 'container' and 'dynamic-table'.
+    private parseRootFields(json: any): FormWidgetModel[] {
         let fields = [];
 
         if (json.fields) {
@@ -161,23 +167,26 @@ export class FormModel {
             fields = json.formDefinition.fields;
         }
 
-        return fields.map(obj => new ContainerModel(this, obj));
+        let result: FormWidgetModel[] = [];
+
+        for (let field of fields) {
+            if (field.type === FormFieldTypes.CONTAINER) {
+                result.push(new ContainerModel(this, field));
+            } else if (field.type === FormFieldTypes.DYNAMIC_TABLE) {
+                result.push(new DynamicTableModel(this, field));
+            }
+        }
+
+        return result;
     }
 
     // Loads external data and overrides field values
     // Typically used when form definition and form data coming from different sources
     private loadData(data: FormValues) {
-        for (let i = 0; i < this.fields.length; i++) {
-            let container = this.fields[i];
-            for (let i = 0; i < container.columns.length; i++) {
-                let column = container.columns[i];
-                for (let i = 0; i < column.fields.length; i++) {
-                    let field = column.fields[i];
-                    if (data[field.id]) {
-                        field.json.value = data[field.id];
-                        field.value = data[field.id];
-                    }
-                }
+        for (let field of this.getFormFields()) {
+            if (data[field.id]) {
+                field.json.value = data[field.id];
+                field.value = data[field.id];
             }
         }
     }

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

@@ -28,3 +28,4 @@ export * from './tab.model';
 export * from './form-outcome.model';
 export * from './form-outcome-event.model';
 export * from './form-field-validator';
+export * from './dynamic-table.model';

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

@@ -16,7 +16,6 @@
  */
 
 import { FormWidgetModel } from './form-widget.model';
-import { ContainerModel } from './container.model';
 import { FormModel } from './form.model';
 import { WidgetVisibilityModel } from '../../../models/widget-visibility.model';
 
@@ -26,7 +25,7 @@ export class TabModel extends FormWidgetModel {
     isVisible: boolean = true;
     visibilityCondition: WidgetVisibilityModel;
 
-    fields: ContainerModel[] = [];
+    fields: FormWidgetModel[] = [];
 
     hasContent(): boolean {
         return this.fields && this.fields.length > 0;

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.css

@@ -0,0 +1,19 @@
+.dynamic-table-widget {
+    width: 100%;
+}
+
+.dynamic-table-widget__invalid .mdl-textfield__input {
+    border-color: #d50000;
+}
+
+.dynamic-table-widget__invalid .mdl-textfield__label {
+    color: #d50000;
+}
+
+.dynamic-table-widget__invalid .mdl-textfield__label:after {
+    background-color: #d50000;
+}
+
+.dynamic-table-widget__invalid .mdl-textfield__error {
+    visibility: visible !important;
+}

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html

@@ -0,0 +1,6 @@
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label dynamic-table-widget"
+     [class.dynamic-table-widget__invalid]="!field.isValid">
+     <div>{{field.name}}</div>
+     <div>DYNAMIC TABLE PLACEHOLDER</div>
+     <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
+</div>

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts

@@ -0,0 +1,30 @@
+/*!
+ * @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 } from '@angular/core';
+import { WidgetComponent } from './../widget.component';
+// import { DynamicTableModel } from './../core/index';
+
+@Component({
+    moduleId: module.id,
+    selector: 'dynamic-table-widget',
+    templateUrl: './dynamic-table.widget.html',
+    styleUrls: ['./dynamic-table.widget.css']
+})
+export class DynamicTableWidget extends WidgetComponent {
+
+}

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

@@ -34,6 +34,7 @@ import { FunctionalGroupWidget } from './functional-group/functional-group.widge
 import { PeopleWidget } from './people/people.widget';
 import { DateWidget } from './date/date.widget';
 import { AmountWidget } from './amount/amount.widget';
+import { DynamicTableWidget } from './dynamic-table/dynamic-table.widget';
 
 // core
 export * from './widget.component';
@@ -60,6 +61,7 @@ export * from './functional-group/functional-group.widget';
 export * from './people/people.widget';
 export * from './date/date.widget';
 export * from './amount/amount.widget';
+export * from './dynamic-table/dynamic-table.widget';
 
 export const WIDGET_DIRECTIVES: any[] = [
     TabsWidget,
@@ -79,5 +81,6 @@ export const WIDGET_DIRECTIVES: any[] = [
     FunctionalGroupWidget,
     PeopleWidget,
     DateWidget,
-    AmountWidget
+    AmountWidget,
+    DynamicTableWidget
 ];

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

@@ -12,10 +12,16 @@
              class="mdl-tabs__panel"
              [class.is-active]="isFirst"
              [attr.id]="tab.id">
-            <container-widget
-                *ngFor="let field of tab.fields"
-                [content]="field" (formValueChanged)="tabChanged($event);">
-            </container-widget>
+             <div *ngFor="let field of tab.fields">
+                 <div [ngSwitch]="field.type">
+                     <div *ngSwitchCase="'container'">
+                        <container-widget [content]="field" (formValueChanged)="tabChanged($event);"></container-widget>
+                     </div>
+                     <div *ngSwitchDefault>
+                        <span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
+                    </div>
+                 </div>
+             </div>
         </div>
     </div>
 </div>

ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts

@@ -37,12 +37,9 @@ export class WidgetVisibilityService {
         if (form && form.tabs && form.tabs.length > 0) {
             form.tabs.map(tabModel => this.refreshEntityVisibility(tabModel));
         }
-        if (form && form.fields.length > 0) {
-            form.fields.map(contModel => {
-                this.refreshEntityVisibility(contModel);
-                contModel.columns.map(contColModel =>
-                    contColModel.fields.map(field => this.refreshEntityVisibility(field)));
-            });
+
+        if (form) {
+            form.getFormFields().map(field => this.refreshEntityVisibility(field));
         }
     }