Merge pull request ioet#386 from ioet/368-clean-form-sfter-saving-data

closes: ioet#368
closes ioet#377

Author: enriquezrene

src/app/modules/shared/components/details-fields/details-fields.component.spec.ts

@@ -1,8 +1,10 @@
+import { EntryActionTypes } from './../../../time-clock/store/entry.actions';
 import { TechnologiesComponent } from './../technologies/technologies.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DatePipe, formatDate } from '@angular/common';
+import { ActionsSubject } from '@ngrx/store';
 
 import { TechnologyState } from '../../store/technology.reducers';
 import { allTechnologies } from '../../store/technology.selectors';
@@ -24,21 +26,22 @@ describe('DetailsFieldsComponent', () => {
   let mockEntriesCreateErrorSelector;
   let entryToEdit;
   let formValues;
+  const actionSub: ActionsSubject = new ActionsSubject();
 
   const state = {
     projects: {
-      projects: [{id: 'id', name: 'name', project_type_id: ''}],
-      customerProjects: [{id: 'id', name: 'name', description: 'description', project_type_id: '123'}],
+      projects: [{ id: 'id', name: 'name', project_type_id: '' }],
+      customerProjects: [{ id: 'id', name: 'name', description: 'description', project_type_id: '123' }],
       isLoading: false,
       message: '',
       projectToEdit: undefined,
     },
     technologies: {
-      technologyList: {items: [{name: 'java'}]},
+      technologyList: { items: [{ name: 'java' }] },
       isLoading: false,
     },
     activities: {
-      data: [{id: 'fc5fab41-a21e-4155-9d05-511b956ebd05', tenant_id: 'ioet', deleted: null, name: 'abc'}],
+      data: [{ id: 'fc5fab41-a21e-4155-9d05-511b956ebd05', tenant_id: 'ioet', deleted: null, name: 'abc' }],
       isLoading: false,
       message: 'Data fetch successfully!',
       activityIdToEdit: '',
@@ -63,7 +66,7 @@ describe('DetailsFieldsComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [DetailsFieldsComponent, TechnologiesComponent],
-      providers: [provideMockStore({initialState: state})],
+      providers: [provideMockStore({ initialState: state }), { provide: ActionsSubject, useValue: actionSub }],
       imports: [FormsModule, ReactiveFormsModule],
     }).compileComponents();
     store = TestBed.inject(MockStore);
@@ -102,6 +105,24 @@ describe('DetailsFieldsComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  [
+    { actionType: EntryActionTypes.CREATE_ENTRY_SUCCESS },
+    { actionType: EntryActionTypes.UPDATE_ENTRY_SUCCESS },
+  ].map((param) => {
+    it(`cleanForm after an action type ${param.actionType} is received`, () => {
+      const actionSubject = TestBed.inject(ActionsSubject) as ActionsSubject;
+      const action = {
+        type: param.actionType,
+      };
+      spyOn(component, 'cleanForm');
+
+      component.ngOnInit();
+      actionSubject.next(action);
+
+      expect(component.cleanForm).toHaveBeenCalled();
+    });
+  });
+
   it('should emit ngOnChange without data', () => {
     component.entryToEdit = null;
     component.ngOnChanges();
@@ -231,23 +252,23 @@ describe('DetailsFieldsComponent', () => {
   });
 
   it('when editing entry that is currently running, then the entry should be marked as running', () => {
-    component.entryToEdit = {...entryToEdit, running: true};
+    component.entryToEdit = { ...entryToEdit, running: true };
 
     fixture.componentInstance.ngOnChanges();
 
     expect(component.isEntryRunning).toBeTrue();
   });
 
   it('when editing entry that already finished, then the entry should not be marked as running', () => {
-    component.entryToEdit = {...entryToEdit, running: false};
+    component.entryToEdit = { ...entryToEdit, running: false };
 
     fixture.componentInstance.ngOnChanges();
 
     expect(component.isEntryRunning).toBeFalse();
   });
 
   it('when editing entry that already finished, then the entry should not be marked as running', () => {
-    component.entryToEdit = {...entryToEdit, running: false};
+    component.entryToEdit = { ...entryToEdit, running: false };
 
     fixture.componentInstance.ngOnChanges();
 
@@ -259,7 +280,7 @@ describe('DetailsFieldsComponent', () => {
     spyOn(component, 'getElapsedSeconds').and.returnValue('10');
     spyOn(component.saveEntry, 'emit');
 
-    component.entryForm.setValue({...formValues, entry_date: '2020-06-11'});
+    component.entryForm.setValue({ ...formValues, entry_date: '2020-06-11' });
     component.onSubmit();
     const data = {
       project_id: '',

src/app/modules/shared/components/details-fields/details-fields.component.ts

@@ -1,7 +1,9 @@
+import { EntryActionTypes } from './../../../time-clock/store/entry.actions';
+import { filter } from 'rxjs/operators';
 import { NumberFormatter } from './../../formatters/number.formatter';
 import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild, } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { select, Store } from '@ngrx/store';
+import { select, Store, ActionsSubject } from '@ngrx/store';
 import { formatDate } from '@angular/common';
 
 import { Activity, Entry, Project } from '../../models';
@@ -33,7 +35,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   activities: Activity[] = [];
   isEntryRunning = false;
 
-  constructor(private formBuilder: FormBuilder, private store: Store<Merged>) {
+  constructor(private formBuilder: FormBuilder, private store: Store<Merged>, private actionsSubject$: ActionsSubject) {
     this.entryForm = this.formBuilder.group({
       project_id: '',
       activity_id: '',
@@ -73,6 +75,15 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
         this.closeEntryModal();
       }
     });
+
+    this.actionsSubject$.pipe(
+      filter((action: any) => (
+        action.type === EntryActionTypes.CREATE_ENTRY_SUCCESS ||
+        action.type === EntryActionTypes.UPDATE_ENTRY_SUCCESS
+      ))
+    ).subscribe(() => {
+      this.cleanForm();
+    });
   }
 
   ngOnChanges(): void {

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

@@ -100,7 +100,6 @@ export const entryReducer = (state: EntryState = initialState, action: EntryActi
       entryList.sort((a, b) => new Date(b.start_date).getTime() - new Date(a.start_date).getTime());
       return {
         ...state,
-        active: action.payload,
         entryList,
         isLoading: false,
         createError: false,
@@ -156,6 +155,7 @@ export const entryReducer = (state: EntryState = initialState, action: EntryActi
       entryList.sort((a, b) => new Date(b.start_date).getTime() - new Date(a.start_date).getTime());
       return {
         ...state,
+        entryList,
         isLoading: false,
         updateError: false,
       };

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

@@ -1,3 +1,4 @@
+import { LoadActiveEntry } from './../../time-clock/store/entry.actions';
 import { ToastrService } from 'ngx-toastr';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
@@ -100,6 +101,14 @@ describe('TimeEntriesComponent', () => {
     fixture.destroy();
   });
 
+  it('dispatch an action on loadActiveEntry', () => {
+    spyOn(store, 'dispatch');
+
+    component.loadActiveEntry();
+
+    expect(store.dispatch).toHaveBeenCalledWith(new LoadActiveEntry());
+  });
+
   it('should be created', () => {
     expect(component).toBeTruthy();
   });
@@ -250,16 +259,4 @@ describe('TimeEntriesComponent', () => {
     expect(component.doSave).toHaveBeenCalledWith(entryToSave);
   }));
 
-  it('when saving time entries, the time entries should be queried', () => {
-    const currentMonth = new Date().getMonth() + 1;
-    const entryToSave = {
-      project_id: 'project-id'
-    };
-    component.activeTimeEntry = null;
-    spyOn(store, 'dispatch');
-
-    component.saveEntry(entryToSave);
-
-    expect(store.dispatch).toHaveBeenCalledWith(new entryActions.LoadEntries(currentMonth));
-  });
 });

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

@@ -26,10 +26,7 @@ export class TimeEntriesComponent implements OnInit {
     dataByMonth$.subscribe((response) => {
       this.dataByMonth = response;
     });
-    this.store.dispatch(new entryActions.LoadActiveEntry());
-    this.store.pipe(select(getActiveTimeEntry)).subscribe((activeTimeEntry) => {
-      this.activeTimeEntry = activeTimeEntry;
-    });
+    this.loadActiveEntry();
   }
 
   newEntry() {
@@ -65,7 +62,15 @@ export class TimeEntriesComponent implements OnInit {
     } else {
       this.store.dispatch(new entryActions.CreateEntry(entry));
     }
-    this.store.dispatch(new entryActions.LoadEntries(new Date().getMonth() + 1));
+  }
+
+  loadActiveEntry() {
+    this.store.dispatch(new entryActions.LoadActiveEntry());
+    this.store.pipe(select(getActiveTimeEntry)).subscribe((activeTimeEntry) => {
+      if (activeTimeEntry) {
+        this.activeTimeEntry = activeTimeEntry;
+      }
+    });
   }
 
   removeEntry(entryId: string) {