From 29725a80e3ae61ce2073c0e663cff978575c6a00 Mon Sep 17 00:00:00 2001
From: Matt Lewis <matthew.lewis@socialsignin.co.uk>
Date: Sun, 21 Aug 2016 20:29:05 +0100
Subject: [PATCH] fix(weekViewWithTimes): call the cell-modifier for each days
 hour segment

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         | 21 ++++++++++++++++---
 src/templates/calendarHourList.html           | 12 +++++------
 .../directives/mwlCalendarHourList.spec.js    | 20 +++++++++++++++++-
 3 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/directives/mwlCalendarHourList.js b/src/directives/mwlCalendarHourList.js
index 9be69675..b7ebe917 100644
--- a/src/directives/mwlCalendarHourList.js
+++ b/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});
+          }
         });
       });
 
diff --git a/src/templates/calendarHourList.html b/src/templates/calendarHourList.html
index cadbba93..aba72df5 100644
--- a/src/templates/calendarHourList.html
+++ b/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>
diff --git a/test/unit/directives/mwlCalendarHourList.spec.js b/test/unit/directives/mwlCalendarHourList.spec.js
index b7c4f581..cb314f98 100644
--- a/test/unit/directives/mwlCalendarHourList.spec.js
+++ b/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;
   });
 
 });