fix(week-view): handle event objects being changed when resizing

mattlewis92 · Dec 10, 2018 · 754d427 · 754d427
1 parent ff8167f
commit 754d427
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 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
@@ -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
@@ -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();
+  });
 });