feat(weekView): support drag and drop of events. #10

Author: Matt Lewis

src/components/week/calendarWeekView.component.ts

@@ -49,7 +49,11 @@ import { CalendarEventTimesChangedEvent } from './../../interfaces/calendarEvent
           [resizeSnapGrid]="{left: container.offsetWidth / 7, right: container.offsetWidth / 7}"
           (resizeStart)="resizeStarted(weekEvent, $event)"
           (resizing)="resizing(weekEvent, $event, container.offsetWidth / 7)"
-          (resizeEnd)="resizeEnded(weekEvent)">
+          (resizeEnd)="resizeEnded(weekEvent)"
+          mwlDraggable
+          [dragAxis]="{x: weekEvent.event.draggable, y: false}"
+          [snapGrid]="{x: container.offsetWidth / 7}"
+          (dragEnd)="eventDragged(weekEvent, $event.x, container.offsetWidth / 7)">
           <mwl-calendar-week-view-event
             [weekEvent]="weekEvent"
             [tooltipPlacement]="tooltipPlacement"
@@ -227,6 +231,22 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
 
   }
 
+  /**
+   * @private
+   */
+  eventDragged(weekEvent: WeekViewEvent, draggedByPx: number, 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);
+    }
+
+    this.eventTimesChanged.emit({newStart, newEnd, event: weekEvent.event});
+
+  }
+
   private refreshHeader(): void {
     this.days = getWeekViewHeader({
       viewDate: this.viewDate,

test/calendarWeekView.component.spec.ts

@@ -294,4 +294,39 @@ describe('calendarWeekView component', () => {
     });
   });
 
+  it('should allow the event to be dragged and dropped', () => {
+    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 dayWidth: number = event.parentElement.offsetWidth / 7;
+    const eventPosition: ClientRect = event.getBoundingClientRect();
+    let dragEvent: CalendarEventTimesChangedEvent;
+    fixture.componentInstance.eventTimesChanged.subscribe(event => {
+      dragEvent = event;
+    });
+    triggerDomEvent('mousedown', event, {clientX: eventPosition.left, clientY: eventPosition.top});
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', document.body, {clientX: eventPosition.left - 50, clientY: eventPosition.top});
+    fixture.detectChanges();
+    expect(Math.round(event.getBoundingClientRect().left)).to.equal(Math.round(eventPosition.left - dayWidth));
+    triggerDomEvent('mouseup', document.body, {clientX: eventPosition.left - dayWidth, clientY: eventPosition.top});
+    fixture.detectChanges();
+    fixture.destroy();
+    expect(dragEvent).to.deep.equal({
+      event: fixture.componentInstance.events[0],
+      newStart: moment('2016-12-07').add(4, 'hours').toDate(),
+      newEnd: moment('2016-12-07').add(6, 'hours').toDate()
+    });
+  });
+
 });