fix: allow event actions to work on draggable events

Fixes #373

Author: Matt Lewis

src/modules/day/calendar-day-view.component.ts

@@ -429,12 +429,15 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
     const pixelAmountInMinutes: number =
       MINUTES_IN_HOUR / (this.hourSegments * this.hourSegmentHeight);
     const minutesMoved: number = draggedInPixels * pixelAmountInMinutes;
-    const newStart: Date = addMinutes(dayEvent.event.start, minutesMoved);
-    let newEnd: Date;
-    if (dayEvent.event.end) {
-      newEnd = addMinutes(dayEvent.event.end, minutesMoved);
+    // TODO - remove this check once https://github.com/mattlewis92/angular-draggable-droppable/issues/21 is fixed
+    if (minutesMoved !== 0) {
+      const newStart: Date = addMinutes(dayEvent.event.start, minutesMoved);
+      let newEnd: Date;
+      if (dayEvent.event.end) {
+        newEnd = addMinutes(dayEvent.event.end, minutesMoved);
+      }
+      this.eventTimesChanged.emit({ newStart, newEnd, event: dayEvent.event });
     }
-    this.eventTimesChanged.emit({ newStart, newEnd, event: dayEvent.event });
   }
 
   private refreshHourGrid(): void {

src/modules/week/calendar-week-view.component.ts

@@ -364,13 +364,16 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
     dayWidth: number
   ): void {
     const daysDragged: number = draggedByPx / dayWidth;
-    const newStart: Date = addDays(weekEvent.event.start, daysDragged);
-    let newEnd: Date;
-    if (weekEvent.event.end) {
-      newEnd = addDays(weekEvent.event.end, daysDragged);
+    // TODO - remove this check once https://github.com/mattlewis92/angular-draggable-droppable/issues/21 is fixed
+    if (daysDragged !== 0) {
+      const newStart: Date = addDays(weekEvent.event.start, daysDragged);
+      let newEnd: Date;
+      if (weekEvent.event.end) {
+        newEnd = addDays(weekEvent.event.end, daysDragged);
+      }
+
+      this.eventTimesChanged.emit({ newStart, newEnd, event: weekEvent.event });
     }
-
-    this.eventTimesChanged.emit({ newStart, newEnd, event: weekEvent.event });
   }
 
   /**

test/calendar-day-view.component.spec.ts

@@ -1012,4 +1012,54 @@ describe('CalendarDayViewComponent component', () => {
       fixture.nativeElement.querySelector('.cal-hour-segment').style.height
     ).to.equal('45px');
   });
+
+  it('should not called the event times changed callback when the event was not dragged', () => {
+    const fixture: ComponentFixture<
+      CalendarDayViewComponent
+    > = TestBed.createComponent(CalendarDayViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-06-27');
+    fixture.componentInstance.events = [
+      {
+        title: 'foo',
+        color: { primary: '', secondary: '' },
+        start: moment('2016-06-27')
+          .startOf('day')
+          .add(4, 'hours')
+          .toDate(),
+        end: moment('2016-06-27')
+          .startOf('day')
+          .add(6, 'hours')
+          .toDate(),
+        draggable: true
+      }
+    ];
+    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    const event: HTMLElement = fixture.nativeElement.querySelector(
+      '.cal-event'
+    );
+    const eventPosition: ClientRect = event.getBoundingClientRect();
+    const eventTimesChanged = sinon.spy();
+    fixture.componentInstance.eventTimesChanged.subscribe(() =>
+      eventTimesChanged()
+    );
+    triggerDomEvent('mousedown', event, {
+      clientY: eventPosition.top + 5,
+      clientX: eventPosition.left + 10
+    });
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', document.body, {
+      clientY: eventPosition.top + 5,
+      clientX: eventPosition.left + 10
+    });
+    fixture.detectChanges();
+    triggerDomEvent('mouseup', document.body, {
+      clientY: eventPosition.top + 5,
+      clientX: eventPosition.left + 10
+    });
+    fixture.detectChanges();
+    fixture.destroy();
+    expect(eventTimesChanged.callCount).to.equal(0);
+  });
 });

test/calendar-week-view.component.spec.ts

@@ -837,4 +837,52 @@ describe('calendarWeekView component', () => {
     stub.restore();
     expect(stub).to.have.been.calledOnce; // tslint:disable-line
   });
+
+  it('should not called the event times changed callback when the event was not dragged', () => {
+    const fixture: ComponentFixture<
+      CalendarWeekViewComponent
+    > = TestBed.createComponent(CalendarWeekViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-12-08');
+    fixture.componentInstance.events = [
+      {
+        title: 'foo',
+        color: { primary: '', secondary: '' },
+        start: moment('2016-12-08')
+          .add(4, 'hours')
+          .toDate(),
+        end: moment('2016-12-08')
+          .add(6, 'hours')
+          .toDate(),
+        draggable: true
+      }
+    ];
+    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    const event: HTMLElement = fixture.nativeElement.querySelector(
+      '.cal-event-container'
+    );
+    const eventPosition: ClientRect = event.getBoundingClientRect();
+    const eventTimesChanged = sinon.spy();
+    fixture.componentInstance.eventTimesChanged.subscribe(() =>
+      eventTimesChanged()
+    );
+    triggerDomEvent('mousedown', event, {
+      clientX: eventPosition.left,
+      clientY: eventPosition.top
+    });
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', document.body, {
+      clientX: eventPosition.left,
+      clientY: eventPosition.top
+    });
+    fixture.detectChanges();
+    triggerDomEvent('mouseup', document.body, {
+      clientX: eventPosition.left,
+      clientY: eventPosition.top
+    });
+    fixture.detectChanges();
+    fixture.destroy();
+    expect(eventTimesChanged.callCount).to.equal(0);
+  });
 });