refactor: TT-319 select first day of the month when select on calendar

Author: Andrés Soto

src/app/modules/time-entries/components/calendar/calendar.component.spec.ts

@@ -200,8 +200,7 @@ describe('CalendarComponent', () => {
   it('emit current date and call navigationEnable when call handleChangeDateEvent', () => {
     const calendarView: CalendarView = CalendarView.Month;
     const fakeValueEmit = {
-      date: currentDate.toDate(),
-      calendarView
+      date: currentDate.toDate()
     };
     spyOn(component, 'navigationEnable');
     spyOn(component.changeDate, 'emit');
@@ -222,6 +221,14 @@ describe('CalendarComponent', () => {
     expect(component.calendarView).toEqual(fakeCalendarView);
   });
 
+  it('emit calendarView Day when call changeCalendarView', () => {
+    const fakeCalendarView: CalendarView = CalendarView.Day;
+    component.calendarView = CalendarView.Month;
+    spyOn(component.changeView, 'emit');
+    component.changeCalendarView(fakeCalendarView);
+    expect(component.changeView.emit).toHaveBeenCalledWith({ calendarView: fakeCalendarView });
+  });
+
   it('set srcoll to current time marker in calendarView when is call scrollToCurrentTimeMarker', () => {
     const fakeCalendarView: CalendarView = CalendarView.Week;
     spyOn(component, 'scrollToCurrentTimeMarker');

src/app/modules/time-entries/components/calendar/calendar.component.ts

@@ -44,6 +44,9 @@ export class CalendarComponent implements OnInit {
   @Output() changeDate: EventEmitter<any> = new EventEmitter<{
     date: Date;
   }>();
+  @Output() changeView: EventEmitter<any> = new EventEmitter<{
+    calendarView: CalendarView;
+  }>();
 
   initialDate: Date;
   previusDate: Date;
@@ -109,7 +112,7 @@ export class CalendarComponent implements OnInit {
     const date = this.currentDate;
     this.isToday = this.isVisibleForCurrentDate();
     this.navigationEnable(this.calendarView);
-    this.changeDate.emit({ date, calendarView: this.calendarView });
+    this.changeDate.emit({ date });
   }
 
   changeCalendarView(calendarView: CalendarView) {
@@ -119,6 +122,7 @@ export class CalendarComponent implements OnInit {
       this.referenceChangeDetector.detectChanges();
       this.scrollToCurrentTimeMarker();
     }
+    this.changeView.emit({ calendarView });
   }
 
   navigationEnable(calendarView: CalendarView) {

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

@@ -34,6 +34,7 @@
           [currentDate]="selectedDate.toDate()"
           [calendarView]="calendarView"
           (changeDate)="changeDate($event)"
+          (changeView)="changeView($event)"
           (viewModal)="editEntry($event.id)"
           (deleteTimeEntry)="openModal($event.timeEntry)"
         >

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

@@ -561,6 +561,7 @@ describe('TimeEntriesComponent', () => {
     const dateMoment: moment.Moment = moment().month(monthIndex).year(year);
     jasmine.clock().mockDate(dateMoment.toDate());
 
+    component.currentMonth = monthIndex;
     component.dateSelected(eventData);
 
     expect(component.selectedDate).toEqual(dateMoment);
@@ -569,10 +570,8 @@ describe('TimeEntriesComponent', () => {
   it('set date in selectedDate when call changeDate and selectedDate.month() is same to incoming date', () => {
     const incomingDate = new Date('2021-06-07');
     const incomingMoment: moment.Moment = moment(incomingDate);
-    const calendarView: CalendarView = CalendarView.Month;
     const eventData = {
-      date: incomingDate,
-      calendarView
+      date: incomingDate
     };
     spyOn(component, 'dateSelected');
     component.selectedDate = moment(incomingMoment).subtract(1, 'day');
@@ -586,10 +585,8 @@ describe('TimeEntriesComponent', () => {
   it('call dateSelected when call changeDate and selectedDate.month() is different to incoming date', () => {
     const incomingDate = new Date('2021-01-07');
     const incomingMoment: moment.Moment = moment(incomingDate);
-    const calendarView: CalendarView = CalendarView.Month;
     const eventData = {
-      date: incomingDate,
-      calendarView
+      date: incomingDate
     };
     const selectedDate = {
       monthIndex: incomingMoment.month(),
@@ -603,6 +600,40 @@ describe('TimeEntriesComponent', () => {
     expect(component.dateSelected).toHaveBeenCalledWith(selectedDate);
   });
 
+  it('change component selectedDate to be the first day of the month when call dateSelected', () => {
+    const actualMoment: moment.Moment = moment(new Date('2021-01-07'));
+    const selectedMoment: moment.Moment = moment(new Date('2021-05-13'));
+    const firstDayMoment: moment.Moment = selectedMoment.startOf('month');
+    const eventDate = {
+      monthIndex: selectedMoment.month(),
+      year: selectedMoment.year()
+    };
+    component.currentMonth = actualMoment.month();
+    component.selectedDate = selectedMoment;
+    spyOn(component, 'dateSelected');
+    component.dateSelected(eventDate);
+    expect(component.selectedDate).toBe(firstDayMoment);
+  });
+
+  it('change component calendarView from Month to Day when call changeView', () => {
+    const fakeCalendarView: CalendarView = CalendarView.Day;
+    const eventView = {
+      calendarView: fakeCalendarView
+    };
+    component.calendarView = CalendarView.Month;
+    component.changeView(eventView);
+    expect(component.calendarView).toBe(fakeCalendarView);
+  });
+
+  it('change component calendarView to Month if undefined when call changeView', () => {
+    component.calendarView = CalendarView.Week;
+    const eventView = {
+      calendarView: undefined
+    };
+    component.changeView(eventView);
+    expect(component.calendarView).toBe(CalendarView.Month);
+  });
+
   it('not view button onDisplayModeChange when isFeatureToggleCalendarActive is false', () => {
     component.isFeatureToggleCalendarActive = false;
 

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

@@ -40,6 +40,7 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
   selectedMonthAsText: string;
   isActiveEntryOverlapping = false;
   calendarView: CalendarView = CalendarView.Month;
+  currentMonth = moment().month();
   readonly NO_DATA_MESSAGE: string = 'No data available in table';
   constructor(
     private store: Store<EntryState>,
@@ -182,9 +183,12 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
     this.selectedMonthAsText = moment().month(event.monthIndex).format('MMMM');
     this.store.dispatch(new entryActions.LoadEntries(this.selectedMonth, this.selectedYear));
     this.selectedDate = moment().month(event.monthIndex).year(event.year);
+    if (this.currentMonth !== event.monthIndex){
+      this.selectedDate = this.selectedDate.startOf('month');
+    }
   }
 
-  changeDate(event: { date: Date, calendarView: CalendarView }){
+  changeDate(event: { date: Date }){
     const newDate: moment.Moment = moment(event.date);
     if (this.selectedDate.month() !== newDate.month()){
       const monthSelected = newDate.month();
@@ -196,7 +200,10 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
       this.dateSelected(selectedDate);
     }
     this.selectedDate = newDate;
-    this.calendarView = event.calendarView;
+  }
+
+  changeView(event: { calendarView: CalendarView }){
+    this.calendarView = event.calendarView || CalendarView.Month;
   }
 
   openModal(item: any) {