Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

fix(templates): ensure all custom templates are loaded before renderi…

…ng the calendar

Closes #279
  • Loading branch information...
Matt Lewis
Matt Lewis committed Feb 9, 2016
1 parent 40eb0ad commit 01009ce789a92e0f68167367b1530e0372b84ad7
@@ -4,7 +4,7 @@ var angular = require('angular');

angular
.module('mwl.calendar')
.controller('MwlCalendarCtrl', function($scope, $log, $timeout, $attrs, $locale, moment, calendarTitle) {
.controller('MwlCalendarCtrl', function($scope, $log, $timeout, $attrs, $locale, moment, calendarTitle, calendarHelper) {

var vm = this;

@@ -107,6 +107,12 @@ angular
}
});

calendarHelper.loadTemplates().then(function() {
vm.templatesLoaded = true;
}).catch(function(err) {
$log.error('Could not load all calendar templates', err);
});

})
.directive('mwlCalendar', function(calendarConfig) {

@@ -4,7 +4,7 @@ var angular = require('angular');

angular
.module('mwl.calendar')
.factory('calendarHelper', function(dateFilter, moment, calendarConfig) {
.factory('calendarHelper', function($q, $templateRequest, dateFilter, moment, calendarConfig) {

function formatDate(date, format) {
if (calendarConfig.dateFormatter === 'angular') {
@@ -338,6 +338,17 @@ angular
return ((dayViewEndM.diff(dayViewStartM, 'hours') + 1) * hourHeight) + 2;
}

function loadTemplates() {

var templatePromises = Object.keys(calendarConfig.templates).map(function(key) {
var templateUrl = calendarConfig.templates[key];
return $templateRequest(templateUrl);
});

return $q.all(templatePromises);

}

return {
getWeekDayNames: getWeekDayNames,
getYearView: getYearView,
@@ -348,6 +359,7 @@ angular
getDayViewHeight: getDayViewHeight,
adjustEndDateFromStartDiff: adjustEndDateFromStartDiff,
formatDate: formatDate,
loadTemplates: loadTemplates,
eventIsInPeriod: eventIsInPeriod //expose for testing only
};

@@ -1,4 +1,7 @@
<div class="cal-context" ng-switch="vm.view">
<div
class="cal-context"
ng-switch="vm.view"
ng-if="vm.templatesLoaded">

<div class="alert alert-danger" ng-switch-default>The value passed to the view attribute of the calendar is not set</div>

@@ -16,8 +19,8 @@
delete-event-html="vm.deleteEventHtml"
cell-is-open="vm.cellIsOpen"
cell-modifier="vm.cellModifier"
ng-switch-when="year"
></mwl-calendar-year>
ng-switch-when="year">
</mwl-calendar-year>

<mwl-calendar-month
events="vm.events"
@@ -31,8 +34,8 @@
delete-event-html="vm.deleteEventHtml"
cell-is-open="vm.cellIsOpen"
cell-modifier="vm.cellModifier"
ng-switch-when="month"
></mwl-calendar-month>
ng-switch-when="month">
</mwl-calendar-month>

<mwl-calendar-week
events="vm.events"
@@ -43,8 +46,8 @@
day-view-end="vm.dayViewEnd"
day-view-split="vm.dayViewSplit"
on-timespan-click="vm.onTimespanClick"
ng-switch-when="week"
></mwl-calendar-week>
ng-switch-when="week">
</mwl-calendar-week>

<mwl-calendar-day
events="vm.events"
@@ -55,6 +58,6 @@
day-view-start="vm.dayViewStart"
day-view-end="vm.dayViewEnd"
day-view-split="vm.dayViewSplit"
ng-switch-when="day"
></mwl-calendar-day>
ng-switch-when="day">
</mwl-calendar-day>
</div>
@@ -8,7 +8,9 @@ describe('mwlCalendar directive', function() {
element,
scope,
$rootScope,
$q,
$timeout,
calendarHelper,
directiveScope,
MwlCalendarMonthCtrl,
clock,
@@ -88,12 +90,15 @@ describe('mwlCalendar directive', function() {

beforeEach(angular.mock.module('mwl.calendar'));

beforeEach(angular.mock.inject(function($compile, _$rootScope_, _$timeout_) {
beforeEach(angular.mock.inject(function($compile, _$rootScope_, _$timeout_, _$q_, _calendarHelper_) {
$q = _$q_;
$rootScope = _$rootScope_;
$timeout = _$timeout_;
calendarHelper = _calendarHelper_;
scope = $rootScope.$new();
scope.vm = {};
clock = sinon.useFakeTimers(new Date(2015, 4, 1).getTime());
calendarHelper.loadTemplates = sinon.stub().returns($q.when());
prepareScope(scope.vm);

element = $compile(template)(scope);
@@ -137,6 +142,14 @@ describe('mwlCalendar directive', function() {
});
});

it('should load all templates', function() {
expect(calendarHelper.loadTemplates).to.have.been.calledOnce;
});

it('should set templates loaded to true', function() {
expect(MwlCalendarCtrl.templatesLoaded).to.be.true;
});

afterEach(function() {
clock.restore();
});
@@ -6,11 +6,13 @@ beforeEach(angular.mock.module('mwl.calendar'));

describe('calendarHelper', function() {

var calendarHelper, events, clock, calendarDay, calendarConfig;
var calendarHelper, events, clock, calendarDay, calendarConfig, $templateCache, $rootScope;

beforeEach(inject(function(_calendarHelper_, _calendarConfig_) {
beforeEach(inject(function(_calendarHelper_, _calendarConfig_, _$templateCache_, _$rootScope_) {
calendarHelper = _calendarHelper_;
calendarConfig = _calendarConfig_;
$templateCache = _$templateCache_;
$rootScope = _$rootScope_;

events = [{
title: 'Event 1',
@@ -651,4 +653,20 @@ describe('calendarHelper', function() {

});

describe('loadTemplates', function() {

it('should return a promise with all loaded templates', function(done) {
calendarConfig.templates = {
template: 'test.html'
};
$templateCache.put('test.html', 'contents');
calendarHelper.loadTemplates().then(function(result) {
expect(result).to.deep.equal(['contents']);
done();
});
$rootScope.$apply();
});

});

});

0 comments on commit 01009ce

Please sign in to comment.
You can’t perform that action at this time.