feat(dayView): add drag and drop support. #10

Author: Matt Lewis

src/components/day/calendarDayViewEvent.component.ts

@@ -25,7 +25,11 @@ import addMinutes from 'date-fns/add_minutes';
       [resizeSnapGrid]="{top: eventSnapSize, bottom: eventSnapSize}"
       (resizeStart)="resizeStarted(dayEvent, $event)"
       (resizing)="resizing(dayEvent, $event)"
-      (resizeEnd)="resizeEnded(dayEvent)">
+      (resizeEnd)="resizeEnded(dayEvent)"
+      mwlDraggable
+      [dragAxis]="{x: false, y: dayEvent.event.draggable}"
+      [snapGrid]="{y: eventSnapSize}"
+      (dragEnd)="eventDragged(dayEvent, $event.y)">
       <mwl-calendar-event-title
         [event]="dayEvent.event"
         view="day"
@@ -97,4 +101,16 @@ export class CalendarDayViewEventComponent {
 
   }
 
+  eventDragged(dayEvent: DayViewEvent, draggedInPixels: number): void {
+    const segments: number = draggedInPixels / this.eventSnapSize;
+    const segmentAmountInMinutes: number = 60 / this.hourSegments;
+    const minutesMoved: number = segments * segmentAmountInMinutes;
+    const newStart: Date = addMinutes(dayEvent.event.start, minutesMoved);
+    let newEnd: Date;
+    if (dayEvent.event.end) {
+      newEnd = addMinutes(dayEvent.event.end, minutesMoved);
+    }
+    this.eventResized.emit({newStart, newEnd, event: dayEvent.event});
+  }
+
 }

test/calendarDayView.component.spec.ts

@@ -376,4 +376,39 @@ describe('CalendarDayViewComponent component', () => {
 
   });
 
+  it('should allow events to be dragged and dropped', () => {
+    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').add(4, 'hours').toDate(),
+      end: moment('2016-06-27').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();
+    let dragEvent: CalendarEventTimesChangedEvent;
+    fixture.componentInstance.eventTimesChanged.subscribe(event => {
+      dragEvent = event;
+    });
+    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();
+    expect(event.getBoundingClientRect().top).to.equal(eventPosition.top - 30);
+    expect(event.getBoundingClientRect().bottom).to.equal(eventPosition.bottom - 30);
+    triggerDomEvent('mouseup', document.body, {clientY: eventPosition.top - 30, clientX: eventPosition.left + 10});
+    fixture.detectChanges();
+    fixture.destroy();
+    expect(dragEvent).to.deep.equal({
+      event: fixture.componentInstance.events[0],
+      newStart: moment('2016-06-27').add(4, 'hours').subtract(30, 'minutes').toDate(),
+      newEnd: moment('2016-06-27').add(6, 'hours').subtract(30, 'minutes').toDate()
+    });
+  });
+
 });