adding move to - to all components (#333)

* adding move to - to all componentns * trying to fix e2e * trying to fix e2e
vlio20 · Jan 9, 2018 · 349d48c · 349d48c
1 parent 67673b2
commit 349d48c
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -151,13 +151,14 @@ class MyContainer {
     }
 }  
 ```
-Here is the list of APIs:  
 
-| Name                 | Signature       | Description            |
-|----------------------|:---------------:|------------------------|
-| open                 | `() => void`    | Opens the date picker  |
-| close                | `() => void`    | Closes the date picker |
+Here is the list of APIs:  
 
+| Name                 | Signature                          | Description                      |
+|----------------------|:----------------------------------:|----------------------------------|
+| open                 | `() => void`                       | Opens the date picker            |
+| close                | `() => void`                       | Closes the date picker           |
+| moveCalendarTo       | `(to: Moment \| String) => void`   | Moves calendar to specific date  |
 
 ## Inline - Day Calendar
 
@@ -220,15 +221,6 @@ Here are the available configurations:
 ## Inline - Month Calendar
 
 You can use the `<dp-month-calendar>` component to display the calendar widget without an associated input box.
-
-Here is the list of APIs:  
-
-| Name                 | Signature                                                                           | Description                      |
-|----------------------|:-----------------------------------------------------------------------------------:|----------------------------------|
-| moveCalendarsBy      | `(current: Moment, amount: number, granularity: moment.unitOfTime.Base) => void`    | Moves calendar by given amount   |
-| moveCalendarTo       | `(to: Moment \| String) => void`                                                    | Moves calendar to specific date  |
-| toggleCalendarMode   | `(mode: day \| month) => void`                                                      | Changes clander mode day/month   |
-
 i.e.
 ```html
 <dp-month-calendar [(ngModel)]="selectedDate" [config]="config"></dp-month-calendar>
@@ -273,6 +265,14 @@ Here are the available configurations:
 | showMultipleYearsNavigation | `boolean`            | `false`                                                                   | If set to `true` will show buttons to navigate by multiple years (10 by default)                                                                                                                                                                                              |
 | multipleYearsNavigateBy     | `number`             | `10`                                                                      | Number of years to navigate when showMultipleYearsNavigation is `true`                                                                                                                                                                                                        |
 
+Here is the list of APIs:  
+
+| Name                 | Signature                                                                           | Description                      |
+|----------------------|:-----------------------------------------------------------------------------------:|----------------------------------|
+| moveCalendarsBy      | `(current: Moment, amount: number, granularity: moment.unitOfTime.Base) => void`    | Moves calendar by given amount   |
+| moveCalendarTo       | `(to: Moment \| String) => void`                                                    | Moves calendar to specific date  |
+| toggleCalendarMode   | `(mode: day \| month) => void`                                                      | Changes clander mode day/month   |
+
 
 ## Inline - Time Select
 
@@ -429,6 +429,12 @@ In order to provide configurations to the date-picker you need to pass it to the
 
 The `IDatePickerDirectiveConfig` is identical to [`IDatePickerConfig`](#configuration) above except that it lacks the `showGoToCurrent` property.
 
+Here is the list of APIs:  
+
+| Name                 | Signature                          | Description                      |
+|----------------------|:----------------------------------:|----------------------------------|
+| moveCalendarTo       | `(to: Moment \| String) => void`   | Moves calendar to specific date  |
+
 ## Compatibility
 
 ### Internet Explorer 10:

diff --git a/e2e/app.po.ts b/e2e/app.po.ts
@@ -43,9 +43,12 @@ export class DemoPage {
   showWeekNumbersRadio = $('#showWeekNumbersRadio');
   hideWeekNumbersRadio = $('#hideWeekNumbersRadio');
   weekNumbers = $$(`${this.popupSelector} .dp-week-number`);
-  deyCalendarNavHeader = $(`${this.popupSelector} .dp-nav-header`);
   dayCalendarNavHeaderBtn = $(`${this.popupSelector} .dp-nav-header-btn`);
   deyCalendarMonthNavHeader = $(`${this.popupSelector} dp-month-calendar .dp-nav-header`);
+  dayTimeCalendarNavHeaderBtnInline = $(`dp-day-time-calendar .dp-nav-header-btn`);
+  dayCalendarNavHeaderBtnInline = $(`dp-day-calendar .dp-nav-header-btn`);
+  monthCalendarNavHeaderInline = $(`dp-month-calendar .dp-nav-header`);
+  navHeader = $(`${this.popupSelector} .dp-nav-header`);
   dayCalendarNavMonthHeaderBtn = $(`${this.popupSelector} dp-month-calendar .dp-nav-header-btn`);
   calendarDisabledDays = $$(`${this.popupSelector} .dp-calendar-day[disabled]`);
   calendarFirstDayOfMonth = $$(`${this.popupSelector} .dp-current-month`).get(0);
@@ -145,6 +148,7 @@ export class DemoPage {
   timeDirectiveMenu = $('#timeDirectiveMenu');
 
   openBtn = $('#openBtn');
+  moveCalendarTo = $('#moveCalendarTo');
 
   navigateTo() {
     return browser.get('/');

diff --git a/e2e/move-to-date-api-e2e.spec.ts b/e2e/move-to-date-api-e2e.spec.ts
@@ -0,0 +1,36 @@
+import {DemoPage} from './app.po';
+
+describe('Move to date api', () => {
+
+  let page: DemoPage;
+
+  beforeEach(() => {
+    page = new DemoPage();
+    page.navigateTo();
+  });
+
+  it('should move to date API on day', () => {
+    const runner = (menuItem, input, isPicker, cont) => {
+      menuItem.click();
+      page.moveCalendarTo.click();
+
+      if (isPicker) {
+        input.click();
+      }
+
+      expect(cont.getText()).toContain('1987');
+    };
+
+    runner(page.dayPickerMenu, page.dayPickerInput, true, page.dayCalendarNavHeaderBtn);
+    runner(page.dayDirectiveMenu, page.dayDirectiveInput, true, page.dayCalendarNavHeaderBtn);
+    runner(page.dayInlineMenu, null, false, page.dayCalendarNavHeaderBtnInline);
+
+    runner(page.daytimePickerMenu, page.daytimePickerInput, true, page.dayCalendarNavHeaderBtn);
+    runner(page.daytimeDirectiveMenu, page.daytimeDirectiveInput, true, page.dayCalendarNavHeaderBtn);
+    runner(page.daytimeInlineMenu, null, false, page.dayTimeCalendarNavHeaderBtnInline);
+
+    runner(page.monthPickerMenu, page.monthPickerInput, true, page.navHeader);
+    runner(page.monthDirectiveMenu, page.monthDirectiveInput, true, page.navHeader);
+    runner(page.monthInlineMenu, null, false, page.monthCalendarNavHeaderInline);
+  });
+});
diff --git a/src/app/date-picker/date-picker.api.ts b/src/app/date-picker/date-picker.api.ts
@@ -1,4 +1,7 @@
+import {SingleCalendarValue} from '../common/types/single-calendar-value';
+
 export interface IDpDayPickerApi {
   open: () => void;
   close: () => void;
-}
+  moveCalendarTo: (date: SingleCalendarValue) => void;
+}
diff --git a/src/app/date-picker/date-picker.component.ts b/src/app/date-picker/date-picker.component.ts
@@ -121,7 +121,8 @@ export class DatePickerComponent implements OnChanges,
   validateFn: DateValidator;
   api: IDpDayPickerApi = {
     open: this.showCalendars.bind(this),
-    close: this.hideCalendar.bind(this)
+    close: this.hideCalendar.bind(this),
+    moveCalendarTo: this.moveCalendarTo.bind(this)
   };
 
   set selected(selected: Moment[]) {
@@ -189,12 +190,12 @@ export class DatePickerComponent implements OnChanges,
     }
   }
 
-  constructor(private dayPickerService: DatePickerService,
-              private domHelper: DomHelper,
-              private elemRef: ElementRef,
-              private renderer: Renderer,
-              private utilsService: UtilsService,
-              public cd: ChangeDetectorRef) {
+  constructor(private readonly dayPickerService: DatePickerService,
+              private readonly domHelper: DomHelper,
+              private readonly elemRef: ElementRef,
+              private readonly renderer: Renderer,
+              private readonly utilsService: UtilsService,
+              public readonly cd: ChangeDetectorRef) {
   }
 
   @HostListener('click')
@@ -442,6 +443,11 @@ export class DatePickerComponent implements OnChanges,
     }
   }
 
+  moveCalendarTo(date: SingleCalendarValue) {
+    const momentDate = this.utilsService.convertToMoment(date, this.componentConfig.format);
+    this.currentDateView = momentDate;
+  }
+
   startGlobalListeners() {
     this.globalListnersUnlisteners.push(
       this.renderer.listen(document, 'keydown', (e: KeyboardEvent) => {

diff --git a/src/app/day-time-calendar/day-time-calendar.component.ts b/src/app/day-time-calendar/day-time-calendar.component.ts
@@ -85,6 +85,10 @@ export class DayTimeCalendarComponent implements OnInit, OnChanges, ControlValue
     return this._selected;
   }
 
+  api = {
+    moveCalendarTo: this.moveCalendarTo.bind(this)
+  };
+
   constructor(public dayTimeCalendarService: DayTimeCalendarService,
               public utilsService: UtilsService,
               public cd: ChangeDetectorRef) {

diff --git a/src/app/demo/demo/demo.component.html b/src/app/demo/demo/demo.component.html
@@ -82,7 +82,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
       <div class="dp-picker-time-picker" *ngIf="pickerMode === 'daytimePicker'">
         <dp-date-picker id="daytimePicker"
                         name="daytimePicker"
-                        #datePicker
+                        #dateComponent
                         #daytimePicker="ngModel"
                         [(ngModel)]="date"
                         (onChange)="log($event)"
@@ -110,6 +110,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
       <div class="dp-inline-day-time" *ngIf="pickerMode === 'daytimeInline'">
         <dp-day-time-calendar
             name="daytimeInline"
+            #dateComponent
             #daytimeInline="ngModel"
             [theme]="material ? 'dp-material dp-main' : 'dp-main'"
             [(ngModel)]="date"
@@ -135,6 +136,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
       <div class="dp-picker-day-time-directive" id="daytimeDirective" *ngIf="pickerMode === 'daytimeDirective'">
         <input [dpDayPicker]="config"
                name="daytimePickerDir"
+               #dateComponent="dpDayPicker"
                #dateDirectivePicker="dpDayPicker"
                #daytimeDirectivePickerModel="ngModel"
                [theme]="material ? 'dp-material dp-main' : 'dp-main'"
@@ -159,7 +161,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
       <div class="dp-picker-day" *ngIf="pickerMode === 'dayPicker'">
         <dp-date-picker id="datePicker"
                         name="datePicker"
-                        #datePicker
+                        #dateComponent
                         #datePickerModel="ngModel"
                         [(ngModel)]="date"
                         (onChange)="log($event)"
@@ -175,20 +177,21 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
                         [config]="config"
                         [theme]="material ? 'dp-material dp-main' : 'dp-main'">
         </dp-date-picker>
-        <div class="dp-validations" *ngIf="datePickerModel.errors">
-          <div id="requiredValidation" *ngIf="datePickerModel.errors.required">required</div>
-          <div id="formatValidation" *ngIf="datePickerModel.errors.format">invalid format
+        <div class="dp-validations">
+          <div id="requiredValidation" *ngIf="datePickerModel.errors?.required">required</div>
+          <div id="formatValidation" *ngIf="datePickerModel.errors?.format">invalid format
           </div>
-          <div id="minDateValidation" *ngIf="datePickerModel.errors.minDate">minDate invalid
+          <div id="minDateValidation" *ngIf="datePickerModel.errors?.minDate">minDate invalid
           </div>
-          <div id="maxDateValidation" *ngIf="datePickerModel.errors.maxDate">maxDate invalid
+          <div id="maxDateValidation" *ngIf="datePickerModel.errors?.maxDate">maxDate invalid
           </div>
         </div>
       </div>
 
       <div class="dp-inline-day" *ngIf="pickerMode === 'dayInline'">
         <dp-day-calendar
             name="dayCalendar"
+            #dateComponent
             #dayCalendar="ngModel"
             [theme]="material ? 'dp-material dp-main' : 'dp-main'"
             [(ngModel)]="dates"
@@ -209,6 +212,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
       <div class="dp-picker-day-directive" id="dayDirective" *ngIf="pickerMode === 'dayDirective'">
         <input [dpDayPicker]="config"
                name="datePicker"
+               #dateComponent="dpDayPicker"
                #dateDirectivePicker="dpDayPicker"
                #dateDirectivePickerModel="ngModel"
                [theme]="material ? 'dp-material dp-main' : 'dp-main'"
@@ -235,6 +239,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
         <form [formGroup]="formGroup">
           <input [dpDayPicker]="config"
                  name="datePicker"
+                 #dateComponent="dpDayPicker"
                  #dateDirectivePicker="dpDayPicker"
                  [theme]="material ? 'dp-material dp-main' : 'dp-main'"
                  formControlName="datePicker"
@@ -263,7 +268,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
       <div class="dp-picker-month" *ngIf="pickerMode === 'monthPicker'">
         <dp-date-picker id="monthPicker"
                         name="monthPicker"
-                        #datePicker
+                        #dateComponent
                         #monthPicker="ngModel"
                         [(ngModel)]="date"
                         (onChange)="log($event)"
@@ -296,6 +301,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
       <div class="dp-inline-month" *ngIf="pickerMode === 'monthInline'">
         <dp-month-calendar
             name="monthInline"
+            #dateComponent
             #monthInline="ngModel"
             [theme]="material ? 'dp-material dp-main' : 'dp-main'"
             [(ngModel)]="dates"
@@ -320,6 +326,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
       <div class="dp-picker-month-directive" id="datePickerDirMonth" *ngIf="pickerMode === 'monthDirective'">
         <input [dpDayPicker]="config"
                name="datePicker"
+               #dateComponent="dpDayPicker"
                #dateDirectivePicker="dpDayPicker"
                #dateDirectivePickerModel="ngModel"
                [theme]="material ? 'dp-material dp-main' : 'dp-main'"
@@ -342,7 +349,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
       <div class="dp-picker-time" *ngIf="pickerMode === 'timePicker'">
         <dp-date-picker id="timePicker"
                         name="timePicker"
-                        #datePicker
+                        #dateComponent
                         #timePicker="ngModel"
                         [(ngModel)]="date"
                         (onChange)="log($event)"
@@ -374,6 +381,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
       <div class="dp-inline-time" *ngIf="pickerMode === 'timeInline'">
         <dp-time-select
             name="timeInline"
+            #dateComponent
             #timeInline="ngModel"
             [theme]="material ? 'dp-material dp-main' : 'dp-main'"
             [(ngModel)]="date"
@@ -400,6 +408,7 @@ <h2 class="dp-page-header">Angular Date/Time/Month Picker</h2>
       <div class="dp-picker-time-directive" id="timePickerDirDay" *ngIf="pickerMode === 'timeDirective'">
         <input [dpDayPicker]="config"
                name="timePickerDir"
+               #dateComponent="dpDayPicker"
                #dateDirectivePicker="dpDayPicker"
                #timeDirectivePickerModel="ngModel"
                [theme]="material ? 'dp-material dp-main' : 'dp-main'"
@@ -1297,6 +1306,15 @@ <h3 class="dp-options-section">API</h3>
           <button (click)="closeCalendar()">Close</button>
         </div>
       </div>
+
+      <div class="dp-option" *ngIf="isValidConfig('moveCalendarTo')">
+        <span class="dp-option-header">
+          Move (api.moveCalendarTo('14-01-1987')):
+        </span>
+        <div class="dp-option-playground">
+          <button id="moveCalendarTo" (click)="moveCalendarTo()">Move</button>
+        </div>
+      </div>
     </div>
   </div>
 </div>