fix(weekViewWithTimes): call the cell-modifier for each days hour seg…

…ment

BREAKING CHANGE:
The `cell-modifier` will now be called for every days hour segment instead of just the first day in the week.

The cssClass added will now be added on the segments day column instead of on the entire row.

The structure of the week view with times template has also changed slightly if using a custom template

Closes #424

src/directives/mwlCalendarHourList.js

@@ -5,7 +5,7 @@ var calendarUtils = require('calendar-utils');
 
 angular
   .module('mwl.calendar')
-  .controller('MwlCalendarHourListCtrl', function($scope, $attrs, moment, calendarHelper) {
+  .controller('MwlCalendarHourListCtrl', function($scope, moment, calendarHelper, calendarConfig) {
     var vm = this;
 
     function updateDays() {
@@ -14,7 +14,7 @@ angular
       var dayStart = (vm.dayViewStart || '00:00').split(':');
       var dayEnd = (vm.dayViewEnd || '23:59').split(':');
       vm.hourGrid = calendarUtils.getDayViewHourGrid({
-        viewDate: $attrs.dayWidth ? moment(vm.viewDate).startOf('week').toDate() : moment(vm.viewDate).toDate(),
+        viewDate: calendarConfig.showTimesOnWeekView ? moment(vm.viewDate).startOf('week').toDate() : moment(vm.viewDate).toDate(),
         hourSegments: 60 / vm.dayViewSplit,
         dayStart: {
           hour: dayStart[0],
@@ -28,7 +28,22 @@ angular
 
       vm.hourGrid.forEach(function(hour) {
         hour.segments.forEach(function(segment) {
-          vm.cellModifier({calendarCell: segment});
+
+          if (calendarConfig.showTimesOnWeekView) {
+
+            segment.days = [];
+
+            for (var i = 0; i < 7; i++) {
+              var day = {
+                date: moment(segment.date).add(i, 'days')
+              };
+              vm.cellModifier({calendarCell: day});
+              segment.days.push(day);
+            }
+
+          } else {
+            vm.cellModifier({calendarCell: segment});
+          }
         });
       });
 

src/templates/calendarHourList.html

@@ -31,16 +31,16 @@
       </div>
       <div
         class="cal-day-hour-part-spacer"
-        ng-repeat="dayIndex in [0, 1, 2, 3, 4, 5, 6]"
+        ng-repeat="day in segment.days track by $index"
         ng-style="{width: vm.dayWidth + 'px'}"
         ng-class="[{ 'cal-day-hour-part-selected': vm.dateRangeSelect &&
-                vm.dateRangeSelect.startDate <= vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, dayIndex) &&
-                vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, dayIndex) < vm.dateRangeSelect.endDate }, segment.cssClass]"
-        ng-click="vm.onTimespanClick({calendarDate: vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, dayIndex)})"
+                vm.dateRangeSelect.startDate <= vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, $index) &&
+                vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, $index) < vm.dateRangeSelect.endDate }, day.cssClass]"
+        ng-click="vm.onTimespanClick({calendarDate: vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, $index)})"
         mwl-droppable
-        on-drop="vm.eventDropped(dropData.event, vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, dayIndex))"
+        on-drop="vm.eventDropped(dropData.event, vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, $index))"
         mwl-drag-select="!!vm.onDateRangeSelect"
-        on-drag-select-start="vm.onDragSelectStart(vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, dayIndex), dayIndex)"
+        on-drag-select-start="vm.onDragSelectStart(vm.getClickedDate(segment.date, vm.dayViewSplit * $parent.$index, $index), $index)"
         on-drag-select-move="vm.onDragSelectMove(vm.getClickedDate(segment.date, vm.dayViewSplit * ($parent.$index + 1), vm.dateRangeSelect.dayIndex))"
         on-drag-select-end="vm.onDragSelectEnd(vm.getClickedDate(segment.date, vm.dayViewSplit * ($parent.$index + 1), vm.dateRangeSelect.dayIndex))">
       </div>

test/unit/directives/mwlCalendarHourList.spec.js

@@ -9,6 +9,7 @@ describe('mwlCalendarHourList directive', function() {
     scope,
     $rootScope,
     directiveScope,
+    calendarConfig,
     showModal,
     clock,
     template =
@@ -18,6 +19,7 @@ describe('mwlCalendarHourList directive', function() {
         'day-view-split="dayViewSplit || 30" ' +
         'on-event-times-changed="eventDropped(calendarEvent, calendarDate, calendarNewEventStart, calendarNewEventEnd)" ' +
         'cell-modifier="cellModifier"' +
+        'day-width="dayWidth"' +
       '></mwl-calendar-hour-list>';
 
   function prepareScope(vm) {
@@ -40,7 +42,8 @@ describe('mwlCalendarHourList directive', function() {
 
   beforeEach(angular.mock.module('mwl.calendar'));
 
-  beforeEach(angular.mock.inject(function($compile, _$rootScope_) {
+  beforeEach(angular.mock.inject(function($compile, _$rootScope_, _calendarConfig_) {
+    calendarConfig = _calendarConfig_;
     clock = sinon.useFakeTimers(new Date('October 20, 2015 11:10:00').getTime());
     $rootScope = _$rootScope_;
     scope = $rootScope.$new();
@@ -155,8 +158,23 @@ describe('mwlCalendarHourList directive', function() {
     scope.$apply();
     scope.$broadcast('calendar.refreshView');
     scope.$apply();
+    moment.locale.restore();
     expect(element[0].querySelector('.cal-day-hour-part.foo')).to.be.ok;
+  });
+
+  it('should allow the week view with times day segments CSS classes to be customised', function() {
+    calendarConfig.showTimesOnWeekView = true;
+    scope.dayWidth = 50;
+    sinon.stub(moment, 'locale').returns('another locale');
+    scope.cellModifier = function(args) {
+      args.calendarCell.cssClass = 'foo';
+    };
+    scope.$apply();
+    scope.$broadcast('calendar.refreshView');
+    scope.$apply();
+    calendarConfig.showTimesOnWeekView = false;
     moment.locale.restore();
+    expect(element[0].querySelector('.cal-day-hour-part-spacer.foo')).to.be.ok;
   });
 
 });