Stop using getters in template - resolves #239

vlio20 · Oct 14, 2017 · 3858dde · 3858dde
1 parent b9bef8f
commit 3858dde
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 106 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,9 @@ All notable changes to this project will be documented in this file.
 ### UI/UX Changes
 - Moving go to current button inside the navigation component ([dd283c5](https://github.com/vlio20/angular-datepicker/commit/dd283c5)).
 
+### Improvements
+- Stop using getters in template ([???](https://github.com/vlio20/angular-datepicker/commit/???)) closes [#239](https://github.com/vlio20/angular-datepicker/issues/239)
+
 ### Bug Fixed
 - 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)
 - 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.
 <a name="2.5.1"></a>
 # [2.5.1](https://github.com/vlio20/angular-datepicker/releases/tag/2.5.1) (2017-10-12)
 
-### Features
-- none
-
-### UI/UX Changes
-- none
-
 ### Bug Fixed
-- none
-
-### Breaking Changes
-- 29th October 2017 displayed twice [#235](https://github.com/vlio20/angular-datepicker/issues/235#issuecomment-336217634) 
-
-
+29th October 2017 displayed twice [#235](https://github.com/vlio20/angular-datepicker/issues/235#issuecomment-336217634)
diff --git a/src/app/day-calendar/day-calendar.component.ts b/src/app/day-calendar/day-calendar.component.ts
@@ -98,7 +98,7 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
     this._currentDateView = current.clone();
     this.weeks = this.dayCalendarService
       .generateMonthArray(this.componentConfig, this._currentDateView, this.selected);
-    this.setLabel();
+    this.navLabel = this.dayCalendarService.getHeaderLabel(this.componentConfig, this._currentDateView);
     this.showLeftNav = this.dayCalendarService.shouldShowLeft(this.componentConfig.min, this.currentDateView);
     this.showRightNav = this.dayCalendarService.shouldShowRight(this.componentConfig.max, this.currentDateView);
   }
@@ -254,10 +254,6 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
     this.onMonthSelect.emit(month);
   }
 
-  setLabel() {
-    this.navLabel = this.dayCalendarService.getHeaderLabel(this.componentConfig, this._currentDateView);
-  }
-
   moveCalendarsBy(current: Moment, amount: number, granularity: moment.unitOfTime.Base = 'month') {
     this.currentDateView = current.clone().add(amount, granularity);
   }

diff --git a/src/app/month-calendar/month-calendar.component.html b/src/app/month-calendar/month-calendar.component.html
@@ -1,11 +1,11 @@
 <div class="dp-month-calendar-container">
   <dp-calendar-nav
       [label]="navLabel"
-      [showLeftNav]="shouldShowLeftNav()"
-      [showLeftSecondaryNav]="shouldShowLeftSecondaryNav()"
-      [showRightNav]="shouldShowRightNav()"
-      [showRightSecondaryNav]="shouldShowRightSecondaryNav()"
-      [isLabelClickable]="isNavHeaderBtnClickable()"
+      [showLeftNav]="showLeftNav"
+      [showLeftSecondaryNav]="showLeftSecondaryNav"
+      [showRightNav]="showRightNav"
+      [showRightSecondaryNav]="showRightSecondaryNav"
+      [isLabelClickable]="componentConfig.isNavHeaderBtnClickable"
       [showGoToCurrent]="shouldShowCurrent()"
       [theme]="theme"
       (onLeftNav)="onLeftNav()"
@@ -21,10 +21,10 @@
       <button type="button"
               class="dp-calendar-month"
               *ngFor="let month of monthRow"
-              [disabled]="isDisabledMonth(month)"
+              [disabled]="month.disabled"
               [ngClass]="getMonthBtnCssClass(month)"
               (click)="monthClicked(month)">
-        {{getMonthBtnText(month)}}
+        {{month.text}}
       </button>
     </div>
   </div>

diff --git a/src/app/month-calendar/month-calendar.component.spec.ts b/src/app/month-calendar/month-calendar.component.spec.ts
@@ -29,17 +29,13 @@ describe('Component: MonthCalendarComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should check getMonthBtnText default value', () => {
-    expect(component.getMonthBtnText({
-      date: moment('05-04-2017', 'DD-MM-YYYY')
-    } as IMonth)).toEqual('Apr');
-  });
-
   describe('should have the right CSS classes for', () => {
     const defaultMonth: IMonth = {
       date: undefined,
       selected: false,
-      currentMonth: false
+      currentMonth: false,
+      disabled: false,
+      text: ''
     };
     const defaultCssClasses: { [klass: string]: boolean } = {
       'dp-selected': false,

diff --git a/src/app/month-calendar/month-calendar.component.ts b/src/app/month-calendar/month-calendar.component.ts
@@ -67,6 +67,10 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
   validateFn: DateValidator;
   _shouldShowCurrent: boolean = true;
   navLabel: string;
+  showLeftNav: boolean;
+  showRightNav: boolean;
+  showSecondaryLeftNav: boolean;
+  showSecondaryRightNav: boolean;
 
   set selected(selected: Moment[]) {
     this._selected = selected;
@@ -79,8 +83,13 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
 
   set currentDateView(current: Moment) {
     this._currentDateView = current.clone();
-    this.yearMonths = this.monthCalendarService.generateYear(this._currentDateView, this.selected);
-    this.setLabel();
+    this.yearMonths = this.monthCalendarService
+      .generateYear(this.componentConfig, this._currentDateView, this.selected);
+    this.navLabel = this.monthCalendarService.getHeaderLabel(this.componentConfig, this.currentDateView);
+    this.showLeftNav = this.monthCalendarService.shouldShowLeft(this.componentConfig.min, this._currentDateView);
+    this.showRightNav = this.monthCalendarService.shouldShowRight(this.componentConfig.max, this.currentDateView);
+    this.showSecondaryLeftNav = this.componentConfig.showMultipleYearsNavigation && this.showLeftNav;
+    this.showSecondaryRightNav = this.componentConfig.showMultipleYearsNavigation && this.showRightNav;
   }
 
   get currentDateView(): Moment {
@@ -125,7 +134,8 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
     if (value) {
       this.selected = this.utilsService
         .convertToMomentArray(value, this.componentConfig.format, this.componentConfig.allowMultiSelect);
-      this.yearMonths = this.monthCalendarService.generateYear(this.currentDateView, this.selected);
+      this.yearMonths = this.monthCalendarService
+        .generateYear(this.componentConfig, this.currentDateView, this.selected);
       this.inputValueType = this.utilsService.getInputType(this.inputValue, this.componentConfig.allowMultiSelect);
     }
   }
@@ -166,25 +176,17 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
     this.onChangeCallback(this.processOnChangeCallback(this.selected));
   }
 
-  isDisabledMonth(month: IMonth): boolean {
-    return this.monthCalendarService.isMonthDisabled(month, this.componentConfig);
-  }
-
   monthClicked(month: IMonth) {
     this.selected = this.utilsService
       .updateSelected(this.componentConfig.allowMultiSelect, this.selected, month, 'month');
     this.yearMonths = this.monthCalendarService
-      .generateYear(this.currentDateView, this.selected);
+      .generateYear(this.componentConfig, this.currentDateView, this.selected);
     this.onSelect.emit(month);
   }
 
-  setLabel() {
-    this.navLabel = this.monthCalendarService.getHeaderLabel(this.componentConfig, this.currentDateView);
-  }
-
   onLeftNav() {
     this.currentDateView = this.currentDateView.clone().subtract(1, 'year');
-    this.yearMonths = this.monthCalendarService.generateYear(this.currentDateView, this.selected);
+    this.yearMonths = this.monthCalendarService.generateYear(this.componentConfig, this.currentDateView, this.selected);
   }
 
   onLeftSecondaryNav() {
@@ -215,34 +217,10 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
     this.currentDateView = this.currentDateView.clone().add(navigateBy, 'year');
   }
 
-  shouldShowLeftNav(): boolean {
-    return this.monthCalendarService.shouldShowLeft(this.componentConfig.min, this.currentDateView);
-  }
-
-  shouldShowLeftSecondaryNav(): boolean {
-    return this.componentConfig.showMultipleYearsNavigation && this.shouldShowLeftNav();
-  }
-
-  shouldShowRightNav(): boolean {
-    return this.monthCalendarService.shouldShowRight(this.componentConfig.max, this.currentDateView);
-  }
-
-  shouldShowRightSecondaryNav(): boolean {
-    return this.componentConfig.showMultipleYearsNavigation && this.shouldShowRightNav();
-  }
-
-  isNavHeaderBtnClickable(): boolean {
-    return this.componentConfig.isNavHeaderBtnClickable;
-  }
-
   toggleCalendar() {
     this.onNavHeaderBtnClick.emit();
   }
 
-  getMonthBtnText(month: IMonth): string {
-    return this.monthCalendarService.getMonthBtnText(this.componentConfig, month.date);
-  }
-
   getMonthBtnCssClass(month: IMonth): {[klass: string]: boolean} {
     const cssClass: {[klass: string]: boolean} = {
       'dp-selected': month.selected,

diff --git a/src/app/month-calendar/month-calendar.service.spec.ts b/src/app/month-calendar/month-calendar.service.spec.ts
@@ -14,7 +14,7 @@ describe('Service: MonthCalendarService', () => {
   it('should check the generateYear method', inject([MonthCalendarService], (service: MonthCalendarService) => {
     const year = moment('14-01-1987', 'DD-MM-YYYY');
     const selected = moment('14-01-1987', 'DD-MM-YYYY');
-    const genYear = service.generateYear(year, [selected]);
+    const genYear = service.generateYear({}, year, [selected]);
 
     const current = year.clone().startOf('year');
     genYear.forEach((row) => {
@@ -36,22 +36,24 @@ describe('Service: MonthCalendarService', () => {
     const month: IMonth = {
       date: moment('09-04-2017', 'DD-MM-YYYY'),
       selected: false,
-      currentMonth: false
+      currentMonth: false,
+      disabled: false,
+      text: moment('09-04-2017', 'DD-MM-YYYY').format('MMM')
     };
     const config1: any = {
       min: month.date.clone().subtract(1, 'month'),
       max: month.date.clone().add(1, 'month')
     };
 
-    expect(service.isMonthDisabled(month, config1)).toBe(false);
+    expect(service.isMonthDisabled(month.date, config1)).toBe(false);
     month.date.subtract(1, 'month');
-    expect(service.isMonthDisabled(month, config1)).toBe(false);
+    expect(service.isMonthDisabled(month.date, config1)).toBe(false);
     month.date.subtract(1, 'month');
-    expect(service.isMonthDisabled(month, config1)).toBe(true);
+    expect(service.isMonthDisabled(month.date, config1)).toBe(true);
     month.date.add(3, 'month');
-    expect(service.isMonthDisabled(month, config1)).toBe(false);
+    expect(service.isMonthDisabled(month.date, config1)).toBe(false);
     month.date.add(1, 'month');
-    expect(service.isMonthDisabled(month, config1)).toBe(true);
+    expect(service.isMonthDisabled(month.date, config1)).toBe(true);
   }));
 
   it('should check getDayBtnText method',
@@ -70,6 +72,7 @@ describe('Service: MonthCalendarService', () => {
       (service: MonthCalendarService) => {
         const date = moment('05-04-2017', 'DD-MM-YYYY');
         expect(service.getMonthBtnCssClass({}, date)).toEqual('');
-        expect(service.getMonthBtnCssClass({monthBtnCssClassCallback: (m => 'class1 class2')}, date)).toEqual('class1 class2');
+        expect(service.getMonthBtnCssClass({monthBtnCssClassCallback: (m => 'class1 class2')}, date))
+          .toEqual('class1 class2');
       }));
 });
diff --git a/src/app/month-calendar/month-calendar.service.ts b/src/app/month-calendar/month-calendar.service.ts
@@ -22,7 +22,7 @@ export class MonthCalendarService {
   }
 
   getConfig(config: IMonthCalendarConfig): IMonthCalendarConfig {
-    const _config = {
+    const _config: IMonthCalendarConfig = {
       ...this.DEFAULT_CONFIG,
       ...this.utilsService.clearUndefined(config)
     };
@@ -32,29 +32,33 @@ export class MonthCalendarService {
     return _config;
   }
 
-  generateYear(year: Moment, selected: Moment[] = null): IMonth[][] {
+  generateYear(config: IMonthCalendarConfig, year: Moment, selected: Moment[] = null): IMonth[][] {
     const index = year.clone().startOf('year');
 
     return this.utilsService.createArray(3).map(() => {
       return this.utilsService.createArray(4).map(() => {
+        const date = index.clone();
         const month = {
-          date: index.clone(),
+          date,
           selected: !!selected.find(s => index.isSame(s, 'month')),
-          currentMonth: index.isSame(moment(), 'month')
+          currentMonth: index.isSame(moment(), 'month'),
+          disabled: this.isMonthDisabled(date, config),
+          text: this.getMonthBtnText(config, date)
         };
 
         index.add(1, 'month');
+
         return month;
       });
     });
   }
 
-  isMonthDisabled(month: IMonth, config: IMonthCalendarConfig) {
-    if (config.min && month.date.isBefore(config.min, 'month')) {
+  isMonthDisabled(date: Moment, config: IMonthCalendarConfig) {
+    if (config.min && date.isBefore(config.min, 'month')) {
       return true;
     }
 
-    return !!(config.max && month.date.isAfter(config.max, 'month'));
+    return !!(config.max && date.isAfter(config.max, 'month'));
   }
 
   shouldShowLeft(min: Moment, currentMonthView: Moment): boolean {

diff --git a/src/app/month-calendar/month.model.ts b/src/app/month-calendar/month.model.ts
@@ -1,5 +1,7 @@
 import {IDate} from '../common/models/date.model';
 
 export interface IMonth extends IDate {
-  currentMonth?: boolean;
-}
+  currentMonth: boolean;
+  disabled: boolean;
+  text: string;
+}
diff --git a/src/app/time-select/time-select.component.html b/src/app/time-select/time-select.component.html
@@ -1,48 +1,50 @@
 <ul class="dp-time-select-controls">
   <li class="dp-time-select-control dp-time-select-control-hours">
     <button type="button"
-            [disabled]="!shouldShowIncrease('hour')"
             class="dp-time-select-control-up"
+            [disabled]="!showIncHour"
             (click)="increase('hour')">
     </button>
     <span class="dp-time-select-display-hours">{{hours}}</span>
     <button type="button"
-            [disabled]="!shouldShowDecrease('hour')"
             class="dp-time-select-control-down"
+            [disabled]="!showDecHour"
             (click)="decrease('hour')"></button>
   </li>
   <li class="dp-time-select-control dp-time-select-separator">{{componentConfig.timeSeparator}}</li>
   <li class="dp-time-select-control dp-time-select-control-minutes">
     <button type="button"
-            [disabled]="!shouldShowIncrease('minute')" class="dp-time-select-control-up"
+            class="dp-time-select-control-up"
+            [disabled]="!showIncMinute"
             (click)="increase('minute')"></button>
     <span class="dp-time-select-display-minutes">{{minutes}}</span>
     <button type="button"
-            [disabled]="!shouldShowDecrease('minute')" class="dp-time-select-control-down"
+            [disabled]="!showDecMinute" class="dp-time-select-control-down"
             (click)="decrease('minute')"></button>
   </li>
   <ng-container *ngIf="componentConfig.showSeconds">
     <li class="dp-time-select-control dp-time-select-separator">{{componentConfig.timeSeparator}}</li>
     <li class="dp-time-select-control dp-time-select-control-seconds">
       <button type="button"
-              [disabled]="!shouldShowIncrease('second')"
               class="dp-time-select-control-up"
+              [disabled]="!showIncSecond"
               (click)="increase('second')"></button>
       <span class="dp-time-select-display-seconds">{{seconds}}</span>
       <button type="button"
-              [disabled]="!shouldShowDecrease('second')" class="dp-time-select-control-down"
+              class="dp-time-select-control-down"
+              [disabled]="!showDecSecond"
               (click)="decrease('second')"></button>
     </li>
   </ng-container>
   <li class="dp-time-select-control dp-time-select-control-meridiem" *ngIf="!componentConfig.showTwentyFourHours">
     <button type="button"
-            [disabled]="!shouldShowToggleMeridiem()"
             class="dp-time-select-control-up"
+            [disabled]="!showToggleMeridiem"
             (click)="toggleMeridiem()"></button>
     <span class="dp-time-select-display-meridiem">{{meridiem}}</span>
     <button type="button"
-            [disabled]="!shouldShowToggleMeridiem()"
             class="dp-time-select-control-down"
+            [disabled]="!showToggleMeridiem"
             (click)="toggleMeridiem()"></button>
   </li>
 </ul>