feat: TT-279 angular calendar implementation (#703)

* fix: TT-258 modificate atribute star_date to view time in

* feat: TT-279 Implement calendar view

* fix: TT-279 Fix the comparison if var is null

* fix: TT-279 fix visual errors

* fix: TT-279 delete unnecessary imports

* fix: TT-279 Remove bold style

Co-authored-by: Kevin Lopez <[email protected]>

Author: jase156

package.json

@@ -31,6 +31,8 @@
     "@ngrx/store": "^10.0.1",
     "@ngrx/store-devtools": "^10.0.1",
     "@types/datatables.net-buttons": "^1.4.3",
+    "angular-calendar": "^0.28.24",
+    "date-fns": "^2.22.1",
     "angular-datatables": "^9.0.2",
     "bootstrap": "^4.4.1",
     "datatables.net": "^1.10.21",

src/app/app.module.ts

@@ -16,6 +16,8 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { AutocompleteLibModule } from 'angular-ng-autocomplete';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -81,6 +83,7 @@ import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
 // tslint:disable-next-line: max-line-length
 import { TechnologyReportTableComponent } from './modules/technology-report/components/technology-report-table/technology-report-table.component';
 import { TechnologyReportComponent } from './modules/technology-report/pages/technology-report.component';
+import { CalendarComponent } from './modules/time-entries/components/calendar/calendar.component';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -133,6 +136,7 @@ const maskConfig: Partial<IConfig> = {
     UsersListComponent,
     TechnologyReportComponent,
     TechnologyReportTableComponent,
+    CalendarComponent,
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),
@@ -171,6 +175,10 @@ const maskConfig: Partial<IConfig> = {
       UserEffects,
     ]),
     ToastrModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory,
+    }),
   ],
   providers: [
     {

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

@@ -1,12 +1,14 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import * as moment from 'moment';
-import { NEVER } from 'rxjs';
+import { CookieService } from 'ngx-cookie-service';
+import { FeatureToggle } from 'src/environments/enum';
 
 import { MonthPickerComponent } from './month-picker.component';
 
 describe('MonthPickerComponent', () => {
   let component: MonthPickerComponent;
   let fixture: ComponentFixture<MonthPickerComponent>;
+  let cookieService: CookieService;
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ MonthPickerComponent ]
@@ -16,6 +18,7 @@ describe('MonthPickerComponent', () => {
 
   beforeEach(() => {
     fixture = TestBed.createComponent(MonthPickerComponent);
+    cookieService = TestBed.inject(CookieService);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -73,4 +76,203 @@ describe('MonthPickerComponent', () => {
     expect(component.monthEnable(monthFuture)).toBeTrue();
   });
 
+  it('call cookieService.get() when component was create', () => {
+    spyOn(cookieService, 'get');
+
+    component.ngOnInit();
+
+    expect(cookieService.get).toHaveBeenCalledWith(FeatureToggle.TIME_TRACKER_CALENDAR);
+  });
+
+  it('set true in isFeatureToggleCalendarActive when component was create', () => {
+    const expectCookieValue = true;
+    spyOn(cookieService, 'get').and.returnValue(`${ expectCookieValue }`);
+
+    component.ngOnInit();
+
+    expect(component.isFeatureToggleCalendarActive).toEqual(expectCookieValue);
+  });
+
+  it('set false in isFeatureToggleCalendarActive when component was create', () => {
+    const expectCookieValue = false;
+    spyOn(cookieService, 'get').and.returnValue(`${ expectCookieValue }`);
+
+    component.ngOnInit();
+
+    expect(component.isFeatureToggleCalendarActive).toEqual(expectCookieValue);
+  });
+
+  it('set false in isFeatureToggleCalendarActive when cookie does not exist', () => {
+    const expectCookieValue = false;
+    spyOn(cookieService, 'get');
+
+    component.ngOnInit();
+
+    expect(component.isFeatureToggleCalendarActive).toEqual(expectCookieValue);
+  });
+
+  it('call refresData when updating the value of selectedDate', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date());
+    spyOn(component, 'refreshDate');
+
+    component.selectedDate = fakeSelectedDate;
+
+    expect(component.refreshDate).toHaveBeenCalledWith(fakeSelectedDate);
+  });
+
+  it('not set value of selectedDate in selectedDateMoment when isFeatureToggleCalendarActive is false', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date('2021-07-05'));
+    component.isFeatureToggleCalendarActive = false;
+
+    component.refreshDate(fakeSelectedDate);
+
+    expect(component.selectedDateMoment).not.toEqual(fakeSelectedDate);
+  });
+
+  it('set value of selectedDate in selectedDateMoment when isFeatureToggleCalendarActive is true', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date('2021-07-05'));
+    component.isFeatureToggleCalendarActive = true;
+
+    component.refreshDate(fakeSelectedDate);
+
+    expect(component.selectedDateMoment).toEqual(fakeSelectedDate);
+  });
+
+
+  it('set current Month index in selectedMonthIndex when isFeatureToggleCalendarActive is false', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date('2021-07-05'));
+    const currentDate: moment.Moment = moment(new Date());
+    component.isFeatureToggleCalendarActive = false;
+
+    component.refreshDate(fakeSelectedDate);
+
+    expect(component.selectedMonthIndex).toEqual(currentDate.month());
+  });
+
+  it('set month of selectedDate in selectedMonthIndex when isFeatureToggleCalendarActive is true', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date('2021-07-05'));
+    component.isFeatureToggleCalendarActive = true;
+
+    component.refreshDate(fakeSelectedDate);
+
+    expect(component.selectedMonthIndex).toEqual(fakeSelectedDate.month());
+  });
+
+  it('set current year as a text in selectedYearText when isFeatureToggleCalendarActive is false', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date('2020-07-05'));
+    const currentDate: number = moment(new Date()).year();
+    component.isFeatureToggleCalendarActive = false;
+
+    component.refreshDate(fakeSelectedDate);
+
+    expect(component.selectedYearText).toEqual(`${currentDate}`);
+  });
+
+  it('set year as a text of selectedDate in selectedYearText when isFeatureToggleCalendarActive is true', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date('1999-07-05'));
+    const expectedYear = '1999';
+    component.isFeatureToggleCalendarActive = true;
+
+    component.refreshDate(fakeSelectedDate);
+
+    expect(component.selectedYearText).toEqual(expectedYear);
+  });
+
+  it('set current year in selectedYear when isFeatureToggleCalendarActive is false', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date('2020-07-05'));
+    const currentDate: number = moment(new Date()).year();
+    component.isFeatureToggleCalendarActive = false;
+
+    component.refreshDate(fakeSelectedDate);
+
+    expect(component.selectedYear).toEqual(currentDate);
+  });
+
+  it('set year as a text of selectedDate in selectedYear when isFeatureToggleCalendarActive is true', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date('1999-07-05'));
+    const expectedYear = 1999;
+    component.isFeatureToggleCalendarActive = true;
+
+    component.refreshDate(fakeSelectedDate);
+
+    expect(component.selectedYear).toEqual(expectedYear);
+  });
+
+  it('not true in showArrowNext when isFeatureToggleCalendarActive is false', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date('1999-07-05'));
+    component.isFeatureToggleCalendarActive = false;
+
+    component.refreshDate(fakeSelectedDate);
+
+    expect(component.showArrowNext).not.toEqual(true);
+  });
+
+  it('false in showArrowNext when isFeatureToggleCalendarActive is false', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date('1999-07-05'));
+    component.isFeatureToggleCalendarActive = false;
+
+    component.refreshDate(fakeSelectedDate);
+
+    expect(component.showArrowNext).toEqual(false);
+  });
+
+  it('set true in showArrowNext when isFeatureToggleCalendarActive is true', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date('1999-07-05'));
+    component.isFeatureToggleCalendarActive = true;
+
+    component.refreshDate(fakeSelectedDate);
+
+    expect(component.showArrowNext).toEqual(true);
+  });
+
+  it('set false in showArrowNext when isFeatureToggleCalendarActive is true', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date()).add(1, 'month');
+    component.isFeatureToggleCalendarActive = true;
+
+    component.refreshDate(fakeSelectedDate);
+
+    expect(component.showArrowNext).toEqual(false);
+  });
+
+  it('isSelectedMonth returns true when isFeatureToggleCalendarActive is true', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date('2021-07-06'));
+    const expectedReturn = true;
+    const fakeFeatureToggleValue = true;
+    component.selectedMonthIndex = fakeSelectedDate.month();
+    component.selectedYear = fakeSelectedDate.year();
+    component.selectedDateMoment = fakeSelectedDate;
+    component.isFeatureToggleCalendarActive = fakeFeatureToggleValue;
+
+    const response = component.isSelectedMonth(fakeSelectedDate.month());
+
+    expect(response).toEqual(expectedReturn);
+  });
+
+  it('isSelectedMonth returns false when isFeatureToggleCalendarActive is true and the months are not the same', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date('2021-07-06'));
+    const expectedReturn = false;
+    const fakeFeatureToggleValue = true;
+    component.selectedMonthIndex = fakeSelectedDate.month();
+    component.selectedYear = fakeSelectedDate.year();
+    component.selectedDateMoment = fakeSelectedDate;
+    component.isFeatureToggleCalendarActive = fakeFeatureToggleValue;
+
+    const response = component.isSelectedMonth(fakeSelectedDate.add(1, 'month').month());
+
+    expect(response).toEqual(expectedReturn);
+  });
+
+  it('isSelectedMonth returns false when isFeatureToggleCalendarActive is true and the years are not the same', () => {
+    const fakeSelectedDate: moment.Moment = moment(new Date('2021-07-06'));
+    const expectedReturn = false;
+    const fakeFeatureToggleValue = true;
+    component.selectedMonthIndex = fakeSelectedDate.month();
+    component.selectedYear = fakeSelectedDate.year();
+    component.selectedDateMoment = fakeSelectedDate.add(1, 'year');
+    component.isFeatureToggleCalendarActive = fakeFeatureToggleValue;
+
+    const response = component.isSelectedMonth(fakeSelectedDate.month());
+
+    expect(response).toEqual(expectedReturn);
+  });
 });

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

@@ -1,12 +1,18 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
 import * as moment from 'moment';
+import { CookieService } from 'ngx-cookie-service';
+import { FeatureToggle } from 'src/environments/enum';
 
 @Component({
   selector: 'app-month-picker',
   templateUrl: './month-picker.component.html',
   styleUrls: ['./month-picker.component.scss']
 })
 export class MonthPickerComponent implements OnInit {
+  @Input()
+  set selectedDate(selectedDateMoment: moment.Moment){
+    this.refreshDate(selectedDateMoment);
+  }
   @Output() dateSelected = new EventEmitter<{
     monthIndex: number;
     year: number;
@@ -21,7 +27,9 @@ export class MonthPickerComponent implements OnInit {
   currentYear = new Date().getFullYear();
   showArrowNext = false;
   monthCurrent = moment().month();
-  constructor() {
+  selectedDateMoment: moment.Moment = moment();
+  isFeatureToggleCalendarActive: boolean;
+  constructor(private cookiesService: CookieService) {
     this.selectedYearMoment = moment();
     this.selectedMonthMoment = moment();
     this.months = moment.months();
@@ -31,9 +39,20 @@ export class MonthPickerComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.isFeatureToggleCalendarActive = (this.cookiesService.get(FeatureToggle.TIME_TRACKER_CALENDAR) === 'true');
     this.selectDate(this.selectedMonthIndex, this.selectedYear);
   }
 
+  refreshDate(newDate: moment.Moment){
+    if (this.isFeatureToggleCalendarActive){
+      this.selectedDateMoment = newDate;
+      this.selectedMonthIndex = this.selectedDateMoment.month();
+      this.selectedYearText = moment(this.selectedDateMoment).format('YYYY');
+      this.selectedYear = this.selectedDateMoment.year();
+      this.showArrowNext = this.selectedYear < this.currentYear;
+    }
+  }
+
   changeYear(changeAction: string) {
     this.selectedYearMoment[changeAction](1, 'year');
     this.selectedYearText = moment(this.selectedYearMoment).format('YYYY');
@@ -56,6 +75,12 @@ export class MonthPickerComponent implements OnInit {
     );
   }
   isSelectedMonth(monthIndex: number) {
+    if (this.isFeatureToggleCalendarActive) {
+      return (
+        this.selectedMonthIndex === monthIndex &&
+        this.selectedYear === this.selectedDateMoment.year()
+      );
+    }
     return (
       this.selectedMonthIndex === monthIndex &&
       this.selectedYear === this.selectedYearMoment.year()

src/app/modules/shared/pipes/substract-date/substract-date.pipe.spec.ts

@@ -59,4 +59,40 @@ describe('SubstractDatePipe', () => {
 
     expect(diff).toBe('--:--');
   });
+
+  it('returns 0 if fromDate is null when call transformInMinutes', () => {
+    const fromDate = null;
+    const substractDate = new Date('2011-04-11T08:00:30Z');
+
+    const diffInMinutes = new SubstractDatePipe().transformInMinutes(fromDate, substractDate);
+
+    expect(diffInMinutes).toBe(0);
+  });
+
+  it('returns 0 if substractDate is null when call transformInMinutes', () => {
+    const fromDate = new Date('2011-04-11T08:00:30Z');
+    const substractDate = null;
+
+    const diffInMinutes = new SubstractDatePipe().transformInMinutes(fromDate, substractDate);
+
+    expect(diffInMinutes).toBe(0);
+  });
+
+  it('returns the date diff in minutes when call transformInMinutes', () => {
+    [
+      { endDate: '2021-04-11T10:20:00Z', startDate: '2021-04-11T08:00:00Z', expectedDiff: 140 },
+      { endDate: '2021-04-11T17:40:00Z', startDate: '2021-04-11T17:10:00Z', expectedDiff: 30 },
+      { endDate: '2021-04-11T18:18:00Z', startDate: '2021-04-11T18:00:00Z', expectedDiff: 18 },
+      { endDate: '2021-04-12T12:18:00Z', startDate: '2021-04-11T10:00:00Z', expectedDiff: 1578 },
+      { endDate: '2021-04-12T10:01:00Z', startDate: '2021-04-12T10:00:00Z', expectedDiff: 1 },
+      { endDate: '2021-04-11T11:27:00Z', startDate: '2021-04-11T10:03:00Z', expectedDiff: 84 },
+    ].forEach(({ startDate, endDate, expectedDiff }) => {
+      const fromDate = new Date(endDate);
+      const substractDate = new Date(startDate);
+
+      const diffInMinutes = new SubstractDatePipe().transformInMinutes(fromDate, substractDate);
+
+      expect(diffInMinutes).toBe(expectedDiff);
+    });
+  });
 });

src/app/modules/shared/pipes/substract-date/substract-date.pipe.ts

@@ -41,4 +41,17 @@ export class SubstractDatePipe implements PipeTransform {
   formatTime(time: number): string {
     return new NumberFormatter(time).getAsAtLeastTwoDigitString();
   }
+
+  transformInMinutes(fromDate: Date, substractDate: Date): number{
+
+    if (!fromDate || !substractDate) {
+      return 0;
+    }
+
+    const startDate = moment(substractDate);
+    const endDate = moment(fromDate);
+    const duration = this.getTimeDifference(startDate, endDate);
+
+    return duration.asMinutes();
+  }
 }