Selection state for dynamic table rows

- visual indication of the selected row
- toggling selection of the row

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

@@ -0,0 +1,23 @@
+/*!
+ * @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 DynamicTableRow {
+
+    selected: boolean;
+    value: any;
+
+}

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

@@ -19,13 +19,35 @@ import { FormWidgetModel } from './form-widget.model';
 import { FormModel } from './form.model';
 import { FormFieldModel } from './form-field.model';
 import { DynamicTableColumn } from './dynamic-table-column';
+import { DynamicTableRow } from './dynamic-table-row';
 
 export class DynamicTableModel extends FormWidgetModel {
 
     field: FormFieldModel;
     columns: DynamicTableColumn[] = [];
     visibleColumns: DynamicTableColumn[] = [];
-    rows: any[] = [];
+    rows: DynamicTableRow[] = [];
+
+    private _selectedRow: DynamicTableRow;
+
+    get selectedRow(): DynamicTableRow {
+        return this._selectedRow;
+    }
+
+    set selectedRow(value: DynamicTableRow) {
+        if (this._selectedRow && this._selectedRow === value) {
+            this._selectedRow.selected = false;
+            this._selectedRow = null;
+            return;
+        }
+
+        this.rows.forEach(row => row.selected = false);
+
+        if (value) {
+            this._selectedRow = value;
+            this._selectedRow.selected = true;
+        }
+    }
 
     constructor(form: FormModel, json?: any) {
         super(form, json);
@@ -38,8 +60,9 @@ export class DynamicTableModel extends FormWidgetModel {
                 this.visibleColumns = this.columns.filter(col => col.visible);
             }
 
-            this.rows = json.value || [];
+            if (json.value) {
+                this.rows = json.value.map(obj => <DynamicTableRow> { selected: false, value: obj });
+            }
         }
     }
-
 }

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

@@ -29,3 +29,5 @@ export * from './form-outcome.model';
 export * from './form-outcome-event.model';
 export * from './form-field-validator';
 export * from './dynamic-table.model';
+export * from './dynamic-table-column';
+export * from './dynamic-table-row';

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

@@ -2,6 +2,11 @@
     padding: 8px;
 }
 
+.dynamic-table-widget__row-selected,
+.dynamic-table-widget__row-selected:hover {
+    background-color: #eef !important;
+}
+
 .dynamic-table-widget__table {
     width: 100%;
 }

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

@@ -12,10 +12,12 @@
             </tr>
         </thead>
         <tbody>
-            <tr *ngFor="let row of content.rows">
+            <tr *ngFor="let row of content.rows"
+                [class.dynamic-table-widget__row-selected]="row.selected">
                 <td *ngFor="let column of content.visibleColumns"
-                    class="mdl-data-table__cell--non-numeric">
-                    {{row[column.id]}}
+                    class="mdl-data-table__cell--non-numeric"
+                    (click)="onRowClicked(row)">
+                    {{row.value[column.id]}}
                 </td>
             </tr>
         </tbody>

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

@@ -17,7 +17,7 @@
 
 import { Component, Input, OnInit } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
-import { DynamicTableModel } from './../core/index';
+import { DynamicTableModel, DynamicTableRow } from './../core/index';
 
 @Component({
     moduleId: module.id,
@@ -32,4 +32,10 @@ export class DynamicTableWidget extends WidgetComponent implements OnInit {
 
     ngOnInit() {
     }
+
+    onRowClicked(row: DynamicTableRow) {
+        if (this.content) {
+            this.content.selectedRow = row;
+        }
+    }
 }