resolves #250 - Documentation for max date Moment|String is wrong (#260)

* resolves #250 - Documentation for max date Moment|String is wrong * fixing weekdays * fixing build
vlio20 · Oct 20, 2017 · ad98d1b · ad98d1b
1 parent 94af6c1
commit ad98d1b
Show file tree

Hide file tree

Showing 19 changed files with 146 additions and 93 deletions.
diff --git a/src/app/common/models/calendar.model.ts b/src/app/common/models/calendar.model.ts
@@ -1,7 +1,13 @@
-import {locale, Moment} from 'moment';
+import {Moment} from 'moment';
 
 export interface ICalendar {
+  locale?: string;
+  min?: Moment | string;
+  max?: Moment | string;
+}
+
+export interface ICalendarInternal {
   locale?: string;
   min?: Moment;
   max?: Moment;
-}
+}
diff --git a/src/app/common/services/utils/utils.service.spec.ts b/src/app/common/services/utils/utils.service.spec.ts
@@ -94,4 +94,11 @@ describe('Service: ObUtilsService', () => {
       moment().add(1, 'd'))
     ).toBeFalsy();
   }));
+
+  it('should convertPropsToMoment method', inject([UtilsService], (service: UtilsService) => {
+    const obj = {min: '14-01-1987', max: '14-01-1987'};
+    service.convertPropsToMoment(obj, 'DD-MM-YYYY', ['min', 'max']);
+    expect(moment.isMoment(obj.min)).toBeTruthy();
+    expect(moment.isMoment(obj.max)).toBeTruthy();
+  }));
 });
diff --git a/src/app/common/services/utils/utils.service.ts b/src/app/common/services/utils/utils.service.ts
@@ -32,17 +32,14 @@ export class UtilsService {
     return new Array(size).fill(1);
   }
 
-  convertToMoment(date: SingleCalendarValue, format: string): Moment | null {
-    let retVal: Moment;
+  convertToMoment(date: SingleCalendarValue, format: string): Moment {
     if (!date) {
       return null;
     } else if (typeof date === 'string') {
-      retVal = moment(date, format);
+      return moment(date, format);
     } else {
-      retVal = date;
+      return date;
     }
-
-    return retVal;
   }
 
   isDateValid(date: string, format: string): boolean {
@@ -263,7 +260,10 @@ export class UtilsService {
       .map(d => moment(d, format));
   }
 
-  shouldShowCurrent(showGoToCurrent: boolean, mode: CalendarMode, min: Moment, max: Moment): boolean {
+  shouldShowCurrent(showGoToCurrent: boolean,
+                    mode: CalendarMode,
+                    min: Moment,
+                    max: Moment): boolean {
     return showGoToCurrent &&
       mode !== 'time' &&
       this.isDateInRange(moment(), min, max);
@@ -272,4 +272,12 @@ export class UtilsService {
   isDateInRange(date: Moment, from: Moment, to: Moment): boolean {
     return date.isBetween(from, to, 'day', '[]');
   }
+
+  convertPropsToMoment(obj: {[key: string]: any}, format: string, props: string[]) {
+    props.forEach((prop) => {
+      if (obj.hasOwnProperty(prop)) {
+        obj[prop] = this.convertToMoment(obj[prop], format);
+      }
+    });
+  }
 }
diff --git a/src/app/date-picker/date-picker-config.model.ts b/src/app/date-picker/date-picker-config.model.ts
@@ -1,11 +1,9 @@
 import {TDrops, TOpens} from '../common/types/poistions.type';
-import {IDayCalendarConfig} from '../day-calendar/day-calendar-config.model';
-import {IMonthCalendarConfig} from '../month-calendar/month-calendar-config';
-import {ITimeSelectConfig} from '../time-select/time-select-config.model';
+import {IDayCalendarConfig, IDayCalendarConfigInternal} from '../day-calendar/day-calendar-config.model';
+import {IMonthCalendarConfig, IMonthCalendarConfigInternal} from '../month-calendar/month-calendar-config';
+import {ITimeSelectConfig, ITimeSelectConfigInternal} from '../time-select/time-select-config.model';
 
-export interface IDatePickerConfig extends IDayCalendarConfig,
-                                           IMonthCalendarConfig,
-                                           ITimeSelectConfig {
+export interface IConfig {
   closeOnSelect?: boolean;
   closeOnSelectDelay?: number;
   openOnFocus?: boolean;
@@ -18,3 +16,16 @@ export interface IDatePickerConfig extends IDayCalendarConfig,
   opens?: TOpens;
   hideInputContainer?: boolean;
 }
+
+export interface IDatePickerConfig extends IConfig,
+                                           IDayCalendarConfig,
+                                           IMonthCalendarConfig,
+                                           ITimeSelectConfig {
+
+}
+
+export interface IDatePickerConfigInternal extends IConfig,
+                                                   IDayCalendarConfigInternal,
+                                                   IMonthCalendarConfigInternal,
+                                                   ITimeSelectConfigInternal {
+}
diff --git a/src/app/date-picker/date-picker.component.ts b/src/app/date-picker/date-picker.component.ts
@@ -14,7 +14,7 @@ import {DayTimeCalendarService} from '../day-time-calendar/day-time-calendar.ser
 import {ITimeSelectConfig} from '../time-select/time-select-config.model';
 import {TimeSelectComponent} from '../time-select/time-select.component';
 import {TimeSelectService} from '../time-select/time-select.service';
-import {IDatePickerConfig} from './date-picker-config.model';
+import {IDatePickerConfig, IDatePickerConfigInternal} from './date-picker-config.model';
 import {IDpDayPickerApi} from './date-picker.api';
 import {DatePickerService} from './date-picker.service';
 import {
@@ -93,10 +93,9 @@ export class DatePickerComponent implements OnChanges,
 
   @ViewChild('container') calendarContainer: ElementRef;
   @ViewChild('dayCalendar') dayCalendarRef: DayCalendarComponent;
-  @ViewChild('monthCalendar') monthCalendarRef: DayCalendarComponent;
   @ViewChild('timeSelect') timeSelectRef: TimeSelectComponent;
 
-  componentConfig: IDatePickerConfig;
+  componentConfig: IDatePickerConfigInternal;
   dayCalendarConfig: IDayCalendarConfig;
   dayTimeCalendarConfig: IDayTimeCalendarConfig;
   timeSelectConfig: ITimeSelectConfig;

diff --git a/src/app/date-picker/date-picker.directive.spec.ts b/src/app/date-picker/date-picker.directive.spec.ts
@@ -17,7 +17,7 @@ describe('Directive: DpDayPicker', () => {
     });
   });
 
-  const directive = new DatePickerDirective(null, null, null, null);
+  const directive = new DatePickerDirective(null, null, null, null, null);
 
   it('should create an instance', () => {
     expect(directive).toBeTruthy();

diff --git a/src/app/date-picker/date-picker.service.ts b/src/app/date-picker/date-picker.service.ts
@@ -1,5 +1,5 @@
 import {EventEmitter, Injectable} from '@angular/core';
-import {IDatePickerConfig} from './date-picker-config.model';
+import {IDatePickerConfig, IDatePickerConfigInternal} from './date-picker-config.model';
 import * as moment from 'moment';
 import {Moment} from 'moment';
 import {UtilsService} from '../common/services/utils/utils.service';
@@ -12,7 +12,7 @@ import {CalendarMode} from '../common/types/calendar-mode';
 @Injectable()
 export class DatePickerService {
   readonly onPickerClosed: EventEmitter<null> = new EventEmitter();
-  private defaultConfig: IDatePickerConfig = {
+  private defaultConfig: IDatePickerConfigInternal = {
     closeOnSelect: true,
     closeOnSelectDelay: 100,
     format: 'DD-MM-YYYY',
@@ -33,21 +33,14 @@ export class DatePickerService {
   }
 
   // todo:: add unit tests
-  getConfig(config: IDatePickerConfig, mode: CalendarMode = 'daytime'): IDatePickerConfig {
-    const _config: IDatePickerConfig = {
+  getConfig(config: IDatePickerConfig, mode: CalendarMode = 'daytime'): IDatePickerConfigInternal {
+    const _config = <IDatePickerConfigInternal>{
       ...this.defaultConfig,
       format: this.getDefaultFormatByMode(mode),
       ...this.utilsService.clearUndefined(config)
     };
 
-    const {min, max, format} = _config;
-    if (min) {
-      _config.min = this.utilsService.convertToMoment(min, format);
-    }
-
-    if (max) {
-      _config.max = this.utilsService.convertToMoment(max, format);
-    }
+    this.utilsService.convertPropsToMoment(_config, _config.format, ['min', 'max']);
 
     if (config && config.allowMultiSelect && config.closeOnSelect === undefined) {
       _config.closeOnSelect = false;

diff --git a/src/app/day-calendar/day-calendar-config.model.ts b/src/app/day-calendar/day-calendar-config.model.ts
@@ -1,9 +1,9 @@
-import {ICalendar} from '../common/models/calendar.model';
+import {ICalendar, ICalendarInternal} from '../common/models/calendar.model';
 import {WeekDays} from '../common/types/week-days.type';
 import {Moment} from 'moment';
 import {ECalendarValue} from '../common/types/calendar-value-enum';
 
-export interface IDayCalendarConfig extends ICalendar {
+export interface IConfig {
   isDayDisabledCallback?: (date: Moment) => boolean;
   isMonthDisabledCallback?: (date: Moment) => boolean;
   weekDayFormat?: string;
@@ -29,3 +29,11 @@ export interface IDayCalendarConfig extends ICalendar {
   returnedValueType?: ECalendarValue;
   showGoToCurrent?: boolean;
 }
+
+export interface IDayCalendarConfig extends IConfig,
+                                            ICalendar {
+}
+
+export interface IDayCalendarConfigInternal extends IConfig,
+                                                    ICalendarInternal {
+}
diff --git a/src/app/day-calendar/day-calendar.component.html b/src/app/day-calendar/day-calendar.component.html
@@ -26,7 +26,7 @@
               class="dp-calendar-day"
               *ngFor="let day of week"
               (click)="dayClicked(day)"
-              [disabled]="isDisabledDay(day)"
+              [disabled]="day.disabled"
               [ngClass]="getDayBtnCssClass(day)">
         {{getDayBtnText(day)}}
       </button>

diff --git a/src/app/day-calendar/day-calendar.component.ts b/src/app/day-calendar/day-calendar.component.ts
@@ -16,7 +16,7 @@ import {
 import {DayCalendarService} from './day-calendar.service';
 import * as moment from 'moment';
 import {Moment} from 'moment';
-import {IDayCalendarConfig} from './day-calendar-config.model';
+import {IDayCalendarConfig, IDayCalendarConfigInternal} from './day-calendar-config.model';
 import {IDay} from './day.model';
 import {
   ControlValueAccessor,
@@ -65,7 +65,7 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
 
   CalendarMode = ECalendarMode;
   isInited: boolean = false;
-  componentConfig: IDayCalendarConfig;
+  componentConfig: IDayCalendarConfigInternal;
   _selected: Moment[];
   weeks: IDay[][];
   weekdays: Moment[];
@@ -193,10 +193,6 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
     this.onChangeCallback(this.processOnChangeCallback(this.selected));
   }
 
-  isDisabledDay(day: IDay) {
-    return this.dayCalendarService.isDateDisabled(day, this.componentConfig);
-  }
-
   dayClicked(day: IDay) {
     this.selected = this.utilsService
       .updateSelected(this.componentConfig.allowMultiSelect, this.selected, day);

diff --git a/src/app/day-calendar/day-calendar.service.spec.ts b/src/app/day-calendar/day-calendar.service.spec.ts
@@ -3,7 +3,7 @@ import {DayCalendarService} from './day-calendar.service';
 import * as moment from 'moment';
 import {Moment} from 'moment';
 import {UtilsService} from '../common/services/utils/utils.service';
-import {IDayCalendarConfig} from './day-calendar-config.model';
+import {IDayCalendarConfig, IDayCalendarConfigInternal} from './day-calendar-config.model';
 
 describe('Service: Calendar', () => {
   beforeEach(() => {
@@ -112,29 +112,29 @@ describe('Service: Calendar', () => {
 
   it('should check isDateDisabled method', inject([DayCalendarService],
     (service: DayCalendarService) => {
-      const config: IDayCalendarConfig = {
+      const config: IDayCalendarConfigInternal = {
         firstDayOfWeek: 'su',
         min: moment('13-10-2016', 'DD-MM-YYYY').subtract(1, 'day'),
         max: moment('13-10-2016', 'DD-MM-YYYY').add(1, 'day')
       };
 
-      expect(service.isDateDisabled({date: moment('11-10-2016', 'DD-MM-YYYY'), selected: false}, config)).toBe(true);
-      expect(service.isDateDisabled({date: moment('12-10-2016', 'DD-MM-YYYY'), selected: false}, config)).toBe(false);
-      expect(service.isDateDisabled({date: moment('13-10-2016', 'DD-MM-YYYY'), selected: false}, config)).toBe(false);
-      expect(service.isDateDisabled({date: moment('14-10-2016', 'DD-MM-YYYY'), selected: false}, config)).toBe(false);
-      expect(service.isDateDisabled({date: moment('15-10-2016', 'DD-MM-YYYY'), selected: false}, config)).toBe(true);
+      expect(service.isDateDisabled(moment('11-10-2016', 'DD-MM-YYYY'), config)).toBe(true);
+      expect(service.isDateDisabled(moment('12-10-2016', 'DD-MM-YYYY'), config)).toBe(false);
+      expect(service.isDateDisabled(moment('13-10-2016', 'DD-MM-YYYY'), config)).toBe(false);
+      expect(service.isDateDisabled(moment('14-10-2016', 'DD-MM-YYYY'), config)).toBe(false);
+      expect(service.isDateDisabled(moment('15-10-2016', 'DD-MM-YYYY'), config)).toBe(true);
 
       config.isDayDisabledCallback = (date: Moment) => {
         return date.isSame(moment('13-10-2016', 'DD-MM-YYYY'), 'day');
       };
 
-      expect(service.isDateDisabled({date: moment('13-10-2016', 'DD-MM-YYYY'), selected: false}, config)).toBe(true);
-      expect(service.isDateDisabled({date: moment('11-10-2016', 'DD-MM-YYYY'), selected: false}, config)).toBe(false);
+      expect(service.isDateDisabled(moment('13-10-2016', 'DD-MM-YYYY'), config)).toBe(true);
+      expect(service.isDateDisabled(moment('11-10-2016', 'DD-MM-YYYY'), config)).toBe(false);
     }));
 
   it('should show/hide near month according to showNearMonthDays configuration', inject([DayCalendarService],
     (service: DayCalendarService) => {
-      const config: IDayCalendarConfig = {
+      const config: IDayCalendarConfigInternal = {
         firstDayOfWeek: 'su',
         showNearMonthDays: true
       };
@@ -147,7 +147,7 @@ describe('Service: Calendar', () => {
   it('should not effect the calendar when no full near weeks even if showNearMonthDays is false',
     inject([DayCalendarService],
       (service: DayCalendarService) => {
-        const config: IDayCalendarConfig = {
+        const config: IDayCalendarConfigInternal = {
           firstDayOfWeek: 'su',
           showNearMonthDays: false
         };

diff --git a/src/app/day-calendar/day-calendar.service.ts b/src/app/day-calendar/day-calendar.service.ts
@@ -4,7 +4,7 @@ import {Moment} from 'moment';
 import {WeekDays} from '../common/types/week-days.type';
 import {UtilsService} from '../common/services/utils/utils.service';
 import {IDay} from './day.model';
-import {IDayCalendarConfig} from './day-calendar-config.model';
+import {IDayCalendarConfig, IDayCalendarConfigInternal} from './day-calendar-config.model';
 import {IMonthCalendarConfig} from '../month-calendar/month-calendar-config';
 
 @Injectable()
@@ -34,8 +34,14 @@ export class DayCalendarService {
     }
   }
 
-  getConfig(config: IDayCalendarConfig): IDayCalendarConfig {
-    const _config = {...this.DEFAULT_CONFIG, ...this.utilsService.clearUndefined(config)};
+  getConfig(config: IDayCalendarConfig): IDayCalendarConfigInternal {
+    const _config = <IDayCalendarConfigInternal>{
+      ...this.DEFAULT_CONFIG,
+      ...this.utilsService.clearUndefined(config)
+    };
+
+    this.utilsService.convertPropsToMoment(_config, _config.format, ['min', 'max']);
+
     moment.locale(_config.locale);
 
     return _config;
@@ -51,7 +57,7 @@ export class DayCalendarService {
     }, <{[key: number]: string}>{});
   }
 
-  generateMonthArray(config: IDayCalendarConfig, month: Moment, selected: Moment[]): IDay[][] {
+  generateMonthArray(config: IDayCalendarConfigInternal, month: Moment, selected: Moment[]): IDay[][] {
     let monthArray: IDay[][] = [];
     const firstDayOfWeekIndex = this.DAYS.indexOf(config.firstDayOfWeek);
     const firstDayOfBoard = month.clone().startOf('month');
@@ -73,7 +79,8 @@ export class DayCalendarService {
           currentMonth: current.isSame(month, 'month'),
           prevMonth: current.isSame(prevMonth, 'month'),
           nextMonth: current.isSame(nextMonth, 'month'),
-          currentDay: current.isSame(today, 'day')
+          currentDay: current.isSame(today, 'day'),
+          disabled: this.isDateDisabled(current, config)
         });
         current.add(1, 'day');
 
@@ -123,20 +130,20 @@ export class DayCalendarService {
     return weekdays;
   }
 
-  isDateDisabled(day: IDay, config: IDayCalendarConfig): boolean {
+  isDateDisabled(date: Moment, config: IDayCalendarConfigInternal): boolean {
     if (config.isDayDisabledCallback) {
-      return config.isDayDisabledCallback(day.date);
+      return config.isDayDisabledCallback(date);
     }
 
-    if (config.min && day.date.isBefore(config.min, 'day')) {
+    if (config.min && date.isBefore(config.min, 'day')) {
       return true;
     }
 
-    return !!(config.max && day.date.isAfter(config.max, 'day'));
+    return !!(config.max && date.isAfter(config.max, 'day'));
   }
 
   // todo:: add unit tests
-  getHeaderLabel(config: IDayCalendarConfig, month: Moment): string {
+  getHeaderLabel(config: IDayCalendarConfigInternal, month: Moment): string {
     if (config.monthFormatter) {
       return config.monthFormatter(month);
     }
@@ -164,8 +171,7 @@ export class DayCalendarService {
     }, <{[key: number]: string}>{});
   }
 
-  // todo:: add unit tests
-  getMonthCalendarConfig(componentConfig: IDayCalendarConfig): IMonthCalendarConfig {
+  getMonthCalendarConfig(componentConfig: IDayCalendarConfigInternal): IMonthCalendarConfig {
     return this.utilsService.clearUndefined({
       min: componentConfig.min,
       max: componentConfig.max,
@@ -183,15 +189,15 @@ export class DayCalendarService {
     });
   }
 
-  getDayBtnText(config: IDayCalendarConfig, day: Moment): string {
+  getDayBtnText(config: IDayCalendarConfigInternal, day: Moment): string {
     if (config.dayBtnFormatter) {
       return config.dayBtnFormatter(day);
     }
 
     return day.format(config.dayBtnFormat);
   }
 
-  getDayBtnCssClass(config: IDayCalendarConfig, day: Moment): string {
+  getDayBtnCssClass(config: IDayCalendarConfigInternal, day: Moment): string {
     if (config.dayBtnCssClassCallback) {
       return config.dayBtnCssClassCallback(day);
     }