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

fix: update event track by ids when the original calendar events are …

…reset

BREAKING CHANGE:
If using a custom template the event track by field has changed from `$id` to `calendarEventId`. It is also now enumerable.

Closes #457
  • Loading branch information...
Matt Lewis
Matt Lewis committed Oct 9, 2016
1 parent 03bebd6 commit 580a96759ee47b78d8a1353efbc2e40123555b1a
@@ -66,7 +66,7 @@ angular
}

vm.events = vm.events.filter(eventIsValid).map(function(event, index) {
Object.defineProperty(event, '$id', {enumerable: false, configurable: true, value: index});
event.calendarEventId = index;
return event;
});

@@ -7,7 +7,7 @@
class="cal-cell-6 day-highlight"
ng-style="{backgroundColor: event.color.secondary}"
data-event-class
ng-repeat="event in vm.allDayEvents track by event.$id">
ng-repeat="event in vm.allDayEvents track by event.calendarEventId">
<strong>
<span ng-bind="event.startsAt | calendarDate:'datetime':true"></span>
<span ng-if="event.endsAt">
@@ -44,7 +44,7 @@

<div
class="pull-left day-event day-highlight"
ng-repeat="dayEvent in vm.nonAllDayEvents track by dayEvent.event.$id"
ng-repeat="dayEvent in vm.nonAllDayEvents track by dayEvent.event.calendarEventId"
ng-class="dayEvent.event.cssClass"
ng-style="{
top: dayEvent.top - 1 + 'px',
@@ -1,6 +1,6 @@
<div class="events-list" ng-show="day.events.length > 0">
<a
ng-repeat="event in day.events | orderBy:'startsAt' track by event.$id"
ng-repeat="event in day.events | orderBy:'startsAt' track by event.calendarEventId"
href="javascript:;"
ng-click="$event.stopPropagation(); vm.onEventClick({calendarEvent: event})"
class="pull-left event"
@@ -3,7 +3,7 @@
<ul class="unstyled list-unstyled">

<li
ng-repeat="event in vm.events | orderBy:'startsAt' track by event.$id"
ng-repeat="event in vm.events | orderBy:'startsAt' track by event.calendarEventId"
ng-class="event.cssClass"
mwl-draggable="event.draggable === true"
drop-data="{event: event}">
@@ -48,7 +48,7 @@
<div class="col-xs-12">
<div class="cal-row-fluid">
<div
ng-repeat="eventRow in row.row track by eventRow.event.$id"
ng-repeat="eventRow in row.row track by eventRow.event.calendarEventId"
ng-class="'cal-cell' + (vm.showTimes ? 1 : eventRow.span) + (vm.showTimes ? '' : ' cal-offset' + eventRow.offset)"
ng-style="{
top: vm.showTimes ? ((eventRow.top) + 'px') : 'auto',
@@ -154,21 +154,21 @@ describe('mwlCalendar directive', function() {
$log.warn = sinon.spy();
scope.vm.events = [{title: 'title'}];
scope.$apply();
expect($log.warn).to.have.been.calledOnce;
expect($log.warn).to.have.been.called;
});

it('should log a warning if the event starts at is not a valid date object', function() {
$log.warn = sinon.spy();
scope.vm.events = [{title: 'title', startsAt: '2016-06-01'}];
scope.$apply();
expect($log.warn).to.have.been.calledOnce;
expect($log.warn).to.have.been.called;
});

it('should log a warning if the event ends at is not a valid date object', function() {
$log.warn = sinon.spy();
scope.vm.events = [{title: 'title', startsAt: new Date(), endsAt: '2016-01-01'}];
scope.$apply();
expect($log.warn).to.have.been.calledOnce;
expect($log.warn).to.have.been.called;
});

it('should not log a warning if the event ends at is set to a falsey value', function() {
@@ -182,7 +182,7 @@ describe('mwlCalendar directive', function() {
$log.warn = sinon.spy();
scope.vm.events = [{title: 'title', startsAt: new Date(), endsAt: new Date(Date.now() - 1)}];
scope.$apply();
expect($log.warn).to.have.been.calledOnce;
expect($log.warn).to.have.been.called;
});

afterEach(function() {
@@ -33,23 +33,23 @@ describe('mwlCalendarDay directive', function() {
vm.cellModifier = sinon.spy();
vm.events = [
{
$id: 0,
calendarEventId: 0,
title: 'An event',
type: 'warning',
startsAt: moment(calendarDay).startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
endsAt: moment(calendarDay).startOf('week').add(1, 'week').add(9, 'hours').toDate(),
draggable: true,
resizable: true
}, {
$id: 1,
calendarEventId: 1,
title: '<i class="glyphicon glyphicon-asterisk"></i> <span class="text-primary">Another event</span>, with a <i>html</i> title',
type: 'info',
startsAt: moment(calendarDay).subtract(1, 'day').toDate(),
endsAt: moment(calendarDay).add(5, 'days').toDate(),
draggable: true,
resizable: true
}, {
$id: 2,
calendarEventId: 2,
title: 'This is a really long event title that occurs on every year',
type: 'important',
startsAt: moment(calendarDay).startOf('day').add(7, 'hours').toDate(),
@@ -41,23 +41,23 @@ describe('mwlCalendarMonth directive', function() {
vm.dayViewsplit = 30;
vm.events = [
{
$id: 0,
calendarEventId: 0,
title: 'An event',
type: 'warning',
startsAt: moment(calendarDay).startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
endsAt: moment(calendarDay).startOf('week').add(1, 'week').add(9, 'hours').toDate(),
draggable: true,
resizable: true
}, {
$id: 1,
calendarEventId: 1,
title: '<i class="glyphicon glyphicon-asterisk"></i> <span class="text-primary">Another event</span>, with a <i>html</i> title',
type: 'info',
startsAt: moment(calendarDay).subtract(1, 'day').toDate(),
endsAt: moment(calendarDay).add(5, 'days').toDate(),
draggable: true,
resizable: true
}, {
$id: 2,
calendarEventId: 2,
title: 'This is a really long event title that occurs on every year',
type: 'important',
startsAt: moment(calendarDay).startOf('day').add(7, 'hours').toDate(),
@@ -19,23 +19,23 @@ describe('mwlCalendarSlideBox directive', function() {
vm.isOpen = false;
vm.events = [
{
$id: 0,
calendarEventId: 0,
title: 'An event',
type: 'warning',
startsAt: moment().startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate(),
draggable: true,
resizable: true
}, {
$id: 1,
calendarEventId: 1,
title: '<i class="glyphicon glyphicon-asterisk"></i> <span class="text-primary">Another event</span>, with a <i>html</i> title',
type: 'info',
startsAt: moment().subtract(1, 'day').toDate(),
endsAt: moment().add(5, 'days').toDate(),
draggable: true,
resizable: true
}, {
$id: 2,
calendarEventId: 2,
title: 'This is a really long event title that occurs on every year',
type: 'important',
startsAt: moment().startOf('day').add(7, 'hours').toDate(),

1 comment on commit 580a967

@z3ntu

This comment has been minimized.

Copy link

z3ntu commented on 580a967 Jul 18, 2017

This broke my application now ^^

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: event in vm.events | orderBy:'startsAt' track by event.$id, Duplicate key: undefined, Duplicate value: {"my": "object"}

I should probably really check the changelog before updating 😄

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