fix: update the event title in the UI when it changes

Closes #116

Author: Matt Lewis

src/components/common/calendarEventTitle.component.ts

@@ -7,7 +7,7 @@ import { CalendarEvent } from 'calendar-utils';
     <a
       class="cal-event-title"
       href="javascript:;"
-      [innerHTML]="event | calendarEventTitle:view">
+      [innerHTML]="event.title | calendarEventTitle:view:event">
     </a>
   `
 })

src/components/day/calendarDayViewEvent.component.ts

@@ -21,7 +21,7 @@ import { CalendarResizeHelper } from '../../providers/calendarResizeHelper.provi
       [class.cal-ends-within-day]="!dayEvent.endsAfterDay"
       [class.cal-draggable]="dayEvent.event.draggable"
       [ngClass]="dayEvent.event.cssClass"
-      [mwlCalendarTooltip]="dayEvent.event | calendarEventTitle:'dayTooltip'"
+      [mwlCalendarTooltip]="dayEvent.event.title | calendarEventTitle:'dayTooltip':dayEvent.event"
       [tooltipPlacement]="tooltipPlacement"
       mwlResizable
       [resizeEdges]="{top: dayEvent.event?.resizable?.beforeStart, bottom: dayEvent.event?.resizable?.afterEnd}"

src/components/month/calendarMonthCell.component.ts

@@ -16,7 +16,7 @@ import { MonthViewDay } from 'calendar-utils';
         [ngClass]="event?.cssClass"
         (mouseenter)="highlightDay.emit({event: event})"
         (mouseleave)="unhighlightDay.emit({event: event})"
-        [mwlCalendarTooltip]="event | calendarEventTitle:'monthTooltip'"
+        [mwlCalendarTooltip]="event.title | calendarEventTitle:'monthTooltip':event"
         [tooltipPlacement]="tooltipPlacement"
         mwlDraggable
         [dropData]="{event: event}"

src/components/week/calendarWeekViewEvent.component.ts

@@ -10,7 +10,7 @@ import { WeekViewEvent } from 'calendar-utils';
       [class.cal-ends-within-week]="!weekEvent.endsAfterWeek"
       [style.backgroundColor]="weekEvent.event.color.secondary"
       [ngClass]="weekEvent.event?.cssClass"
-      [mwlCalendarTooltip]="weekEvent.event | calendarEventTitle:'weekTooltip'"
+      [mwlCalendarTooltip]="weekEvent.event.title | calendarEventTitle:'weekTooltip':weekEvent.event"
       [tooltipPlacement]="tooltipPlacement">
       <mwl-calendar-event-title
         [event]="weekEvent.event"

src/pipes/calendarEventTitle.pipe.ts

@@ -9,7 +9,7 @@ export class CalendarEventTitlePipe implements PipeTransform {
 
   constructor(private calendarEventTitle: CalendarEventTitleFormatter) {}
 
-  transform(event: CalendarEvent, titleType: string): string {
+  transform(title: string, titleType: string, event: CalendarEvent): string {
     return this.calendarEventTitle[titleType](event);
   }
 

test/calendarMonthView.component.spec.ts

@@ -360,4 +360,27 @@ describe('calendarMonthView component', () => {
 
   });
 
+  it('should update the event title', () => {
+    const fixture: ComponentFixture<CalendarMonthViewComponent> = TestBed.createComponent(CalendarMonthViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-06-01');
+    fixture.componentInstance.events = [{
+      start: new Date('2016-05-30'),
+      end: new Date('2016-06-02'),
+      title: 'foo',
+      color: {
+        primary: 'blue',
+        secondary: ''
+      }
+    }];
+    fixture.componentInstance.activeDayIsOpen = true;
+    fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
+    fixture.detectChanges();
+    const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event-title');
+    expect(event.innerHTML).to.equal('foo');
+    fixture.componentInstance.events[0].title = 'bar';
+    fixture.detectChanges();
+    expect(event.innerHTML).to.equal('bar');
+    fixture.destroy();
+  });
+
 });