fix: TT-279 fix visual errors

Author: jase156

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

@@ -27,11 +27,7 @@
         isVisibleForCurrentView(calendarView, CalendarViewEnum.Week) ||
         isVisibleForCurrentView(calendarView, CalendarViewEnum.Day)
       "
-    >
-      <p class="additional" *ngIf="timeIsGreaterThan(timeEntries.start_date, timeEntries.end_date, 60)">
-        {{ timeEntries.description }}
-      </p>
-    </div>
+    ></div>
   </div>
 </ng-template>
 
@@ -72,16 +68,17 @@
           type="button"
           [(view)]="calendarView"
           [(viewDate)]="currentDate"
-          class="btn btn-light btn-block"
+          class="btn btn-light btn-block m-0"
           (click)="handleChangeDateEvent()"
         >
           Previus
         </button>
         <button
           mwlCalendarToday
+          [ngClass]="{ active: isToday }"
           type="button"
           [(viewDate)]="currentDate"
-          class="btn btn-light btn-block"
+          class="btn btn-light btn-block m-0"
           (click)="handleChangeDateEvent()"
         >
           Today
@@ -91,7 +88,7 @@
           type="button"
           [(view)]="calendarView"
           [(viewDate)]="currentDate"
-          class="btn btn-light btn-block"
+          class="btn btn-light btn-block m-0"
           (click)="handleChangeDateEvent()"
           [disabled]="nextDateDisabled"
         >
@@ -109,13 +106,28 @@
     </div>
     <div class="col-sm-4 text-right">
       <div class="btn-group" role="group" aria-label="Calendar View">
-        <button type="button" class="btn btn-light btn-block" (click)="changeCalendarView(CalendarViewEnum.Month)">
+        <button
+          [ngClass]="{ active: isVisibleForCurrentView(calendarView, CalendarViewEnum.Month) }"
+          type="button"
+          class="btn btn-light btn-block m-0"
+          (click)="changeCalendarView(CalendarViewEnum.Month)"
+        >
           Month
         </button>
-        <button type="button" class="btn btn-light btn-block" (click)="changeCalendarView(CalendarViewEnum.Week)">
+        <button
+          [ngClass]="{ active: isVisibleForCurrentView(calendarView, CalendarViewEnum.Week) }"
+          type="button"
+          class="btn btn-light btn-block m-0"
+          (click)="changeCalendarView(CalendarViewEnum.Week)"
+        >
           Week
         </button>
-        <button type="button" class="btn btn-light btn-block" (click)="changeCalendarView(CalendarViewEnum.Day)">
+        <button
+          [ngClass]="{ active: isVisibleForCurrentView(calendarView, CalendarViewEnum.Day) }"
+          type="button"
+          class="btn btn-light btn-block m-0"
+          (click)="changeCalendarView(CalendarViewEnum.Day)"
+        >
           Day
         </button>
       </div>

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

@@ -119,6 +119,14 @@ describe('CalendarComponent', () => {
     expect(component.timeEntriesAsEvent.length).toEqual(1);
   });
 
+  it('Call isVisibleForCurrentDate when call ngOnInit()', () => {
+    spyOn(component, 'isVisibleForCurrentDate');
+
+    component.ngOnInit();
+
+    expect(component.isVisibleForCurrentDate).toHaveBeenCalled();
+  });
+
   it('Call navigationEnable when call ngOnInit()', () => {
     spyOn(component, 'navigationEnable');
 
@@ -170,10 +178,12 @@ describe('CalendarComponent', () => {
     const calendarView = CalendarView.Month;
     spyOn(component, 'navigationEnable');
     spyOn(component.changeDate, 'emit');
+    spyOn(component, 'isVisibleForCurrentDate');
 
     component.handleChangeDateEvent();
 
     expect(component.navigationEnable).toHaveBeenCalledWith(calendarView);
+    expect(component.isVisibleForCurrentDate).toHaveBeenCalled();
     expect(component.changeDate.emit).toHaveBeenCalledWith(fakeValueEmit);
   });
 
@@ -288,4 +298,20 @@ describe('CalendarComponent', () => {
 
     expect(response).toBeFalse();
   });
+
+  it('returns boolean when call isVisibleForCurrentDate', () => {
+    [
+      { current: '2021-04-11T10:20:00Z', initial: '2021-04-11T08:00:00Z', expected: true },
+      { current: '2021-04-12T17:00:00Z', initial: '2021-04-11T17:00:00Z', expected: false },
+      { current: '2021-04-11T18:00:00Z', initial: '2021-04-12T18:00:00Z', expected: false },
+      { current: '2021-04-12T12:00:00Z', initial: '2021-04-12T12:00:00Z', expected: true },
+    ].forEach(({ current, initial, expected }) => {
+      component.currentDate = new Date(current);
+      component.initialDate = new Date(initial);
+
+      const result = component.isVisibleForCurrentDate();
+
+      expect(result).toBe(expected);
+    });
+  });
 });

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

@@ -9,6 +9,7 @@ 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 { initialConfig } from 'ngx-mask';
 
 @Component({
   selector: 'app-calendar',
@@ -30,17 +31,20 @@ export class CalendarComponent implements OnInit {
 
   initialDate: Date;
   previusDate: Date;
+  isToday: boolean;
   timeEntriesAsEvent: CalendarEvent[];
   nextDateDisabled: boolean;
 
   constructor() {
     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);
   }
 
@@ -80,6 +84,7 @@ export class CalendarComponent implements OnInit {
 
   handleChangeDateEvent(): void{
     const date = this.currentDate;
+    this.isToday = this.isVisibleForCurrentDate();
     this.navigationEnable(this.calendarView);
     this.changeDate.emit({date});
   }
@@ -119,4 +124,10 @@ export class CalendarComponent implements OnInit {
   isVisibleForCurrentView(currentCalendarView: CalendarView, desiredView: CalendarView ): boolean{
     return currentCalendarView === desiredView;
   }
+
+  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);
+  }
 }