feat(week-view): expose the view period on beforeViewRender

BREAKING CHANGE: for people extending the root week view component, eventRows is now named view.eventRows

Closes #418

Author: Matt Lewis

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

@@ -17,7 +17,10 @@ import {
   WeekDay,
   CalendarEvent,
   WeekViewEvent,
-  WeekViewEventRow
+  WeekViewEventRow,
+  WeekView,
+  ViewPeriod,
+  MonthViewDay
 } from 'calendar-utils';
 import { ResizeEvent } from 'angular-resizable-element';
 import addDays from 'date-fns/add_days';
@@ -33,6 +36,11 @@ export interface WeekViewEventResize {
   edge: string;
 }
 
+export interface CalendarWeekViewBeforeRenderEvent {
+  header: WeekDay[];
+  period: ViewPeriod;
+}
+
 /**
  * Shows all events on a given week. Example usage:
  *
@@ -54,7 +62,7 @@ export interface WeekViewEventResize {
         (dayHeaderClicked)="dayHeaderClicked.emit($event)"
         (eventDropped)="eventTimesChanged.emit($event)">
       </mwl-calendar-week-view-header>
-      <div *ngFor="let eventRow of eventRows" #eventRowContainer class="cal-events-row">
+      <div *ngFor="let eventRow of view.eventRows" #eventRowContainer class="cal-events-row">
         <div
           *ngFor="let weekEvent of eventRow.row"
           #event
@@ -194,7 +202,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    * If you add the `cssClass` property to a day in the header it will add that class to the cell element in the template
    */
   @Output()
-  beforeViewRender: EventEmitter<{ header: WeekDay[] }> = new EventEmitter();
+  beforeViewRender = new EventEmitter<CalendarWeekViewBeforeRenderEvent>();
 
   /**
    * @hidden
@@ -204,7 +212,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   /**
    * @hidden
    */
-  eventRows: WeekViewEventRow[] = [];
+  view: WeekView;
 
   /**
    * @hidden
@@ -401,24 +409,32 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
       excluded: this.excludeDays,
       weekendDays: this.weekendDays
     });
-    this.beforeViewRender.emit({
-      header: this.days
-    });
+    this.emitBeforeViewRender();
   }
 
   private refreshBody(): void {
-    this.eventRows = this.utils.getWeekView({
+    this.view = this.utils.getWeekView({
       events: this.events,
       viewDate: this.viewDate,
       weekStartsOn: this.weekStartsOn,
       excluded: this.excludeDays,
       precision: this.precision,
       absolutePositionedEvents: true
-    }).eventRows;
+    });
+    this.emitBeforeViewRender();
   }
 
   private refreshAll(): void {
     this.refreshHeader();
     this.refreshBody();
   }
+
+  private emitBeforeViewRender(): void {
+    if (this.days && this.view) {
+      this.beforeViewRender.emit({
+        header: this.days,
+        period: this.view.period
+      });
+    }
+  }
 }

src/modules/week/calendar-week.module.ts

@@ -7,7 +7,10 @@ import { CalendarWeekViewHeaderComponent } from './calendar-week-view-header.com
 import { CalendarWeekViewEventComponent } from './calendar-week-view-event.component';
 import { CalendarCommonModule } from '../common/calendar-common.module';
 
-export { CalendarWeekViewComponent } from './calendar-week-view.component';
+export {
+  CalendarWeekViewComponent,
+  CalendarWeekViewBeforeRenderEvent
+} from './calendar-week-view.component';
 export {
   WeekViewEvent as CalendarWeekViewEvent,
   WeekViewEventRow as CalendarWeekViewEventRow,

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

@@ -180,9 +180,9 @@ describe('calendarWeekView component', () => {
     };
     fixture.componentInstance.events.push(event);
     fixture.componentInstance.refresh.next(true);
-    expect(fixture.componentInstance.eventRows[0].row[0].event).to.deep.equal(
-      event
-    );
+    expect(
+      fixture.componentInstance.view.eventRows[0].row[0].event
+    ).to.deep.equal(event);
     fixture.destroy();
   });
 
@@ -837,4 +837,45 @@ describe('calendarWeekView component', () => {
     stub.restore();
     expect(stub).to.have.been.calledOnce; // tslint:disable-line
   });
+
+  it('should only call the beforeViewRender output once when refreshing the view', () => {
+    const fixture: ComponentFixture<
+      CalendarWeekViewComponent
+    > = TestBed.createComponent(CalendarWeekViewComponent);
+    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<
+      CalendarWeekViewComponent
+    > = TestBed.createComponent(CalendarWeekViewComponent);
+    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();
+  });
 });