feat(dayView): allow external events to be dropped on the day view

Closes #284

src/directives/mwlCalendarHourList.js

@@ -51,6 +51,18 @@ angular
       updateDays();
     });
 
+    vm.eventDropped = function(event, date) {
+      var newStart = moment(date);
+      var newEnd = calendarHelper.adjustEndDateFromStartDiff(event.startsAt, newStart, event.endsAt);
+
+      vm.onEventTimesChanged({
+        calendarEvent: event,
+        calendarDate: date,
+        calendarNewEventStart: newStart.toDate(),
+        calendarNewEventEnd: newEnd ? newEnd.toDate() : null
+      });
+    };
+
   })
   .directive('mwlCalendarHourList', function(calendarConfig) {
 
@@ -63,7 +75,8 @@ angular
         dayViewStart: '=',
         dayViewEnd: '=',
         dayViewSplit: '=',
-        onTimespanClick: '='
+        onTimespanClick: '=',
+        onEventTimesChanged: '='
       },
       bindToController: true
     };

src/less/theme.less

@@ -19,7 +19,8 @@
 .cell-focus,
 [class*="cal-cell"] .drop-active,
 .cal-cell.drop-active,
-.cal-week-box .cal-cell1.drop-active {
+.cal-week-box .cal-cell1.drop-active,
+.cal-day-hour-part.drop-active {
   background-color: @dayHover;
 }
 .cal-year-box [class*="span"],

src/templates/calendarDayView.html

@@ -11,6 +11,7 @@
       day-view-end="vm.dayViewEnd"
       day-view-split="vm.dayViewSplit"
       on-timespan-click="vm.onTimespanClick"
+      on-event-times-changed="vm.onEventTimesChanged"
       view-date="vm.viewDate">
     </mwl-calendar-hour-list>
 

src/templates/calendarHourList.html

@@ -5,7 +5,9 @@
     <div
       class="row-fluid cal-day-hour-part"
       ng-repeat="chunk in vm.hourChunks track by chunk"
-      ng-click="vm.onTimespanClick({calendarDate: hour.date.clone().add(vm.dayViewSplit * $index, 'minutes').toDate()})">
+      ng-click="vm.onTimespanClick({calendarDate: hour.date.clone().add(vm.dayViewSplit * $index, 'minutes').toDate()})"
+      mwl-droppable
+      on-drop="vm.eventDropped(dropData.event, hour.date.clone().add(vm.dayViewSplit * $index, 'minutes').toDate())">
       <div class="span1 col-xs-1"><strong ng-bind="hour.label" ng-show="$first"></strong></div>
       <div class="span11 col-xs-11"></div>
     </div>

test/unit/directives/mwlCalendarHoursList.spec.js

@@ -15,6 +15,7 @@ describe('mwlCalendarDay directive', function() {
         'day-view-start="dayViewStart" ' +
         'day-view-end="dayViewEnd" ' +
         'day-view-split="dayViewSplit || 30" ' +
+        'on-event-times-changed="eventDropped(calendarEvent, calendarDate, calendarNewEventStart, calendarNewEventEnd)" ' +
       '></mwl-calendar-hour-list>';
 
   function prepareScope(vm) {
@@ -60,4 +61,20 @@ describe('mwlCalendarDay directive', function() {
     moment.locale.restore();
   });
 
+  it('should call the event times changed callback when an event is dropped', function() {
+    var event = {
+      startsAt: moment().toDate(),
+      endsAt: moment().add(1, 'day').toDate()
+    };
+    var date = moment().add(2, 'days').toDate();
+    MwlCalendarCtrl.onEventTimesChanged = sinon.spy();
+    MwlCalendarCtrl.eventDropped(event, date);
+    expect(MwlCalendarCtrl.onEventTimesChanged).to.have.been.calledWith({
+      calendarEvent: event,
+      calendarDate: date,
+      calendarNewEventStart: date,
+      calendarNewEventEnd: moment().add(3, 'days').toDate()
+    });
+  });
+
 });