fix(weekView): allow external events to be dropped on the column headers

Closes #150

Author: Matt Lewis

scss/week-view.scss

@@ -17,7 +17,8 @@
     border-right: 1px solid #e1e1e1;
   }
 
-  .cal-day-headers .cal-header:hover {
+  .cal-day-headers .cal-header:hover,
+  .cal-day-headers .cal-drag-over {
     background-color: #ededed;
   }
 

src/components/week/calendarWeekView.component.ts

@@ -45,7 +45,12 @@ import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTi
           *ngFor="let day of days"
           [day]="day"
           [locale]="locale"
-          (click)="dayClicked.emit({date: day.date})">
+          (click)="dayClicked.emit({date: day.date})"
+          [class.cal-drag-over]="day.dragOver"
+          mwlDroppable
+          (dragEnter)="day.dragOver = true"
+          (dragLeave)="day.dragOver = false"
+          (drop)="day.dragOver = false; eventTimesChanged.emit({event: $event.dropData.event, newStart: day.date})">
         </mwl-calendar-week-view-header>
       </div>
       <div *ngFor="let eventRow of eventRows" #eventRowContainer>

test/calendarDayView.component.spec.ts

@@ -1,4 +1,3 @@
-import { Component } from '@angular/core';
 import {
   inject,
   ComponentFixture,
@@ -21,34 +20,10 @@ import {
 import { CalendarDayViewComponent } from './../src/components/day/calendarDayView.component';
 import { Subject } from 'rxjs/Rx';
 import { spy } from 'sinon';
-import { triggerDomEvent } from './util';
+import { triggerDomEvent, ExternalEventComponent } 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: [
@@ -540,7 +515,7 @@ describe('CalendarDayViewComponent component', () => {
     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});
+    triggerDomEvent('mouseup', document.body, {clientY: segmentPosition.top, clientX: segmentPosition.left});
     fixture.detectChanges();
     fixture.destroy();
     externalEventFixture.destroy();

test/calendarWeekView.component.spec.ts

@@ -13,16 +13,25 @@ import {
   CalendarModule,
   MOMENT,
   CalendarEventTimesChangedEvent
-} from './../src';
-import { CalendarWeekViewComponent } from './../src/components/week/calendarWeekView.component';
-import { DraggableHelper } from 'angular-draggable-droppable';
-import { Subject } from 'rxjs/Rx';
-import { triggerDomEvent } from './util';
+} from '../src';
+import { CalendarWeekViewComponent } from '../src/components/week/calendarWeekView.component';
+import { DraggableHelper, DragAndDropModule } from 'angular-draggable-droppable';
+import { Subject } from 'rxjs/Subject';
+import * as sinon from 'sinon';
+import { triggerDomEvent, ExternalEventComponent } from './util';
 
 describe('calendarWeekView component', () => {
 
   beforeEach(() => {
-    TestBed.configureTestingModule({imports: [CalendarModule]});
+    TestBed.configureTestingModule({
+      imports: [
+        CalendarModule,
+        DragAndDropModule
+      ],
+      declarations: [
+        ExternalEventComponent
+      ]
+    });
     TestBed.configureCompiler({
       providers: [
         CalendarEventTitleFormatter,
@@ -393,4 +402,40 @@ describe('calendarWeekView component', () => {
     fixture.destroy();
   });
 
+  it('should allow external events to be dropped on the week view headers', () => {
+    const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(CalendarWeekViewComponent);
+    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 headers: any[] = Array.from(fixture.nativeElement.querySelectorAll('mwl-calendar-week-view-header'));
+    const header: HTMLElement = headers[2];
+    const headerPosition: ClientRect = header.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: headerPosition.top, clientX: headerPosition.left});
+    fixture.detectChanges();
+    expect(header.classList.contains('cal-drag-over')).to.be.true;
+    triggerDomEvent('mouseup', document.body, {clientY: headerPosition.top, clientX: headerPosition.left});
+    fixture.detectChanges();
+    fixture.destroy();
+    externalEventFixture.destroy();
+    expect(eventDropped).to.have.been.calledWith({
+      event: externalEventFixture.componentInstance.event,
+      newStart: moment('2016-06-27').startOf('week').add(2, 'days').toDate()
+    });
+  });
+
 });

test/util.ts

@@ -1,6 +1,33 @@
+import { Component } from '@angular/core';
+import { CalendarEvent } from './../src';
+
 export const triggerDomEvent: Function = (eventType: string, target: HTMLElement | Element, eventData: Object = {}) => {
   const event: Event = document.createEvent('Event');
   Object.assign(event, eventData);
   event.initEvent(eventType, true, true);
   target.dispatchEvent(event);
-};
+};
+
+@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;
+      }
+    `]
+})
+export class ExternalEventComponent {
+  event: CalendarEvent = {
+    title: 'foo',
+    start: new Date(),
+    draggable: true,
+    color: {
+      primary: 'blue',
+      secondary: 'lightblue'
+    }
+  };
+}