feat(dayView): allow resizing of events

Matt Lewis · Matt Lewis · commit 95b903391907 · 2016-11-03T17:15:54.000Z
BREAKING CHANGE: A dependency on the `angular-resizable-element` library has now been added. System.js users will need to add this to their config ``` 'angular-resizable-element': 'npm:angular-resizable-element/dist/umd/angular-resizable-element.js', ``` Part of #9
diff --git a/demo/demo.component.ts b/demo/demo.component.ts
@@ -9,11 +9,14 @@ import {
   addWeeks,
   subWeeks,
   addMonths,
-  subMonths
+  subMonths,
+  addHours
 } from 'date-fns';
+import { Subject } from 'rxjs/Subject';
 import {
   CalendarEvent,
-  CalendarEventAction
+  CalendarEventAction,
+  CalendarEventTimesChangedEvent
 } from './../src'; // import should be from `angular2-calendar` in your app
 
 const colors: any = {
@@ -74,18 +77,22 @@ const colors: any = {
           *ngSwitchCase="'month'"
           [viewDate]="viewDate"
           [events]="events"
+          [refresh]="refresh"
           [activeDayIsOpen]="activeDayIsOpen"
           (dayClicked)="dayClicked($event.day)">
         </mwl-calendar-month-view>
         <mwl-calendar-week-view
           *ngSwitchCase="'week'"
           [viewDate]="viewDate"
-          [events]="events">
+          [events]="events"
+          [refresh]="refresh">
         </mwl-calendar-week-view>
         <mwl-calendar-day-view
           *ngSwitchCase="'day'"
           [viewDate]="viewDate"
-          [events]="events">
+          [events]="events"
+          [refresh]="refresh"
+          (eventTimesChanged)="eventTimesChanged($event)">
         </mwl-calendar-day-view>
       </div>
     </div>
@@ -109,6 +116,8 @@ export class DemoComponent {
     }
   }];
 
+  refresh: Subject<any> = new Subject();
+
   events: CalendarEvent[] = [{
     start: subDays(startOfDay(new Date()), 1),
     end: addDays(new Date(), 1),
@@ -125,6 +134,16 @@ export class DemoComponent {
     end: addDays(endOfMonth(new Date()), 3),
     title: 'A long event that spans 2 months',
     color: colors.blue
+  }, {
+    start: addHours(startOfDay(new Date()), 2),
+    end: new Date(),
+    title: 'A resizable event',
+    color: colors.yellow,
+    actions: this.actions,
+    resizable: {
+      beforeStart: true,
+      afterEnd: true
+    }
   }];
 
   activeDayIsOpen: boolean = true;
@@ -172,4 +191,10 @@ export class DemoComponent {
     }
   }
 
+  eventTimesChanged({event, newStart, newEnd}: CalendarEventTimesChangedEvent): void {
+    event.start = newStart;
+    event.end = newEnd;
+    this.refresh.next();
+  }
+
 }
diff --git a/package.json b/package.json
@@ -124,7 +124,8 @@
   "dependencies": {
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.0",
     "@types/date-fns": "0.0.2",
-    "calendar-utils": "0.0.35",
+    "angular-resizable-element": "~0.5.0",
+    "calendar-utils": "0.0.36",
     "date-fns": "^1.3.0"
   }
 }
diff --git a/src/calendar.module.ts b/src/calendar.module.ts
@@ -1,5 +1,6 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ResizableModule } from 'angular-resizable-element';
 import { CalendarDayViewComponent } from './components/day/calendarDayView.component';
 import { CalendarWeekViewComponent } from './components/week/calendarWeekView.component';
 import { CalendarMonthViewComponent } from './components/month/calendarMonthView.component';
@@ -37,7 +38,7 @@ import { CalendarDateFormatter } from './providers/calendarDateFormatter.provide
     CalendarDate,
     CalendarEventTitlePipe
   ],
-  imports: [CommonModule],
+  imports: [CommonModule, ResizableModule],
   exports: [CalendarDayViewComponent, CalendarWeekViewComponent, CalendarMonthViewComponent, CalendarDate],
   entryComponents: [CalendarTooltipWindowComponent]
 })
diff --git a/src/components/day/calendarDayView.component.ts b/src/components/day/calendarDayView.component.ts
@@ -32,7 +32,10 @@ const SEGMENT_HEIGHT: number = 30;
           <mwl-calendar-day-view-event
             *ngFor="let dayEvent of view?.events"
             [dayEvent]="dayEvent"
-            (eventClicked)="eventClicked.emit({event: dayEvent.event})">
+            [hourSegments]="hourSegments"
+            [eventSnapSize]="eventSnapSize"
+            (eventClicked)="eventClicked.emit({event: dayEvent.event})"
+            (eventResized)="eventTimesChanged.emit($event)">
           </mwl-calendar-day-view-event>
         </div>
         <div class="cal-hour" *ngFor="let hour of hours" [style.minWidth.px]="view?.width + 70">
@@ -105,6 +108,11 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() hourSegmentModifier: Function;
 
+  /**
+   * The grid size to snap resizing and dragging of events to
+   */
+  @Input() eventSnapSize: number = 30;
+
   /**
    * Called when an event title is clicked
    */
@@ -115,6 +123,12 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Output() hourSegmentClicked: EventEmitter<{date: Date}> = new EventEmitter<{date: Date}>();
 
+  /**
+   * Called when an event is resized or dragged and dropped
+   */
+  @Output() eventTimesChanged: EventEmitter<{newStart: Date, newEnd: Date, event: CalendarEvent}>
+    = new EventEmitter<{newStart: Date, newEnd: Date, event: CalendarEvent}>();
+
   hours: DayViewHour[] = [];
   view: DayView;
   width: number = 0;
diff --git a/src/components/day/calendarDayViewEvent.component.ts b/src/components/day/calendarDayViewEvent.component.ts
@@ -1,5 +1,7 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { DayViewEvent } from 'calendar-utils';
+import { ResizeEvent } from 'angular-resizable-element';
+import addMinutes from 'date-fns/add_minutes';
 
 @Component({
   selector: 'mwl-calendar-day-view-event',
@@ -15,7 +17,13 @@ import { DayViewEvent } from 'calendar-utils';
       [style.borderColor]="dayEvent.event.color.primary"
       [class.cal-starts-within-day]="!dayEvent.startsBeforeDay"
       [class.cal-ends-within-day]="!dayEvent.endsAfterDay"
-      [ngClass]="dayEvent.event.cssClass">
+      [ngClass]="dayEvent.event.cssClass"
+      mwlResizable
+      [resizeEdges]="{top: dayEvent.event?.resizable?.beforeStart, bottom: dayEvent.event?.resizable?.afterEnd}"
+      [resizeSnapGrid]="{top: eventSnapSize, bottom: eventSnapSize}"
+      (resizeStart)="resizeStarted(dayEvent, $event)"
+      (resizing)="resizing(dayEvent, $event)"
+      (resizeEnd)="resizeEnded(dayEvent)">
       <mwl-calendar-event-title
         [event]="dayEvent.event"
         view="day"
@@ -29,6 +37,60 @@ export class CalendarDayViewEventComponent {
 
   @Input() dayEvent: DayViewEvent;
 
+  @Input() hourSegments: number;
+
+  @Input() eventSnapSize: number;
+
   @Output() eventClicked: EventEmitter<any> = new EventEmitter();
 
+  @Output() eventResized: EventEmitter<any> = new EventEmitter();
+
+  currentResize: {
+    originalTop: number,
+    originalHeight: number,
+    edge: string
+  };
+
+  resizeStarted(event: DayViewEvent, resizeEvent: ResizeEvent): void {
+    this.currentResize = {
+      originalTop: event.top,
+      originalHeight: event.height,
+      edge: typeof resizeEvent.edges.top !== 'undefined' ? 'top' : 'bottom'
+    };
+  }
+
+  resizing(event: DayViewEvent, resizeEvent: ResizeEvent): void {
+    if (resizeEvent.edges.top) {
+      event.top = this.currentResize.originalTop + +resizeEvent.edges.top;
+    } else if (resizeEvent.edges.bottom) {
+      event.height = this.currentResize.originalHeight + +resizeEvent.edges.bottom;
+    }
+  }
+
+  resizeEnded(dayEvent: DayViewEvent): void {
+
+    let segments: number;
+    if (this.currentResize.edge === 'top') {
+      segments = (dayEvent.top - this.currentResize.originalTop) / this.eventSnapSize;
+    } else {
+      segments = (dayEvent.height - this.currentResize.originalHeight) / this.eventSnapSize;
+    }
+
+    dayEvent.top = this.currentResize.originalTop;
+    dayEvent.height = this.currentResize.originalHeight;
+
+    const segmentAmountInMinutes: number = 60 / this.hourSegments;
+    const minutesMoved: number = segments * segmentAmountInMinutes;
+    let newStart: Date = dayEvent.event.start;
+    let newEnd: Date = dayEvent.event.end;
+    if (this.currentResize.edge === 'top') {
+      newStart = addMinutes(newStart, minutesMoved);
+    } else if (newEnd) {
+      newEnd = addMinutes(newEnd, minutesMoved);
+    }
+
+    this.eventResized.emit({newStart, newEnd, event: dayEvent.event});
+
+  }
+
 }
diff --git a/src/index.ts b/src/index.ts
@@ -3,6 +3,7 @@ export * from './providers/calendarMomentDateFormatter.provider';
 export * from './providers/calendarNativeDateFormatter.provider';
 export * from './providers/calendarDateFormatter.provider';
 export * from './interfaces/calendarDateFormatter.interface';
+export * from './interfaces/calendarEventTimesChangedEvent.interface';
 export * from './calendar.module';
 export {CalendarEvent, EventAction as CalendarEventAction} from 'calendar-utils';
 
diff --git a/src/interfaces/calendarEventTimesChangedEvent.interface.ts b/src/interfaces/calendarEventTimesChangedEvent.interface.ts
@@ -0,0 +1,7 @@
+import { CalendarEvent } from 'calendar-utils';
+
+export interface CalendarEventTimesChangedEvent {
+  event: CalendarEvent;
+  newStart: Date;
+  newEnd: Date;
+}
diff --git a/test/calendarDayView.component.spec.ts b/test/calendarDayView.component.spec.ts
@@ -12,11 +12,13 @@ import {
   CalendarMomentDateFormatter,
   CalendarDateFormatter,
   CalendarModule,
-  MOMENT
+  MOMENT,
+  CalendarEventTimesChangedEvent
 } from './../src';
 import { CalendarDayViewComponent } from './../src/components/day/calendarDayView.component';
 import { Subject } from 'rxjs/Rx';
 import { spy } from 'sinon';
+import { triggerDomEvent } from './util';
 
 describe('CalendarDayViewComponent component', () => {
 
@@ -248,4 +250,77 @@ describe('CalendarDayViewComponent component', () => {
     fixture.destroy();
   });
 
+  it('should resize the event by dragging from the top edge', () => {
+    const fixture: ComponentFixture<CalendarDayViewComponent> = TestBed.createComponent(CalendarDayViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-06-27');
+    fixture.componentInstance.events = [{
+      title: 'foo',
+      color: {primary: '', secondary: ''},
+      start: moment('2016-06-27').add(4, 'hours').toDate(),
+      end: moment('2016-06-27').add(6, 'hours').toDate(),
+      resizable: {
+        beforeStart: true
+      }
+    }];
+    fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event');
+    const rect: ClientRect = event.getBoundingClientRect();
+    let resizeEvent: CalendarEventTimesChangedEvent;
+    fixture.componentInstance.eventTimesChanged.subscribe(event => {
+      resizeEvent = event;
+    });
+    triggerDomEvent('mousedown', document.body, {clientY: rect.top, clientX: rect.left + 10});
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', document.body, {clientY: rect.top - 30, clientX: rect.left + 10});
+    fixture.detectChanges();
+    expect(event.getBoundingClientRect().top).to.equal(rect.top - 30);
+    triggerDomEvent('mouseup', document.body, {clientY: rect.top - 30, clientX: rect.left + 10});
+    fixture.detectChanges();
+    fixture.destroy();
+    expect(resizeEvent).to.deep.equal({
+      event: fixture.componentInstance.events[0],
+      newStart: moment('2016-06-27').add(4, 'hours').subtract(30, 'minutes').toDate(),
+      newEnd: moment('2016-06-27').add(6, 'hours').toDate()
+    });
+  });
+
+  it('should resize the event by dragging from the bottom edge', () => {
+    const fixture: ComponentFixture<CalendarDayViewComponent> = TestBed.createComponent(CalendarDayViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-06-27');
+    fixture.componentInstance.events = [{
+      title: 'foo',
+      color: {primary: '', secondary: ''},
+      start: moment('2016-06-27').add(4, 'hours').toDate(),
+      end: moment('2016-06-27').add(6, 'hours').toDate(),
+      resizable: {
+        afterEnd: true
+      }
+    }];
+    fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event');
+    const rect: ClientRect = event.getBoundingClientRect();
+    let resizeEvent: CalendarEventTimesChangedEvent;
+    fixture.componentInstance.eventTimesChanged.subscribe(event => {
+      resizeEvent = event;
+    });
+    triggerDomEvent('mousedown', document.body, {clientY: rect.bottom, clientX: rect.left + 10});
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', document.body, {clientY: rect.bottom + 30, clientX: rect.left + 10});
+    fixture.detectChanges();
+    expect(event.getBoundingClientRect().bottom).to.equal(rect.bottom + 30);
+    expect(event.getBoundingClientRect().height).to.equal(150);
+    triggerDomEvent('mouseup', document.body, {clientY: rect.top + 30, clientX: rect.left + 10});
+    fixture.detectChanges();
+    fixture.destroy();
+    expect(resizeEvent).to.deep.equal({
+      event: fixture.componentInstance.events[0],
+      newStart: moment('2016-06-27').add(4, 'hours').toDate(),
+      newEnd: moment('2016-06-27').add(6, 'hours').add(30, 'minutes').toDate()
+    });
+  });
+
 });
diff --git a/webpack.config.umd.ts b/webpack.config.umd.ts
@@ -59,6 +59,16 @@ module.exports = {
       commonjs: 'date-fns/get_iso_week/index',
       commonjs2: 'date-fns/get_iso_week/index'
     },
+    'date-fns/add_minutes': {
+      root: ['dateFns', 'addMinutes'],
+      commonjs: 'date-fns/add_minutes/index',
+      commonjs2: 'date-fns/add_minutes/index'
+    },
+    'angular-resizable-element': {
+      root: 'angularResizableElement',
+      commonjs: 'angular-resizable-element',
+      commonjs2: 'angular-resizable-element'
+    }
   },
   module: {
     rules: [{

Original file line number	Diff line number	Diff line change
`@@ -124,7 +124,8 @@`
`124`	`124`	`"dependencies": {`
`125`	`125`	`"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.0",`
`126`	`126`	`"@types/date-fns": "0.0.2",`
`127`		`- "calendar-utils": "0.0.35",`
	`127`	`+ "angular-resizable-element": "~0.5.0",`
	`128`	`+ "calendar-utils": "0.0.36",`
`128`	`129`	`"date-fns": "^1.3.0"`
`129`	`130`	`}`
`130`	`131`	`}`