From cdc39759caa483d6c932dc62a4bf5daac84d5326 Mon Sep 17 00:00:00 2001 From: dhrn <14145706+dhrn@users.noreply.github.com> Date: Tue, 9 Jul 2019 16:10:27 +0530 Subject: [PATCH] [ADF-4716] Dynamic Table not working properly (regression) (#4896) * [ADF-4716] Dynamic Table not working properly (regression) [ADF-4722] Wrong date is displayed when updating row of dynamic table * removing dynamic table date added * * fix e2e --- .../dynamic-table-date-picker.e2e.ts | 7 +- .../date-cell-validator-model.ts | 7 +- .../editors/date/date.editor.html | 4 +- .../editors/date/date.editor.spec.ts | 102 ++++++++++++++---- .../dynamic-table/editors/date/date.editor.ts | 12 ++- 5 files changed, 101 insertions(+), 31 deletions(-) diff --git a/e2e/process-services/dynamic-table-date-picker.e2e.ts b/e2e/process-services/dynamic-table-date-picker.e2e.ts index 3a2ba5df73..5751d05452 100644 --- a/e2e/process-services/dynamic-table-date-picker.e2e.ts +++ b/e2e/process-services/dynamic-table-date-picker.e2e.ts @@ -67,9 +67,10 @@ describe('Dynamic Table', () => { const app = resources.Files.DYNAMIC_TABLE_APP; const randomText = { - date: 'HELLO WORLD', + date: '12/12/2012', + wrongDate: 'HELLO WORLD', dateTime: 'Test', - error: `Field 'columnDate' is required.` + error: `Invalid 'columnDate' format.` }; const rowPosition = 0; @@ -111,7 +112,7 @@ describe('Dynamic Table', () => { it('[C286279] Should be able to save row with Date field', () => { widget.dynamicTable().clickAddButton(); - widget.dynamicTable().addRandomStringOnDate(randomText.date); + widget.dynamicTable().addRandomStringOnDate(randomText.wrongDate); widget.dynamicTable().clickSaveButton(); expect(widget.dynamicTable().checkErrorMessage()).toBe(randomText.error); diff --git a/lib/core/form/components/widgets/dynamic-table/date-cell-validator-model.ts b/lib/core/form/components/widgets/dynamic-table/date-cell-validator-model.ts index 73a650b361..baae431d3b 100644 --- a/lib/core/form/components/widgets/dynamic-table/date-cell-validator-model.ts +++ b/lib/core/form/components/widgets/dynamic-table/date-cell-validator-model.ts @@ -37,7 +37,12 @@ export class DateCellValidator implements CellValidator { if (this.isSupported(column)) { const value = row.value[column.id]; - const dateValue = moment(value, 'D-M-YYYY'); + + if (!value && !column.required) { + return true; + } + + const dateValue = moment(value, 'YYYY-MM-DDTHH:mm:ss.SSSSZ', true); if (!dateValue.isValid()) { if (summary) { summary.isValid = false; diff --git a/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.html b/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.html index 43d556212d..b6bd7b1347 100644 --- a/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.html +++ b/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.html @@ -1,6 +1,6 @@
- + diff --git a/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.spec.ts b/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.spec.ts index 7c4b57a5cc..d1c8b782c4 100644 --- a/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.spec.ts +++ b/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.spec.ts @@ -16,15 +16,16 @@ */ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import moment from 'moment-es6'; import { FormFieldModel, FormModel } from '../../../index'; -import { DynamicTableColumn } from './../../dynamic-table-column.model'; -import { DynamicTableRow } from './../../dynamic-table-row.model'; +import { DynamicTableColumn } from './../../dynamic-table-column.model'; +import { DynamicTableRow } from './../../dynamic-table-row.model'; import { DynamicTableModel } from './../../dynamic-table.widget.model'; import { DateEditorComponent } from './date.editor'; import { setupTestBed } from '../../../../../../testing/setupTestBed'; import { CoreModule } from '../../../../../../core.module'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { By } from '@angular/platform-browser'; +import { MatDatepickerInputEvent } from '@angular/material'; describe('DateEditorComponent', () => { let component: DateEditorComponent; @@ -59,31 +60,90 @@ describe('DateEditorComponent', () => { expect(fixture.componentInstance instanceof DateEditorComponent).toBe(true, 'should create DateEditorComponent'); }); - it('should update fow value on change', () => { - component.ngOnInit(); - const newDate = moment('14-03-1879', 'DD-MM-YYYY'); - component.onDateChanged(newDate); - expect(row.value[column.id]).toBe('1879-03-14T00:00:00.000Z'); + describe('using Date Piker', () => { + it('should update row value on change', () => { + const input = > {value: '14-03-2016' }; + + component.ngOnInit(); + component.onDateChanged(input); + + const 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(); + const input = > {value: '14-03-2016' }; + + component.ngOnInit(); + component.onDateChanged(input); + + expect(table.flushValue).toHaveBeenCalled(); + }); }); - it('should update row value upon user input', () => { - const input = {value: '14-03-2016' }; + describe('user manual input', () => { - component.ngOnInit(); - component.onDateChanged(input); + beforeEach(() => { + spyOn(component, 'onDateChanged').and.callThrough(); + spyOn(table, 'flushValue').and.callThrough(); + }); - const actual = row.value[column.id]; - expect(actual).toBe('2016-03-14T00:00:00.000Z'); - }); + it('should update row value upon user input', () => { + const inputElement = fixture.debugElement.query(By.css('input')); + inputElement.nativeElement.value = '14-03-1879'; + inputElement.nativeElement.dispatchEvent(new Event('focusout')); + fixture.detectChanges(); - it('should flush value on user input', () => { - spyOn(table, 'flushValue').and.callThrough(); - const input = {value: '14-03-2016' }; + expect(component.onDateChanged).toHaveBeenCalled(); + const actual = row.value[column.id]; + expect(actual).toBe('1879-03-14T00:00:00.000Z'); + }); - component.ngOnInit(); - component.onDateChanged(input); + it('should flush value on user input', () => { + const inputElement = fixture.debugElement.query(By.css('input')); + inputElement.nativeElement.value = '14-03-1879'; + inputElement.nativeElement.dispatchEvent(new Event('focusout')); + fixture.detectChanges(); + + expect(table.flushValue).toHaveBeenCalled(); + }); + + it('should not flush value when user input is wrong', () => { + const inputElement = fixture.debugElement.query(By.css('input')); + inputElement.nativeElement.value = 'ab-bc-de'; + inputElement.nativeElement.dispatchEvent(new Event('focusout')); + + fixture.detectChanges(); + expect(table.flushValue).not.toHaveBeenCalled(); + + inputElement.nativeElement.value = '12'; + inputElement.nativeElement.dispatchEvent(new Event('focusout')); + fixture.detectChanges(); + expect(table.flushValue).not.toHaveBeenCalled(); + + inputElement.nativeElement.value = '12-11'; + inputElement.nativeElement.dispatchEvent(new Event('focusout')); + fixture.detectChanges(); + expect(table.flushValue).not.toHaveBeenCalled(); + + inputElement.nativeElement.value = '12-13-12'; + inputElement.nativeElement.dispatchEvent(new Event('focusout')); + fixture.detectChanges(); + expect(table.flushValue).not.toHaveBeenCalled(); + }); + + it('should remove the date when user removes manually', () => { + const inputElement = fixture.debugElement.query(By.css('input')); + inputElement.nativeElement.value = ''; + inputElement.nativeElement.dispatchEvent(new Event('focusout')); + fixture.detectChanges(); + + expect(component.onDateChanged).toHaveBeenCalled(); + const actual = row.value[column.id]; + expect(actual).toBe(''); + }); - expect(table.flushValue).toHaveBeenCalled(); }); }); diff --git a/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.ts b/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.ts index 1d7129e5d9..b6b58e3c1c 100644 --- a/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.ts +++ b/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.ts @@ -22,7 +22,7 @@ import { UserPreferencesService, UserPreferenceValues } from '../../../../../../ import { MomentDateAdapter } from '../../../../../../utils/momentDateAdapter'; import { MOMENT_DATE_FORMATS } from '../../../../../../utils/moment-date-formats.model'; import { Component, Input, OnInit } from '@angular/core'; -import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material'; +import { DateAdapter, MAT_DATE_FORMATS, MatDatepickerInputEvent } from '@angular/material'; import moment from 'moment-es6'; import { Moment } from 'moment'; import { DynamicTableColumn } from './../../dynamic-table-column.model'; @@ -67,19 +67,23 @@ export class DateEditorComponent implements OnInit { const momentDateAdapter = this.dateAdapter; momentDateAdapter.overrideDisplayFormat = this.DATE_FORMAT; - this.value = moment(this.table.getCellValue(this.row, this.column), 'YYYY-MM-DD'); + this.value = moment(this.table.getCellValue(this.row, this.column), this.DATE_FORMAT); } - onDateChanged(newDateValue) { + onDateChanged(newDateValue: MatDatepickerInputEvent | HTMLInputElement) { if (newDateValue && newDateValue.value) { + /* validates the user inputs */ const momentDate = moment(newDateValue.value, this.DATE_FORMAT, true); if (!momentDate.isValid()) { - this.row.value[this.column.id] = ''; + this.row.value[this.column.id] = newDateValue.value; } else { this.row.value[this.column.id] = `${momentDate.format('YYYY-MM-DD')}T00:00:00.000Z`; this.table.flushValue(); } + } else { + /* removes the date */ + this.row.value[this.column.id] = ''; } }