From 0125bfadab33fe9c44736d5ad9e179178ad60dff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Soto?= Date: Tue, 24 Aug 2021 11:51:10 -0500 Subject: [PATCH 1/3] fix: TT-319 Fix calendar week and day view --- .../components/calendar/calendar.component.spec.ts | 3 ++- .../time-entries/components/calendar/calendar.component.ts | 2 +- .../modules/time-entries/pages/time-entries.component.html | 1 + .../time-entries/pages/time-entries.component.spec.ts | 5 +++++ src/app/modules/time-entries/pages/time-entries.component.ts | 5 ++++- 5 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/app/modules/time-entries/components/calendar/calendar.component.spec.ts b/src/app/modules/time-entries/components/calendar/calendar.component.spec.ts index 3a1db6cc0..e1ff24093 100644 --- a/src/app/modules/time-entries/components/calendar/calendar.component.spec.ts +++ b/src/app/modules/time-entries/components/calendar/calendar.component.spec.ts @@ -198,10 +198,11 @@ describe('CalendarComponent', () => { }); it('emit current date and call navigationEnable when call handleChangeDateEvent', () => { + const calendarView: CalendarView = CalendarView.Month; const fakeValueEmit = { date: currentDate.toDate(), + calendarView }; - const calendarView = CalendarView.Month; spyOn(component, 'navigationEnable'); spyOn(component.changeDate, 'emit'); spyOn(component, 'isVisibleForCurrentDate'); diff --git a/src/app/modules/time-entries/components/calendar/calendar.component.ts b/src/app/modules/time-entries/components/calendar/calendar.component.ts index 2a2cf9ac1..a4d5d997d 100644 --- a/src/app/modules/time-entries/components/calendar/calendar.component.ts +++ b/src/app/modules/time-entries/components/calendar/calendar.component.ts @@ -109,7 +109,7 @@ export class CalendarComponent implements OnInit { const date = this.currentDate; this.isToday = this.isVisibleForCurrentDate(); this.navigationEnable(this.calendarView); - this.changeDate.emit({ date }); + this.changeDate.emit({ date, calendarView: this.calendarView }); } changeCalendarView(calendarView: CalendarView) { diff --git a/src/app/modules/time-entries/pages/time-entries.component.html b/src/app/modules/time-entries/pages/time-entries.component.html index 17aecac39..ca7976df2 100644 --- a/src/app/modules/time-entries/pages/time-entries.component.html +++ b/src/app/modules/time-entries/pages/time-entries.component.html @@ -32,6 +32,7 @@ *ngIf="!dataSource.isLoading" [timeEntries$]="timeEntriesDataSource$" [currentDate]="selectedDate.toDate()" + [calendarView]="calendarView" (changeDate)="changeDate($event)" (viewModal)="editEntry($event.id)" (deleteTimeEntry)="openModal($event.timeEntry)" diff --git a/src/app/modules/time-entries/pages/time-entries.component.spec.ts b/src/app/modules/time-entries/pages/time-entries.component.spec.ts index 2406a1a59..e9f48f2b4 100644 --- a/src/app/modules/time-entries/pages/time-entries.component.spec.ts +++ b/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', () => { @@ -568,8 +569,10 @@ 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 }; spyOn(component, 'dateSelected'); component.selectedDate = moment(incomingMoment).subtract(1, 'day'); @@ -583,8 +586,10 @@ 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 }; const selectedDate = { monthIndex: incomingMoment.month(), diff --git a/src/app/modules/time-entries/pages/time-entries.component.ts b/src/app/modules/time-entries/pages/time-entries.component.ts index 52c4b4976..3580b0bfc 100644 --- a/src/app/modules/time-entries/pages/time-entries.component.ts +++ b/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,7 @@ export class TimeEntriesComponent implements OnInit, OnDestroy { selectedYear: number; selectedMonthAsText: string; isActiveEntryOverlapping = false; + calendarView: CalendarView = CalendarView.Month; readonly NO_DATA_MESSAGE: string = 'No data available in table'; constructor( private store: Store, @@ -182,7 +184,7 @@ export class TimeEntriesComponent implements OnInit, OnDestroy { this.selectedDate = moment().month(event.monthIndex).year(event.year); } - changeDate(event: { date: Date }){ + changeDate(event: { date: Date, calendarView: CalendarView }){ const newDate: moment.Moment = moment(event.date); if (this.selectedDate.month() !== newDate.month()){ const monthSelected = newDate.month(); @@ -194,6 +196,7 @@ export class TimeEntriesComponent implements OnInit, OnDestroy { this.dateSelected(selectedDate); } this.selectedDate = newDate; + this.calendarView = event.calendarView; } openModal(item: any) { From 26bfd6836f639734ad1e43fd8d7572c195ae4bec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Soto?= Date: Tue, 24 Aug 2021 18:54:25 -0500 Subject: [PATCH 2/3] refactor: TT-319 select first day of the month when select on calendar --- .../calendar/calendar.component.spec.ts | 11 ++++- .../components/calendar/calendar.component.ts | 6 ++- .../pages/time-entries.component.html | 1 + .../pages/time-entries.component.spec.ts | 43 ++++++++++++++++--- .../pages/time-entries.component.ts | 11 ++++- 5 files changed, 61 insertions(+), 11 deletions(-) diff --git a/src/app/modules/time-entries/components/calendar/calendar.component.spec.ts b/src/app/modules/time-entries/components/calendar/calendar.component.spec.ts index e1ff24093..a1629d0bc 100644 --- a/src/app/modules/time-entries/components/calendar/calendar.component.spec.ts +++ b/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'); diff --git a/src/app/modules/time-entries/components/calendar/calendar.component.ts b/src/app/modules/time-entries/components/calendar/calendar.component.ts index a4d5d997d..594946ad6 100644 --- a/src/app/modules/time-entries/components/calendar/calendar.component.ts +++ b/src/app/modules/time-entries/components/calendar/calendar.component.ts @@ -44,6 +44,9 @@ export class CalendarComponent implements OnInit { @Output() changeDate: EventEmitter = new EventEmitter<{ date: Date; }>(); + @Output() changeView: EventEmitter = 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) { diff --git a/src/app/modules/time-entries/pages/time-entries.component.html b/src/app/modules/time-entries/pages/time-entries.component.html index ca7976df2..7689bd59e 100644 --- a/src/app/modules/time-entries/pages/time-entries.component.html +++ b/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)" > diff --git a/src/app/modules/time-entries/pages/time-entries.component.spec.ts b/src/app/modules/time-entries/pages/time-entries.component.spec.ts index e9f48f2b4..39983af47 100644 --- a/src/app/modules/time-entries/pages/time-entries.component.spec.ts +++ b/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; diff --git a/src/app/modules/time-entries/pages/time-entries.component.ts b/src/app/modules/time-entries/pages/time-entries.component.ts index 3580b0bfc..e13892a83 100644 --- a/src/app/modules/time-entries/pages/time-entries.component.ts +++ b/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, @@ -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) { From 2edad2e696e06796593c11e573be30c96e2f5c08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Soto?= Date: Wed, 25 Aug 2021 11:55:40 -0500 Subject: [PATCH 3/3] refactor: TT-319 Change moment library with date --- .../pages/time-entries.component.spec.ts | 17 +++++++---------- .../pages/time-entries.component.ts | 5 +++-- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/app/modules/time-entries/pages/time-entries.component.spec.ts b/src/app/modules/time-entries/pages/time-entries.component.spec.ts index 39983af47..8f87089db 100644 --- a/src/app/modules/time-entries/pages/time-entries.component.spec.ts +++ b/src/app/modules/time-entries/pages/time-entries.component.spec.ts @@ -561,7 +561,7 @@ describe('TimeEntriesComponent', () => { const dateMoment: moment.Moment = moment().month(monthIndex).year(year); jasmine.clock().mockDate(dateMoment.toDate()); - component.currentMonth = monthIndex; + component.actualDate.setMonth(monthIndex); component.dateSelected(eventData); expect(component.selectedDate).toEqual(dateMoment); @@ -601,18 +601,15 @@ describe('TimeEntriesComponent', () => { }); 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 actualDate: Date = new Date(2021, 5, 15); + const selectedDate: Date = new Date(2021, 2, 1); const eventDate = { - monthIndex: selectedMoment.month(), - year: selectedMoment.year() + monthIndex: selectedDate.getMonth(), + year: selectedDate.getFullYear() }; - component.currentMonth = actualMoment.month(); - component.selectedDate = selectedMoment; - spyOn(component, 'dateSelected'); + component.actualDate = actualDate; component.dateSelected(eventDate); - expect(component.selectedDate).toBe(firstDayMoment); + expect(component.selectedDate.date()).toBe(selectedDate.getDate()); }); it('change component calendarView from Month to Day when call changeView', () => { diff --git a/src/app/modules/time-entries/pages/time-entries.component.ts b/src/app/modules/time-entries/pages/time-entries.component.ts index e13892a83..c8e7b4660 100644 --- a/src/app/modules/time-entries/pages/time-entries.component.ts +++ b/src/app/modules/time-entries/pages/time-entries.component.ts @@ -40,7 +40,7 @@ export class TimeEntriesComponent implements OnInit, OnDestroy { selectedMonthAsText: string; isActiveEntryOverlapping = false; calendarView: CalendarView = CalendarView.Month; - currentMonth = moment().month(); + actualDate: Date; readonly NO_DATA_MESSAGE: string = 'No data available in table'; constructor( private store: Store, @@ -49,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 { @@ -183,7 +184,7 @@ 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){ + if (this.actualDate.getMonth() !== event.monthIndex){ this.selectedDate = this.selectedDate.startOf('month'); } }