Basic dynamic table rendering

- render visible columns
- code improvements

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

@@ -20,7 +20,7 @@
                                 <container-widget [content]="field" (formValueChanged)="checkVisibility($event);"></container-widget>
                             </div>
                             <div *ngSwitchCase="'dynamic-table'">
-                                <dynamic-table-widget [field]="field"></dynamic-table-widget>
+                                <dynamic-table-widget [content]="field"></dynamic-table-widget>
                             </div>
                             <div *ngSwitchDefault>
                                 <span>UNKNOWN WIDGET TYPE: {{field.type}}</span>

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

@@ -0,0 +1,48 @@
+/*!
+ * @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.
+ */
+
+// maps to: com.activiti.model.editor.form.ColumnDefinitionRepresentation
+export interface DynamicTableColumn {
+
+    id: string;
+    name: string;
+    type: string;
+    value: any;
+    optionType: string;
+    options: DynamicTableColumnOption[];
+    restResponsePath: string;
+    restUrl: string;
+    restIdProperty: string;
+    restLabelProperty: string;
+    amountCurrency: string;
+    amountEnableFractions: boolean;
+    required: boolean;
+    editable: boolean;
+    sortable: boolean;
+    visible: boolean;
+
+    // TODO: com.activiti.domain.idm.EndpointConfiguration.EndpointConfigurationRepresentation
+    endpoint: any;
+    // TODO: com.activiti.model.editor.form.RequestHeaderRepresentation
+    requestHeaders: any;
+}
+
+// maps to: com.activiti.model.editor.form.OptionRepresentation
+export interface DynamicTableColumnOption {
+    id: string;
+    name: string;
+}

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

@@ -18,16 +18,27 @@
 import { FormWidgetModel } from './form-widget.model';
 import { FormModel } from './form.model';
 import { FormFieldModel } from './form-field.model';
+import { DynamicTableColumn } from './dynamic-table-column';
 
 export class DynamicTableModel extends FormWidgetModel {
 
     field: FormFieldModel;
+    columns: DynamicTableColumn[] = [];
+    visibleColumns: DynamicTableColumn[] = [];
+    rows: any[] = [];
 
     constructor(form: FormModel, json?: any) {
         super(form, json);
 
         if (json) {
             this.field = new FormFieldModel(form, json);
+
+            if (json.columnDefinitions) {
+                this.columns = json.columnDefinitions.map(obj => <DynamicTableColumn> obj);
+                this.visibleColumns = this.columns.filter(col => col.visible);
+            }
+
+            this.rows = json.value || [];
         }
     }
 

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

@@ -1,4 +1,8 @@
 .dynamic-table-widget {
+    padding: 8px;
+}
+
+.dynamic-table-widget__table {
     width: 100%;
 }
 

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

@@ -1,6 +1,25 @@
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label dynamic-table-widget"
+<div class="dynamic-table-widget"
-     [class.dynamic-table-widget__invalid]="!field.isValid">
+     [class.dynamic-table-widget__invalid]="!content.isValid">
-     <div>{{field.name}}</div>
+     <div>{{content.name}}</div>
-     <div>DYNAMIC TABLE PLACEHOLDER</div>
+
-     <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
+     <table class="mdl-data-table mdl-js-data-table dynamic-table-widget__table">
+         <thead>
+            <tr>
+                <th *ngFor="let column of content.visibleColumns"
+                    class="mdl-data-table__cell--non-numeric">
+                    {{column.name}}
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let row of content.rows">
+                <td *ngFor="let column of content.visibleColumns"
+                    class="mdl-data-table__cell--non-numeric">
+                    {{row[column.id]}}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+
+     <span *ngIf="content.validationSummary" class="mdl-textfield__error">{{content.validationSummary}}</span>
 </div>

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

@@ -15,9 +15,9 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
-// import { DynamicTableModel } from './../core/index';
+import { DynamicTableModel } from './../core/index';
 
 @Component({
     moduleId: module.id,
@@ -25,6 +25,11 @@ import { WidgetComponent } from './../widget.component';
     templateUrl: './dynamic-table.widget.html',
     styleUrls: ['./dynamic-table.widget.css']
 })
-export class DynamicTableWidget extends WidgetComponent {
+export class DynamicTableWidget extends WidgetComponent implements OnInit {
 
+    @Input()
+    content: DynamicTableModel;
+
+    ngOnInit() {
+    }
 }

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

@@ -17,6 +17,9 @@
                      <div *ngSwitchCase="'container'">
                         <container-widget [content]="field" (formValueChanged)="tabChanged($event);"></container-widget>
                      </div>
+                     <div *ngSwitchCase="'dynamic-table'">
+                         <dynamic-table-widget [content]="field"></dynamic-table-widget>
+                     </div>
                      <div *ngSwitchDefault>
                         <span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
                     </div>