feat(event-times-changed): expose type of event (resize, drag or drop)

src/modules/common/calendar-event-times-changed-event.interface.ts

@@ -1,9 +1,16 @@
 import { CalendarEvent } from 'calendar-utils';
 
+export enum CalendarEventTimesChangedEventType {
+  Drag = 'drag',
+  Drop = 'drop',
+  Resize = 'resize'
+}
+
 /**
  * The output `$event` type when an event is resized or dragged and dropped.
  */
 export interface CalendarEventTimesChangedEvent<MetaType = any> {
+  type: CalendarEventTimesChangedEventType;
   event: CalendarEvent<MetaType>;
   newStart: Date;
   newEnd?: Date;

src/modules/day/calendar-day-view.component.ts

@@ -23,7 +23,10 @@ import { Subject, Subscription } from 'rxjs';
 import { ResizeEvent } from 'angular-resizable-element';
 import { CalendarDragHelper } from '../common/calendar-drag-helper.provider';
 import { CalendarResizeHelper } from '../common/calendar-resize-helper.provider';
-import { CalendarEventTimesChangedEvent } from '../common/calendar-event-times-changed-event.interface';
+import {
+  CalendarEventTimesChangedEvent,
+  CalendarEventTimesChangedEventType
+} from '../common/calendar-event-times-changed-event.interface';
 import { CalendarUtils } from '../common/calendar-utils.provider';
 import { validateEvents, trackByEventId, roundToNearest } from '../common/util';
 import { DateAdapter } from '../../date-adapters/date-adapter';
@@ -405,6 +408,7 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
       !dropEvent.dropData.isInternal
     ) {
       this.eventTimesChanged.emit({
+        type: CalendarEventTimesChangedEventType.Drop,
         event: dropEvent.dropData.event,
         newStart: segment.date
       });
@@ -469,7 +473,12 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
       newEnd = this.dateAdapter.addMinutes(newEnd, minutesMoved);
     }
 
-    this.eventTimesChanged.emit({ newStart, newEnd, event: dayEvent.event });
+    this.eventTimesChanged.emit({
+      newStart,
+      newEnd,
+      event: dayEvent.event,
+      type: CalendarEventTimesChangedEventType.Resize
+    });
     this.currentResizes.delete(dayEvent);
   }
 
@@ -502,7 +511,12 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
       if (dayEvent.event.end) {
         newEnd = this.dateAdapter.addMinutes(dayEvent.event.end, minutesMoved);
       }
-      this.eventTimesChanged.emit({ newStart, newEnd, event: dayEvent.event });
+      this.eventTimesChanged.emit({
+        newStart,
+        newEnd,
+        event: dayEvent.event,
+        type: CalendarEventTimesChangedEventType.Drag
+      });
     }
   }
 

src/modules/month/calendar-month-view.component.ts

@@ -19,7 +19,10 @@ import {
   ViewPeriod
 } from 'calendar-utils';
 import { Subject, Subscription } from 'rxjs';
-import { CalendarEventTimesChangedEvent } from '../common/calendar-event-times-changed-event.interface';
+import {
+  CalendarEventTimesChangedEvent,
+  CalendarEventTimesChangedEventType
+} from '../common/calendar-event-times-changed-event.interface';
 import { CalendarUtils } from '../common/calendar-utils.provider';
 import { validateEvents, trackByIndex } from '../common/util';
 import { DateAdapter } from '../../date-adapters/date-adapter';
@@ -338,7 +341,13 @@ export class CalendarMonthViewComponent
       );
       newEnd = this.dateAdapter.addSeconds(event.end, secondsDiff);
     }
-    this.eventTimesChanged.emit({ event, newStart, newEnd, day });
+    this.eventTimesChanged.emit({
+      event,
+      newStart,
+      newEnd,
+      day,
+      type: CalendarEventTimesChangedEventType.Drop
+    });
   }
 
   private refreshHeader(): void {

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

@@ -22,7 +22,10 @@ import {
 import { ResizeEvent } from 'angular-resizable-element';
 import { CalendarDragHelper } from '../common/calendar-drag-helper.provider';
 import { CalendarResizeHelper } from '../common/calendar-resize-helper.provider';
-import { CalendarEventTimesChangedEvent } from '../common/calendar-event-times-changed-event.interface';
+import {
+  CalendarEventTimesChangedEvent,
+  CalendarEventTimesChangedEventType
+} from '../common/calendar-event-times-changed-event.interface';
 import { CalendarUtils } from '../common/calendar-utils.provider';
 import { validateEvents, trackByIndex, roundToNearest } from '../common/util';
 import { DateAdapter } from '../../date-adapters/date-adapter';
@@ -59,13 +62,20 @@ export interface CalendarWeekViewBeforeRenderEvent {
         [locale]="locale"
         [customTemplate]="headerTemplate"
         (dayHeaderClicked)="dayHeaderClicked.emit($event)"
-        (eventDropped)="eventTimesChanged.emit($event)">
+        (eventDropped)="eventTimesChanged.emit({
+          event: $event.event, 
+          newStart: $event.newStart, 
+          type: CalendarEventTimesChangedEventType.Drop
+        })">
       </mwl-calendar-week-view-header>
       <div 
         #weekEventsContainer
         mwlDroppable
         (drop)="eventDroppedWithinContainer = true">
-        <div *ngFor="let eventRow of view.eventRows; trackBy:trackByIndex" #eventRowContainer class="cal-events-row">
+        <div
+          *ngFor="let eventRow of view.eventRows; trackBy:trackByIndex"
+          #eventRowContainer
+          class="cal-events-row">
           <div
             *ngFor="let weekEvent of eventRow.row; trackBy:trackByEventId"
             #event
@@ -77,7 +87,10 @@ export interface CalendarWeekViewBeforeRenderEvent {
             [style.width]="((100 / days.length) * weekEvent.span) + '%'"
             [style.marginLeft]="((100 / days.length) * weekEvent.offset) + '%'"
             mwlResizable
-            [resizeEdges]="{left: weekEvent.event?.resizable?.beforeStart, right: weekEvent.event?.resizable?.afterEnd}"
+            [resizeEdges]="{
+              left: weekEvent.event?.resizable?.beforeStart, 
+              right: weekEvent.event?.resizable?.afterEnd
+            }"
             [resizeSnapGrid]="{left: dayColumnWidth, right: dayColumnWidth}"
             [validateResize]="validateResize"
             (resizeStart)="resizeStarted(weekEventsContainer, weekEvent, $event)"
@@ -86,7 +99,10 @@ export interface CalendarWeekViewBeforeRenderEvent {
             mwlDraggable
             dragActiveClass="cal-drag-active"
             [dropData]="{event: weekEvent.event}"
-            [dragAxis]="{x: weekEvent.event.draggable && currentResizes.size === 0, y: !snapDraggedEvents && weekEvent.event.draggable && currentResizes.size === 0}"
+            [dragAxis]="{
+              x: weekEvent.event.draggable && currentResizes.size === 0,
+              y: !snapDraggedEvents && weekEvent.event.draggable && currentResizes.size === 0
+            }"
             [dragSnapGrid]="snapDraggedEvents ? {x: dayColumnWidth} : {}"
             [validateDrag]="snapDraggedEvents ? validateDrag : false"
             (dragPointerDown)="dragStarted(weekEventsContainer, event)"
@@ -255,6 +271,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   dayColumnWidth: number;
 
+  /**
+   * @hidden
+   */
+  CalendarEventTimesChangedEventType = CalendarEventTimesChangedEventType;
+
   /**
    * @hidden
    */
@@ -388,7 +409,12 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
       newEnd = this.dateAdapter.addDays(newEnd, daysDiff);
     }
 
-    this.eventTimesChanged.emit({ newStart, newEnd, event: weekEvent.event });
+    this.eventTimesChanged.emit({
+      newStart,
+      newEnd,
+      event: weekEvent.event,
+      type: CalendarEventTimesChangedEventType.Resize
+    });
     this.currentResizes.delete(weekEvent);
   }
 
@@ -433,7 +459,12 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
         newEnd = this.dateAdapter.addDays(weekEvent.event.end, daysDragged);
       }
 
-      this.eventTimesChanged.emit({ newStart, newEnd, event: weekEvent.event });
+      this.eventTimesChanged.emit({
+        newStart,
+        newEnd,
+        event: weekEvent.event,
+        type: CalendarEventTimesChangedEventType.Drag
+      });
     }
   }
 

test/calendar-day-view.component.spec.ts

@@ -420,6 +420,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(resizeEvent).to.deep.equal({
+      type: 'resize',
       event: fixture.componentInstance.events[0],
       newStart: moment('2016-06-27')
         .add(4, 'hours')
@@ -481,6 +482,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(resizeEvent).to.deep.equal({
+      type: 'resize',
       event: fixture.componentInstance.events[0],
       newStart: moment('2016-06-27')
         .add(4, 'hours')
@@ -539,6 +541,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(resizeEvent).to.deep.equal({
+      type: 'resize',
       event: fixture.componentInstance.events[0],
       newStart: moment('2016-06-27')
         .add(4, 'hours')
@@ -597,6 +600,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(resizeEvent).to.deep.equal({
+      type: 'resize',
       event: fixture.componentInstance.events[0],
       newStart: moment('2016-06-27')
         .add(4, 'hours')
@@ -659,6 +663,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(resizeEvent).to.deep.equal({
+      type: 'resize',
       event: fixture.componentInstance.events[0],
       newStart: moment('2016-06-27')
         .add(4, 'hours')
@@ -798,6 +803,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(eventDropped.getCall(0).args[0]).to.deep.equal({
+      type: 'drag',
       event: fixture.componentInstance.events[0],
       newStart: moment('2016-06-27')
         .add(4, 'hours')
@@ -1000,6 +1006,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(eventDropped.getCall(0).args[0]).to.deep.equal({
+      type: 'drag',
       event: fixture.componentInstance.events[0],
       newStart: moment('2016-06-27')
         .add(4, 'hours')
@@ -1114,6 +1121,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.destroy();
     externalEventFixture.destroy();
     expect(eventDropped).to.have.been.calledWith({
+      type: 'drop',
       event: externalEventFixture.componentInstance.event,
       newStart: moment('2016-06-27')
         .startOf('day')
@@ -1178,6 +1186,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(dragEvent).to.deep.equal({
+      type: 'drag',
       event: fixture.componentInstance.events[0],
       newStart: moment('2016-06-27')
         .add(4, 'hours')
@@ -1259,6 +1268,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(resizeEvents[0]).to.deep.equal({
+      type: 'resize',
       event: fixture.componentInstance.events[0],
       newStart: moment('2016-06-27')
         .add(4, 'hours')
@@ -1269,6 +1279,7 @@ describe('CalendarDayViewComponent component', () => {
         .toDate()
     });
     expect(resizeEvents[1]).to.deep.equal({
+      type: 'resize',
       event: fixture.componentInstance.events[1],
       newStart: moment('2016-06-27')
         .add(6, 'hours')

test/calendar-month-view.component.spec.ts

@@ -599,6 +599,7 @@ describe('calendarMonthView component', () => {
     fixture.detectChanges();
     expect(cells[10].classList.contains('cal-drag-over')).to.equal(false);
     fixture.destroy();
+    expect(dragEvent.type).to.equal('drop');
     expect(dragEvent.event).to.equal(fixture.componentInstance.events[0]);
     expect(dragEvent.newStart).to.deep.equal(new Date(2016, 11, 7, 10, 39, 14));
     expect(dragEvent.newEnd).to.deep.equal(new Date(2016, 11, 7, 15, 11, 5));
@@ -654,6 +655,7 @@ describe('calendarMonthView component', () => {
     });
     fixture.detectChanges();
     fixture.destroy();
+    expect(dragEvent.type).to.equal('drop');
     expect(dragEvent.event).to.equal(fixture.componentInstance.events[0]);
     expect(dragEvent.newStart).to.deep.equal(new Date('2017-01-31'));
     expect(dragEvent.newEnd).to.deep.equal(undefined);

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

@@ -408,6 +408,7 @@ describe('calendarWeekView component', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(resizeEvent).to.deep.equal({
+      type: 'resize',
       event: fixture.componentInstance.events[0],
       newStart: moment('2016-06-27')
         .add(4, 'hours')
@@ -474,6 +475,7 @@ describe('calendarWeekView component', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(resizeEvent).to.deep.equal({
+      type: 'resize',
       event: fixture.componentInstance.events[0],
       newStart: moment('2016-06-27')
         .add(4, 'hours')
@@ -537,6 +539,7 @@ describe('calendarWeekView component', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(resizeEvent).to.deep.equal({
+      type: 'resize',
       event: fixture.componentInstance.events[0],
       newStart: moment('2016-06-27')
         .add(4, 'hours')
@@ -628,6 +631,7 @@ describe('calendarWeekView component', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(resizeEvents[0]).to.deep.equal({
+      type: 'resize',
       event: fixture.componentInstance.events[0],
       newStart: moment('2016-06-27')
         .add(4, 'hours')
@@ -638,6 +642,7 @@ describe('calendarWeekView component', () => {
         .toDate()
     });
     expect(resizeEvents[1]).to.deep.equal({
+      type: 'resize',
       event: fixture.componentInstance.events[1],
       newStart: moment('2016-06-28')
         .add(1, 'day')
@@ -703,6 +708,7 @@ describe('calendarWeekView component', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(eventDropped.getCall(0).args[0]).to.deep.equal({
+      type: 'drag',
       event: fixture.componentInstance.events[0],
       newStart: moment('2016-12-07')
         .add(4, 'hours')
@@ -827,6 +833,7 @@ describe('calendarWeekView component', () => {
     fixture.detectChanges();
     fixture.destroy();
     expect(eventDropped.getCall(0).args[0]).to.deep.equal({
+      type: 'drag',
       event: fixture.componentInstance.events[0],
       newStart: moment('2016-12-07')
         .add(4, 'hours')
@@ -1000,6 +1007,7 @@ describe('calendarWeekView component', () => {
     fixture.destroy();
     externalEventFixture.destroy();
     expect(eventDropped).to.have.been.calledWith({
+      type: 'drop',
       event: externalEventFixture.componentInstance.event,
       newStart: moment('2016-06-27')
         .startOf('week')