feat: TT-296 add scroll to the current time in calendar component (#715)

* feat: TT-296 add scroll to the current time in calendar component

* feat: TT-296 The code was modified with the suggestions in the PR

* feat: TT-296 The Code Smells were corrected

Author: PieritoAlva95

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

@@ -128,7 +128,7 @@
     </div>
   </div>
 
-  <div [ngSwitch]="calendarView">
+  <div class="switch-calendar-view" [ngSwitch]="calendarView" #scrollContainer>
     <mwl-calendar-month-view
       *ngSwitchCase="CalendarViewEnum.Month"
       [viewDate]="currentDate"

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

@@ -8,6 +8,29 @@
   @return darken(saturate(adjust-hue($text-color, 6), 46.19), 40.98);
 }
 
+.switch-calendar-view {
+  height: calc(100vh - 320px);
+  overflow-y: auto;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #888;
+  border-radius: 5px;
+}
+
 .container-time-entries {
   margin: 2px;
   div.time-entries {

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

@@ -14,40 +14,41 @@ describe('CalendarComponent', () => {
   let fakeEntry: Entry;
   let fakeEntryRunning: Entry;
 
-  beforeEach(waitForAsync( () => {
-    TestBed.configureTestingModule({
-      declarations: [ CalendarComponent ]
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [CalendarComponent],
+      }).compileComponents();
+
+      currentDate = moment();
+      fakeEntry = {
+        id: 'entry_1',
+        project_id: 'abc',
+        project_name: 'Time-tracker',
+        start_date: new Date('2020-02-05T15:36:15.887Z'),
+        end_date: new Date('2020-02-05T18:36:15.887Z'),
+        customer_name: 'ioet Inc.',
+        activity_id: 'development',
+        technologies: ['Angular', 'TypeScript'],
+        description: 'No comments',
+        uri: 'EY-25',
+      };
+      fakeEntryRunning = {
+        id: 'entry_1',
+        project_id: 'abc',
+        project_name: 'Time-tracker',
+        start_date: new Date('2020-02-05T15:36:15.887Z'),
+        end_date: null,
+        customer_name: 'ioet Inc.',
+        activity_id: 'development',
+        technologies: ['Angular', 'TypeScript'],
+        description: 'No comments',
+        uri: 'EY-25',
+      };
+
+      jasmine.clock().mockDate(currentDate.toDate());
     })
-    .compileComponents();
-
-    currentDate = moment();
-    fakeEntry = {
-      id: 'entry_1',
-      project_id: 'abc',
-      project_name: 'Time-tracker',
-      start_date: new Date('2020-02-05T15:36:15.887Z'),
-      end_date: new Date('2020-02-05T18:36:15.887Z'),
-      customer_name: 'ioet Inc.',
-      activity_id: 'development',
-      technologies: ['Angular', 'TypeScript'],
-      description: 'No comments',
-      uri: 'EY-25',
-    };
-    fakeEntryRunning = {
-      id: 'entry_1',
-      project_id: 'abc',
-      project_name: 'Time-tracker',
-      start_date: new Date('2020-02-05T15:36:15.887Z'),
-      end_date: null,
-      customer_name: 'ioet Inc.',
-      activity_id: 'development',
-      technologies: ['Angular', 'TypeScript'],
-      description: 'No comments',
-      uri: 'EY-25',
-    };
-
-    jasmine.clock().mockDate(currentDate.toDate());
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CalendarComponent);
@@ -83,11 +84,11 @@ describe('CalendarComponent', () => {
       end: fakeEntry.end_date,
       title: fakeEntry.description,
       id: fakeEntry.id,
-      meta: fakeEntry
+      meta: fakeEntry,
     };
     const fakeDatasource = {
       isLoading: false,
-      data: [fakeEntry]
+      data: [fakeEntry],
     };
     const fakeTimeEntries = of(fakeDatasource);
     const expectedtimeEntriesAsEvent = [fakeTimeEntryAsEvent];
@@ -104,11 +105,11 @@ describe('CalendarComponent', () => {
       end: fakeEntryRunning.end_date,
       title: fakeEntryRunning.description,
       id: fakeEntryRunning.id,
-      meta: fakeEntryRunning
+      meta: fakeEntryRunning,
     };
     const fakeDatasource = {
       isLoading: false,
-      data: [fakeEntryRunning]
+      data: [fakeEntryRunning],
     };
     const fakeTimeEntries = of(fakeDatasource);
     const expectedtimeEntriesAsEvent = [fakeTimeEntryAsEvent];
@@ -141,7 +142,7 @@ describe('CalendarComponent', () => {
       end: fakeEntry.end_date,
       title: fakeEntry.description,
       id: fakeEntry.id,
-      meta: fakeEntry
+      meta: fakeEntry,
     };
     const fakeValueEmit = {
       id: fakeEntry.id,
@@ -159,7 +160,7 @@ describe('CalendarComponent', () => {
       end: fakeEntry.end_date,
       title: fakeEntry.description,
       id: fakeEntry.id,
-      meta: fakeEntry
+      meta: fakeEntry,
     };
     const fakeValueEmit = {
       timeEntry: fakeEntry,
@@ -195,6 +196,13 @@ describe('CalendarComponent', () => {
     expect(component.calendarView).toEqual(fakeCalendarView);
   });
 
+  it('set srcoll to current time marker in calendarView when is call scrollToCurrentTimeMarker', () => {
+    const fakeCalendarView: CalendarView = CalendarView.Week;
+    spyOn(component, 'scrollToCurrentTimeMarker');
+    component.changeCalendarView(fakeCalendarView);
+    expect(component.scrollToCurrentTimeMarker).toHaveBeenCalled();
+  });
+
   it('set false in nextDateDisabled when call navigationEnable and calendarView != Month and currentDate + 1 day is not greater to initialDate', () => {
     component.currentDate = moment().subtract(2, 'day').toDate();
     component.initialDate = moment().toDate();

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

@@ -1,22 +1,34 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import {
-  CalendarEvent,
-  CalendarView,
-} from 'angular-calendar';
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { CalendarEvent, CalendarView } from 'angular-calendar';
 import { Observable } from 'rxjs';
 import * as moment from 'moment';
 import { DataSource } from '../../../shared/models/data-source.model';
 import { Entry } from 'src/app/modules/shared/models';
 import { map } from 'rxjs/operators';
 import { SubstractDatePipe } from 'src/app/modules/shared/pipes/substract-date/substract-date.pipe';
+import { differenceInMinutes, startOfDay, startOfHour } from 'date-fns';
 
 @Component({
   selector: 'app-calendar',
   templateUrl: './calendar.component.html',
   styleUrls: ['./calendar.component.scss'],
 })
 export class CalendarComponent implements OnInit {
-  @Input() set timeEntries$(timeEntries: Observable<DataSource<Entry>>){
+  readonly DEFAULT_HEADER_HEIGHT = 52;
+  readonly VARIATION_HEIGHT: number = 2;
+
+  @ViewChild('scrollContainer') scrollContainer: ElementRef<HTMLElement>;
+
+  @Input() set timeEntries$(timeEntries: Observable<DataSource<Entry>>) {
     this.castEntryToCalendarEvent(timeEntries);
   }
   @Input() calendarView: CalendarView = CalendarView.Month;
@@ -25,7 +37,7 @@ export class CalendarComponent implements OnInit {
   @Output() viewModal: EventEmitter<any> = new EventEmitter<string>();
   @Output() deleteTimeEntry: EventEmitter<any> = new EventEmitter<string>();
   @Output() changeDate: EventEmitter<any> = new EventEmitter<{
-    date: Date
+    date: Date;
   }>();
 
   initialDate: Date;
@@ -34,97 +46,113 @@ export class CalendarComponent implements OnInit {
   timeEntriesAsEvent: CalendarEvent[];
   nextDateDisabled: boolean;
 
-  constructor() {
+  constructor(private referenceChangeDetector: ChangeDetectorRef) {
     this.initialDate = new Date();
     this.previusDate = new Date();
     this.isToday = false;
     this.timeEntriesAsEvent = [];
     this.nextDateDisabled = true;
-   }
+  }
 
   ngOnInit(): void {
     this.isToday = this.isVisibleForCurrentDate();
     this.navigationEnable(this.calendarView);
   }
 
-  get CalendarViewEnum(): typeof CalendarView{
+  get CalendarViewEnum(): typeof CalendarView {
     return CalendarView;
   }
 
+  scrollToCurrentTimeMarker() {
+    if (this.calendarView === CalendarView.Week || CalendarView.Day) {
+      const minutesSinceStartOfDay = differenceInMinutes(startOfHour(this.currentDate), startOfDay(this.currentDate));
+      const headerHeight = this.calendarView === CalendarView.Week ? this.DEFAULT_HEADER_HEIGHT : 0;
+      this.scrollContainer.nativeElement.scrollTop = minutesSinceStartOfDay * this.VARIATION_HEIGHT + headerHeight;
+    }
+  }
+
   castEntryToCalendarEvent(timeEntries$: Observable<DataSource<Entry>>) {
-    timeEntries$.pipe(
-      map((timeEntriesDatasorce) => timeEntriesDatasorce.data.map(
-          (timeEntries) => ({
-              start: new Date(timeEntries.start_date),
-              end: timeEntries.end_date ? new Date(timeEntries.end_date) : null ,
-              title: timeEntries.description,
-              id: timeEntries.id,
-              meta: timeEntries
-            } as CalendarEvent)
+    timeEntries$
+      .pipe(
+        map((timeEntriesDatasorce) =>
+          timeEntriesDatasorce.data.map(
+            (timeEntries) =>
+              ({
+                start: new Date(timeEntries.start_date),
+                end: timeEntries.end_date ? new Date(timeEntries.end_date) : null,
+                title: timeEntries.description,
+                id: timeEntries.id,
+                meta: timeEntries,
+              } as CalendarEvent)
+          )
         )
       )
-    )
-    .subscribe((timeEntriesAsEvent) => {
+      .subscribe((timeEntriesAsEvent) => {
         this.timeEntriesAsEvent = [...timeEntriesAsEvent].reverse();
-    });
+      });
   }
 
   handleEditEvent(timeEntryAsEvent: CalendarEvent): void {
-    this.viewModal.emit( {
-      id: timeEntryAsEvent.id
+    this.viewModal.emit({
+      id: timeEntryAsEvent.id,
     });
   }
 
   handleDeleteEvent(timeEntryAsEvent: CalendarEvent): void {
     this.deleteTimeEntry.emit({
-      timeEntry: timeEntryAsEvent.meta
+      timeEntry: timeEntryAsEvent.meta,
     });
   }
 
-  handleChangeDateEvent(): void{
+  handleChangeDateEvent(): void {
     const date = this.currentDate;
     this.isToday = this.isVisibleForCurrentDate();
     this.navigationEnable(this.calendarView);
-    this.changeDate.emit({date});
+    this.changeDate.emit({ date });
   }
 
-  changeCalendarView(calendarView: CalendarView){
+  changeCalendarView(calendarView: CalendarView) {
     this.calendarView = calendarView;
+    this.scrollContainer.nativeElement.scrollTop = 0;
+    if (this.calendarView !== CalendarView.Month) {
+      this.referenceChangeDetector.detectChanges();
+      this.scrollToCurrentTimeMarker();
+    }
   }
 
-  navigationEnable(calendarView: CalendarView){
+  navigationEnable(calendarView: CalendarView) {
     let enable = false;
     const currentDate = moment(this.currentDate);
     const initialDate = moment(this.initialDate);
-    if (calendarView === CalendarView.Month){
+    if (calendarView === CalendarView.Month) {
       if (currentDate.month() === initialDate.month() && currentDate.year() === initialDate.year()) {
         enable = true;
       }
     }
     currentDate.add(1, 'day');
-    if (currentDate > initialDate){
+    if (currentDate > initialDate) {
       enable = true;
     }
     this.nextDateDisabled = enable;
   }
 
-  getTimeWork(startDate: Date, endDate: Date): number{
-    if (!endDate){
+  getTimeWork(startDate: Date, endDate: Date): number {
+    if (!endDate) {
       return 30;
     }
-    return new SubstractDatePipe().transformInMinutes( endDate , startDate);
+    return new SubstractDatePipe().transformInMinutes(endDate, startDate);
   }
 
-  timeIsGreaterThan(startDate: Date, endDate: Date, timeRange: number ): boolean{
+  timeIsGreaterThan(startDate: Date, endDate: Date, timeRange: number): boolean {
     const timeWorkInMinutes = this.getTimeWork(startDate, endDate);
     return timeWorkInMinutes > timeRange;
   }
 
-  isVisibleForCurrentView(currentCalendarView: CalendarView, desiredView: CalendarView ): boolean{
+  isVisibleForCurrentView(currentCalendarView: CalendarView, desiredView: CalendarView): boolean {
     return currentCalendarView === desiredView;
   }
 
-  isVisibleForCurrentDate(): boolean{
+  isVisibleForCurrentDate(): boolean {
     const currentDate: Date = new Date(this.currentDate);
     const initialDate: Date = new Date(this.initialDate);
     return currentDate.setHours(0, 0, 0, 0) === initialDate.setHours(0, 0, 0, 0);