From 9c44bd642023782cf14d89b8eaa4fffe8e324069 Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Mon, 29 Jul 2019 14:58:24 +0300 Subject: [PATCH 1/9] fix(datePicker): Add onValueChanged to handle input changes #5437 --- .../src/lib/date-picker/README.md | 3 +- .../date-picker/date-picker.component.spec.ts | 51 ++++++++++++------ .../lib/date-picker/date-picker.component.ts | 53 +++++++++++++++++-- .../src/lib/grids/cell.component.html | 2 +- .../src/lib/grids/grid/cell.spec.ts | 47 ++++++++++++++++ .../grids/tree-grid/tree-cell.component.html | 2 +- 6 files changed, 137 insertions(+), 21 deletions(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/README.md b/projects/igniteui-angular/src/lib/date-picker/README.md index 34129688591..0cc8ea83a47 100644 --- a/projects/igniteui-angular/src/lib/date-picker/README.md +++ b/projects/igniteui-angular/src/lib/date-picker/README.md @@ -81,7 +81,7 @@ In order to re-template a date picker in `dropdown` mode, you should pass the dr ```html - + @@ -137,6 +137,7 @@ The DatePicker action buttons could be retemplated. | `onClose` | `datePicker` | Emitted when a datePicker calendar is being closed. | | `onDisabledDate` | `IDatePickerDisabledDateEventArgs` | Emitted when a disabled date is entered in `dropdown` mode. | | `onValidationFailed` | `IDatePickerValidationFailedEventArgs` | Emitted when an invalid date is entered in `dropdown` mode. | +| `onValueChanged` | `IDatePickerValueChangedEventArgs` | Fired when date picker value is changed | ### Methods | Name | Arguments | Return Type | Description | diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts index 5a191923116..c9382fafc4b 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts @@ -3,7 +3,7 @@ import { async, fakeAsync, TestBed, tick, flush, ComponentFixture } from '@angul import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { IgxDatePickerComponent, IgxDatePickerModule } from './date-picker.component'; +import { IgxDatePickerComponent, IgxDatePickerModule, IDatePickerValueChangedEventArgs } from './date-picker.component'; import { IgxLabelDirective } from '../directives/label/label.directive'; import { IgxInputDirective } from '../directives/input/input.directive'; import { UIInteractions, wait } from '../test-utils/ui-interactions.spec'; @@ -74,15 +74,15 @@ describe('IgxDatePicker', () => { const dom = fixture.debugElement; const target = dom.query(By.css('.igx-date-picker__input-date')); - spyOn(datePicker.onOpen, 'emit'); - spyOn(datePicker.onClose, 'emit'); + spyOn(datePicker.onOpened, 'emit'); + spyOn(datePicker.onClosed, 'emit'); UIInteractions.clickElement(target); fixture.detectChanges(); await wait(); - expect(datePicker.onOpen.emit).toHaveBeenCalled(); - expect(datePicker.onOpen.emit).toHaveBeenCalledWith(datePicker); + expect(datePicker.onOpened.emit).toHaveBeenCalled(); + expect(datePicker.onOpened.emit).toHaveBeenCalledWith(datePicker); const overlayDiv = document.getElementsByClassName('igx-overlay__wrapper--modal')[0]; expect(overlayDiv).toBeDefined(); @@ -92,17 +92,24 @@ describe('IgxDatePicker', () => { fixture.detectChanges(); await wait(); - expect(datePicker.onClose.emit).toHaveBeenCalled(); - expect(datePicker.onClose.emit).toHaveBeenCalledWith(datePicker); + expect(datePicker.onClosed.emit).toHaveBeenCalled(); + expect(datePicker.onClosed.emit).toHaveBeenCalledWith(datePicker); }); - it('Datepicker onSelection event and selectDate method propagation', () => { + it('Datepicker onSelection and onValueChanged events and selectDate method propagation', () => { spyOn(datePicker.onSelection, 'emit'); + spyOn(datePicker.onValueChanged, 'emit'); const newDate: Date = new Date(2016, 4, 6); + const valueChangedArgs: IDatePickerValueChangedEventArgs = { + oldValue: datePicker.value, + newValue: newDate + }; datePicker.selectDate(newDate); fixture.detectChanges(); expect(datePicker.onSelection.emit).toHaveBeenCalled(); + expect(datePicker.onValueChanged.emit).toHaveBeenCalled(); + expect(datePicker.onValueChanged.emit).toHaveBeenCalledWith(valueChangedArgs); expect(datePicker.value).toBe(newDate); }); @@ -611,15 +618,15 @@ describe('IgxDatePicker', () => { const iconDate = dom.query(By.css('.igx-icon')); expect(iconDate).not.toBeNull(); - spyOn(datePicker.onOpen, 'emit'); - spyOn(datePicker.onClose, 'emit'); + spyOn(datePicker.onOpened, 'emit'); + spyOn(datePicker.onClosed, 'emit'); UIInteractions.clickElement(iconDate); fixture.detectChanges(); await wait(); - expect(datePicker.onOpen.emit).toHaveBeenCalled(); - expect(datePicker.onOpen.emit).toHaveBeenCalledWith(datePicker); + expect(datePicker.onOpened.emit).toHaveBeenCalled(); + expect(datePicker.onOpened.emit).toHaveBeenCalledWith(datePicker); const dropDown = document.getElementsByClassName('igx-date-picker--dropdown'); expect(dropDown.length).toBe(1); @@ -630,8 +637,8 @@ describe('IgxDatePicker', () => { fixture.detectChanges(); await wait(); - expect(datePicker.onClose.emit).toHaveBeenCalled(); - expect(datePicker.onClose.emit).toHaveBeenCalledWith(datePicker); + expect(datePicker.onClosed.emit).toHaveBeenCalled(); + expect(datePicker.onClosed.emit).toHaveBeenCalledWith(datePicker); }); it('Handling keyboard navigation with `space`(open) and `esc`(close) buttons - dropdown mode', fakeAsync(() => { @@ -677,13 +684,20 @@ describe('IgxDatePicker', () => { expect(overlays.length).toEqual(0); })); - it('Datepicker onSelection event and selectDate method propagation - dropdown mode', () => { + it('Datepicker onSelection and onValueChanged events and selectDate method propagation - dropdown mode', () => { spyOn(datePicker.onSelection, 'emit'); + spyOn(datePicker.onValueChanged, 'emit'); const newDate: Date = new Date(2016, 4, 6); + const valueChangedArgs: IDatePickerValueChangedEventArgs = { + oldValue: datePicker.value, + newValue: newDate + }; datePicker.selectDate(newDate); fixture.detectChanges(); expect(datePicker.onSelection.emit).toHaveBeenCalled(); + expect(datePicker.onValueChanged.emit).toHaveBeenCalled(); + expect(datePicker.onValueChanged.emit).toHaveBeenCalledWith(valueChangedArgs); expect(datePicker.value).toBe(newDate); const input = fixture.debugElement.query(By.directive(IgxInputDirective)); @@ -923,12 +937,19 @@ describe('IgxDatePicker', () => { })); it('should reset value on clear button click - dropdown mode', () => { + spyOn(datePicker.onValueChanged, 'emit'); + const valueChangedArgs: IDatePickerValueChangedEventArgs = { + oldValue: datePicker.value, + newValue: null + }; const input = fixture.debugElement.query(By.directive(IgxInputDirective)); const dom = fixture.debugElement; const clear = dom.queryAll(By.css('.igx-icon'))[1]; UIInteractions.clickElement(clear); fixture.detectChanges(); + expect(datePicker.onValueChanged.emit).toHaveBeenCalled(); + expect(datePicker.onValueChanged.emit).toHaveBeenCalledWith(valueChangedArgs); expect(datePicker.value).toEqual(null); expect(input.nativeElement.innerText).toEqual(''); diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index 1b9a465fc6d..d0ac51eeb64 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -78,6 +78,11 @@ export interface IDatePickerValidationFailedEventArgs { prevValue: Date; } +export interface IDatePickerValueChangedEventArgs { + oldValue: Date; + newValue: Date; +} + /** * This interface is used to configure calendar format view options. */ @@ -623,6 +628,20 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor @Output() public onSelection = new EventEmitter(); + /** + *An @Output property that is fired when date picker value is changed. + *```typescript + *public valueChanged(event){ + * alert("Date picker value is changed"); + *} + *``` + *```html + * + *``` + */ + @Output() + public onValueChanged = new EventEmitter(); + /** *An @Output property that fires when the user types/spins to a disabled date in the date-picker editor. *```typescript @@ -907,6 +926,13 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor * @memberOf {@link IgxDatePickerComponent} */ public selectDate(date: Date): void { + if ((this.value && this.value.getTime()) !== (date && date.getTime())) { + const args: IDatePickerValueChangedEventArgs = { + oldValue: this.value, + newValue: date + }; + this.onValueChanged.emit(args); + } this.value = date; this.onSelection.emit(date); this._onChangeCallback(date); @@ -924,6 +950,13 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor * @memberOf {@link IgxDatePickerComponent} */ public deselectDate(): void { + if (this.value !== null) { + const args: IDatePickerValueChangedEventArgs = { + oldValue: this.value, + newValue: null + }; + this.onValueChanged.emit(args); + } this.value = null; if (this.calendar) { this.calendar.deselectDate(); @@ -1010,6 +1043,13 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor date.setMilliseconds(this.value.getMilliseconds()); } + if ((this._value && this._value.getTime()) !== (date && date.getTime())) { + const args: IDatePickerValueChangedEventArgs = { + oldValue: this.value, + newValue: date + }; + this.onValueChanged.emit(args); + } this.value = date; this.calendar.viewDate = date; this._onChangeCallback(date); @@ -1146,9 +1186,16 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor if (this.disabledDates === null || (this.disabledDates !== null && !isDateInRanges(newValue, this.disabledDates))) { - this.value = newValue; - this.invalidDate = ''; - this._onChangeCallback(newValue); + if ((this.value && this.value.getTime()) !== (newValue && newValue.getTime())) { + const args: IDatePickerValueChangedEventArgs = { + oldValue: this.value, + newValue: newValue + }; + this.onValueChanged.emit(args); + } + this.value = newValue; + this.invalidDate = ''; + this._onChangeCallback(newValue); } else { const args: IDatePickerDisabledDateEventArgs = { datePicker: this, diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html index 68d31ad4330..2eefb506b55 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/cell.component.html @@ -21,7 +21,7 @@ [igxFocus]="focused" [disableRipple]="true"> - diff --git a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts index 3970d39d414..7ce6d0e4819 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts @@ -398,6 +398,53 @@ describe('IgxGrid - Cell component', () => { expect(cell.value.getTime()).toBe(selectedDate.getTime()); }); + it('should be able to change value form date picker input-- date', () => { + const cell = grid.getCellByColumn(0, 'birthday'); + const cellDomDate = fixture.debugElement.queryAll(By.css(CELL_CSS_CLASS))[3]; + const selectedDate = new Date('04/12/2017'); + const editValue = '04/12/2017'; + + cellDomDate.triggerEventHandler('dblclick', {}); + fixture.detectChanges(); + + expect(cell.editMode).toBe(true); + const datePicker = cellDomDate.query(By.css('igx-date-picker')).componentInstance; + expect(datePicker).toBeDefined(); + + const editTemplate = cellDomDate.query(By.css('.igx-date-picker__input-date')); + UIInteractions.sendInput(editTemplate, editValue); + fixture.detectChanges(); + + expect(datePicker.value).toEqual(selectedDate); + UIInteractions.triggerKeyDownEvtUponElem('enter', cellDomDate.nativeElement, true); + fixture.detectChanges(); + + expect(cell.editMode).toBe(false); + expect(cell.value.getTime()).toEqual(selectedDate.getTime()); + }); + + it('should be able to clear value -- date', () => { + const cell = grid.getCellByColumn(0, 'birthday'); + const cellDomDate = fixture.debugElement.queryAll(By.css(CELL_CSS_CLASS))[3]; + + cellDomDate.triggerEventHandler('dblclick', {}); + fixture.detectChanges(); + + expect(cell.editMode).toBe(true); + const datePicker = cellDomDate.query(By.css('igx-date-picker')).componentInstance; + expect(datePicker).toBeDefined(); + + const clear = cellDomDate.queryAll(By.css('.igx-icon'))[1]; + UIInteractions.clickElement(clear); + + expect(datePicker.value).toBeNull(); + UIInteractions.triggerKeyDownEvtUponElem('enter', cellDomDate.nativeElement, true); + fixture.detectChanges(); + + expect(cell.editMode).toBe(false); + expect(cell.value).toBeNull(); + }); + it('should exit edit mode on filtering', () => { let cell = grid.getCellByColumn(0, 'fullName'); const cellDom = fixture.debugElement.queryAll(By.css(CELL_CSS_CLASS))[0]; diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html index 16fd0de224e..a853a4396fe 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html @@ -20,7 +20,7 @@ - From 8627855e5f9f925289d725a750d74b496d773ab2 Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Mon, 29 Jul 2019 15:08:39 +0300 Subject: [PATCH 2/9] chore(*): update change log --- CHANGELOG.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5714e114584..e4e0f2cfcb6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,7 +15,7 @@ All notable changes for each version of this project will be documented in this - **Behavioral Change** - paging now includes the group rows in the page size. You may find more information about the change in the [GroupBy Specification](https://github.com/IgniteUI/igniteui-angular/wiki/Group-By-Specification) - `IgxColumnGroup` - Re-templating the column group header is now possible using the `headerTemplate` input property or the `igxHeader` directive. - - `igx-grid-footer` + - `igx-grid-footer` - You can use this to insert a custom footer in the grids. ```html @@ -37,25 +37,27 @@ All notable changes for each version of this project will be documented in this - `IgxCombo` - Input `[overlaySettings]` - allows an object of type `OverlaySettings` to be passed. These custom overlay settings control how the drop-down list displays. - `IgxForOf` now offers usage of local variables `even`, `odd`, `first` and `last` to help with the distinction of the currently iterated element. +- `IgxDatePicker` + - `onValueChanged` event is added. ## 8.0.2 - `igx-list-theme` now have some new parameters for styling. - - $item-background-hover - Change The list item hover background + - $item-background-hover - Change The list item hover background - $item-text-color-hover - Change The list item hover text color. - + - $item-subtitle-color - Change The list item subtitle color. - $item-subtitle-color-hover - Change The list item hover subtitle color. - $item-subtitle-color-active - Change The active list item subtitle color. - + - $item-action-color - Change The list item actions color. - $item-action-color-hover - Change The list item hover actions color. - $item-action-color-active - Change The active list item actions color. - + - $item-thumbnail-color - Change The list item thumbnail color. - $item-thumbnail-color-hover - Change The list item hover thumbnail color. - $item-thumbnail-color-active - Change The active list item thumbnail color. - + - **Behavioral Change** default min column width is changed according the grid display density property: - for `DisplayDensity.comfortable` defaultMinWidth is `80px`; - for `DisplayDensity.cosy` defaultMinWidth is `64px`; From d6c5f51225a73b0f966088a5884e82e20d27cffb Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Mon, 29 Jul 2019 16:03:40 +0300 Subject: [PATCH 3/9] fix(datepicker): change event to be called after the setting of value #5437 --- .../lib/date-picker/date-picker.component.ts | 37 +++++++++++-------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index d0ac51eeb64..bda7a5a9ca9 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -926,14 +926,15 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor * @memberOf {@link IgxDatePickerComponent} */ public selectDate(date: Date): void { - if ((this.value && this.value.getTime()) !== (date && date.getTime())) { + const oldValue = this.value; + this.value = date; + if ((this.value && this.value.getTime()) !== (oldValue && oldValue.getTime())) { const args: IDatePickerValueChangedEventArgs = { - oldValue: this.value, - newValue: date + oldValue: oldValue, + newValue: this.value }; this.onValueChanged.emit(args); } - this.value = date; this.onSelection.emit(date); this._onChangeCallback(date); } @@ -950,14 +951,15 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor * @memberOf {@link IgxDatePickerComponent} */ public deselectDate(): void { - if (this.value !== null) { + const oldValue = this.value; + this.value = null; + if (oldValue !== null) { const args: IDatePickerValueChangedEventArgs = { - oldValue: this.value, - newValue: null + oldValue: oldValue, + newValue: this.value }; this.onValueChanged.emit(args); } - this.value = null; if (this.calendar) { this.calendar.deselectDate(); } @@ -1042,15 +1044,16 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor date.setSeconds(this.value.getSeconds()); date.setMilliseconds(this.value.getMilliseconds()); } + const oldValue = this.value; + this.value = date; - if ((this._value && this._value.getTime()) !== (date && date.getTime())) { + if ((this.value && this.value.getTime()) !== (oldValue && oldValue.getTime())) { const args: IDatePickerValueChangedEventArgs = { - oldValue: this.value, - newValue: date + oldValue: oldValue, + newValue: this.value }; this.onValueChanged.emit(args); } - this.value = date; this.calendar.viewDate = date; this._onChangeCallback(date); this.closeCalendar(); @@ -1186,14 +1189,16 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor if (this.disabledDates === null || (this.disabledDates !== null && !isDateInRanges(newValue, this.disabledDates))) { - if ((this.value && this.value.getTime()) !== (newValue && newValue.getTime())) { + const oldValue = this.value; + this.value = newValue; + + if ((this.value && this.value.getTime()) !== (oldValue && oldValue.getTime())) { const args: IDatePickerValueChangedEventArgs = { - oldValue: this.value, - newValue: newValue + oldValue: oldValue, + newValue: this.value }; this.onValueChanged.emit(args); } - this.value = newValue; this.invalidDate = ''; this._onChangeCallback(newValue); } else { From bcd7c10bb6f2b46f8a99faa398ac488636433a5b Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Tue, 30 Jul 2019 15:43:11 +0300 Subject: [PATCH 4/9] refactor(date-picker): Address review comments --- .../lib/date-picker/date-picker.component.ts | 53 ++++++++----------- .../src/lib/grids/cell.component.html | 2 +- .../grids/tree-grid/tree-cell.component.html | 2 +- 3 files changed, 24 insertions(+), 33 deletions(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index bda7a5a9ca9..260579ca23d 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -51,7 +51,7 @@ import { } from './date-picker.utils'; import { DatePickerDisplayValuePipe, DatePickerInputValuePipe } from './date-picker.pipes'; import { IDatePicker } from './date-picker.common'; -import { KEYS, CancelableBrowserEventArgs, isIE } from '../core/utils'; +import { KEYS, CancelableBrowserEventArgs, isIE, isEqual } from '../core/utils'; import { IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective } from './date-picker.directives'; import { IgxCalendarContainerComponent } from './calendar-container.component'; import { InteractionMode } from '../core/enums'; @@ -78,6 +78,10 @@ export interface IDatePickerValidationFailedEventArgs { prevValue: Date; } +/** + * This interface is used to provide information about date picker old and new value + * when valueChange event is fired. + */ export interface IDatePickerValueChangedEventArgs { oldValue: Date; newValue: Date; @@ -636,11 +640,11 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor *} *``` *```html - * + * *``` */ @Output() - public onValueChanged = new EventEmitter(); + public valueChange = new EventEmitter(); /** *An @Output property that fires when the user types/spins to a disabled date in the date-picker editor. @@ -928,13 +932,8 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor public selectDate(date: Date): void { const oldValue = this.value; this.value = date; - if ((this.value && this.value.getTime()) !== (oldValue && oldValue.getTime())) { - const args: IDatePickerValueChangedEventArgs = { - oldValue: oldValue, - newValue: this.value - }; - this.onValueChanged.emit(args); - } + + this.emitValueChangeEvent(oldValue, this.value ); this.onSelection.emit(date); this._onChangeCallback(date); } @@ -953,13 +952,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor public deselectDate(): void { const oldValue = this.value; this.value = null; - if (oldValue !== null) { - const args: IDatePickerValueChangedEventArgs = { - oldValue: oldValue, - newValue: this.value - }; - this.onValueChanged.emit(args); - } + this.emitValueChangeEvent(oldValue, this.value ); if (this.calendar) { this.calendar.deselectDate(); } @@ -1047,13 +1040,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor const oldValue = this.value; this.value = date; - if ((this.value && this.value.getTime()) !== (oldValue && oldValue.getTime())) { - const args: IDatePickerValueChangedEventArgs = { - oldValue: oldValue, - newValue: this.value - }; - this.onValueChanged.emit(args); - } + this.emitValueChangeEvent(oldValue, this.value ); this.calendar.viewDate = date; this._onChangeCallback(date); this.closeCalendar(); @@ -1171,6 +1158,16 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor } } + private emitValueChangeEvent(oldValue: Date, newValue: Date) { + if (!isEqual(oldValue, newValue)) { + const args: IDatePickerValueChangedEventArgs = { + oldValue: oldValue, + newValue: newValue + }; + this.valueChange.emit(args); + } + } + private calculateDate(dateString: string, invokedByEvent: string): void { if (dateString !== '') { const prevDateValue = this.value; @@ -1192,13 +1189,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor const oldValue = this.value; this.value = newValue; - if ((this.value && this.value.getTime()) !== (oldValue && oldValue.getTime())) { - const args: IDatePickerValueChangedEventArgs = { - oldValue: oldValue, - newValue: this.value - }; - this.onValueChanged.emit(args); - } + this.emitValueChangeEvent(oldValue, this.value ); this.invalidDate = ''; this._onChangeCallback(newValue); } else { diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html index 2eefb506b55..0967cafe08f 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/cell.component.html @@ -21,7 +21,7 @@ [igxFocus]="focused" [disableRipple]="true"> - diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html index a853a4396fe..5f702c6acf8 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html @@ -20,7 +20,7 @@ - From 59ca22156e723afa7b78877d6fd7c955f45b7eb2 Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Tue, 30 Jul 2019 16:00:31 +0300 Subject: [PATCH 5/9] refactor(date-picker): Update change log and readme --- CHANGELOG.md | 2 +- projects/igniteui-angular/src/lib/date-picker/README.md | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e4e0f2cfcb6..667ca54d507 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -38,7 +38,7 @@ All notable changes for each version of this project will be documented in this - Input `[overlaySettings]` - allows an object of type `OverlaySettings` to be passed. These custom overlay settings control how the drop-down list displays. - `IgxForOf` now offers usage of local variables `even`, `odd`, `first` and `last` to help with the distinction of the currently iterated element. - `IgxDatePicker` - - `onValueChanged` event is added. + - `valueChange` event is added. ## 8.0.2 diff --git a/projects/igniteui-angular/src/lib/date-picker/README.md b/projects/igniteui-angular/src/lib/date-picker/README.md index 0cc8ea83a47..bba3a570e16 100644 --- a/projects/igniteui-angular/src/lib/date-picker/README.md +++ b/projects/igniteui-angular/src/lib/date-picker/README.md @@ -133,11 +133,12 @@ The DatePicker action buttons could be retemplated. | Name | Return Type | Description | |:--:|:---|:---| | `onSelection` | `Date` | Fired when selection is made in the calendar. The event contains the selected value(s) based on the type of selection the component is set to | -| `onOpen` | `datePicker` | Emitted when a datePicker calendar is being opened. | -| `onClose` | `datePicker` | Emitted when a datePicker calendar is being closed. | +| `onOpened` | `datePicker` | Emitted when a datePicker calendar is being opened. | +| `onClosed` | `datePicker` | An event that is emitted after the calendar is closed. | +| `onClosing` | `datePicker` | An event that is emitted when the calendar is being closed | | `onDisabledDate` | `IDatePickerDisabledDateEventArgs` | Emitted when a disabled date is entered in `dropdown` mode. | | `onValidationFailed` | `IDatePickerValidationFailedEventArgs` | Emitted when an invalid date is entered in `dropdown` mode. | -| `onValueChanged` | `IDatePickerValueChangedEventArgs` | Fired when date picker value is changed | +| `valueChange` | `IDatePickerValueChangedEventArgs` | Fired when date picker value is changed | ### Methods | Name | Arguments | Return Type | Description | From fc2608d107a48beddb6bfd470a50548b9fae788c Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Tue, 30 Jul 2019 16:13:23 +0300 Subject: [PATCH 6/9] chore(*): update failing tests --- .../date-picker/date-picker.component.spec.ts | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts index c9382fafc4b..c4a15356e3a 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts @@ -96,9 +96,9 @@ describe('IgxDatePicker', () => { expect(datePicker.onClosed.emit).toHaveBeenCalledWith(datePicker); }); - it('Datepicker onSelection and onValueChanged events and selectDate method propagation', () => { + it('Datepicker onSelection and valueChange events and selectDate method propagation', () => { spyOn(datePicker.onSelection, 'emit'); - spyOn(datePicker.onValueChanged, 'emit'); + spyOn(datePicker.valueChange, 'emit'); const newDate: Date = new Date(2016, 4, 6); const valueChangedArgs: IDatePickerValueChangedEventArgs = { oldValue: datePicker.value, @@ -108,8 +108,8 @@ describe('IgxDatePicker', () => { fixture.detectChanges(); expect(datePicker.onSelection.emit).toHaveBeenCalled(); - expect(datePicker.onValueChanged.emit).toHaveBeenCalled(); - expect(datePicker.onValueChanged.emit).toHaveBeenCalledWith(valueChangedArgs); + expect(datePicker.valueChange.emit).toHaveBeenCalled(); + expect(datePicker.valueChange.emit).toHaveBeenCalledWith(valueChangedArgs); expect(datePicker.value).toBe(newDate); }); @@ -684,9 +684,9 @@ describe('IgxDatePicker', () => { expect(overlays.length).toEqual(0); })); - it('Datepicker onSelection and onValueChanged events and selectDate method propagation - dropdown mode', () => { + it('Datepicker onSelection and valueChange events and selectDate method propagation - dropdown mode', () => { spyOn(datePicker.onSelection, 'emit'); - spyOn(datePicker.onValueChanged, 'emit'); + spyOn(datePicker.valueChange, 'emit'); const newDate: Date = new Date(2016, 4, 6); const valueChangedArgs: IDatePickerValueChangedEventArgs = { oldValue: datePicker.value, @@ -696,8 +696,8 @@ describe('IgxDatePicker', () => { fixture.detectChanges(); expect(datePicker.onSelection.emit).toHaveBeenCalled(); - expect(datePicker.onValueChanged.emit).toHaveBeenCalled(); - expect(datePicker.onValueChanged.emit).toHaveBeenCalledWith(valueChangedArgs); + expect(datePicker.valueChange.emit).toHaveBeenCalled(); + expect(datePicker.valueChange.emit).toHaveBeenCalledWith(valueChangedArgs); expect(datePicker.value).toBe(newDate); const input = fixture.debugElement.query(By.directive(IgxInputDirective)); @@ -937,7 +937,7 @@ describe('IgxDatePicker', () => { })); it('should reset value on clear button click - dropdown mode', () => { - spyOn(datePicker.onValueChanged, 'emit'); + spyOn(datePicker.valueChange, 'emit'); const valueChangedArgs: IDatePickerValueChangedEventArgs = { oldValue: datePicker.value, newValue: null @@ -948,8 +948,8 @@ describe('IgxDatePicker', () => { UIInteractions.clickElement(clear); fixture.detectChanges(); - expect(datePicker.onValueChanged.emit).toHaveBeenCalled(); - expect(datePicker.onValueChanged.emit).toHaveBeenCalledWith(valueChangedArgs); + expect(datePicker.valueChange.emit).toHaveBeenCalled(); + expect(datePicker.valueChange.emit).toHaveBeenCalledWith(valueChangedArgs); expect(datePicker.value).toEqual(null); expect(input.nativeElement.innerText).toEqual(''); From 41716c981267fd3ba1e21af5a0de178012effca5 Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Tue, 30 Jul 2019 18:43:48 +0300 Subject: [PATCH 7/9] fix(date-picker): Update valueChange to return only new value #5437 --- .../date-picker/date-picker.component.spec.ts | 22 +++++-------------- .../lib/date-picker/date-picker.component.ts | 17 ++------------ .../src/lib/grids/cell.component.html | 4 ++-- .../grids/tree-grid/tree-cell.component.html | 4 ++-- 4 files changed, 11 insertions(+), 36 deletions(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts index c4a15356e3a..11bdb276ec5 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts @@ -100,16 +100,12 @@ describe('IgxDatePicker', () => { spyOn(datePicker.onSelection, 'emit'); spyOn(datePicker.valueChange, 'emit'); const newDate: Date = new Date(2016, 4, 6); - const valueChangedArgs: IDatePickerValueChangedEventArgs = { - oldValue: datePicker.value, - newValue: newDate - }; - datePicker.selectDate(newDate); + datePicker.selectDate(newDate); fixture.detectChanges(); expect(datePicker.onSelection.emit).toHaveBeenCalled(); expect(datePicker.valueChange.emit).toHaveBeenCalled(); - expect(datePicker.valueChange.emit).toHaveBeenCalledWith(valueChangedArgs); + expect(datePicker.valueChange.emit).toHaveBeenCalledWith(newDate); expect(datePicker.value).toBe(newDate); }); @@ -688,16 +684,12 @@ describe('IgxDatePicker', () => { spyOn(datePicker.onSelection, 'emit'); spyOn(datePicker.valueChange, 'emit'); const newDate: Date = new Date(2016, 4, 6); - const valueChangedArgs: IDatePickerValueChangedEventArgs = { - oldValue: datePicker.value, - newValue: newDate - }; datePicker.selectDate(newDate); fixture.detectChanges(); expect(datePicker.onSelection.emit).toHaveBeenCalled(); expect(datePicker.valueChange.emit).toHaveBeenCalled(); - expect(datePicker.valueChange.emit).toHaveBeenCalledWith(valueChangedArgs); + expect(datePicker.valueChange.emit).toHaveBeenCalledWith(newDate); expect(datePicker.value).toBe(newDate); const input = fixture.debugElement.query(By.directive(IgxInputDirective)); @@ -938,18 +930,14 @@ describe('IgxDatePicker', () => { it('should reset value on clear button click - dropdown mode', () => { spyOn(datePicker.valueChange, 'emit'); - const valueChangedArgs: IDatePickerValueChangedEventArgs = { - oldValue: datePicker.value, - newValue: null - }; - const input = fixture.debugElement.query(By.directive(IgxInputDirective)); + const input = fixture.debugElement.query(By.directive(IgxInputDirective)); const dom = fixture.debugElement; const clear = dom.queryAll(By.css('.igx-icon'))[1]; UIInteractions.clickElement(clear); fixture.detectChanges(); expect(datePicker.valueChange.emit).toHaveBeenCalled(); - expect(datePicker.valueChange.emit).toHaveBeenCalledWith(valueChangedArgs); + expect(datePicker.valueChange.emit).toHaveBeenCalledWith(null); expect(datePicker.value).toEqual(null); expect(input.nativeElement.innerText).toEqual(''); diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index 260579ca23d..037e27d224c 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -78,15 +78,6 @@ export interface IDatePickerValidationFailedEventArgs { prevValue: Date; } -/** - * This interface is used to provide information about date picker old and new value - * when valueChange event is fired. - */ -export interface IDatePickerValueChangedEventArgs { - oldValue: Date; - newValue: Date; -} - /** * This interface is used to configure calendar format view options. */ @@ -644,7 +635,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor *``` */ @Output() - public valueChange = new EventEmitter(); + public valueChange = new EventEmitter(); /** *An @Output property that fires when the user types/spins to a disabled date in the date-picker editor. @@ -1160,11 +1151,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor private emitValueChangeEvent(oldValue: Date, newValue: Date) { if (!isEqual(oldValue, newValue)) { - const args: IDatePickerValueChangedEventArgs = { - oldValue: oldValue, - newValue: newValue - }; - this.valueChange.emit(args); + this.valueChange.emit(newValue); } } diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html index 0967cafe08f..943f236bf00 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/cell.component.html @@ -21,8 +21,8 @@ [igxFocus]="focused" [disableRipple]="true"> - + diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html index 5f702c6acf8..9b95cc45005 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html @@ -20,8 +20,8 @@ - + From e76bc45ed095f4974d96e9b9c5754893d0eabbd4 Mon Sep 17 00:00:00 2001 From: Damyan Petev Date: Wed, 31 Jul 2019 08:41:39 +0300 Subject: [PATCH 8/9] docs(datepicker): update changelog version, readme prop types --- CHANGELOG.md | 8 ++++++-- projects/igniteui-angular/src/lib/date-picker/README.md | 8 ++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 667ca54d507..c0c86a271d7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes for each version of this project will be documented in this file. +## 8.1.2 + +### New Features +- `IgxDatePicker` + - `valueChange` event is added. + ## 8.1.0 ### New Features @@ -37,8 +43,6 @@ All notable changes for each version of this project will be documented in this - `IgxCombo` - Input `[overlaySettings]` - allows an object of type `OverlaySettings` to be passed. These custom overlay settings control how the drop-down list displays. - `IgxForOf` now offers usage of local variables `even`, `odd`, `first` and `last` to help with the distinction of the currently iterated element. -- `IgxDatePicker` - - `valueChange` event is added. ## 8.0.2 diff --git a/projects/igniteui-angular/src/lib/date-picker/README.md b/projects/igniteui-angular/src/lib/date-picker/README.md index bba3a570e16..29265dcaff8 100644 --- a/projects/igniteui-angular/src/lib/date-picker/README.md +++ b/projects/igniteui-angular/src/lib/date-picker/README.md @@ -133,12 +133,12 @@ The DatePicker action buttons could be retemplated. | Name | Return Type | Description | |:--:|:---|:---| | `onSelection` | `Date` | Fired when selection is made in the calendar. The event contains the selected value(s) based on the type of selection the component is set to | -| `onOpened` | `datePicker` | Emitted when a datePicker calendar is being opened. | -| `onClosed` | `datePicker` | An event that is emitted after the calendar is closed. | -| `onClosing` | `datePicker` | An event that is emitted when the calendar is being closed | +| `onOpened` | `datePicker` | Emitted when a datePicker calendar is opened. | +| `onClosed` | `datePicker` | Emitted when a datePicker calendar is closed. | +| `onClosing` | `CancelableBrowserEventArgs` | Emitted when a datePicker calendar is being closed. | | `onDisabledDate` | `IDatePickerDisabledDateEventArgs` | Emitted when a disabled date is entered in `dropdown` mode. | | `onValidationFailed` | `IDatePickerValidationFailedEventArgs` | Emitted when an invalid date is entered in `dropdown` mode. | -| `valueChange` | `IDatePickerValueChangedEventArgs` | Fired when date picker value is changed | +| `valueChange` | `Date` | Fired when date picker value is changed | ### Methods | Name | Arguments | Return Type | Description | From d2ff9347e1f21dea9d3e052a43d92a737755ba9b Mon Sep 17 00:00:00 2001 From: Damyan Petev Date: Wed, 31 Jul 2019 08:42:41 +0300 Subject: [PATCH 9/9] chore(datepicker): remove lefotover import in tests --- .../src/lib/date-picker/date-picker.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts index 11bdb276ec5..ae5b2bdd30c 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts @@ -3,7 +3,7 @@ import { async, fakeAsync, TestBed, tick, flush, ComponentFixture } from '@angul import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { IgxDatePickerComponent, IgxDatePickerModule, IDatePickerValueChangedEventArgs } from './date-picker.component'; +import { IgxDatePickerComponent, IgxDatePickerModule } from './date-picker.component'; import { IgxLabelDirective } from '../directives/label/label.directive'; import { IgxInputDirective } from '../directives/input/input.directive'; import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';