From 8932f52e6152b93206348ba6622f9dc8ebed1ca3 Mon Sep 17 00:00:00 2001 From: Vlad Ioffe Date: Sun, 17 Dec 2017 09:42:33 +0200 Subject: [PATCH] changing delimitter to '|' + changing ChangeDetectionStrategy to nav and month components --- CHANGELOG.md | 3 +++ e2e/datpicker-e2e.spec.ts | 4 ++-- src/app/calendar-nav/calendar-nav.component.ts | 13 +++++++++++-- .../common/services/utils/utils.service.spec.ts | 14 ++++++++++++++ src/app/common/services/utils/utils.service.ts | 5 +++-- src/app/common/styles/variables.less | 2 +- src/app/date-picker/date-picker.component.ts | 3 +-- src/app/month-calendar/month-calendar.component.ts | 9 +++++++-- 8 files changed, 42 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d07c1592..d12e354a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,9 @@ All notable changes to this project will be documented in this file. ### Bug Fixes - Prevent overriding of form control value from input updates ([c96f2 ](https://github.com/vlio20/angular-datepicker/commit/e4de3cb )) closes [#297](https://github.com/vlio20/angular-datepicker/issues/297) - PR by [@pklein](https://github.com/pklein) +## Breaking Changes +- Multiselect delimiter changed to `|` instead of `,` + # [2.6.2] (2017-11-11) diff --git a/e2e/datpicker-e2e.spec.ts b/e2e/datpicker-e2e.spec.ts index f37eaa8f..56c8f2bc 100644 --- a/e2e/datpicker-e2e.spec.ts +++ b/e2e/datpicker-e2e.spec.ts @@ -267,14 +267,14 @@ describe('dpDayPicker dayPicker', () => { expect(page.selectedDays.count()).toBe(3); expect(page.datePickerPopup.isDisplayed()).toBe(true); expect(page.dayPickerInput.getAttribute('value')).toEqual( - `${moment().date(18).format('DD-MM-YYYY')}, ${moment().date(15).format('DD-MM-YYYY')}, ${moment().date(16) + `${moment().date(18).format('DD-MM-YYYY')} | ${moment().date(15).format('DD-MM-YYYY')}, ${moment().date(16) .format('DD-MM-YYYY')}` ); page.clickOnDayButton('18'); expect(page.selectedDays.count()).toBe(2); expect(page.dayPickerInput.getAttribute('value')).toEqual( - `${moment().date(15).format('DD-MM-YYYY')}, ${moment().date(16).format('DD-MM-YYYY')}` + `${moment().date(15).format('DD-MM-YYYY')} | ${moment().date(16).format('DD-MM-YYYY')}` ); }); diff --git a/src/app/calendar-nav/calendar-nav.component.ts b/src/app/calendar-nav/calendar-nav.component.ts index 7503246f..80e73ab1 100644 --- a/src/app/calendar-nav/calendar-nav.component.ts +++ b/src/app/calendar-nav/calendar-nav.component.ts @@ -1,10 +1,19 @@ -import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + EventEmitter, + HostBinding, + Input, + Output, + ViewEncapsulation +} from '@angular/core'; @Component({ selector: 'dp-calendar-nav', templateUrl: './calendar-nav.component.html', styleUrls: ['./calendar-nav.component.less'], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush }) export class CalendarNavComponent { @Input() label: string; diff --git a/src/app/common/services/utils/utils.service.spec.ts b/src/app/common/services/utils/utils.service.spec.ts index 0e6a6a42..88b7177f 100644 --- a/src/app/common/services/utils/utils.service.spec.ts +++ b/src/app/common/services/utils/utils.service.spec.ts @@ -101,4 +101,18 @@ describe('Service: ObUtilsService', () => { expect(moment.isMoment(obj.min)).toBeTruthy(); expect(moment.isMoment(obj.max)).toBeTruthy(); })); + + it('should test datesStringToStringArray', inject([UtilsService], (service: UtilsService) => { + expect(service.datesStringToStringArray('')).toEqual([]); + expect(service.datesStringToStringArray('14-01-1984')).toEqual(['14-01-1984']); + expect(service.datesStringToStringArray('14-01-1984|15-01-1984')) + .toEqual(['14-01-1984', '15-01-1984']); + + expect(service.datesStringToStringArray('')) + .toEqual([]); + expect(service.datesStringToStringArray('14,01-1984|15,01-1984')) + .toEqual(['14,01-1984', '15,01-1984']); + expect(service.datesStringToStringArray('14,01-1984| asdasd')) + .toEqual(['14,01-1984', 'asdasd']); + })); }); diff --git a/src/app/common/services/utils/utils.service.ts b/src/app/common/services/utils/utils.service.ts index 458431c5..1aa1391c 100644 --- a/src/app/common/services/utils/utils.service.ts +++ b/src/app/common/services/utils/utils.service.ts @@ -1,6 +1,6 @@ import {ECalendarValue} from '../../types/calendar-value-enum'; import {SingleCalendarValue} from '../../types/single-calendar-value'; -import {Injectable, SimpleChange} from '@angular/core'; +import {Injectable} from '@angular/core'; import * as moment from 'moment'; import {Moment, unitOfTime} from 'moment'; import {CalendarValue} from '../../types/calendar-value'; @@ -8,6 +8,7 @@ import {IDate} from '../../models/date.model'; import {CalendarMode} from '../../types/calendar-mode'; import {DateValidator} from '../../types/validator.type'; import {ICalendarInternal} from '../../models/calendar.model'; +import {forEach} from '@angular/router/src/utils/collection'; export interface DateLimits { minDate?: SingleCalendarValue; @@ -257,7 +258,7 @@ export class UtilsService { } datesStringToStringArray(value: string): string[] { - return (value || '').split(',').map(m => m.trim()); + return (value || '').split('|').map(m => m.trim()).filter(Boolean); } getValidMomentArray(value: string, format: string): Moment[] { diff --git a/src/app/common/styles/variables.less b/src/app/common/styles/variables.less index 53eb881e..49162f8a 100644 --- a/src/app/common/styles/variables.less +++ b/src/app/common/styles/variables.less @@ -33,6 +33,6 @@ } &::before { - right: -5px; + right: -10px; } } diff --git a/src/app/date-picker/date-picker.component.ts b/src/app/date-picker/date-picker.component.ts index 8e269f00..fb2c6341 100644 --- a/src/app/date-picker/date-picker.component.ts +++ b/src/app/date-picker/date-picker.component.ts @@ -43,7 +43,6 @@ import { ValidationErrors, Validator } from '@angular/forms'; -import * as moment from 'moment'; import {Moment, unitOfTime} from 'moment'; import {DateValidator} from '../common/types/validator.type'; import {MonthCalendarComponent} from '../month-calendar/month-calendar.component'; @@ -127,7 +126,7 @@ export class DatePickerComponent implements OnChanges, this._selected = selected; this.inputElementValue = (this.utilsService .convertFromMomentArray(this.componentConfig.format, selected, ECalendarValue.StringArr)) - .join(', '); + .join(' | '); const val = this.processOnChangeCallback(selected); this.onChangeCallback(val, false); this.onChange.emit(val); diff --git a/src/app/month-calendar/month-calendar.component.ts b/src/app/month-calendar/month-calendar.component.ts index 2701b60b..a221f42d 100644 --- a/src/app/month-calendar/month-calendar.component.ts +++ b/src/app/month-calendar/month-calendar.component.ts @@ -1,5 +1,6 @@ import {ECalendarValue} from '../common/types/calendar-value-enum'; import { + ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, forwardRef, @@ -35,6 +36,7 @@ import {SingleCalendarValue} from '../common/types/single-calendar-value'; templateUrl: 'month-calendar.component.html', styleUrls: ['month-calendar.component.less'], encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, providers: [ MonthCalendarService, { @@ -103,8 +105,9 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc return this._currentDateView; } - constructor(public monthCalendarService: MonthCalendarService, - public utilsService: UtilsService) { + constructor(public readonly monthCalendarService: MonthCalendarService, + public readonly utilsService: UtilsService, + public readonly cd: ChangeDetectorRef) { } ngOnInit() { @@ -152,6 +155,8 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc .generateYear(this.componentConfig, this.currentDateView, this.selected); this.inputValueType = this.utilsService.getInputType(this.inputValue, this.componentConfig.allowMultiSelect); } + + this.cd.markForCheck(); } registerOnChange(fn: any): void {