TT-39 feat: allow switching among year

Author: scastillo-jp

src/app/modules/shared/components/month-picker/month-picker.component.html

@@ -1,10 +1,31 @@
-<div class="d-flex">
-  <div
-    class="month w-100 text-center align-self-center d-flex flex-column"
-    *ngFor="let month of months; let i = index"
-    (click)="getMonth(i)"
-    [ngClass]="{ active: activeMonth === i }"
-  >
-   <div class="p-2">{{ month }}</div>
-  </div>
+<div class="month-picker">
+	<div class="card">
+		<div class="card-header">
+			<div class="d-flex align-items-center">
+				<button class="btn mr-auto" (click)="decrement()">
+          <i class="fa fa-chevron-left"></i>
+        </button>
+				<p>
+					{{selectedYearText}}
+				</p>
+				<button class="btn ml-auto" (click)="increment()">
+          <i class="fa fa-chevron-right"></i>
+        </button>
+			</div>
+		</div>
+
+		<div class="card-body">
+				<div class="row">
+					<div class="col-sm-2" *ngFor="let month of months; let i = index">
+						<div class="month-picker-cell">
+							<button class="btn"
+              [ngClass]="{'btn-primary': isSelectedMonth(i)}"
+							 (click)="selectMonth(i)">
+                <small>{{ month }}</small>
+              </button>
+						</div>
+					</div>
+				</div>
+		</div>
+	</div>
 </div>

src/app/modules/shared/components/month-picker/month-picker.component.ts

@@ -1,23 +1,68 @@
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import * as moment from 'moment';
 
 @Component({
   selector: 'app-month-picker',
   templateUrl: './month-picker.component.html',
   styleUrls: ['./month-picker.component.scss']
 })
 export class MonthPickerComponent implements OnInit {
-  @Output() monthSelected = new EventEmitter();
-  activeMonth: number;
-  months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
-  constructor() { }
+  @Output() dateSelected = new EventEmitter<{ monthIndex: number; year: number; }>();
 
-  ngOnInit(): void {
-    this.activeMonth = new Date().getMonth();
+  selectedMonthMoment: moment.Moment;
+  selectedMonthIndex: number;
+  selectedYearMoment: moment.Moment;
+  selectedMonthYear: number;
+
+  selectedYearText: string;
+  months: Array<string> = [];
+  years: Array<number> = [];
+
+  constructor() {
+    this.selectedYearMoment = moment();
+    this.selectedMonthMoment = moment();
+    this.months = moment.months();
+    this.selectedMonthIndex = this.selectedMonthMoment.month();
+    this.selectedMonthYear = this.selectedYearMoment.year();
+    this.updateYearText();
+  }
+
+  ngOnInit() {
+    this.selectDate(this.selectedMonthIndex, this.selectedMonthYear);
+  }
+
+  updateYearText() {
+    this.selectedYearText = moment(this.selectedYearMoment).format('YYYY');
+  }
+
+  increment() {
+    this.selectedYearMoment = this.selectedYearMoment.add(1, 'year');
+    this.updateYearText();
   }
 
-  getMonth(month: number) {
-    this.monthSelected.emit(month + 1);
-    this.activeMonth = month;
+  decrement() {
+    this.selectedYearMoment = this.selectedYearMoment.subtract(1, 'year');
+    this.updateYearText();
   }
+
+  selectMonth(index: number) {
+    this.selectedMonthMoment = moment().month(index);
+    this.selectedMonthIndex = this.selectedMonthMoment.month();
+    this.selectedMonthYear = this.selectedYearMoment.year();
+    this.selectDate(this.selectedMonthIndex, this.selectedMonthYear);
+  }
+
+  isSelectedMonth(monthIndex: number) {
+    return (
+      this.selectedMonthIndex === monthIndex &&
+      this.selectedMonthYear === this.selectedYearMoment.year()
+    );
+  }
+
+  selectDate(monthIndex: number, year: number) {
+    this.dateSelected.emit({ monthIndex: monthIndex, year: year });
+  }
+
 }
+

src/app/modules/time-entries/pages/time-entries.component.html

@@ -13,7 +13,7 @@
     </div>
   </div>
   <div style="height: 15px;"></div>
-  <app-month-picker (monthSelected)="getMonth($event)"></app-month-picker>
+  <app-month-picker (dateSelected)="dateSelected($event)"></app-month-picker>
   <div style="height: 15px;"></div>
 
   <table class="table table-sm table-striped mb-0" *ngIf="(timeEntriesDataSource$ | async) as dataSource">

src/app/modules/time-entries/pages/time-entries.component.ts

@@ -8,6 +8,7 @@ import { SaveEntryEvent } from '../../shared/components/details-fields/save-entr
 import { Entry } from '../../shared/models';
 import { DataSource } from '../../shared/models/data-source.model';
 import * as entryActions from '../../time-clock/store/entry.actions';
+import * as moment from 'moment';
 import { EntryState } from '../../time-clock/store/entry.reducer';
 import { EntryActionTypes } from './../../time-clock/store/entry.actions';
 import { getActiveTimeEntry, getTimeEntriesDataSource } from './../../time-clock/store/entry.selectors';
@@ -26,6 +27,9 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
   entriesSubscription: Subscription;
   canMarkEntryAsWIP = true;
   timeEntriesDataSource$: Observable<DataSource<Entry>>;
+  selectedYearAsText: string;
+  selectedMonthIndex: number;
+  selectedMonthAsText: string;
 
   constructor(private store: Store<EntryState>, private toastrService: ToastrService, private actionsSubject$: ActionsSubject) {
     this.timeEntriesDataSource$ = this.store.pipe(delay(0), select(getTimeEntriesDataSource));
@@ -107,8 +111,7 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
       const isEditingEntryEqualToActiveEntry = this.entryId === this.activeTimeEntry.id;
       const isStartDateGreaterThanActiveEntry = startDateAsLocalDate > activeEntryAsLocalDate;
       const isEndDateGreaterThanActiveEntry = endDateAsLocalDate > activeEntryAsLocalDate;
-      const isTimeEntryOverlapping = isStartDateGreaterThanActiveEntry || isEndDateGreaterThanActiveEntry;
-      if (!isEditingEntryEqualToActiveEntry && isTimeEntryOverlapping) {
+      if (!isEditingEntryEqualToActiveEntry && (isStartDateGreaterThanActiveEntry || isEndDateGreaterThanActiveEntry)){
         this.toastrService.error('You are on the clock and this entry overlaps it, try with earlier times.');
       } else {
         this.doSave(event);
@@ -161,8 +164,11 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
     this.showModal = false;
   }
 
-  getMonth(month: number) {
-    this.store.dispatch(new entryActions.LoadEntries(month));
+  dateSelected(event: { monthIndex: number; year: number }) {
+    this.selectedYearAsText = event.year.toString();
+    this.selectedMonthIndex = event.monthIndex;
+    this.selectedMonthAsText = moment().month(event.monthIndex).format('MMMM');
+    this.store.dispatch(new entryActions.LoadEntries(event.monthIndex));
   }
 
   openModal(item: any) {

tslint.json

@@ -76,6 +76,7 @@
     "no-redundant-jsdoc": true,
     "no-switch-case-fall-through": true,
     "no-var-requires": false,
+    "object-literal-shorthand": false,
     "object-literal-key-quotes": [
       true,
       "as-needed"