feat(day-view): expose the period on the beforeViewRender output

BREAKING CHANGE: the event signature of the beforeViewRender output has changed from $event.body to $event.body.hourGrid

Closes #418

Author: Matt Lewis

demos/demo-modules/selectable-period/template.html

@@ -22,7 +22,7 @@
     *ngSwitchCase="'day'"
     [viewDate]="viewDate"
     [events]="events"
-    (beforeViewRender)="beforeDayViewRender($event.body)"
+    (beforeViewRender)="beforeDayViewRender($event.body.hourGrid)"
     (hourSegmentClicked)="hourSegmentClicked($event.date)">
   </mwl-calendar-day-view>
-</div>
+</div>

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

@@ -16,7 +16,8 @@ import {
   DayView,
   DayViewHour,
   DayViewHourSegment,
-  DayViewEvent
+  DayViewEvent,
+  ViewPeriod
 } from 'calendar-utils';
 import { Subject } from 'rxjs/Subject';
 import { Subscription } from 'rxjs/Subscription';
@@ -28,6 +29,13 @@ import { CalendarEventTimesChangedEvent } from '../common/calendar-event-times-c
 import { CalendarUtils } from '../common/calendar-utils.provider';
 import { validateEvents } from '../common/util';
 
+export interface CalendarDayViewBeforeRenderEvent {
+  body: {
+    hourGrid: DayViewHour[];
+  };
+  period: ViewPeriod;
+}
+
 /**
  * @hidden
  */
@@ -222,32 +230,30 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
    * Called when an event title is clicked
    */
   @Output()
-  eventClicked: EventEmitter<{ event: CalendarEvent }> = new EventEmitter<{
+  eventClicked = new EventEmitter<{
     event: CalendarEvent;
   }>();
 
   /**
    * Called when an hour segment is clicked
    */
   @Output()
-  hourSegmentClicked: EventEmitter<{ date: Date }> = new EventEmitter<{
+  hourSegmentClicked = new EventEmitter<{
     date: Date;
   }>();
 
   /**
    * Called when an event is resized or dragged and dropped
    */
   @Output()
-  eventTimesChanged: EventEmitter<
-    CalendarEventTimesChangedEvent
-  > = new EventEmitter<CalendarEventTimesChangedEvent>();
+  eventTimesChanged = new EventEmitter<CalendarEventTimesChangedEvent>();
 
   /**
    * An output that will be called before the view is rendered for the current day.
-   * If you add the `cssClass` property to a segment it will add that class to the hour segment in the template
+   * If you add the `cssClass` property to an hour grid segment it will add that class to the hour segment in the template
    */
   @Output()
-  beforeViewRender: EventEmitter<{ body: DayViewHour[] }> = new EventEmitter();
+  beforeViewRender = new EventEmitter<CalendarDayViewBeforeRenderEvent>();
 
   /**
    * @hidden
@@ -450,9 +456,7 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
         minute: this.dayEndMinute
       }
     });
-    this.beforeViewRender.emit({
-      body: this.hours
-    });
+    this.emitBeforeViewRender();
   }
 
   private refreshView(): void {
@@ -471,10 +475,22 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
       eventWidth: this.eventWidth,
       segmentHeight: this.hourSegmentHeight
     });
+    this.emitBeforeViewRender();
   }
 
   private refreshAll(): void {
     this.refreshHourGrid();
     this.refreshView();
   }
+
+  private emitBeforeViewRender(): void {
+    if (this.hours && this.view) {
+      this.beforeViewRender.emit({
+        body: {
+          hourGrid: this.hours
+        },
+        period: this.view.period
+      });
+    }
+  }
 }

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

@@ -318,7 +318,7 @@ describe('CalendarDayViewComponent component', () => {
     > = TestBed.createComponent(CalendarDayViewComponent);
     fixture.componentInstance.viewDate = new Date('2016-06-27');
     fixture.componentInstance.beforeViewRender.take(1).subscribe(({ body }) => {
-      body.forEach(hour => {
+      body.hourGrid.forEach(hour => {
         hour.segments.forEach(segment => {
           segment.cssClass = 'foo';
         });
@@ -1012,4 +1012,45 @@ describe('CalendarDayViewComponent component', () => {
       fixture.nativeElement.querySelector('.cal-hour-segment').style.height
     ).to.equal('45px');
   });
+
+  it('should only call the beforeViewRender output once when refreshing the view', () => {
+    const fixture: ComponentFixture<
+      CalendarDayViewComponent
+    > = TestBed.createComponent(CalendarDayViewComponent);
+    fixture.componentInstance.refresh = new Subject();
+    fixture.componentInstance.ngOnInit();
+    fixture.componentInstance.viewDate = new Date('2016-06-27');
+    const beforeViewRenderCalled = sinon.spy();
+    // use subscription to test that it was only called a max of one times
+    const subscription = fixture.componentInstance.beforeViewRender.subscribe(
+      beforeViewRenderCalled
+    );
+    fixture.componentInstance.refresh.next(true);
+    expect(beforeViewRenderCalled).to.have.callCount(1);
+    subscription.unsubscribe();
+    fixture.destroy();
+  });
+
+  it('should expose the view period on the beforeViewRender output', () => {
+    const fixture: ComponentFixture<
+      CalendarDayViewComponent
+    > = TestBed.createComponent(CalendarDayViewComponent);
+    const beforeViewRenderCalled = sinon.spy();
+    fixture.componentInstance.beforeViewRender
+      .take(1)
+      .subscribe(beforeViewRenderCalled);
+    fixture.componentInstance.ngOnInit();
+    fixture.componentInstance.viewDate = new Date('2016-06-27');
+    fixture.componentInstance.ngOnChanges({ viewDate: {} });
+    expect(
+      beforeViewRenderCalled.getCall(0).args[0].period.start instanceof Date
+    ).to.equal(true);
+    expect(
+      beforeViewRenderCalled.getCall(0).args[0].period.end instanceof Date
+    ).to.equal(true);
+    expect(
+      Array.isArray(beforeViewRenderCalled.getCall(0).args[0].period.events)
+    ).to.equal(true);
+    fixture.destroy();
+  });
 });