Merge branch 'master' of https://github.com/ioet/time-tracker-ui into TT-294-Fex-calendar-text-overflow

Author: ridouku

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "time-tracker",
-  "version": "1.46.1",
+  "version": "1.47.0",
   "scripts": {
     "preinstall": "npx npm-force-resolutions",
     "ng": "ng",
@@ -106,8 +106,8 @@
   },
   "config": {
     "commit-message-validator": {
-      "pattern": "^(fix: TT-|feat: TT-|perf: TT-|build: TT-|ci: TT-|docs: TT-|refactor: TT-|style: TT-|test: TT-)[0-9].*",
-      "errorMessage": "Your commit message needs to start with fix: , feat:, or perf: followed by any commit message, e.g. fix: TT-43 any commit message"
+      "pattern": "^(fix: TT-|feat: TT-|perf: TT-|build: TT-|ci: TT-|docs: TT-|refactor: TT-|style: TT-|test: TT-|code-smell: TT-)[0-9].*",
+      "errorMessage": "Your commit message needs to start with fix: , feat:, or perf: followed by any commit message, e.g. fix: TT-43 any commit message."
     }
   },
   "resolutions": {

package.json

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

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

@@ -21,6 +21,29 @@ $activity-text-size: $max-lines-activity * $line-height-base;
   @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;
+}
+
 @for $card-height from 12 through $max-lines-description {
   $wrap-height: ($card-height * 0.625rem) -
     $project-text-size -

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

@@ -221,6 +221,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.spec.ts

@@ -1,27 +1,36 @@
-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 {
-  readonly HALF_HOUR: number = 30;
+  readonly DEFAULT_HEADER_HEIGHT = 52;
   readonly VARIATION_HEIGHT: number = 2;
   readonly VISIBLE_TARGETS_FOR_TIME_ENTRIES_DESCRIPTION: CalendarView[] = [CalendarView.Week, CalendarView.Day];
   readonly CALENDAR_VIEW_ENUM: typeof CalendarView = CalendarView;
 
-  @Input() set timeEntries$(timeEntries: Observable<DataSource<Entry>>){
+  @ViewChild('scrollContainer') scrollContainer: ElementRef<HTMLElement>;
+
+  @Input() set timeEntries$(timeEntries: Observable<DataSource<Entry>>) {
     this.castEntryToCalendarEvent(timeEntries);
   }
   @Input() calendarView: CalendarView = CalendarView.Month;
@@ -30,7 +39,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;
@@ -39,83 +48,100 @@ 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);
   }
 
+  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 {
   getCardEntryHeight(startDate: Date, endDate: Date): number{
     const heightCard = this.getTimeWork(startDate, endDate) * this.VARIATION_HEIGHT;
     const finalHeightCard = heightCard / 10;
@@ -131,7 +157,7 @@ export class CalendarComponent implements OnInit {
     return desiredView.includes(currentCalendarView);
   }
 
-  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);