fix: #320 reload time worked summary after clocking-out

Author: enriquezrene

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

@@ -15,6 +15,15 @@ describe('SubstractDatePipe', () => {
     expect(diff).toBe('02:20');
   });
 
+  it('returns the date diff using hh:mm:ss for a diff < 1 min when displaySeconds is true', () => {
+    const fromDate = new Date('2011-04-11T10:22:40Z');
+    const substractDate = new Date('2011-04-11T10:20:30Z');
+
+    const diff = new SubstractDatePipe().transform(fromDate, substractDate, true);
+
+    expect(diff).toBe('00:02:10');
+  });
+
   it('returns the date diff including seconds if difference is less than a minute', () => {
     const fromDate = new Date('2011-04-11T10:20:40Z');
     const substractDate = new Date('2011-04-11T10:20:30Z');

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

@@ -6,7 +6,7 @@ import * as moment from 'moment';
 })
 export class SubstractDatePipe implements PipeTransform {
 
-  transform(fromDate: Date, substractDate: Date): string {
+  transform(fromDate: Date, substractDate: Date, displaySeconds: boolean = false): string {
 
     if (fromDate === null || substractDate === null ) {
       return '--:--';
@@ -16,7 +16,7 @@ export class SubstractDatePipe implements PipeTransform {
     let endDate = moment(fromDate, 'YYYY-MM-DD HH:mm:ss');
     let duration: moment.Duration = moment.duration(endDate.diff(startDate));
 
-    if (duration.asSeconds() > 60) {
+    if (duration.asSeconds() > 60 && !displaySeconds) {
       endDate = endDate.add(1, 'minute').startOf('minute');
       duration = moment.duration(endDate.diff(startDate));
       return `${ this.formatTime(duration.hours())}:${this.formatTime(duration.minutes()) }`;

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

@@ -91,7 +91,7 @@ export class TimeEntriesSummaryComponent implements OnInit, OnDestroy {
       this.timeInterval = interval(1000).pipe(
         takeUntil(this.destroyed$)
       ).subscribe(() => {
-        this.currentWorkingTime = new SubstractDatePipe().transform(new Date(), new Date(entry.start_date));
+        this.currentWorkingTime = new SubstractDatePipe().transform(new Date(), new Date(entry.start_date), true);
       });
     }
   }

src/app/modules/time-clock/pages/time-clock.component.spec.ts

@@ -1,5 +1,5 @@
 import { FormBuilder } from '@angular/forms';
-import { StopTimeEntryRunning } from './../store/entry.actions';
+import { StopTimeEntryRunning, EntryActionTypes, LoadEntriesSummary } from './../store/entry.actions';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
@@ -8,12 +8,15 @@ import { ProjectState } from '../../customer-management/components/projects/comp
 import { ProjectListHoverComponent } from '../components';
 import { FilterProjectPipe } from '../../shared/pipes';
 import { AzureAdB2CService } from '../../login/services/azure.ad.b2c.service';
+import { ActionsSubject } from '@ngrx/store';
 
 describe('TimeClockComponent', () => {
   let component: TimeClockComponent;
   let fixture: ComponentFixture<TimeClockComponent>;
   let store: MockStore<ProjectState>;
   let azureAdB2CService: AzureAdB2CService;
+  const actionSub: ActionsSubject = new ActionsSubject();
+
   const state = {
     projects: {
       projects: [{ id: 'id', name: 'name', project_type_id: '' }],
@@ -46,6 +49,7 @@ describe('TimeClockComponent', () => {
         FormBuilder,
         AzureAdB2CService,
         provideMockStore({ initialState: state }),
+        { provide: ActionsSubject, useValue: actionSub },
       ],
     }).compileComponents();
     store = TestBed.inject(MockStore);
@@ -62,6 +66,34 @@ describe('TimeClockComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('on STOP_TIME_ENTRY_RUNNING_SUCCESS summaries are reloaded', () => {
+    const actionSubject = TestBed.inject(ActionsSubject) as ActionsSubject;
+    const action = {
+      type: EntryActionTypes.STOP_TIME_ENTRY_RUNNING_SUCCESS
+    };
+    spyOn(store, 'dispatch');
+
+    actionSubject.next(action);
+
+    expect(store.dispatch).toHaveBeenCalledWith(new LoadEntriesSummary());
+  });
+
+  it('register reloadSummaries on ngOnInit', () => {
+    spyOn(component, 'reloadSummariesOnClockOut');
+
+    component.ngOnInit();
+
+    expect(component.reloadSummariesOnClockOut).toHaveBeenCalled();
+  });
+
+  it('unsubscribe clockOutSubscription onDestroy', () => {
+    spyOn(component.clockOutSubscription, 'unsubscribe');
+
+    component.ngOnDestroy();
+
+    expect(component.clockOutSubscription.unsubscribe).toHaveBeenCalled();
+  });
+
   it('onInit checks if isLogin and gets the userName', () => {
     spyOn(azureAdB2CService, 'isLogin').and.returnValue(true);
     spyOn(azureAdB2CService, 'getName').and.returnValue('Name');

src/app/modules/time-clock/pages/time-clock.component.ts

@@ -1,8 +1,9 @@
+import { filter } from 'rxjs/operators';
 import { getActiveTimeEntry } from './../store/entry.selectors';
-import { StopTimeEntryRunning } from './../store/entry.actions';
+import { StopTimeEntryRunning, EntryActionTypes, LoadEntriesSummary } from './../store/entry.actions';
 import { Entry } from './../../shared/models/entry.model';
-import { Store, select } from '@ngrx/store';
-import { Component, OnInit } from '@angular/core';
+import { Store, select, ActionsSubject } from '@ngrx/store';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { AzureAdB2CService } from '../../login/services/azure.ad.b2c.service';
 import { Subscription } from 'rxjs';
 
@@ -11,13 +12,18 @@ import { Subscription } from 'rxjs';
   templateUrl: './time-clock.component.html',
   styleUrls: ['./time-clock.component.scss'],
 })
-export class TimeClockComponent implements OnInit {
+export class TimeClockComponent implements OnInit, OnDestroy {
   username: string;
   areFieldsVisible = false;
   activeTimeEntry: Entry;
-  actionsSubscription: Subscription;
+  clockOutSubscription: Subscription;
 
-  constructor(private azureAdB2CService: AzureAdB2CService, private store: Store<Entry>) {
+  constructor(private azureAdB2CService: AzureAdB2CService, private store: Store<Entry>,
+              private actionsSubject$: ActionsSubject) {
+  }
+
+  ngOnDestroy(): void {
+    this.clockOutSubscription.unsubscribe();
   }
 
   ngOnInit() {
@@ -30,6 +36,20 @@ export class TimeClockComponent implements OnInit {
         this.areFieldsVisible = false;
       }
     });
+
+    this.reloadSummariesOnClockOut();
+
+  }
+
+  reloadSummariesOnClockOut() {
+    this.clockOutSubscription = this.actionsSubject$.pipe(
+      filter((action) => (
+          action.type === EntryActionTypes.STOP_TIME_ENTRY_RUNNING_SUCCESS
+        )
+      )
+    ).subscribe( (action) => {
+      this.store.dispatch(new LoadEntriesSummary());
+    });
   }
 
   clockOut() {