Skip to content

Commit 3858dde

Browse files
vlio20vlio20
committed
Stop using getters in template - resolves #239 
1 parent b9bef8f commit 3858dde

10 files changed

+86
-106
lines changed

‎CHANGELOG.md

+4-12
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ All notable changes to this project will be documented in this file.
1010
### UI/UX Changes
1111
- Moving go to current button inside the navigation component ([dd283c5](https://github.com/vlio20/angular-datepicker/commit/dd283c5)).
1212

13+
### Improvements
14+
- Stop using getters in template ([???](https://github.com/vlio20/angular-datepicker/commit/???)) closes [#239](https://github.com/vlio20/angular-datepicker/issues/239)
15+
1316
### Bug Fixed
1417
- Add outputs of each component to docs ([9ee8035](https://github.com/vlio20/angular-datepicker/commit/9ee8035)) closes [#224](https://github.com/vlio20/angular-datepicker/issues/224)
1518
- More than one picker can be opened at the same time ([dd283c5](https://github.com/vlio20/angular-datepicker/commit/dd283c5)) closes [#223](https://github.com/vlio20/angular-datepicker/issues/223)
@@ -24,16 +27,5 @@ All notable changes to this project will be documented in this file.
2427
<a name="2.5.1"></a>
2528
# [2.5.1](https://github.com/vlio20/angular-datepicker/releases/tag/2.5.1) (2017-10-12)
2629

27-
### Features
28-
- none
29-
30-
### UI/UX Changes
31-
- none
32-
3330
### Bug Fixed
34-
- none
35-
36-
### Breaking Changes
37-
- 29th October 2017 displayed twice [#235](https://github.com/vlio20/angular-datepicker/issues/235#issuecomment-336217634)
38-
39-
31+
29th October 2017 displayed twice [#235](https://github.com/vlio20/angular-datepicker/issues/235#issuecomment-336217634)

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
9898
this._currentDateView = current.clone();
9999
this.weeks = this.dayCalendarService
100100
.generateMonthArray(this.componentConfig, this._currentDateView, this.selected);
101-
this.setLabel();
101+
this.navLabel = this.dayCalendarService.getHeaderLabel(this.componentConfig, this._currentDateView);
102102
this.showLeftNav = this.dayCalendarService.shouldShowLeft(this.componentConfig.min, this.currentDateView);
103103
this.showRightNav = this.dayCalendarService.shouldShowRight(this.componentConfig.max, this.currentDateView);
104104
}
@@ -254,10 +254,6 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
254254
this.onMonthSelect.emit(month);
255255
}
256256

257-
setLabel() {
258-
this.navLabel = this.dayCalendarService.getHeaderLabel(this.componentConfig, this._currentDateView);
259-
}
260-
261257
moveCalendarsBy(current: Moment, amount: number, granularity: moment.unitOfTime.Base = 'month') {
262258
this.currentDateView = current.clone().add(amount, granularity);
263259
}

‎src/app/month-calendar/month-calendar.component.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<div class="dp-month-calendar-container">
22
<dp-calendar-nav
33
[label]="navLabel"
4-
[showLeftNav]="shouldShowLeftNav()"
5-
[showLeftSecondaryNav]="shouldShowLeftSecondaryNav()"
6-
[showRightNav]="shouldShowRightNav()"
7-
[showRightSecondaryNav]="shouldShowRightSecondaryNav()"
8-
[isLabelClickable]="isNavHeaderBtnClickable()"
4+
[showLeftNav]="showLeftNav"
5+
[showLeftSecondaryNav]="showLeftSecondaryNav"
6+
[showRightNav]="showRightNav"
7+
[showRightSecondaryNav]="showRightSecondaryNav"
8+
[isLabelClickable]="componentConfig.isNavHeaderBtnClickable"
99
[showGoToCurrent]="shouldShowCurrent()"
1010
[theme]="theme"
1111
(onLeftNav)="onLeftNav()"
@@ -21,10 +21,10 @@
2121
<button type="button"
2222
class="dp-calendar-month"
2323
*ngFor="let month of monthRow"
24-
[disabled]="isDisabledMonth(month)"
24+
[disabled]="month.disabled"
2525
[ngClass]="getMonthBtnCssClass(month)"
2626
(click)="monthClicked(month)">
27-
{{getMonthBtnText(month)}}
27+
{{month.text}}
2828
</button>
2929
</div>
3030
</div>

‎src/app/month-calendar/month-calendar.component.spec.ts

+3-7
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,13 @@ describe('Component: MonthCalendarComponent', () => {
2929
expect(component).toBeTruthy();
3030
});
3131

32-
it('should check getMonthBtnText default value', () => {
33-
expect(component.getMonthBtnText({
34-
date: moment('05-04-2017', 'DD-MM-YYYY')
35-
} as IMonth)).toEqual('Apr');
36-
});
37-
3832
describe('should have the right CSS classes for', () => {
3933
const defaultMonth: IMonth = {
4034
date: undefined,
4135
selected: false,
42-
currentMonth: false
36+
currentMonth: false,
37+
disabled: false,
38+
text: ''
4339
};
4440
const defaultCssClasses: { [klass: string]: boolean } = {
4541
'dp-selected': false,

‎src/app/month-calendar/month-calendar.component.ts

+15-37
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,10 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
6767
validateFn: DateValidator;
6868
_shouldShowCurrent: boolean = true;
6969
navLabel: string;
70+
showLeftNav: boolean;
71+
showRightNav: boolean;
72+
showSecondaryLeftNav: boolean;
73+
showSecondaryRightNav: boolean;
7074

7175
set selected(selected: Moment[]) {
7276
this._selected = selected;
@@ -79,8 +83,13 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
7983

8084
set currentDateView(current: Moment) {
8185
this._currentDateView = current.clone();
82-
this.yearMonths = this.monthCalendarService.generateYear(this._currentDateView, this.selected);
83-
this.setLabel();
86+
this.yearMonths = this.monthCalendarService
87+
.generateYear(this.componentConfig, this._currentDateView, this.selected);
88+
this.navLabel = this.monthCalendarService.getHeaderLabel(this.componentConfig, this.currentDateView);
89+
this.showLeftNav = this.monthCalendarService.shouldShowLeft(this.componentConfig.min, this._currentDateView);
90+
this.showRightNav = this.monthCalendarService.shouldShowRight(this.componentConfig.max, this.currentDateView);
91+
this.showSecondaryLeftNav = this.componentConfig.showMultipleYearsNavigation && this.showLeftNav;
92+
this.showSecondaryRightNav = this.componentConfig.showMultipleYearsNavigation && this.showRightNav;
8493
}
8594

8695
get currentDateView(): Moment {
@@ -125,7 +134,8 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
125134
if (value) {
126135
this.selected = this.utilsService
127136
.convertToMomentArray(value, this.componentConfig.format, this.componentConfig.allowMultiSelect);
128-
this.yearMonths = this.monthCalendarService.generateYear(this.currentDateView, this.selected);
137+
this.yearMonths = this.monthCalendarService
138+
.generateYear(this.componentConfig, this.currentDateView, this.selected);
129139
this.inputValueType = this.utilsService.getInputType(this.inputValue, this.componentConfig.allowMultiSelect);
130140
}
131141
}
@@ -166,25 +176,17 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
166176
this.onChangeCallback(this.processOnChangeCallback(this.selected));
167177
}
168178

169-
isDisabledMonth(month: IMonth): boolean {
170-
return this.monthCalendarService.isMonthDisabled(month, this.componentConfig);
171-
}
172-
173179
monthClicked(month: IMonth) {
174180
this.selected = this.utilsService
175181
.updateSelected(this.componentConfig.allowMultiSelect, this.selected, month, 'month');
176182
this.yearMonths = this.monthCalendarService
177-
.generateYear(this.currentDateView, this.selected);
183+
.generateYear(this.componentConfig, this.currentDateView, this.selected);
178184
this.onSelect.emit(month);
179185
}
180186

181-
setLabel() {
182-
this.navLabel = this.monthCalendarService.getHeaderLabel(this.componentConfig, this.currentDateView);
183-
}
184-
185187
onLeftNav() {
186188
this.currentDateView = this.currentDateView.clone().subtract(1, 'year');
187-
this.yearMonths = this.monthCalendarService.generateYear(this.currentDateView, this.selected);
189+
this.yearMonths = this.monthCalendarService.generateYear(this.componentConfig, this.currentDateView, this.selected);
188190
}
189191

190192
onLeftSecondaryNav() {
@@ -215,34 +217,10 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
215217
this.currentDateView = this.currentDateView.clone().add(navigateBy, 'year');
216218
}
217219

218-
shouldShowLeftNav(): boolean {
219-
return this.monthCalendarService.shouldShowLeft(this.componentConfig.min, this.currentDateView);
220-
}
221-
222-
shouldShowLeftSecondaryNav(): boolean {
223-
return this.componentConfig.showMultipleYearsNavigation && this.shouldShowLeftNav();
224-
}
225-
226-
shouldShowRightNav(): boolean {
227-
return this.monthCalendarService.shouldShowRight(this.componentConfig.max, this.currentDateView);
228-
}
229-
230-
shouldShowRightSecondaryNav(): boolean {
231-
return this.componentConfig.showMultipleYearsNavigation && this.shouldShowRightNav();
232-
}
233-
234-
isNavHeaderBtnClickable(): boolean {
235-
return this.componentConfig.isNavHeaderBtnClickable;
236-
}
237-
238220
toggleCalendar() {
239221
this.onNavHeaderBtnClick.emit();
240222
}
241223

242-
getMonthBtnText(month: IMonth): string {
243-
return this.monthCalendarService.getMonthBtnText(this.componentConfig, month.date);
244-
}
245-
246224
getMonthBtnCssClass(month: IMonth): {[klass: string]: boolean} {
247225
const cssClass: {[klass: string]: boolean} = {
248226
'dp-selected': month.selected,

‎src/app/month-calendar/month-calendar.service.spec.ts

+11-8
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ describe('Service: MonthCalendarService', () => {
1414
it('should check the generateYear method', inject([MonthCalendarService], (service: MonthCalendarService) => {
1515
const year = moment('14-01-1987', 'DD-MM-YYYY');
1616
const selected = moment('14-01-1987', 'DD-MM-YYYY');
17-
const genYear = service.generateYear(year, [selected]);
17+
const genYear = service.generateYear({}, year, [selected]);
1818

1919
const current = year.clone().startOf('year');
2020
genYear.forEach((row) => {
@@ -36,22 +36,24 @@ describe('Service: MonthCalendarService', () => {
3636
const month: IMonth = {
3737
date: moment('09-04-2017', 'DD-MM-YYYY'),
3838
selected: false,
39-
currentMonth: false
39+
currentMonth: false,
40+
disabled: false,
41+
text: moment('09-04-2017', 'DD-MM-YYYY').format('MMM')
4042
};
4143
const config1: any = {
4244
min: month.date.clone().subtract(1, 'month'),
4345
max: month.date.clone().add(1, 'month')
4446
};
4547

46-
expect(service.isMonthDisabled(month, config1)).toBe(false);
48+
expect(service.isMonthDisabled(month.date, config1)).toBe(false);
4749
month.date.subtract(1, 'month');
48-
expect(service.isMonthDisabled(month, config1)).toBe(false);
50+
expect(service.isMonthDisabled(month.date, config1)).toBe(false);
4951
month.date.subtract(1, 'month');
50-
expect(service.isMonthDisabled(month, config1)).toBe(true);
52+
expect(service.isMonthDisabled(month.date, config1)).toBe(true);
5153
month.date.add(3, 'month');
52-
expect(service.isMonthDisabled(month, config1)).toBe(false);
54+
expect(service.isMonthDisabled(month.date, config1)).toBe(false);
5355
month.date.add(1, 'month');
54-
expect(service.isMonthDisabled(month, config1)).toBe(true);
56+
expect(service.isMonthDisabled(month.date, config1)).toBe(true);
5557
}));
5658

5759
it('should check getDayBtnText method',
@@ -70,6 +72,7 @@ describe('Service: MonthCalendarService', () => {
7072
(service: MonthCalendarService) => {
7173
const date = moment('05-04-2017', 'DD-MM-YYYY');
7274
expect(service.getMonthBtnCssClass({}, date)).toEqual('');
73-
expect(service.getMonthBtnCssClass({monthBtnCssClassCallback: (m => 'class1 class2')}, date)).toEqual('class1 class2');
75+
expect(service.getMonthBtnCssClass({monthBtnCssClassCallback: (m => 'class1 class2')}, date))
76+
.toEqual('class1 class2');
7477
}));
7578
});

‎src/app/month-calendar/month-calendar.service.ts

+11-7
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export class MonthCalendarService {
2222
}
2323

2424
getConfig(config: IMonthCalendarConfig): IMonthCalendarConfig {
25-
const _config = {
25+
const _config: IMonthCalendarConfig = {
2626
...this.DEFAULT_CONFIG,
2727
...this.utilsService.clearUndefined(config)
2828
};
@@ -32,29 +32,33 @@ export class MonthCalendarService {
3232
return _config;
3333
}
3434

35-
generateYear(year: Moment, selected: Moment[] = null): IMonth[][] {
35+
generateYear(config: IMonthCalendarConfig, year: Moment, selected: Moment[] = null): IMonth[][] {
3636
const index = year.clone().startOf('year');
3737

3838
return this.utilsService.createArray(3).map(() => {
3939
return this.utilsService.createArray(4).map(() => {
40+
const date = index.clone();
4041
const month = {
41-
date: index.clone(),
42+
date,
4243
selected: !!selected.find(s => index.isSame(s, 'month')),
43-
currentMonth: index.isSame(moment(), 'month')
44+
currentMonth: index.isSame(moment(), 'month'),
45+
disabled: this.isMonthDisabled(date, config),
46+
text: this.getMonthBtnText(config, date)
4447
};
4548

4649
index.add(1, 'month');
50+
4751
return month;
4852
});
4953
});
5054
}
5155

52-
isMonthDisabled(month: IMonth, config: IMonthCalendarConfig) {
53-
if (config.min && month.date.isBefore(config.min, 'month')) {
56+
isMonthDisabled(date: Moment, config: IMonthCalendarConfig) {
57+
if (config.min && date.isBefore(config.min, 'month')) {
5458
return true;
5559
}
5660

57-
return !!(config.max && month.date.isAfter(config.max, 'month'));
61+
return !!(config.max && date.isAfter(config.max, 'month'));
5862
}
5963

6064
shouldShowLeft(min: Moment, currentMonthView: Moment): boolean {

‎src/app/month-calendar/month.model.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import {IDate} from '../common/models/date.model';
22

33
export interface IMonth extends IDate {
4-
currentMonth?: boolean;
5-
}
4+
currentMonth: boolean;
5+
disabled: boolean;
6+
text: string;
7+
}

‎src/app/time-select/time-select.component.html

+10-8
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,50 @@
11
<ul class="dp-time-select-controls">
22
<li class="dp-time-select-control dp-time-select-control-hours">
33
<button type="button"
4-
[disabled]="!shouldShowIncrease('hour')"
54
class="dp-time-select-control-up"
5+
[disabled]="!showIncHour"
66
(click)="increase('hour')">
77
</button>
88
<span class="dp-time-select-display-hours">{{hours}}</span>
99
<button type="button"
10-
[disabled]="!shouldShowDecrease('hour')"
1110
class="dp-time-select-control-down"
11+
[disabled]="!showDecHour"
1212
(click)="decrease('hour')"></button>
1313
</li>
1414
<li class="dp-time-select-control dp-time-select-separator">{{componentConfig.timeSeparator}}</li>
1515
<li class="dp-time-select-control dp-time-select-control-minutes">
1616
<button type="button"
17-
[disabled]="!shouldShowIncrease('minute')" class="dp-time-select-control-up"
17+
class="dp-time-select-control-up"
18+
[disabled]="!showIncMinute"
1819
(click)="increase('minute')"></button>
1920
<span class="dp-time-select-display-minutes">{{minutes}}</span>
2021
<button type="button"
21-
[disabled]="!shouldShowDecrease('minute')" class="dp-time-select-control-down"
22+
[disabled]="!showDecMinute" class="dp-time-select-control-down"
2223
(click)="decrease('minute')"></button>
2324
</li>
2425
<ng-container *ngIf="componentConfig.showSeconds">
2526
<li class="dp-time-select-control dp-time-select-separator">{{componentConfig.timeSeparator}}</li>
2627
<li class="dp-time-select-control dp-time-select-control-seconds">
2728
<button type="button"
28-
[disabled]="!shouldShowIncrease('second')"
2929
class="dp-time-select-control-up"
30+
[disabled]="!showIncSecond"
3031
(click)="increase('second')"></button>
3132
<span class="dp-time-select-display-seconds">{{seconds}}</span>
3233
<button type="button"
33-
[disabled]="!shouldShowDecrease('second')" class="dp-time-select-control-down"
34+
class="dp-time-select-control-down"
35+
[disabled]="!showDecSecond"
3436
(click)="decrease('second')"></button>
3537
</li>
3638
</ng-container>
3739
<li class="dp-time-select-control dp-time-select-control-meridiem" *ngIf="!componentConfig.showTwentyFourHours">
3840
<button type="button"
39-
[disabled]="!shouldShowToggleMeridiem()"
4041
class="dp-time-select-control-up"
42+
[disabled]="!showToggleMeridiem"
4143
(click)="toggleMeridiem()"></button>
4244
<span class="dp-time-select-display-meridiem">{{meridiem}}</span>
4345
<button type="button"
44-
[disabled]="!shouldShowToggleMeridiem()"
4546
class="dp-time-select-control-down"
47+
[disabled]="!showToggleMeridiem"
4648
(click)="toggleMeridiem()"></button>
4749
</li>
4850
</ul>

0 commit comments

Comments
 (0)