Push (#324)

* time select adding onPush

* adding ,

* adding on push to day-time-calendar

* adding more on push

* fixing unit test

* fixing e2e

Author: vlio20

src/app/date-picker/date-picker.component.spec.ts

@@ -1,7 +1,7 @@
 import {DatePickerComponent} from './date-picker.component';
 
 describe('Component: DpDayPicker', () => {
-  const component = new DatePickerComponent(null, null, null, null, null);
+  const component = new DatePickerComponent(null, null, null, null, null, null);
 
   it('should create an instance', () => {
     expect(component).toBeTruthy();

src/app/date-picker/date-picker.component.ts

@@ -18,7 +18,7 @@ import {IDatePickerConfig, IDatePickerConfigInternal} from './date-picker-config
 import {IDpDayPickerApi} from './date-picker.api';
 import {DatePickerService} from './date-picker.service';
 import {
-  AfterViewInit,
+  AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -53,6 +53,7 @@ import {DayTimeCalendarComponent} from '../day-time-calendar/day-time-calendar.c
   templateUrl: 'date-picker.component.html',
   styleUrls: ['date-picker.component.less'],
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     DatePickerService,
     DayTimeCalendarService,
@@ -191,7 +192,8 @@ export class DatePickerComponent implements OnChanges,
               private domHelper: DomHelper,
               private elemRef: ElementRef,
               private renderer: Renderer,
-              private utilsService: UtilsService) {
+              private utilsService: UtilsService,
+              public cd: ChangeDetectorRef) {
   }
 
   @HostListener('click')
@@ -240,6 +242,8 @@ export class DatePickerComponent implements OnChanges,
     } else {
       this.selected = [];
     }
+
+    this.cd.markForCheck();
   }
 
   registerOnChange(fn: any): void {
@@ -382,6 +386,7 @@ export class DatePickerComponent implements OnChanges,
     }
 
     this.open.emit();
+    this.cd.markForCheck();
   }
 
   hideCalendar() {
@@ -392,6 +397,7 @@ export class DatePickerComponent implements OnChanges,
     }
 
     this.close.emit();
+    this.cd.markForCheck();
   }
 
   onViewDateChange(value: string) {

src/app/date-picker/date-picker.directive.ts

@@ -16,7 +16,6 @@ import {
   ViewContainerRef
 } from '@angular/core';
 import {NgControl} from '@angular/forms';
-import {Moment} from 'moment';
 import {CalendarValue} from '../common/types/calendar-value';
 import {SingleCalendarValue} from '../common/types/single-calendar-value';
 
@@ -43,6 +42,7 @@ export class DatePickerDirective implements OnInit {
   @Input('dpDayPicker') set config(config: IDatePickerDirectiveConfig) {
     this._config = this.service.getConfig(config, this.viewContainerRef.element, this.attachTo);
     this.updateDatepickerConfig();
+    this.markForCheck();
   }
 
   get attachTo(): ElementRef | string {
@@ -53,6 +53,7 @@ export class DatePickerDirective implements OnInit {
     this._attachTo = attachTo;
     this._config = this.service.getConfig(this.config, this.viewContainerRef.element, this.attachTo);
     this.updateDatepickerConfig();
+    this.markForCheck();
   }
 
   get theme(): string {
@@ -64,6 +65,8 @@ export class DatePickerDirective implements OnInit {
     if (this.datePicker) {
       this.datePicker.theme = theme;
     }
+
+    this.markForCheck();
   }
 
   get mode(): CalendarMode {
@@ -75,6 +78,8 @@ export class DatePickerDirective implements OnInit {
     if (this.datePicker) {
       this.datePicker.mode = mode;
     }
+
+    this.markForCheck();
   }
 
   @Input() set minDate(minDate: SingleCalendarValue) {
@@ -83,6 +88,8 @@ export class DatePickerDirective implements OnInit {
       this.datePicker.minDate = minDate;
       this.datePicker.ngOnInit();
     }
+
+    this.markForCheck();
   }
 
   get minDate(): SingleCalendarValue {
@@ -95,6 +102,8 @@ export class DatePickerDirective implements OnInit {
       this.datePicker.maxDate = maxDate;
       this.datePicker.ngOnInit();
     }
+
+    this.markForCheck();
   }
 
   get maxDate(): SingleCalendarValue {
@@ -107,6 +116,8 @@ export class DatePickerDirective implements OnInit {
       this.datePicker.minTime = minTime;
       this.datePicker.ngOnInit();
     }
+
+    this.markForCheck();
   }
 
   get minTime(): SingleCalendarValue {
@@ -119,6 +130,8 @@ export class DatePickerDirective implements OnInit {
       this.datePicker.maxTime = maxTime;
       this.datePicker.ngOnInit();
     }
+
+    this.markForCheck();
   }
 
   get maxTime(): SingleCalendarValue {
@@ -132,6 +145,8 @@ export class DatePickerDirective implements OnInit {
   @Input() set displayDate(displayDate: SingleCalendarValue) {
     this._displayDate = displayDate;
     this.updateDatepickerConfig();
+
+    this.markForCheck();
   }
 
   @Output() open = new EventEmitter<void>();
@@ -241,4 +256,10 @@ export class DatePickerDirective implements OnInit {
       }
     }
   }
+
+  markForCheck() {
+    if (this.datePicker) {
+      this.datePicker.cd.markForCheck();
+    }
+  }
 }

src/app/day-time-calendar/day-time-calendar.component.ts

@@ -1,15 +1,18 @@
 import {ECalendarValue} from '../common/types/calendar-value-enum';
 import {SingleCalendarValue} from '../common/types/single-calendar-value';
 import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   forwardRef,
   HostBinding,
   Input,
   OnChanges,
   OnInit,
-  Output, SimpleChange,
-  SimpleChanges, ViewChild,
+  Output,
+  SimpleChanges,
+  ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import {
@@ -35,6 +38,7 @@ import {DayCalendarComponent} from '../day-calendar/day-calendar.component';
   selector: 'dp-day-time-calendar',
   templateUrl: 'day-time-calendar.component.html',
   styleUrls: ['day-time-calendar.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   providers: [
     DayTimeCalendarService,
@@ -81,7 +85,8 @@ export class DayTimeCalendarComponent implements OnInit, OnChanges, ControlValue
   }
 
   constructor(public dayTimeCalendarService: DayTimeCalendarService,
-              public utilsService: UtilsService) {
+              public utilsService: UtilsService,
+              public cd: ChangeDetectorRef) {
   }
 
   ngOnInit() {
@@ -117,6 +122,8 @@ export class DayTimeCalendarComponent implements OnInit, OnChanges, ControlValue
     } else {
       this.selected = null;
     }
+
+    this.cd.markForCheck();
   }
 
   registerOnChange(fn: any): void {

src/app/time-select/time-select.component.ts

@@ -1,6 +1,8 @@
 import {ECalendarValue} from '../common/types/calendar-value-enum';
 import {SingleCalendarValue} from '../common/types/single-calendar-value';
 import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   forwardRef,
@@ -34,6 +36,7 @@ import {DateValidator} from '../common/types/validator.type';
   templateUrl: 'time-select.component.html',
   styleUrls: ['time-select.component.less'],
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     TimeSelectService,
     {
@@ -106,7 +109,8 @@ export class TimeSelectComponent implements OnInit, OnChanges, ControlValueAcces
   };
 
   constructor(public timeSelectService: TimeSelectService,
-              public utilsService: UtilsService) {
+              public utilsService: UtilsService,
+              public cd: ChangeDetectorRef) {
   }
 
   ngOnInit() {
@@ -144,6 +148,8 @@ export class TimeSelectComponent implements OnInit, OnChanges, ControlValueAcces
           .getInputType(this.inputValue, false);
       }
     }
+
+    this.cd.markForCheck();
   }
 
   registerOnChange(fn: any): void {
@@ -201,6 +207,7 @@ export class TimeSelectComponent implements OnInit, OnChanges, ControlValueAcces
 
   emitChange() {
     this.onChange.emit({date: this.selected, selected: false});
+    this.cd.markForCheck();
   }
 
   calculateTimeParts(time: Moment) {