fix: fixes for options time range and add custom option

Author: jimmyjaramillo

src/app/app.module.ts

@@ -15,6 +15,8 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
 import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatListModule } from '@angular/material/list';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { NgxPaginationModule } from 'ngx-pagination';
@@ -176,6 +178,8 @@ const maskConfig: Partial<IConfig> = {
     DragDropModule,
     MatIconModule,
     MatCardModule,
+    MatCheckboxModule,
+    MatListModule,
     MatNativeDateModule,
     StoreModule.forRoot(reducers, {
       metaReducers,

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

@@ -1,10 +1,12 @@
-<mat-card class="mat-elevation-z3">
-  <button
-    *ngFor="let item of customPresets"
-    mat-button
-    color="primary"
-    (click)="selectRange(item)"
-  >
-    {{ item }}
-  </button>
-</mat-card>
+<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>
+</div>

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

@@ -12,3 +12,16 @@ $width: 128px;
     display: flex;
     width: 100%;
   }
+
+.list-time-range{
+  background-color: white;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+.custom-items-time-range{
+  padding-top: 0 !important;
+}
+
+.custom-mat-list-option{
+  height: 35px !important;
+}

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

@@ -3,6 +3,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatDateRangePicker } from '@angular/material/datepicker';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatListModule } from '@angular/material/list';
 import { By } from '@angular/platform-browser';
 import { ToastrService } from 'ngx-toastr';
 import { TimeRangePanelComponent } from './time-range-panel.component';
@@ -22,7 +23,7 @@ describe('TimeRangePanelComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatNativeDateModule, MatDialogModule, MatCardModule],
+      imports: [MatNativeDateModule, MatDialogModule, MatCardModule, MatListModule],
       declarations: [ TimeRangePanelComponent ],
       providers: [
         { provide: MatDateRangePicker, useValue: {select: valueFunction, close: valueFunction} },
@@ -41,17 +42,11 @@ describe('TimeRangePanelComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should click selectRange button', () => {
-    spyOn(component, 'selectRange');
-    component.selectRange('this year');
-
-    fixture.detectChanges();
-
-    fixture.debugElement.query(By.css('button')).nativeElement.click();
-    expect(component.selectRange).toHaveBeenCalledWith('this year');
+  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');

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Output } from '@angular/core';
 import { DateAdapter } from '@angular/material/core';
 import { MatDateRangePicker } from '@angular/material/datepicker';
 import { ToastrService } from 'ngx-toastr';
@@ -108,4 +108,10 @@ export class TimeRangePanelComponent<D> {
     }
     return today;
   }
+
+  resetTimeRange() {
+    this.picker.select(undefined);
+    this.picker.select(undefined);
+  }
+
 }