Tt 319 fix calendar day week view (#738)

* fix: TT-319 Fix calendar week and day view

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

* refactor: TT-319 Change moment library with date

Co-authored-by: Andrés Soto <edansrock>

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

@@ -198,10 +198,10 @@ describe('CalendarComponent', () => {
   });
 
   it('emit current date and call navigationEnable when call handleChangeDateEvent', () => {
+    const calendarView: CalendarView = CalendarView.Month;
     const fakeValueEmit = {
-      date: currentDate.toDate(),
+      date: currentDate.toDate()
     };
-    const calendarView = CalendarView.Month;
     spyOn(component, 'navigationEnable');
     spyOn(component.changeDate, 'emit');
     spyOn(component, 'isVisibleForCurrentDate');
@@ -221,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;
@@ -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

@@ -32,7 +32,9 @@
           *ngIf="!dataSource.isLoading"
           [timeEntries$]="timeEntriesDataSource$"
           [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

@@ -21,6 +21,7 @@ import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
 import { CookieService } from 'ngx-cookie-service';
 import { DebugElement } from '@angular/core';
 import { FeatureToggle } from './../../../../environments/enum';
+import { CalendarView } from 'angular-calendar';
 import * as moment from 'moment';
 
 describe('TimeEntriesComponent', () => {
@@ -560,6 +561,7 @@ describe('TimeEntriesComponent', () => {
     const dateMoment: moment.Moment = moment().month(monthIndex).year(year);
     jasmine.clock().mockDate(dateMoment.toDate());
 
+    component.actualDate.setMonth(monthIndex);
     component.dateSelected(eventData);
 
     expect(component.selectedDate).toEqual(dateMoment);
@@ -569,7 +571,7 @@ describe('TimeEntriesComponent', () => {
     const incomingDate = new Date('2021-06-07');
     const incomingMoment: moment.Moment = moment(incomingDate);
     const eventData = {
-      date: incomingDate,
+      date: incomingDate
     };
     spyOn(component, 'dateSelected');
     component.selectedDate = moment(incomingMoment).subtract(1, 'day');
@@ -584,7 +586,7 @@ describe('TimeEntriesComponent', () => {
     const incomingDate = new Date('2021-01-07');
     const incomingMoment: moment.Moment = moment(incomingDate);
     const eventData = {
-      date: incomingDate,
+      date: incomingDate
     };
     const selectedDate = {
       monthIndex: incomingMoment.month(),
@@ -598,6 +600,37 @@ describe('TimeEntriesComponent', () => {
     expect(component.dateSelected).toHaveBeenCalledWith(selectedDate);
   });
 
+  it('change component selectedDate to be the first day of the month when call dateSelected', () => {
+    const actualDate: Date = new Date(2021, 5, 15);
+    const selectedDate: Date = new Date(2021, 2, 1);
+    const eventDate = {
+      monthIndex: selectedDate.getMonth(),
+      year: selectedDate.getFullYear()
+    };
+    component.actualDate = actualDate;
+    component.dateSelected(eventDate);
+    expect(component.selectedDate.date()).toBe(selectedDate.getDate());
+  });
+
+  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

@@ -14,6 +14,7 @@ import { EntryActionTypes } from './../../time-clock/store/entry.actions';
 import { getActiveTimeEntry, getTimeEntriesDataSource } from './../../time-clock/store/entry.selectors';
 import { CookieService } from 'ngx-cookie-service';
 import { FeatureToggle } from './../../../../environments/enum';
+import { CalendarView } from 'angular-calendar';
 @Component({
   selector: 'app-time-entries',
   templateUrl: './time-entries.component.html',
@@ -38,6 +39,8 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
   selectedYear: number;
   selectedMonthAsText: string;
   isActiveEntryOverlapping = false;
+  calendarView: CalendarView = CalendarView.Month;
+  actualDate: Date;
   readonly NO_DATA_MESSAGE: string = 'No data available in table';
   constructor(
     private store: Store<EntryState>,
@@ -46,6 +49,7 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
     private cookiesService: CookieService) {
     this.displayGridView = false;
     this.selectedDate = moment(new Date());
+    this.actualDate = new Date();
     this.timeEntriesDataSource$ = this.store.pipe(delay(0), select(getTimeEntriesDataSource));
   }
   ngOnDestroy(): void {
@@ -180,6 +184,9 @@ 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.actualDate.getMonth() !== event.monthIndex){
+      this.selectedDate = this.selectedDate.startOf('month');
+    }
   }
 
   changeDate(event: { date: Date }){
@@ -196,6 +203,10 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
     this.selectedDate = newDate;
   }
 
+  changeView(event: { calendarView: CalendarView }){
+    this.calendarView = event.calendarView || CalendarView.Month;
+  }
+
   openModal(item: any) {
     this.idToDelete = item.id;
     this.message = `Are you sure you want to delete ${item.activity_name}?`;