fix: #347 pre-fill start end dates in report

Author: enriquezrene

src/app/modules/reports/components/time-range-form/time-range-form.component.html

@@ -3,21 +3,17 @@
     <div class="col">
       <div class="input-group">
         <app-input-label text="Start Date"></app-input-label>
-        <app-input-date formControlName="startDate" required="true"></app-input-date>
+        <app-input-date formControlName="startDate" id="startDate" required="true"></app-input-date>
       </div>
     </div>
     <div class="col">
       <div class="input-group">
         <app-input-label text="End Date"></app-input-label>
-        <app-input-date formControlName="endDate" required="true"></app-input-date>
+        <app-input-date formControlName="endDate" id="endDate" required="true"></app-input-date>
       </div>
     </div>
-  </div>
-  <div class="row mt-3">
     <div class="col">
-      <button type="submit" class="btn btn-primary float-right"
-              [disabled]="!(reportForm.touched && reportForm.valid)">Search
-      </button>
+      <button type="submit" class="btn btn-primary float-right">Search</button>
     </div>
   </div>
 </form>

src/app/modules/reports/components/time-range-form/time-range-form.component.ts

@@ -1,5 +1,6 @@
-import {Component} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
+import { formatDate } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 import * as entryActions from '../../../time-clock/store/entry.actions';
 import {Store} from '@ngrx/store';
 import {EntryState} from '../../../time-clock/store/entry.reducer';
@@ -9,7 +10,7 @@ import * as moment from 'moment';
   selector: 'app-time-range-form',
   templateUrl: './time-range-form.component.html',
 })
-export class TimeRangeFormComponent {
+export class TimeRangeFormComponent implements OnInit {
   public reportForm: FormGroup;
   private startDate = new FormControl('');
   private endDate = new FormControl('');
@@ -20,6 +21,17 @@ export class TimeRangeFormComponent {
       endDate: this.endDate
     });
   }
+  ngOnInit(): void {
+    this.setInitialDataOnScreen();
+  }
+
+  setInitialDataOnScreen() {
+    this.reportForm.setValue({
+      startDate: formatDate(moment().startOf('week').toString(), 'yyyy-MM-dd', 'en'),
+      endDate: formatDate(moment().endOf('week').toString(), 'yyyy-MM-dd', 'en')
+    });
+    this.onSubmit();
+  }
 
   onSubmit() {
     this.store.dispatch(new entryActions.LoadEntriesByTimeRange({

src/app/modules/reports/components/time-range-form/time-range.component.spec.ts

@@ -69,6 +69,30 @@ describe('Reports Page', () => {
       }));
     });
 
+    it('setInitialDataOnScreen on ngOnInit', () => {
+      spyOn(component, 'setInitialDataOnScreen');
+
+      component.ngOnInit();
+
+      expect(component.setInitialDataOnScreen).toHaveBeenCalled();
+    });
+
+    it('setInitialDataOnScreen sets dates in form', () => {
+      spyOn(component.reportForm, 'setValue');
+
+      component.setInitialDataOnScreen();
+
+      expect(component.reportForm.setValue).toHaveBeenCalled();
+    });
+
+    it('triggers onSubmit to set initial data', () => {
+      spyOn(component, 'onSubmit');
+
+      component.setInitialDataOnScreen();
+
+      expect(component.onSubmit).toHaveBeenCalled();
+    });
+
     afterEach(() => {
       fixture.destroy();
     });