fix: #176 adding entries-summary

enriquezrene · enriquezrene · commit cb7f423247ef · 2020-05-14T18:26:47.000-05:00
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -58,6 +58,8 @@ import { EntryEffects } from './modules/time-clock/store/entry.effects';
 import { InjectTokenInterceptor } from './modules/shared/interceptors/inject.token.interceptor';
 import { SubstractDatePipe } from './modules/shared/pipes/substract-date/substract-date.pipe';
 import {TechnologiesComponent} from './modules/shared/components/technologies/technologies.component';
+import { TimeEntriesSummaryComponent } from './modules/time-clock/components/time-entries-summary/time-entries-summary.component';
+import { TimeDetailsPipe } from './modules/time-clock/pipes/time-details.pipe';
 
 @NgModule({
   declarations: [
@@ -94,6 +96,8 @@ import {TechnologiesComponent} from './modules/shared/components/technologies/te
     EntryFieldsComponent,
     SubstractDatePipe,
     TechnologiesComponent,
+    TimeEntriesSummaryComponent,
+    TimeDetailsPipe,
   ],
   imports: [
     CommonModule,
diff --git a/src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.css b/src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.css
diff --git a/src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.html b/src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.html
@@ -0,0 +1,16 @@
+<h6 class="text-left"><strong>Summary</strong></h6>
+<hr />
+<div class="row pb-4">
+  <div class="col-4">
+    <h6>Day</h6>
+    <h3>{{ timeEntriesSummary.day | timeDetails }}</h3>
+  </div>
+  <div class="col-4">
+    <h6>Week</h6>
+    <h3>{{ timeEntriesSummary.week | timeDetails }}</h3>
+  </div>
+  <div class="col-4">
+    <h6>Month</h6>
+    <h3>{{ timeEntriesSummary.month | timeDetails }}</h3>
+  </div>
+</div>
diff --git a/src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.spec.ts b/src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.spec.ts
@@ -0,0 +1,41 @@
+import { TimeDetailsPipe } from './../../pipes/time-details.pipe';
+import { provideMockStore } 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';
+
+import { TimeEntriesSummaryComponent } from './time-entries-summary.component';
+
+describe('TimeEntriesSummaryComponent', () => {
+  let component: TimeEntriesSummaryComponent;
+  let fixture: ComponentFixture<TimeEntriesSummaryComponent>;
+
+
+  const emptyTimeDetails: TimeDetails = { hours: '--:--', minutes: '--:--', seconds: '--:--' };
+  const emptyTimeEntriesSummary: TimeEntriesSummary = { day: emptyTimeDetails, week: emptyTimeDetails, month: emptyTimeDetails };
+
+  const state = {
+    entries: {
+      timeEntriesSummary: emptyTimeEntriesSummary
+    },
+  };
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TimeEntriesSummaryComponent, TimeDetailsPipe ],
+      providers: [provideMockStore({ initialState: state })
+      ],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TimeEntriesSummaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.ts b/src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.ts
@@ -0,0 +1,27 @@
+import { getEntriesSummary } from './../../store/entry.selectors';
+import { TimeEntriesSummary } from '../../models/time.entry.summary';
+import { LoadEntriesSummary } from './../../store/entry.actions';
+import { EntryState } from './../../store/entry.reducer';
+import { Store, select } from '@ngrx/store';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-time-entries-summary',
+  templateUrl: './time-entries-summary.component.html',
+  styleUrls: ['./time-entries-summary.component.css']
+})
+export class TimeEntriesSummaryComponent implements OnInit {
+
+  timeEntriesSummary: TimeEntriesSummary;
+
+  constructor(private store: Store<EntryState>) { }
+
+  ngOnInit(): void {
+    this.store.dispatch(new LoadEntriesSummary());
+    const timeEntriesSummary$ = this.store.pipe(select(getEntriesSummary));
+    timeEntriesSummary$.subscribe((response) => {
+      this.timeEntriesSummary = response;
+    });
+  }
+
+}
diff --git a/src/app/modules/time-clock/pages/time-clock.component.html b/src/app/modules/time-clock/pages/time-clock.component.html
@@ -1,19 +1,5 @@
-<h6 class="text-left"><strong>Summary</strong></h6>
-<hr />
-<div class="row pb-4">
-  <div class="col-4">
-    <h6>Day</h6>
-    <h3>4:22</h3>
-  </div>
-  <div class="col-4">
-    <h6>Week</h6>
-    <h3>14:25</h3>
-  </div>
-  <div class="col-4">
-    <h6>Month</h6>
-    <h3>49:32</h3>
-  </div>
-</div>
+<app-time-entries-summary></app-time-entries-summary>
+
 <div style="width: 60%;">
 
   <div class="row pb-4">
diff --git a/src/app/modules/time-clock/pipes/time-details.pipe.spec.ts b/src/app/modules/time-clock/pipes/time-details.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { TimeDetailsPipe } from './time-details.pipe';
+
+describe('TimeDetailsPipe', () => {
+  it('create an instance', () => {
+    const pipe = new TimeDetailsPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/modules/time-clock/pipes/time-details.pipe.ts b/src/app/modules/time-clock/pipes/time-details.pipe.ts
@@ -0,0 +1,19 @@
+import { TimeDetails } from '../models/time.entry.summary';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'timeDetails'
+})
+export class TimeDetailsPipe implements PipeTransform {
+
+  transform(value: TimeDetails): string {
+    return `${this.formatAsTwoDigit(value.hours)}:${this.formatAsTwoDigit(value.minutes)}` ;
+  }
+
+  formatAsTwoDigit(time: string): string {
+    // tslint:disable-next-line:no-construct
+    const stringLength = new String(time).length;
+    const formattedTime = (stringLength === 1) ? `0${time}` : time;
+    return formattedTime;
+  }
+}
diff --git a/src/app/modules/time-clock/services/entry.service.ts b/src/app/modules/time-clock/services/entry.service.ts
@@ -1,4 +1,4 @@
-import { TimeEntriesSummary } from './../models/time.entry.summary';
+import { TimeEntriesSummary } from '../models/time.entry.summary';
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
diff --git a/src/app/modules/time-clock/store/entry.actions.ts b/src/app/modules/time-clock/store/entry.actions.ts
@@ -1,7 +1,11 @@
+import { TimeEntriesSummary } from '../models/time.entry.summary';
 import { Action } from '@ngrx/store';
 import { NewEntry, Entry } from '../../shared/models';
 
 export enum EntryActionTypes {
+  LOAD_ENTRIES_SUMMARY = '[Entry] LOAD_ENTRIES_SUMMARY',
+  LOAD_ENTRIES_SUMMARY_SUCCESS = '[Entry] LOAD_ENTRIES_SUMMARY_SUCCESS',
+  LOAD_ENTRIES_SUMMARY_FAIL = '[Entry] LOAD_ENTRIES_SUMMARY_FAIL',
   LOAD_ACTIVE_ENTRY = '[Entry] LOAD_ACTIVE_ENTRY',
   LOAD_ACTIVE_ENTRY_SUCCESS = '[Entry] LOAD_ACTIVE_ENTRY_SUCCESS',
   LOAD_ACTIVE_ENTRY_FAIL = '[Entry] LOAD_ACTIVE_ENTRY_FAIL',
@@ -25,6 +29,19 @@ export enum EntryActionTypes {
   CLEAN_ENTRY_UPDATE_ERROR = '[Entry] CLEAN_ENTRY_UPDATE_ERROR',
 }
 
+export class LoadEntriesSummary implements Action {
+  public readonly type = EntryActionTypes.LOAD_ENTRIES_SUMMARY;
+}
+
+export class LoadEntriesSummarySuccess implements Action {
+  readonly type = EntryActionTypes.LOAD_ENTRIES_SUMMARY_SUCCESS;
+  constructor(readonly payload: TimeEntriesSummary) {}
+}
+
+export class LoadEntriesSummaryFail implements Action {
+  readonly type = EntryActionTypes.LOAD_ENTRIES_SUMMARY_FAIL;
+}
+
 export class LoadActiveEntry implements Action {
   public readonly type = EntryActionTypes.LOAD_ACTIVE_ENTRY;
 }
@@ -137,6 +154,9 @@ export class DefaultEntry implements Action {
 }
 
 export type EntryActions =
+  | LoadEntriesSummary
+  | LoadEntriesSummarySuccess
+  | LoadEntriesSummaryFail
   | LoadActiveEntry
   | LoadActiveEntrySuccess
   | LoadActiveEntryFail
diff --git a/src/app/modules/time-clock/store/entry.effects.ts b/src/app/modules/time-clock/store/entry.effects.ts
@@ -11,6 +11,19 @@ import * as actions from './entry.actions';
 export class EntryEffects {
   constructor(private actions$: Actions, private entryService: EntryService, private toastrService: ToastrService) {}
 
+  @Effect()
+  loadEntriesSummary$: Observable<Action> = this.actions$.pipe(
+    ofType(actions.EntryActionTypes.LOAD_ENTRIES_SUMMARY),
+    mergeMap(() =>
+      this.entryService.summary().pipe(
+        map((response) => {
+          return new actions.LoadEntriesSummarySuccess(response);
+        }),
+        catchError((error) => of(new actions.LoadEntriesSummaryFail()))
+      )
+    )
+  );
+
   @Effect()
   loadActiveEntry$: Observable<Action> = this.actions$.pipe(
     ofType(actions.EntryActionTypes.LOAD_ACTIVE_ENTRY),
diff --git a/src/app/modules/time-clock/store/entry.reducer.spec.ts b/src/app/modules/time-clock/store/entry.reducer.spec.ts
@@ -1,16 +1,23 @@
+import { TimeEntriesSummary, TimeDetails } from '../models/time.entry.summary';
 import { NewEntry, Entry } from './../../shared/models';
 import * as actions from './entry.actions';
 import { entryReducer, EntryState } from './entry.reducer';
 
 describe('entryReducer', () => {
+
+  const emptyTimeDetails: TimeDetails = { hours: '--:--', minutes: '--:--', seconds: '--:--' };
+  const emptyTimeEntriesSummary: TimeEntriesSummary = { day: emptyTimeDetails, week: emptyTimeDetails, month: emptyTimeDetails };
+
   const initialState: EntryState = {
     active: null,
     entryList: [],
     isLoading: false,
     message: '',
     createError: null,
     updateError: null,
+    timeEntriesSummary: emptyTimeEntriesSummary
   };
+
   const entry: NewEntry = {
     start_date: 'start-date',
     description: 'description',
@@ -26,6 +33,12 @@ describe('entryReducer', () => {
     technologies: ['abc', 'abc'],
   };
 
+  it('on LOAD_ENTRIES_SUMMARY, is Loading trye', () => {
+    const action = new actions.LoadEntriesSummary();
+    const state = entryReducer(initialState, action);
+    expect(state.isLoading).toBe(true);
+  });
+
   it('on Default, ', () => {
     const action = new actions.DefaultEntry();
     const state = entryReducer(initialState, action);
@@ -116,6 +129,7 @@ describe('entryReducer', () => {
 
   it('on DeleteEntrySuccess', () => {
     const currentState = {
+      timeEntriesSummary: emptyTimeEntriesSummary,
       active: null,
       entryList: [
         {
@@ -171,6 +185,7 @@ describe('entryReducer', () => {
       message: '',
       createError: null,
       updateError: null,
+      timeEntriesSummary: emptyTimeEntriesSummary
     };
     const entryUpdated: Entry = {
       id: 'id',
diff --git a/src/app/modules/time-clock/store/entry.reducer.ts b/src/app/modules/time-clock/store/entry.reducer.ts
@@ -1,3 +1,4 @@
+import { TimeEntriesSummary, TimeDetails } from '../models/time.entry.summary';
 import { EntryActions, EntryActionTypes } from './entry.actions';
 import { Entry } from '../../shared/models';
 
@@ -8,19 +9,40 @@ export interface EntryState {
   message: string;
   createError: boolean;
   updateError: boolean;
+  timeEntriesSummary: TimeEntriesSummary;
 }
 
+const emptyTimeDetails: TimeDetails = { hours: '--:--', minutes: '--:--', seconds: '--:--' };
+const emptyTimeEntriesSummary: TimeEntriesSummary = { day: emptyTimeDetails, week: emptyTimeDetails, month: emptyTimeDetails };
+
 export const initialState = {
   active: null,
   entryList: [],
   isLoading: false,
   message: '',
   createError: null,
-  updateError: null
+  updateError: null,
+  timeEntriesSummary: emptyTimeEntriesSummary,
 };
 
 export const entryReducer = (state: EntryState = initialState, action: EntryActions) => {
   switch (action.type) {
+    case EntryActionTypes.LOAD_ENTRIES_SUMMARY: {
+      return {
+        ...state,
+        isLoading: true,
+      };
+    }
+    case EntryActionTypes.LOAD_ENTRIES_SUMMARY_SUCCESS:
+      return {
+        ...state,
+        timeEntriesSummary: action.payload,
+      };
+    case EntryActionTypes.LOAD_ENTRIES_SUMMARY_FAIL:
+      return {
+        ...state,
+        timeEntriesSummary: emptyTimeEntriesSummary,
+      };
     case EntryActionTypes.LOAD_ACTIVE_ENTRY: {
       return {
         ...state,
@@ -33,7 +55,6 @@ export const entryReducer = (state: EntryState = initialState, action: EntryActi
         active: action.payload,
         isLoading: false,
       };
-
     case EntryActionTypes.LOAD_ACTIVE_ENTRY_FAIL: {
       return {
         ...state,
@@ -173,14 +194,14 @@ export const entryReducer = (state: EntryState = initialState, action: EntryActi
     case EntryActionTypes.CLEAN_ENTRY_CREATE_ERROR: {
       return {
         ...state,
-       createError: null
+        createError: null
       };
     }
 
     case EntryActionTypes.CLEAN_ENTRY_UPDATE_ERROR: {
       return {
         ...state,
-       updateError: null
+        updateError: null
       };
     }
 
diff --git a/src/app/modules/time-clock/store/entry.selectors.ts b/src/app/modules/time-clock/store/entry.selectors.ts
@@ -4,6 +4,10 @@ import { EntryState } from './entry.reducer';
 
 const getEntryState = createFeatureSelector('entries');
 
+export const getEntriesSummary  = createSelector(getEntryState, (state: EntryState) => {
+  return state.timeEntriesSummary;
+});
+
 export const getActiveTimeEntry = createSelector(getEntryState, (state: EntryState) => {
   return state.active;
 });

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { TimeEntriesSummary } from './../models/time.entry.summary';`
	`1`	`+import { TimeEntriesSummary } from '../models/time.entry.summary';`
`2`	`2`	`import { Injectable } from '@angular/core';`
`3`	`3`	`import { HttpClient } from '@angular/common/http';`
`4`	`4`