From 8542999f0e4e85580ebe1114794ec6019a7bd7d1 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Mon, 17 Oct 2016 17:07:34 +0100 Subject: [PATCH] Selection state for dynamic table rows - visual indication of the selected row - toggling selection of the row --- .../widgets/core/dynamic-table-row.ts | 23 +++++++++++++++ .../widgets/core/dynamic-table.model.ts | 29 +++++++++++++++++-- .../src/components/widgets/core/index.ts | 2 ++ .../dynamic-table/dynamic-table.widget.css | 5 ++++ .../dynamic-table/dynamic-table.widget.html | 8 +++-- .../dynamic-table/dynamic-table.widget.ts | 8 ++++- 6 files changed, 68 insertions(+), 7 deletions(-) create mode 100644 ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table-row.ts diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table-row.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table-row.ts new file mode 100644 index 0000000000..f6015e901b --- /dev/null +++ b/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; + +} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table.model.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table.model.ts index 35411b5732..88ca94ce66 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/dynamic-table.model.ts +++ b/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 => { selected: false, value: obj }); + } } } - } 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 2e2eecfb0b..902340e910 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 @@ -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'; diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.css b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.css index 08af04f501..7f133c4f0a 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.css +++ b/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%; } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html index b747e57d55..23ffd99b58 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html @@ -12,10 +12,12 @@ - + - {{row[column.id]}} + class="mdl-data-table__cell--non-numeric" + (click)="onRowClicked(row)"> + {{row.value[column.id]}} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts index 09898aa4a9..b0eceaf07c 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts +++ b/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; + } + } }