From 754d42740499cc1fa7475db7aa66fae33fe2a434 Mon Sep 17 00:00:00 2001 From: Matt Lewis Date: Mon, 10 Dec 2018 13:26:12 +0800 Subject: [PATCH] fix(week-view): handle event objects being changed when resizing --- .../week/calendar-week-view.component.ts | 24 ++++---- .../test/calendar-week-view.component.spec.ts | 60 +++++++++++++++++++ 2 files changed, 73 insertions(+), 11 deletions(-) diff --git a/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts b/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts index 9186383c5..caf781316 100644 --- a/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts +++ b/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts @@ -684,17 +684,19 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy { timeEventResizeEnded(timeEvent: DayViewEvent) { this.view = this.getWeekView(this.events); const lastResizeEvent = this.timeEventResizes.get(timeEvent.event); - this.timeEventResizes.delete(timeEvent.event); - const newEventDates = this.getTimeEventResizedDates( - timeEvent.event, - lastResizeEvent - ); - this.eventTimesChanged.emit({ - newStart: newEventDates.start, - newEnd: newEventDates.end, - event: timeEvent.event, - type: CalendarEventTimesChangedEventType.Resize - }); + if (lastResizeEvent) { + this.timeEventResizes.delete(timeEvent.event); + const newEventDates = this.getTimeEventResizedDates( + timeEvent.event, + lastResizeEvent + ); + this.eventTimesChanged.emit({ + newStart: newEventDates.start, + newEnd: newEventDates.end, + event: timeEvent.event, + type: CalendarEventTimesChangedEventType.Resize + }); + } } /** diff --git a/projects/angular-calendar/test/calendar-week-view.component.spec.ts b/projects/angular-calendar/test/calendar-week-view.component.spec.ts index 18bb67757..7c819a408 100644 --- a/projects/angular-calendar/test/calendar-week-view.component.spec.ts +++ b/projects/angular-calendar/test/calendar-week-view.component.spec.ts @@ -1867,4 +1867,64 @@ describe('calendarWeekView component', () => { .toDate() }); }); + + it.only('should handle time event objects changing when resizing', () => { + const fixture: ComponentFixture< + CalendarWeekViewComponent + > = TestBed.createComponent(CalendarWeekViewComponent); + fixture.componentInstance.viewDate = new Date('2018-07-29'); + fixture.componentInstance.events = [ + { + id: '1', + start: moment(new Date('2018-07-29')) + .startOf('day') + .add(3, 'hours') + .toDate(), + end: moment(new Date('2018-07-29')) + .startOf('day') + .add(18, 'hours') + .toDate(), + title: 'foo', + resizable: { + afterEnd: true + } + } + ]; + fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} }); + fixture.detectChanges(); + document.body.appendChild(fixture.nativeElement); + const event: HTMLElement = fixture.nativeElement.querySelector( + '.cal-event-container' + ); + const dayWidth: number = event.parentElement.offsetWidth; + const rect: ClientRect = event.getBoundingClientRect(); + const resizeHandle = event.querySelector('.cal-resize-handle-after-end'); + let resizeEvent: CalendarEventTimesChangedEvent; + fixture.componentInstance.eventTimesChanged.subscribe(e => { + resizeEvent = e; + }); + triggerDomEvent('mousedown', resizeHandle, { + clientX: rect.right, + clientY: rect.bottom + }); + fixture.detectChanges(); + triggerDomEvent('mousemove', document.body, { + clientX: rect.right + dayWidth, + clientY: rect.bottom + 90 + }); + fixture.detectChanges(); + fixture.componentInstance.events = [ + { + ...fixture.componentInstance.events[0] + } + ]; + fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} }); + fixture.detectChanges(); + triggerDomEvent('mouseup', document.body, { + clientX: rect.right + dayWidth, + clientY: rect.bottom + 90 + }); + fixture.detectChanges(); + fixture.destroy(); + }); });