fix: #180 Show time-entries for selected month

Author: DiegoTinitana

src/app/modules/shared/components/month-picker/month-picker.component.spec.ts

@@ -24,9 +24,9 @@ describe('MonthPickerComponent', () => {
   });
 
   it('should emit activeMonth event', () => {
-    const month = 1;
+    const month = 2;
     spyOn(component.monthSelected, 'emit');
     component.getMonth(month);
-    expect(component.monthSelected.emit).toHaveBeenCalledWith(month);
+    expect(component.monthSelected.emit).toHaveBeenCalledWith(month + 1);
   });
 });

src/app/modules/shared/components/month-picker/month-picker.component.ts

@@ -17,7 +17,7 @@ export class MonthPickerComponent implements OnInit {
   }
 
   getMonth(month: number) {
-    this.monthSelected.emit(month);
+    this.monthSelected.emit(month + 1);
     this.activeMonth = month;
   }
 }

src/app/modules/time-clock/services/entry.service.spec.ts

@@ -56,7 +56,7 @@ describe('EntryService', () => {
 
   it('loads all Entries', () => {
     service.baseUrl = 'time-entries';
-    service.loadEntries().subscribe((response) => {
+    service.loadEntries(new Date().getMonth).subscribe((response) => {
       const loadEntryRequest = httpMock.expectOne(`${service.baseUrl}`);
       expect(loadEntryRequest.request.method).toBe('GET');
     });

src/app/modules/time-clock/services/entry.service.ts

@@ -17,8 +17,8 @@ export class EntryService {
     return this.http.get(`${this.baseUrl}/running`);
   }
 
-  loadEntries(): Observable<any> {
-    return this.http.get(`${this.baseUrl}`);
+  loadEntries(month): Observable<any> {
+    return this.http.get(`${this.baseUrl}?month=${month}`);
   }
 
   createEntry(entryData): Observable<any> {

src/app/modules/time-clock/store/entry.actions.ts

@@ -59,6 +59,7 @@ export class LoadActiveEntryFail implements Action {
 
 export class LoadEntries implements Action {
   public readonly type = EntryActionTypes.LOAD_ENTRIES;
+  constructor(public month: number) {}
 }
 
 export class LoadEntriesSuccess implements Action {

src/app/modules/time-clock/store/entry.effects.ts

@@ -10,7 +10,7 @@ import * as actions from './entry.actions';
 
 @Injectable()
 export class EntryEffects {
-  constructor(private actions$: Actions, private entryService: EntryService, private toastrService: ToastrService) { }
+  constructor(private actions$: Actions, private entryService: EntryService, private toastrService: ToastrService) {}
 
   @Effect()
   loadEntriesSummary$: Observable<Action> = this.actions$.pipe(
@@ -46,8 +46,9 @@ export class EntryEffects {
   @Effect()
   loadEntries$: Observable<Action> = this.actions$.pipe(
     ofType(actions.EntryActionTypes.LOAD_ENTRIES),
-    mergeMap(() =>
-      this.entryService.loadEntries().pipe(
+    map((action: actions.LoadEntries) => action.month),
+    mergeMap((month) =>
+      this.entryService.loadEntries(month).pipe(
         map((entries) => new actions.LoadEntriesSuccess(entries)),
         catchError((error) => {
           this.toastrService.warning(`The data could not be loaded`);

src/app/modules/time-clock/store/entry.reducer.spec.ts

@@ -79,7 +79,7 @@ describe('entryReducer', () => {
   });
 
   it('on LoadEntries, isLoading is true', () => {
-    const action = new actions.LoadEntries();
+    const action = new actions.LoadEntries(new Date().getMonth() + 1);
     const state = entryReducer(initialState, action);
     expect(state.isLoading).toEqual(true);
   });

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

@@ -2,11 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import {
-  MonthPickerComponent,
-  DetailsFieldsComponent,
-  EmptyStateComponent,
-} from '../../shared/components';
+import { MonthPickerComponent, DetailsFieldsComponent, EmptyStateComponent } from '../../shared/components';
 import { GroupByDatePipe } from '../../shared/pipes';
 import { TechnologyState } from '../../shared/store/technology.reducers';
 import { allTechnologies } from '../../shared/store/technology.selectors';
@@ -16,8 +12,8 @@ import { getProjects } from '../../customer-management/components/projects/compo
 import { EntryState } from '../../time-clock/store/entry.reducer';
 import { allEntries } from '../../time-clock/store/entry.selectors';
 import * as entryActions from '../../time-clock/store/entry.actions';
-import {TechnologiesComponent} from '../../shared/components/technologies/technologies.component';
-import {TimeEntriesSummaryComponent} from '../../time-clock/components/time-entries-summary/time-entries-summary.component';
+import { TechnologiesComponent } from '../../shared/components/technologies/technologies.component';
+import { TimeEntriesSummaryComponent } from '../../time-clock/components/time-entries-summary/time-entries-summary.component';
 
 describe('TimeEntriesComponent', () => {
   type Merged = TechnologyState & ProjectState & EntryState;
@@ -70,7 +66,7 @@ describe('TimeEntriesComponent', () => {
         MonthPickerComponent,
         TimeEntriesComponent,
         TechnologiesComponent,
-        TimeEntriesSummaryComponent
+        TimeEntriesSummaryComponent,
       ],
       providers: [provideMockStore({ initialState: state })],
       imports: [FormsModule, ReactiveFormsModule],
@@ -147,7 +143,7 @@ describe('TimeEntriesComponent', () => {
     };
     mockEntriesSelector = store.overrideSelector(allEntries, [newEntry]);
     component.ngOnInit();
-    expect(component.dataByMonth.length).toEqual(0);
+    expect(component.dataByMonth.length).toEqual(1);
   }));
 
   it('should set entry and entryid to null', () => {
@@ -157,9 +153,9 @@ describe('TimeEntriesComponent', () => {
   });
 
   it('should set entry and entryid to with data', () => {
-    component.entryList = [entry];
+    component.dataByMonth = [entry];
     component.editEntry('entry_1');
-    expect(component.entry).toBe(entry);
+    expect(component.entry).toEqual(entry);
     expect(component.entryId).toBe('entry_1');
   });
 
@@ -198,8 +194,8 @@ describe('TimeEntriesComponent', () => {
 
   it('should get the entry List by Month', () => {
     const month = 1;
-    component.entryList = [entry];
+    spyOn(store, 'dispatch');
     component.getMonth(month);
-    expect(component.dataByMonth.length).toEqual(1);
+    expect(store.dispatch).toHaveBeenCalledWith(new entryActions.LoadEntries(month));
   });
 });

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

@@ -14,22 +14,14 @@ export class TimeEntriesComponent implements OnInit {
   entryId: string;
   entry: Entry;
   dataByMonth = [];
-  entryList: Entry[];
 
   constructor(private store: Store<EntryState>) {}
 
   ngOnInit(): void {
-    this.store.dispatch(new entryActions.LoadEntries());
+    this.store.dispatch(new entryActions.LoadEntries(new Date().getMonth() + 1));
     const dataByMonth$ = this.store.pipe(select(allEntries));
     dataByMonth$.subscribe((response) => {
-      this.entryList = response;
-      this.dataByMonth = this.entryList.reduce((acc: any, entry: any) => {
-        if (new Date(entry.start_date).getMonth() === new Date().getMonth()) {
-          const item = { ...entry };
-          return [...acc, item];
-        }
-        return [];
-      }, []);
+      this.dataByMonth = response;
     });
   }
 
@@ -39,8 +31,9 @@ export class TimeEntriesComponent implements OnInit {
   }
 
   editEntry(entryId: string) {
+    console.log(this.dataByMonth);
     this.entryId = entryId;
-    this.entry = this.entryList.find((entry) => entry.id === entryId);
+    this.entry = this.dataByMonth.find((entry) => entry.id === entryId);
   }
 
   saveEntry(entry): void {
@@ -57,6 +50,6 @@ export class TimeEntriesComponent implements OnInit {
   }
 
   getMonth(month: number) {
-    this.dataByMonth = this.entryList.filter((entry) => new Date(entry.start_date).getMonth() === month);
+    this.store.dispatch(new entryActions.LoadEntries(month));
   }
 }