From 3a6c4c890969732e8a6bf387dd71be4979991d90 Mon Sep 17 00:00:00 2001 From: Adithya Sreyaj Date: Thu, 9 Dec 2021 18:39:49 +0530 Subject: [PATCH 1/5] fix(date-picker): date changes when time selected Issue caused by the timezone offset. --- .../src/datetime-picker/datetime-picker.component.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/projects/components/src/datetime-picker/datetime-picker.component.ts b/projects/components/src/datetime-picker/datetime-picker.component.ts index acc85049c..e9648de02 100644 --- a/projects/components/src/datetime-picker/datetime-picker.component.ts +++ b/projects/components/src/datetime-picker/datetime-picker.component.ts @@ -53,7 +53,9 @@ export class DatetimePickerComponent implements OnChanges { } public getInputDate(): string { - return this.date?.toISOString().slice(0, 10) ?? ''; + if (!this.date) return ''; + const d = this.date; + return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate() > 9 ? d.getDate() : `0${d.getDate()}`}`; } private getInputTime(date: Date): Time { From b192162392acd0af9b70523fc76f9220522b9275 Mon Sep 17 00:00:00 2001 From: Adithya Sreyaj Date: Thu, 9 Dec 2021 23:20:34 +0530 Subject: [PATCH 2/5] test(date-picker): add more test cases --- .../datetime-picker.component.test.ts | 50 ++++++++++++++++--- 1 file changed, 42 insertions(+), 8 deletions(-) diff --git a/projects/components/src/datetime-picker/datetime-picker.component.test.ts b/projects/components/src/datetime-picker/datetime-picker.component.test.ts index 799c8a12e..862201749 100644 --- a/projects/components/src/datetime-picker/datetime-picker.component.test.ts +++ b/projects/components/src/datetime-picker/datetime-picker.component.test.ts @@ -8,34 +8,34 @@ import { DatetimePickerComponent } from './datetime-picker.component'; describe('Date Time Picker Component', () => { let spectator: SpectatorHost; - + let onDateChangeSpy = jest.fn(); + let initDate = new Date(); const createHost = createHostFactory({ component: DatetimePickerComponent, shallow: true, declarations: [MockComponent(LabelComponent), MockComponent(InputComponent), MockComponent(TimePickerComponent)] }); - test('should render all elements correctly', () => { - const onDateChangeSpy = jest.fn(); - const date = new Date(); - + beforeEach(() => { spectator = createHost( ``, { hostProps: { - date: date, + date: initDate, showTimeTriggerIcon: false, onDateChange: onDateChangeSpy } } ); + }); + test('should render all elements correctly', () => { expect(spectator.query(LabelComponent)).not.toExist(); - expect(spectator.query(InputComponent)?.value).toEqual(date.toISOString().slice(0, 10)); + expect(spectator.query(InputComponent)?.value).toEqual(initDate.toISOString().slice(0, 10)); const timePicker = spectator.query(TimePickerComponent); expect(timePicker).toExist(); - expect(timePicker?.time).toEqual(new Time(date.getHours(), date.getMinutes())); + expect(timePicker?.time).toEqual(new Time(initDate.getHours(), initDate.getMinutes())); expect(timePicker?.showTimeTriggerIcon).toEqual(false); spectator.triggerEventHandler(InputComponent, 'valueChange', '2020-10-10'); @@ -48,4 +48,38 @@ describe('Date Time Picker Component', () => { changedDate.setMinutes(changedTime.minutes); expect(onDateChangeSpy).toHaveBeenCalledWith(changedDate); }); + + test('date should not get effected when time is updated', () => { + const validationSet = [ + { + date: new Date('2020-10-10'), + time: new Time(18, 10), + expected: '2020-10-10' + }, + { + date: new Date('2020-1-1'), + time: new Time(0, 30), + expected: '2020-01-01' + }, + { + date: new Date('2020-1-1'), + time: new Time(23, 59), + expected: '2020-01-01' + }, + { + date: new Date('2020-1-1'), + time: new Time(0, 0), + expected: '2020-01-01' + } + ]; + + validationSet.forEach(({ date, time, expected }) => { + spectator.setHostInput({ date }); + spectator.triggerEventHandler(TimePickerComponent, 'timeChange', time); + const changedDate = new Date(date.valueOf()); + changedDate.setHours(time.hours, time.minutes); + expect(onDateChangeSpy).toHaveBeenCalledWith(changedDate); + expect(spectator.component.getInputDate()).toEqual(expected); + }); + }); }); From b2448ed35dfd9030be76a8c066f66b054f0a8aa2 Mon Sep 17 00:00:00 2001 From: Adithya Sreyaj Date: Thu, 9 Dec 2021 23:20:57 +0530 Subject: [PATCH 3/5] refactor(date-picker): cleaned up code for constructing date --- .../src/datetime-picker/datetime-picker.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/projects/components/src/datetime-picker/datetime-picker.component.ts b/projects/components/src/datetime-picker/datetime-picker.component.ts index e9648de02..3571e6ea7 100644 --- a/projects/components/src/datetime-picker/datetime-picker.component.ts +++ b/projects/components/src/datetime-picker/datetime-picker.component.ts @@ -55,7 +55,10 @@ export class DatetimePickerComponent implements OnChanges { public getInputDate(): string { if (!this.date) return ''; const d = this.date; - return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate() > 9 ? d.getDate() : `0${d.getDate()}`}`; + const YEAR = d.getFullYear(); + const MONTH = d.getMonth() + 1 > 9 ? d.getMonth() + 1 : `0${d.getMonth() + 1}`; + const DATE = d.getDate() > 9 ? d.getDate() : `0${d.getDate()}`; + return `${YEAR}-${MONTH}-${DATE}`; } private getInputTime(date: Date): Time { From 58d089ecc987d4df711b884d8b93c726c1e5419c Mon Sep 17 00:00:00 2001 From: Adithya Sreyaj Date: Fri, 10 Dec 2021 00:48:23 +0530 Subject: [PATCH 4/5] fix(date-picker): linting issues --- .../datetime-picker/datetime-picker.component.test.ts | 11 ++++------- .../src/datetime-picker/datetime-picker.component.ts | 5 ++++- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/projects/components/src/datetime-picker/datetime-picker.component.test.ts b/projects/components/src/datetime-picker/datetime-picker.component.test.ts index 862201749..c623d0884 100644 --- a/projects/components/src/datetime-picker/datetime-picker.component.test.ts +++ b/projects/components/src/datetime-picker/datetime-picker.component.test.ts @@ -1,15 +1,12 @@ import { Time } from '@hypertrace/common'; +import { DatetimePickerComponent, InputComponent, LabelComponent, TimePickerComponent } from '@hypertrace/components'; import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest'; import { MockComponent } from 'ng-mocks'; -import { InputComponent } from '../input/input.component'; -import { LabelComponent } from './../label/label.component'; -import { TimePickerComponent } from './../time-picker/time-picker.component'; -import { DatetimePickerComponent } from './datetime-picker.component'; describe('Date Time Picker Component', () => { let spectator: SpectatorHost; - let onDateChangeSpy = jest.fn(); - let initDate = new Date(); + const onDateChangeSpy = jest.fn(); + const initDate = new Date(); const createHost = createHostFactory({ component: DatetimePickerComponent, shallow: true, @@ -74,7 +71,7 @@ describe('Date Time Picker Component', () => { ]; validationSet.forEach(({ date, time, expected }) => { - spectator.setHostInput({ date }); + spectator.setHostInput({ date: date }); spectator.triggerEventHandler(TimePickerComponent, 'timeChange', time); const changedDate = new Date(date.valueOf()); changedDate.setHours(time.hours, time.minutes); diff --git a/projects/components/src/datetime-picker/datetime-picker.component.ts b/projects/components/src/datetime-picker/datetime-picker.component.ts index 3571e6ea7..5c8eefeee 100644 --- a/projects/components/src/datetime-picker/datetime-picker.component.ts +++ b/projects/components/src/datetime-picker/datetime-picker.component.ts @@ -53,11 +53,14 @@ export class DatetimePickerComponent implements OnChanges { } public getInputDate(): string { - if (!this.date) return ''; + if (!this.date) { + return ''; + } const d = this.date; const YEAR = d.getFullYear(); const MONTH = d.getMonth() + 1 > 9 ? d.getMonth() + 1 : `0${d.getMonth() + 1}`; const DATE = d.getDate() > 9 ? d.getDate() : `0${d.getDate()}`; + return `${YEAR}-${MONTH}-${DATE}`; } From c1cbc2f7587be89fc16fe6d873601ce5f900e962 Mon Sep 17 00:00:00 2001 From: Adithya Sreyaj Date: Fri, 10 Dec 2021 13:20:49 +0530 Subject: [PATCH 5/5] refactor(date-picker): use UTC time for datepicker --- .../datetime-picker.component.test.ts | 8 ++++---- .../src/datetime-picker/datetime-picker.component.ts | 12 ++---------- .../src/time-range/predefined-time.service.ts | 4 ++-- 3 files changed, 8 insertions(+), 16 deletions(-) diff --git a/projects/components/src/datetime-picker/datetime-picker.component.test.ts b/projects/components/src/datetime-picker/datetime-picker.component.test.ts index c623d0884..941b0cab9 100644 --- a/projects/components/src/datetime-picker/datetime-picker.component.test.ts +++ b/projects/components/src/datetime-picker/datetime-picker.component.test.ts @@ -50,22 +50,22 @@ describe('Date Time Picker Component', () => { const validationSet = [ { date: new Date('2020-10-10'), - time: new Time(18, 10), + time: new Time(18, 10, 0, 0, true), expected: '2020-10-10' }, { date: new Date('2020-1-1'), - time: new Time(0, 30), + time: new Time(0, 30, 0, 0, true), expected: '2020-01-01' }, { date: new Date('2020-1-1'), - time: new Time(23, 59), + time: new Time(23, 59, 0, 0, true), expected: '2020-01-01' }, { date: new Date('2020-1-1'), - time: new Time(0, 0), + time: new Time(0, 0, 0, 0, true), expected: '2020-01-01' } ]; diff --git a/projects/components/src/datetime-picker/datetime-picker.component.ts b/projects/components/src/datetime-picker/datetime-picker.component.ts index 5c8eefeee..f5486ff36 100644 --- a/projects/components/src/datetime-picker/datetime-picker.component.ts +++ b/projects/components/src/datetime-picker/datetime-picker.component.ts @@ -53,15 +53,7 @@ export class DatetimePickerComponent implements OnChanges { } public getInputDate(): string { - if (!this.date) { - return ''; - } - const d = this.date; - const YEAR = d.getFullYear(); - const MONTH = d.getMonth() + 1 > 9 ? d.getMonth() + 1 : `0${d.getMonth() + 1}`; - const DATE = d.getDate() > 9 ? d.getDate() : `0${d.getDate()}`; - - return `${YEAR}-${MONTH}-${DATE}`; + return this.date?.toISOString().slice(0, 10) ?? ''; } private getInputTime(date: Date): Time { @@ -79,7 +71,7 @@ export class DatetimePickerComponent implements OnChanges { public onTimeChange(time: Time): void { this.time = time; - this.date?.setHours(time.hours, time.minutes, time.seconds, time.milliseconds); + this.date?.setUTCHours(time.hours, time.minutes, time.seconds, time.milliseconds); this.dateChange.emit(this.date); } } diff --git a/projects/components/src/time-range/predefined-time.service.ts b/projects/components/src/time-range/predefined-time.service.ts index 2dbde9c92..50ab0aec3 100644 --- a/projects/components/src/time-range/predefined-time.service.ts +++ b/projects/components/src/time-range/predefined-time.service.ts @@ -16,8 +16,8 @@ export class PredefinedTimeService { for (let hour = 0; hour < 24; hour++) { // Could have an inner loop here, but this seems fine. - times.push(new Time(hour, 0)); - times.push(new Time(hour, 30)); + times.push(new Time(hour, 0, 0, 0, true)); + times.push(new Time(hour, 30, 0, 0, true)); } return times;