fix: TTA-90 Modify the date range selection module (#919)

* fix: TTA-90 Modify the date range selection module

* fix: TTA-90 fix test login component

Co-authored-by: Jimmy Jaramillo <[email protected]>

Author: jimmyjaramillo

src/app/modules/login/login.component.spec.ts

@@ -101,7 +101,7 @@ describe('LoginComponent', () => {
   it('should sign up or login with google if is not logged-in into the app Locally', inject([Router],  (router: Router) => {
     spyOn(loginService, 'isLogin').and.returnValue(of(false));
     spyOn(loginService, 'setLocalStorage').and.returnValue();
-    spyOn(loginService, 'getUser').and.returnValue(of(() => {}));
+    spyOn(loginService, 'getUser').and.returnValue(of({token: ''}));
     spyOn(loginService, 'setCookies').and.returnValue();
     spyOn(loginService, 'signIn').and.returnValue();
     spyOn(featureToggleCookiesService, 'setCookies').and.returnValue(featureToggleCookiesService.setCookies());

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

@@ -2,9 +2,9 @@
         <label class="col-form-label my-1">Select your Date Range:</label>
         <mat-form-field appearance="fill">
             <mat-label>Enter a date range</mat-label>
-            <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
-            <input matStartDate formControlName="start" placeholder="Start date">
-            <input matEndDate formControlName="end" placeholder="End date">
+            <mat-date-range-input [formGroup]="range" [rangePicker]="picker" >
+                <input matStartDate formControlName="start" placeholder="Start date" name="starDate" (dateChange)="dateRangeChange()">
+                <input matEndDate formControlName="end" placeholder="End date" name="endDate" (dateChange)="dateRangeChange()">
             </mat-date-range-input>
             <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
             <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>

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

@@ -136,4 +136,15 @@ describe('TimeRangeCustomComponent', () => {
 
     expect(component.onSubmit).not.toHaveBeenCalled();
   });
+
+  it('should call range form and delete variable local storage ', () => {
+    spyOn(localStorage, 'removeItem').withArgs('rangeDatePicker');
+    component.range.setValue({start: null, end: null});
+    jasmine.clock().install();
+    component.dateRangeChange();
+    jasmine.clock().tick(200);
+    expect(localStorage.removeItem).toHaveBeenCalledWith('rangeDatePicker');
+    jasmine.clock().uninstall();
+  });
+
 });

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

@@ -49,6 +49,7 @@ export class TimeRangeCustomComponent implements OnInit, OnChanges {
       start: formatDate(moment().startOf('isoWeek').format('l'), DATE_FORMAT, 'en'),
       end: formatDate(moment().format('l'), DATE_FORMAT, 'en')
     });
+    localStorage.setItem('rangeDatePicker', 'custom');
     this.onSubmit();
   }
 
@@ -65,4 +66,11 @@ export class TimeRangeCustomComponent implements OnInit, OnChanges {
     }
   }
 
+  dateRangeChange() {
+    setTimeout(() => {
+      if (this.range.get('start').value === null || this.range.get('end').value === null) {
+        localStorage.removeItem('rangeDatePicker');
+      }
+    }, 200);
+  }
 }

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

@@ -1,12 +1,7 @@
 <div class="list-time-range">
-    <mat-selection-list class="custom-items-time-range">
-      <mat-list-option color="primary" class="custom-mat-list-option" (click)="resetTimeRange()">
-      custom
-      </mat-list-option>
-    </mat-selection-list>
-    <mat-selection-list class="custom-items-time-range" [multiple]="false">
-      <mat-list-option class="custom-mat-list-option" *ngFor="let item of customPresets" [value]="item" (click)="selectRange(item)" >
-        {{item}}
-      </mat-list-option>
-    </mat-selection-list>
+  <mat-selection-list class="custom-items-time-range" [multiple]="false">
+    <mat-list-option class="custom-mat-list-option" *ngFor="let item of customPresets" [value]="item" (click)="selectRange(item)" [selected]="item === rangeDateSelected">
+      {{item}}
+    </mat-list-option>
+  </mat-selection-list>
 </div>

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

@@ -40,11 +40,6 @@ describe('TimeRangeOptionsComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should call resetTimeRange method and clean time range input ', () => {
-    component.resetTimeRange();
-    expect(component.picker.startAt).toEqual(undefined);
-  });
-
   it('should click selectRange button and call calculateDateRange method', () => {
     spyOn(component, 'calculateDateRange').and.returnValues(['', '']);
     component.selectRange('today');
@@ -65,16 +60,18 @@ describe('TimeRangeOptionsComponent', () => {
     expect(new Date(end).toDateString()).toEqual(new Date().toDateString());
   });
 
-  it('should call calculateMonth and calculateWeek method when is called calculateDateRange method', () => {
+  it('should call getMondayCurrent, calculateMonth and calculateWeek method when is called calculateDateRange method', () => {
 
     const dataAll = [
-      {method: 'calculateWeek', options: ['this week', 'last week']},
-      {method: 'calculateMonth', options: ['this month', 'last month']}];
+      {method: 'getMondayCurrent', ranges: ['custom']},
+      {method: 'calculateWeek', ranges: ['this week', 'last week']},
+      {method: 'calculateMonth', ranges: ['this month', 'last month']}
+    ];
 
     dataAll.forEach((val: any) => {
       spyOn(component, val.method);
-      val.options.forEach((option: any) => {
-        component.calculateDateRange(option);
+      val.ranges.forEach((range: any) => {
+        component.calculateDateRange(range);
         expect(component[val.method]).toHaveBeenCalled();
       });
     });
@@ -130,4 +127,12 @@ describe('TimeRangeOptionsComponent', () => {
     expect(toastrServiceStub.error).toHaveBeenCalled();
   });
 
+  it('should call to method  an error when the date created is null from date adapter', () => {
+    spyOn(component.dateAdapter, 'getYear').and.returnValues(2022);
+    spyOn(component.dateAdapter, 'getMonth').and.returnValues(7);
+    component.getMondayCurrent();
+    expect(component.dateAdapter.getYear).toHaveBeenCalled();
+    expect(component.dateAdapter.getMonth).toHaveBeenCalled();
+  });
+
 });

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

@@ -1,10 +1,11 @@
-import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core';
+import { Component, HostBinding, ChangeDetectionStrategy, OnInit } from '@angular/core';
 import { DateAdapter } from '@angular/material/core';
 import { MatDateRangePicker } from '@angular/material/datepicker';
 import { ToastrService } from 'ngx-toastr';
 
 
 const customPresets = [
+  'custom',
   'today',
   'last 7 days',
   'this week',
@@ -22,9 +23,10 @@ type CustomPreset = typeof customPresets[number];
   styleUrls: ['./time-range-options.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TimeRangeOptionsComponent<Date> {
+export class TimeRangeOptionsComponent<Date> implements OnInit{
 
   customPresets = customPresets;
+  rangeDateSelected = '';
   @HostBinding('class.touch-ui')
   readonly isTouchUi = this.picker.touchUi;
   constructor(
@@ -35,8 +37,22 @@ export class TimeRangeOptionsComponent<Date> {
     this.dateAdapter.getFirstDayOfWeek = () => 1;
   }
 
+  ngOnInit() {
+    this.rangeDateSelected = this.getLocalStorageRange();
+  }
+
+  getLocalStorageRange(): string {
+    return localStorage.getItem('rangeDatePicker');
+  }
+
+  setLocalStorageRange(range: string): void {
+    localStorage.setItem('rangeDatePicker', range);
+  }
+
   selectRange(rangeName: CustomPreset): void {
     const [start, end] = this.calculateDateRange(rangeName);
+    this.setLocalStorageRange(rangeName);
+
     this.picker.select(start);
     this.picker.select(end);
     this.picker.close();
@@ -47,6 +63,9 @@ export class TimeRangeOptionsComponent<Date> {
     const year = this.dateAdapter.getYear(today);
 
     switch (rangeName) {
+      case 'custom':
+        const mondayWeek = this.getMondayCurrent();
+        return [mondayWeek, today];
       case 'today':
         return [today, today];
       case 'last 7 days': {
@@ -108,9 +127,14 @@ export class TimeRangeOptionsComponent<Date> {
     return today;
   }
 
-  resetTimeRange() {
-    this.picker.select(undefined);
-    this.picker.select(undefined);
+  getMondayCurrent(): Date {
+    const yearCurrent = this.dateAdapter.getYear(this.dateAdapter.today());
+    const monthCurrent = this.dateAdapter.getMonth(this.dateAdapter.today());
+    const today = new Date();
+    const first = today.getDate() - today.getDay() + 1;
+    const monday = new Date(today.setDate(first));
+    const mondayDayCurrent = monday.getDate();
+    return this.dateAdapter.createDate(yearCurrent, monthCurrent, mondayDayCurrent);
   }
 
 }