fix(dayView): allow dropping of external events

Partially fixes #150

Author: Matt Lewis

demos/demo-modules/draggable-external-events/component.ts

@@ -9,6 +9,8 @@ import { colors } from '../demo-utils/colors';
 })
 export class DemoComponent {
 
+  view: string = 'month';
+
   viewDate: Date = new Date();
 
   externalEvents: CalendarEvent[] = [{

demos/demo-modules/draggable-external-events/template.html

@@ -21,12 +21,32 @@
   </div>
 
   <div class="col-md-9">
-    <mwl-calendar-month-view
-      [viewDate]="viewDate"
-      [events]="events"
-      [activeDayIsOpen]="activeDayIsOpen"
-      (eventTimesChanged)="eventDropped($event)">
-    </mwl-calendar-month-view>
+    <mwl-calendar-header
+      [(view)]="view"
+      [(viewDate)]="viewDate">
+    </mwl-calendar-header>
+
+    <div [ngSwitch]="view">
+      <mwl-calendar-month-view
+        *ngSwitchCase="'month'"
+        [viewDate]="viewDate"
+        [events]="events"
+        [activeDayIsOpen]="activeDayIsOpen"
+        (eventTimesChanged)="eventDropped($event)">
+      </mwl-calendar-month-view>
+      <mwl-calendar-week-view
+        *ngSwitchCase="'week'"
+        [viewDate]="viewDate"
+        [events]="events"
+        (eventTimesChanged)="eventDropped($event)">
+      </mwl-calendar-week-view>
+      <mwl-calendar-day-view
+        *ngSwitchCase="'day'"
+        [viewDate]="viewDate"
+        [events]="events"
+        (eventTimesChanged)="eventDropped($event)">
+      </mwl-calendar-day-view>
+    </div>
   </div>
 
 </div>

scss/day-view.scss

@@ -26,7 +26,8 @@
     text-align: center;
   }
 
-  .cal-hour-segment:hover {
+  .cal-hour-segment:hover,
+  .cal-drag-over .cal-hour-segment {
     background-color: #ededed;
   }
 

src/components/day/calendarDayView.component.ts

@@ -10,7 +10,7 @@ import {
   OnInit,
   OnDestroy
 } from '@angular/core';
-import { getDayView, getDayViewHourGrid, CalendarEvent, DayView, DayViewHour } from 'calendar-utils';
+import { getDayView, getDayViewHourGrid, CalendarEvent, DayView, DayViewHour, DayViewHourSegment } from 'calendar-utils';
 import { Subject } from 'rxjs/Subject';
 import { Subscription } from 'rxjs/Subscription';
 import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTimesChangedEvent.interface';
@@ -57,7 +57,12 @@ const SEGMENT_HEIGHT: number = 30;
             *ngFor="let segment of hour.segments"
             [segment]="segment"
             [locale]="locale"
-            (click)="hourSegmentClicked.emit({date: segment.date})">
+            (click)="hourSegmentClicked.emit({date: segment.date})"
+            [class.cal-drag-over]="segment.dragOver"
+            mwlDroppable
+            (dragEnter)="segment.dragOver = true"
+            (dragLeave)="segment.dragOver = false"
+            (drop)="segment.dragOver = false; eventDropped($event, segment)">
           </mwl-calendar-day-view-hour-segment>
         </div>
       </div>
@@ -224,6 +229,12 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
 
   }
 
+  eventDropped(dropEvent: {dropData?: {event?: CalendarEvent}}, segment: DayViewHourSegment): void {
+    if (dropEvent.dropData && dropEvent.dropData.event) {
+      this.eventTimesChanged.emit({event: dropEvent.dropData.event, newStart: segment.date});
+    }
+  }
+
   private refreshHourGrid(): void {
     this.hours = getDayViewHourGrid({
       viewDate: this.viewDate,

test/calendarDayView.component.spec.ts

@@ -1,3 +1,4 @@
+import { Component } from '@angular/core';
 import {
   inject,
   ComponentFixture,
@@ -6,7 +7,8 @@ import {
 } from '@angular/core/testing';
 import * as moment from 'moment';
 import { expect } from 'chai';
-import { DraggableHelper } from 'angular-draggable-droppable';
+import * as sinon from 'sinon';
+import { DraggableHelper, DragAndDropModule } from 'angular-draggable-droppable';
 import {
   CalendarEventTitleFormatter,
   CalendarEvent,
@@ -23,8 +25,40 @@ import { triggerDomEvent } from './util';
 
 describe('CalendarDayViewComponent component', () => {
 
+  @Component({
+    template: '<div class="external-event" mwlDraggable [dropData]="{event: event}">{{ event.title }}</div>',
+    styles: [`
+      .external-event {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 10px;
+        height: 10px;
+      }
+    `]
+  })
+  class ExternalEventComponent {
+    event: CalendarEvent = {
+      title: 'foo',
+      start: new Date(),
+      draggable: true,
+      color: {
+        primary: 'blue',
+        secondary: 'lightblue'
+      }
+    };
+  }
+
   beforeEach(() => {
-    TestBed.configureTestingModule({imports: [CalendarModule]});
+    TestBed.configureTestingModule({
+      imports: [
+        CalendarModule,
+        DragAndDropModule
+      ],
+      declarations: [
+        ExternalEventComponent
+      ]
+    });
     TestBed.configureCompiler({
       providers: [
         DraggableHelper,
@@ -480,4 +514,40 @@ describe('CalendarDayViewComponent component', () => {
     fixture.destroy();
   });
 
+  it('should allow external events to be dropped on the day view', () => {
+    const fixture: ComponentFixture<CalendarDayViewComponent> = TestBed.createComponent(CalendarDayViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-06-27');
+    fixture.componentInstance.events = [];
+    fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+
+    const externalEventFixture: ComponentFixture<ExternalEventComponent> = TestBed.createComponent(ExternalEventComponent);
+    externalEventFixture.detectChanges();
+    document.body.appendChild(externalEventFixture.nativeElement);
+
+    const event: HTMLElement = externalEventFixture.nativeElement.querySelector('.external-event');
+    const eventPosition: ClientRect = event.getBoundingClientRect();
+
+    const segments: any[] = Array.from(fixture.nativeElement.querySelectorAll('.cal-hour-segment'));
+    const segment: HTMLElement = segments[2].parentNode;
+    const segmentPosition: ClientRect = segment.getBoundingClientRect();
+
+    const eventDropped: sinon.SinonSpy = sinon.spy();
+    fixture.componentInstance.eventTimesChanged.subscribe(eventDropped);
+    triggerDomEvent('mousedown', event, {clientY: eventPosition.top, clientX: eventPosition.left});
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', document.body, {clientY: segmentPosition.top, clientX: segmentPosition.left});
+    fixture.detectChanges();
+    expect(segment.classList.contains('cal-drag-over')).to.be.true;
+    triggerDomEvent('mouseup', document.body, {clientY: segmentPosition.top, clientX: eventPosition.left});
+    fixture.detectChanges();
+    fixture.destroy();
+    externalEventFixture.destroy();
+    expect(eventDropped).to.have.been.calledWith({
+      event: externalEventFixture.componentInstance.event,
+      newStart: moment('2016-06-27').startOf('day').add(1, 'hours').toDate()
+    });
+  });
+
 });