From bc3028d789dc784561941e335d44b41ea36ed422 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Wed, 2 Nov 2016 11:48:23 +0000 Subject: [PATCH 1/4] #955 Horizontal scrollbar for dynamic table --- .../dynamic-table/dynamic-table.widget.css | 5 +++ .../dynamic-table/dynamic-table.widget.html | 42 ++++++++++--------- 2 files changed, 27 insertions(+), 20 deletions(-) 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 7f133c4f0a..140696a06f 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 @@ -8,6 +8,11 @@ } .dynamic-table-widget__table { + overflow-y: auto; + width: 100%; +} + +.dynamic-table-widget__table > 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 dd39213e6c..3a1bfc2117 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 @@ -2,26 +2,28 @@
{{content.name}}
- - - - - - - - - - - -
- {{column.name}} -
- {{ getCellValue(row, column) }} -
+
+ + + + + + + + + + + +
+ {{column.name}} +
+ {{ getCellValue(row, column) }} +
+
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.spec.ts index dedc853952..3d8e8bafe1 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.spec.ts @@ -17,7 +17,7 @@ import { ElementRef } from '@angular/core'; import { DateEditorComponent } from './date.editor'; -import { DynamicTableModel, DynamicTableRow, DynamicTableColumn/*, DynamicRowValidationSummary*/ } from './../../../core/index'; +import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './../../../core/index'; describe('DateEditorComponent', () => { @@ -54,7 +54,7 @@ describe('DateEditorComponent', () => { let settings = component.settings; expect(settings.type).toBe('date'); - expect(settings.future.year()).toBe(moment().year() + 21); + expect(settings.future.year()).toBe(moment().year() + 100); expect(settings.init.isSame(moment('14-03-1879', component.DATE_FORMAT))).toBeTruthy(); expect(component.datePicker.trigger).toBe(trigger); }); @@ -135,4 +135,38 @@ describe('DateEditorComponent', () => { expect(called).toBeTruthy(); }); + it('should update picker when input changed', () => { + const input = '14-03-2016'; + let event = { target: { value: input } }; + component.ngOnInit(); + component.onDateChanged(event); + + expect(component.datePicker.time.isSame(moment(input, 'DD-MM-YYYY'))).toBeTruthy(); + }); + + it('should update row value upon user input', () => { + const input = '14-03-2016'; + let event = { target: { value: input } }; + + component.ngOnInit(); + component.onDateChanged(event); + + let actual = row.value[column.id]; + expect(actual).toBe('2016-03-14T00:00:00.000Z'); + }); + + it('should flush value on user input', () => { + spyOn(table, 'flushValue').and.callThrough(); + let event = { target: { value: 'value' } }; + + component.ngOnInit(); + component.onDateChanged(event); + + expect(table.flushValue).toHaveBeenCalled(); + }); + + it('should not setup datepicker trigger', () => { + let component = + }); + }); diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts index 5b2b2c2ecc..fd20cbd321 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts @@ -30,6 +30,7 @@ export class DateEditorComponent extends CellEditorComponent implements OnInit { datePicker: any; settings: any; + value: any; constructor(private elementRef: ElementRef) { super(); @@ -38,12 +39,13 @@ export class DateEditorComponent extends CellEditorComponent implements OnInit { ngOnInit() { this.settings = { type: 'date', - future: moment().add(21, 'years') + past: moment().subtract(100, 'years'), + future: moment().add(100, 'years') }; - let value = this.table.getCellValue(this.row, this.column); - if (value) { - this.settings.init = moment(value, this.DATE_FORMAT); + this.value = this.table.getCellValue(this.row, this.column); + if (this.value) { + this.settings.init = moment(this.value, this.DATE_FORMAT); } this.datePicker = new mdDateTimePicker.default(this.settings); @@ -52,9 +54,18 @@ export class DateEditorComponent extends CellEditorComponent implements OnInit { } } + onDateChanged(event: any) { + let newValue = ( event.target).value; + let dateValue = moment(newValue, this.DATE_FORMAT); + this.datePicker.time = dateValue; + this.row.value[this.column.id] = `${dateValue.format('YYYY-MM-DD')}T00:00:00.000Z`; + this.table.flushValue(); + }; + onDateSelected(event: CustomEvent) { + this.value = this.datePicker.time.format('DD-MM-YYYY'); let newValue = this.datePicker.time.format('YYYY-MM-DD'); - this.row.value[this.column.id] = newValue + 'T00:00:00.000Z'; + this.row.value[this.column.id] = `${newValue}T00:00:00.000Z`; this.table.flushValue(); if (this.elementRef) { @@ -75,5 +86,4 @@ export class DateEditorComponent extends CellEditorComponent implements OnInit { } return false; } - } From 736d57cc2efe3dc17bc4a2cc4afe8ac2241b5190 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Wed, 2 Nov 2016 14:04:30 +0000 Subject: [PATCH 3/4] #971 validate and edit only editable date columns --- .../src/components/widgets/core/dynamic-table.model.ts | 2 +- .../widgets/dynamic-table/editors/date/date.editor.html | 2 +- .../widgets/dynamic-table/editors/date/date.editor.spec.ts | 4 ---- 3 files changed, 2 insertions(+), 6 deletions(-) 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 3501a31f08..ccdfcf4508 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 @@ -216,7 +216,7 @@ export class DateCellValidator implements CellValidator { ]; isSupported(column: DynamicTableColumn): boolean { - return column && this.supportedTypes.indexOf(column.type) > -1; + return column && column.editable && this.supportedTypes.indexOf(column.type) > -1; } validate(row: DynamicTableRow, column: DynamicTableColumn, summary?: DynamicRowValidationSummary): boolean { diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.html b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.html index e23712a62d..982a5e67bc 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.html @@ -13,7 +13,7 @@
-
+
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.ts b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.ts index 6435fb0fe5..8e0bdf35e3 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { CellEditorComponent } from './../cell.editor'; import { DynamicTableRow, DynamicTableColumn } from './../../../core/index'; @@ -25,7 +25,13 @@ import { DynamicTableRow, DynamicTableColumn } from './../../../core/index'; templateUrl: './text.editor.html', styleUrls: ['./text.editor.css'] }) -export class TextEditorComponent extends CellEditorComponent { +export class TextEditorComponent extends CellEditorComponent implements OnInit { + + displayName: string; + + ngOnInit() { + this.displayName = this.table.getDisplayText(this.column); + } onValueChanged(row: DynamicTableRow, column: DynamicTableColumn, event: any) { let value: any = (event.target).value;