fix(week-view): update event title time when dragging and resizing

Fixes #1238

Author: mattlewis92

projects/angular-calendar/src/modules/week/calendar-week-view-event.component.ts

@@ -38,11 +38,11 @@ import { PlacementArray } from 'positioning';
             ? (weekEvent.event.title
               | calendarEventTitle
                 : (daysInWeek === 1 ? 'dayTooltip' : 'weekTooltip')
-                : weekEvent.event)
+                : weekEvent.tempEvent || weekEvent.event)
             : ''
         "
         [tooltipPlacement]="tooltipPlacement"
-        [tooltipEvent]="weekEvent.event"
+        [tooltipEvent]="weekEvent.tempEvent || weekEvent.event"
         [tooltipTemplate]="tooltipTemplate"
         [tooltipAppendToBody]="tooltipAppendToBody"
         [tooltipDelay]="tooltipDelay"
@@ -51,18 +51,18 @@ import { PlacementArray } from 'positioning';
         tabindex="0"
         role="application"
         [attr.aria-label]="
-          { event: weekEvent.event, locale: locale }
+          { event: weekEvent.tempEvent || weekEvent.event, locale: locale }
             | calendarA11y: 'eventDescription'
         "
       >
         <mwl-calendar-event-actions
-          [event]="weekEvent.event"
+          [event]="weekEvent.tempEvent || weekEvent.event"
           [customTemplate]="eventActionsTemplate"
         >
         </mwl-calendar-event-actions>
         &ngsp;
         <mwl-calendar-event-title
-          [event]="weekEvent.event"
+          [event]="weekEvent.tempEvent || weekEvent.event"
           [customTemplate]="eventTitleTemplate"
           [view]="daysInWeek === 1 ? 'day' : 'week'"
         >

projects/angular-calendar/src/modules/week/calendar-week-view.component.ts

@@ -1215,17 +1215,20 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
         if (existingColumnEvent) {
           // restore the original event so trackBy kicks in and the dom isn't changed
           existingColumnEvent.event = originalEvent;
+          existingColumnEvent['tempEvent'] = adjustedEvent;
         } else {
           // add a dummy event to the drop so if the event was removed from the original column the drag doesn't end early
-          column.events.push({
+          const event = {
             event: originalEvent,
             left: 0,
             top: 0,
             height: 0,
             width: 0,
             startsBeforeDay: false,
             endsAfterDay: false,
-          });
+            tempEvent: adjustedEvent,
+          };
+          column.events.push(event);
         }
       });
     });

projects/angular-calendar/test/calendar-week-view.component.spec.ts

@@ -29,6 +29,7 @@ import { adapterFactory } from '../src/date-adapters/date-fns';
 import { Component } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import * as fakeTimers from '@sinonjs/fake-timers';
+import { formatDate } from '@angular/common';
 
 @Component({
   template: `
@@ -2445,6 +2446,51 @@ describe('calendarWeekView component', () => {
     expect(eventDropped).to.have.been.calledOnce;
   });
 
+  it('should update event times when dragging', () => {
+    const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(
+      CalendarWeekViewComponent
+    );
+    eventTitle.week = ({ start, end }: CalendarEvent) => {
+      return (
+        formatDate(start, 'H:mm', 'en') + ' - ' + formatDate(end, 'H:mm', 'en')
+      );
+    };
+    fixture.componentInstance.viewDate = new Date('2018-07-29');
+    const originalEvent = {
+      start: moment(new Date('2018-07-29'))
+        .startOf('day')
+        .add(3, 'hours')
+        .toDate(),
+      end: moment(new Date('2018-07-29'))
+        .startOf('day')
+        .add(5, 'hours')
+        .toDate(),
+      title: 'foo',
+      draggable: true,
+    };
+    fixture.componentInstance.events = [originalEvent];
+    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    const event = fixture.nativeElement.querySelector('.cal-event-container');
+    const rect: ClientRect = event.getBoundingClientRect();
+    triggerDomEvent('mousedown', event, {
+      clientX: rect.right,
+      clientY: rect.bottom,
+      button: 0,
+    });
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', event, {
+      clientX: rect.right,
+      clientY: rect.bottom + 95,
+    });
+    fixture.detectChanges();
+    const updatedEvent1 = fixture.nativeElement.querySelector(
+      '.cal-event-container'
+    );
+    expect(updatedEvent1.innerText).to.equal('4:30 - 6:30');
+  });
+
   describe('current time marker', () => {
     let clock: any;
     beforeEach(() => {