fix: #285 display current working time in time-clock screen

Author: enriquezrene

src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.html

@@ -1,16 +1,20 @@
 <h6 class="text-left"><strong>Summary</strong></h6>
 <hr />
 <div class="row pb-4">
-  <div class="col-4">
+  <div class="col-3">
+    <h6>Current</h6>
+    <h3>{{ currentWorkingTime }}</h3>
+  </div>
+  <div class="col-3">
     <h6>Day</h6>
-    <h3>{{ timeEntriesSummary.day | timeDetails }}</h3>
+    <h3>{{ timeEntriesSummary?.day | timeDetails }}</h3>
   </div>
-  <div class="col-4">
+  <div class="col-3">
     <h6>Week</h6>
-    <h3>{{ timeEntriesSummary.week | timeDetails }}</h3>
+    <h3>{{ timeEntriesSummary?.week | timeDetails }}</h3>
   </div>
-  <div class="col-4">
+  <div class="col-3">
     <h6>Month</h6>
-    <h3>{{ timeEntriesSummary.month | timeDetails }}</h3>
+    <h3>{{ timeEntriesSummary?.month | timeDetails }}</h3>
   </div>
 </div>

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

@@ -1,5 +1,7 @@
+import { SubstractDatePipe } from './../../../shared/pipes/substract-date/substract-date.pipe';
+import { EntryState } from './../../store/entry.reducer';
 import { TimeDetailsPipe } from './../../pipes/time-details.pipe';
-import { provideMockStore } from '@ngrx/store/testing';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
 import { TimeEntriesSummary } from './../../models/time.entry.summary';
 import { TimeDetails } from './../../models/time.entry.summary';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
@@ -9,15 +11,35 @@ import { TimeEntriesSummaryComponent } from './time-entries-summary.component';
 describe('TimeEntriesSummaryComponent', () => {
   let component: TimeEntriesSummaryComponent;
   let fixture: ComponentFixture<TimeEntriesSummaryComponent>;
-
+  let store: MockStore<EntryState>;
 
   const emptyTimeDetails: TimeDetails = { hours: '--:--', minutes: '--:--', seconds: '--:--' };
   const emptyTimeEntriesSummary: TimeEntriesSummary = { day: emptyTimeDetails, week: emptyTimeDetails, month: emptyTimeDetails };
 
+  const timeTwoHoursBehind = new Date();
+  timeTwoHoursBehind.setHours(timeTwoHoursBehind.getHours() - 2);
+
+  const timeEntry = {
+    id: '123',
+    start_date: timeTwoHoursBehind,
+    end_date: null,
+    activity_id: '123',
+    technologies: ['react', 'redux'],
+    comments: 'any comment',
+    uri: 'custom uri',
+    project_id: '123'
+  };
+
   const state = {
-    entries: {
-      timeEntriesSummary: emptyTimeEntriesSummary
-    },
+    active: timeEntry,
+    entryList: [timeEntry],
+    entries: [timeEntry],
+    isLoading: false,
+    message: '',
+    createError: false,
+    updateError: false,
+    timeEntriesSummary: emptyTimeEntriesSummary,
+    entriesForReport: [timeEntry],
   };
 
   beforeEach(async(() => {
@@ -27,15 +49,26 @@ describe('TimeEntriesSummaryComponent', () => {
       ],
     })
     .compileComponents();
+    store = TestBed.inject(MockStore);
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TimeEntriesSummaryComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    store.setState(state);
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('dispatches two actions on ngOnInit', () => {
+    spyOn(store, 'dispatch');
+
+    component.ngOnInit();
+
+    expect(store.dispatch).toHaveBeenCalledTimes(2);
+  });
+
 });

src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.ts

@@ -1,6 +1,9 @@
-import { getEntriesSummary } from './../../store/entry.selectors';
+import { SubstractDatePipe } from './../../../shared/pipes/substract-date/substract-date.pipe';
+import { interval } from 'rxjs';
+import { Entry } from './../../../shared/models/entry.model';
+import { getEntriesSummary, getActiveTimeEntry } from './../../store/entry.selectors';
 import { TimeEntriesSummary } from '../../models/time.entry.summary';
-import { LoadEntriesSummary } from './../../store/entry.actions';
+import { LoadEntriesSummary, LoadActiveEntry } from './../../store/entry.actions';
 import { EntryState } from './../../store/entry.reducer';
 import { Store, select } from '@ngrx/store';
 import { Component, OnInit } from '@angular/core';
@@ -13,14 +16,31 @@ import { Component, OnInit } from '@angular/core';
 export class TimeEntriesSummaryComponent implements OnInit {
 
   timeEntriesSummary: TimeEntriesSummary;
+  currentWorkingTime: string;
 
   constructor(private store: Store<EntryState>) { }
 
   ngOnInit(): void {
+    this.store.dispatch(new LoadActiveEntry());
+    const activeTimeEntry$ = this.store.pipe(select(getActiveTimeEntry));
+    activeTimeEntry$.subscribe((response) => {
+      if (response) {
+        const activeTimeEntry: Entry = response;
+        const timenInterval = interval(1000);
+        timenInterval.subscribe(() => {
+          this.currentWorkingTime =
+            new SubstractDatePipe()
+            .transform(new Date(), new Date(activeTimeEntry.start_date));
+        });
+      }
+    });
+
     this.store.dispatch(new LoadEntriesSummary());
     const timeEntriesSummary$ = this.store.pipe(select(getEntriesSummary));
     timeEntriesSummary$.subscribe((response) => {
-      this.timeEntriesSummary = response;
+      if (response) {
+        this.timeEntriesSummary = response;
+      }
     });
   }
 

src/app/modules/time-clock/pipes/time-details.pipe.ts

@@ -7,7 +7,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 export class TimeDetailsPipe implements PipeTransform {
 
   transform(value: TimeDetails): string {
-    return `${this.formatAsTwoDigit(value.hours)}:${this.formatAsTwoDigit(value.minutes)}` ;
+    return `${this.formatAsTwoDigit(value?.hours)}:${this.formatAsTwoDigit(value?.minutes)}` ;
   }
 
   formatAsTwoDigit(time: string): string {