From 1efeee0ec618561c734a027bf7d94a510c3aced5 Mon Sep 17 00:00:00 2001
From: Matt Lewis <matthew.lewis@socialsignin.co.uk>
Date: Sun, 26 Jun 2016 19:31:06 +0100
Subject: [PATCH] feat(onDateRangeSelect): support dragd and selecting a range
 on the week view with times

Closes #366
---
 src/directives/mwlCalendarHourList.js            | 14 +++++++++-----
 src/directives/mwlCalendarWeek.js                |  3 ++-
 src/templates/calendar.html                      |  1 +
 src/templates/calendarHourList.html              | 10 +++++++++-
 src/templates/calendarWeekView.html              |  1 +
 test/unit/directives/mwlCalendarHourList.spec.js |  6 ++++--
 6 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/directives/mwlCalendarHourList.js b/src/directives/mwlCalendarHourList.js
index 94815c4f..807a74e1 100644
--- a/src/directives/mwlCalendarHourList.js
+++ b/src/directives/mwlCalendarHourList.js
@@ -74,11 +74,15 @@ angular
       return moment(baseDate).clone().add(minutes, 'minutes').add(days || 0, 'days').toDate();
     };
 
-    vm.onDragSelectStart = function(date) {
-      vm.dateRangeSelect = {
-        startDate: date,
-        endDate: date
-      };
+    vm.onDragSelectStart = function(date, dayIndex) {
+      if (!vm.dateRangeSelect) {
+        vm.dateRangeSelect = {
+          active: true,
+          startDate: date,
+          endDate: date,
+          dayIndex: dayIndex
+        };
+      }
     };
 
     vm.onDragSelectMove = function(date) {
diff --git a/src/directives/mwlCalendarWeek.js b/src/directives/mwlCalendarWeek.js
index 315bf847..9a187f74 100644
--- a/src/directives/mwlCalendarWeek.js
+++ b/src/directives/mwlCalendarWeek.js
@@ -95,7 +95,8 @@ angular
         dayViewEnd: '=',
         dayViewSplit: '=',
         dayViewEventChunkSize: '=',
-        onTimespanClick: '='
+        onTimespanClick: '=',
+        onDateRangeSelect: '='
       },
       controller: 'MwlCalendarWeekCtrl as vm',
       link: function(scope, element, attrs, calendarCtrl) {
diff --git a/src/templates/calendar.html b/src/templates/calendar.html
index a77cb2bc..0b2c25b5 100644
--- a/src/templates/calendar.html
+++ b/src/templates/calendar.html
@@ -49,6 +49,7 @@
     day-view-split="vm.dayViewSplit"
     day-view-event-chunk-size="vm.dayViewEventChunkSize"
     on-timespan-click="vm.onTimespanClick"
+    on-date-range-select="vm.onDateRangeSelect"
     ng-switch-when="week">
   </mwl-calendar-week>
 
diff --git a/src/templates/calendarHourList.html b/src/templates/calendarHourList.html
index a65f85d7..90076eed 100644
--- a/src/templates/calendarHourList.html
+++ b/src/templates/calendarHourList.html
@@ -27,14 +27,22 @@
       ng-if="vm.dayWidth">
       <div class="cal-day-hour-part-time">
         <strong ng-bind="hour.label" ng-show="$first"></strong>
+        &nbsp;
       </div>
       <div
         class="cal-day-hour-part-spacer"
         ng-repeat="dayIndex in [0, 1, 2, 3, 4, 5, 6]"
         ng-style="{width: vm.dayWidth + 'px'}"
+        ng-class="{ 'cal-day-hour-part-selected': vm.dateRangeSelect &&
+                vm.dateRangeSelect.startDate <= vm.getClickedDate(hour.date, vm.dayViewSplit * $parent.$index, dayIndex) &&
+                vm.getClickedDate(hour.date, vm.dayViewSplit * $parent.$index, dayIndex) < vm.dateRangeSelect.endDate }"
         ng-click="vm.onTimespanClick({calendarDate: vm.getClickedDate(hour.date, vm.dayViewSplit * $parent.$index, dayIndex)})"
         mwl-droppable
-        on-drop="vm.eventDropped(dropData.event, vm.getClickedDate(hour.date, vm.dayViewSplit * $parent.$index, dayIndex))">
+        on-drop="vm.eventDropped(dropData.event, vm.getClickedDate(hour.date, vm.dayViewSplit * $parent.$index, dayIndex))"
+        mwl-drag-select="!!vm.onDateRangeSelect"
+        on-drag-select-start="vm.onDragSelectStart(vm.getClickedDate(hour.date, vm.dayViewSplit * $parent.$index, dayIndex), dayIndex)"
+        on-drag-select-move="vm.onDragSelectMove(vm.getClickedDate(hour.date, vm.dayViewSplit * ($parent.$index + 1), vm.dateRangeSelect.dayIndex))"
+        on-drag-select-end="vm.onDragSelectEnd(vm.getClickedDate(hour.date, vm.dayViewSplit * ($parent.$index + 1), vm.dateRangeSelect.dayIndex))">
       </div>
     </div>
 
diff --git a/src/templates/calendarWeekView.html b/src/templates/calendarWeekView.html
index 0f7c8aa8..ed1f1c54 100644
--- a/src/templates/calendarWeekView.html
+++ b/src/templates/calendarWeekView.html
@@ -37,6 +37,7 @@
       day-width="vm.dayColumnDimensions.width"
       view-date="vm.viewDate"
       on-timespan-click="vm.onTimespanClick"
+      on-date-range-select="vm.onDateRangeSelect"
       ng-if="vm.showTimes">
     </mwl-calendar-hour-list>
 
diff --git a/test/unit/directives/mwlCalendarHourList.spec.js b/test/unit/directives/mwlCalendarHourList.spec.js
index 11b95456..520f1064 100644
--- a/test/unit/directives/mwlCalendarHourList.spec.js
+++ b/test/unit/directives/mwlCalendarHourList.spec.js
@@ -85,10 +85,12 @@ describe('mwlCalendarHourList directive', function() {
   it('should initialise the date range select', function() {
 
     var date = new Date();
-    MwlCalendarCtrl.onDragSelectStart(date);
+    MwlCalendarCtrl.onDragSelectStart(date, 1);
     expect(MwlCalendarCtrl.dateRangeSelect).to.deep.equal({
+      active: true,
       startDate: date,
-      endDate: date
+      endDate: date,
+      dayIndex: 1
     });
 
   });