feat(CohortDateRange): no longer blocks user from custom interaction …

…when allowed

When `allowCustomDates` is true, the user can manually adjust an existing cohort.

ISSUES CLOSED: #1819

demo/app/components/cohort-date-range/cohort-date-range.component.html

@@ -1,13 +1,11 @@
 <ts-card>
   <form [formGroup]="myForm" novalidate>
-
     <ts-cohort-date-range
       [cohorts]="cohorts"
       [allowCustomDates]="true"
       (cohortDateRangeChanged)="printRange($event)"
       [isDisabled]="false"
     ></ts-cohort-date-range>
-
   </form>
 
 <pre *ngIf="lastRange">

demo/app/components/cohort-date-range/cohort-date-range.component.ts

@@ -4,14 +4,17 @@ import {
   FormGroup,
   Validators,
 } from '@angular/forms';
+import {
+  TsCohortDateRangeChanged,
+  TsDateCohort,
+} from '@terminus/ui/cohort-date-range';
 import {
   endOfDay,
   startOfDay,
   startOfMonth,
   subDays,
   subMonths,
 } from 'date-fns';
-import { TsCohortDateRangeChanged } from '@terminus/ui/cohort-date-range';
 
 const currentDate: Date = new Date();
 
@@ -35,25 +38,22 @@ export class CohortDateRangeComponent {
       ],
     }),
   });
-  public cohorts = [{
-    display: 'Last 90 days',
-    range: {
-      start: startOfDay(subDays(new Date(), 90)),
-      end: currentDate,
-    },
-  }, {
-    display: 'Last full month',
-    range: {
-      start: startOfDay(subMonths(startOfMonth(currentDate), 1)),
-      end: endOfDay(subDays(startOfMonth(currentDate), 1)),
+  public cohorts: TsDateCohort[] = [
+    {
+      display: 'Last 90 days',
+      range: {
+        start: startOfDay(subDays(new Date(), 90)),
+        end: currentDate,
+      },
     },
-  }, {
-    display: 'Custom dates',
-    range: {
-      start: '',
-      end: '',
+    {
+      display: 'Last full month',
+      range: {
+        start: startOfDay(subMonths(startOfMonth(currentDate), 1)),
+        end: endOfDay(subDays(startOfMonth(currentDate), 1)),
+      },
     },
-  }];
+  ];
   public lastRange: TsCohortDateRangeChanged | undefined;
 
 
@@ -64,7 +64,7 @@ export class CohortDateRangeComponent {
 
 
   public printRange(value: TsCohortDateRangeChanged): void {
-    console.log('DEMO: formValue: ', value);
+    // console.log('DEMO: formValue: ', value);
     this.lastRange = value;
   }
 

terminus-ui/cohort-date-range/src/cohort-date-range.component.html

@@ -1,7 +1,7 @@
 <ts-date-range
   class="ts-cohort-date-range__date-range"
   [dateFormGroup]="dateRangeFormGroup"
-  [isDisabled]="!allowCustomDates || isDisabled || disableDateRange"
+  [isDisabled]="!allowCustomDates || isDisabled"
   (dateRangeChange)="cohortDateRangeChange($event)"
 ></ts-date-range>
 
@@ -18,4 +18,12 @@
   >
     {{ option.display }}
   </ts-option>
+
+  <ts-option
+    *ngIf="allowCustomDates"
+    [value]="customDateCohort.range"
+    [option]="customDateCohort"
+  >
+    {{ customDateCohort.display }}
+  </ts-option>
 </ts-select>

terminus-ui/cohort-date-range/src/cohort-date-range.component.md

@@ -7,7 +7,7 @@
   - [Event driven](#event-driven)
   - [Inputs to the component](#inputs-to-the-component)
     - [allowCustomDates](#allowcustomdates)
-    - [Disable the component](#disable-the-component)
+    - [Disable](#disable)
   - [Test Helpers](#test-helpers)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -50,7 +50,7 @@ cohorts: TsDateCohort[] = [
 ];
 ```
 
-NOTE: The keys inside the passed in `cohorts` object defined as `TsDateCohort` interface has to be in the form of 
+The keys inside the passed in `cohorts` object must match the `TsDateCohort` interface:
 
 ```typescript
 {
@@ -62,25 +62,13 @@ NOTE: The keys inside the passed in `cohorts` object defined as `TsDateCohort` i
 }
 ```
 
-NOTE: For any custom dates which allows user to select a date from date range selection would need to pass in start and end date with empty string:
-
-```typescript
-{
-  display: 'Custom Dates',
-  range: {
-    startDate: '',
-    endDate: '',
-  }
-}
-```
-
 ## Event driven
 
 Anytime the date range is changed, `cohortDateRangeChanged` is emitted.
 
 ```html
 <ts-cohort-date-range
-  [cohorts]="cohorts"
+  [cohorts]="myCohorts"
   (cohortDateRangeChanged)="printRange($event)"
 ></ts-cohort-date-range>
 ```
@@ -90,7 +78,7 @@ Anytime the date range is changed, `cohortDateRangeChanged` is emitted.
 
 ### allowCustomDates
 
-`allowCustomDates` defaults to `true`. When set to `false`, date range is readonly.
+When `allowCustomDates` is set to `false`, the date range is readonly (this defaults to `true`).
 
 ```html
 <ts-cohort-date-range
@@ -99,7 +87,9 @@ Anytime the date range is changed, `cohortDateRangeChanged` is emitted.
 ></ts-cohort-date-range>
 ```
 
-### Disable the component
+When set to `true`, a `Custom Dates` option will be added to the dropdown.
+
+### Disable
 
 The entire component can be disabled:
 

terminus-ui/cohort-date-range/src/cohort-date-range.component.spec.ts

@@ -39,7 +39,7 @@ function createComponent<T>(component: Type<T>, providers: Provider[] = [], impo
 
 describe(`TsCohortDateRangeComponent`, () => {
   let fixture: ComponentFixture<TsCohortDateRangeTestComponent>;
-  let hostInstance;
+  let hostInstance: TsCohortDateRangeTestComponent;
   let startInputInstance: TsInputComponent;
   let formFieldElement: HTMLElement;
   let cohortDebugElement: DebugElement;
@@ -56,12 +56,12 @@ describe(`TsCohortDateRangeComponent`, () => {
     cohortInstance = cohortDebugElement.componentInstance;
   }
 
-  describe(`allowCustomsDate`, () => {
+  describe(`allowCustomDates`, () => {
     beforeEach(() => {
       setupComponent(testComponents.Basic);
     });
 
-    test(`should have date range readonly if allowCustomsDate is false`, () => {
+    test(`should have date range readonly if false`, () => {
       hostInstance.allowCustomDates = false;
       fixture.detectChanges();
       expect(formFieldElement.classList).toContain('ts-form-field--disabled');
@@ -76,6 +76,39 @@ describe(`TsCohortDateRangeComponent`, () => {
     });
   });
 
+  describe(`updateSelectOnRangeChange`, () => {
+
+    test(`should do nothing if no cohorts exist`, () => {
+      setupComponent(testComponents.Basic);
+      const debug = getCohortDebugElement(fixture);
+      const instance: TsCohortDateRangeComponent = debug.componentInstance;
+      instance.selectComponent.options.toArray = jest.fn();
+      instance.cohorts = undefined as any;
+
+      instance.dateRangeFormGroup.setValue({
+        startDate: new Date(),
+        endDate: new Date(),
+      });
+      fixture.detectChanges();
+
+      expect(instance.selectComponent.options.toArray).not.toHaveBeenCalled();
+    });
+
+    test(`should set the select to the custom cohort when the range is manually changed`, () => {
+      setupComponent(testComponents.Basic);
+      const debug = getCohortDebugElement(fixture);
+      const instance: TsCohortDateRangeComponent = debug.componentInstance;
+      const options = instance.selectComponent.options.toArray();
+      const lastOption = options[options.length - 1];
+      lastOption.select = jest.fn();
+      instance.dateRangeFormGroup.patchValue({ startDate: new Date() });
+      fixture.detectChanges();
+
+      expect(lastOption.select).toHaveBeenCalled();
+    });
+
+  });
+
   describe(`select emitters`, function() {
     let trigger: HTMLElement;
     let event: KeyboardEvent;
@@ -94,19 +127,16 @@ describe(`TsCohortDateRangeComponent`, () => {
       fixture.detectChanges();
 
       expect(hostInstance.cohortDateRangeChanged).toHaveBeenCalled();
-      expect(cohortInstance.disableDateRange).toBeTruthy();
     });
 
     test(`should not emit change event and set date range enabled when there is no start/end date passed in`, () => {
       setupComponent(testComponents.Standard);
       cohortInstance.cohortDateRangeChange = jest.fn();
-      cohortInstance.disableDateRange = true;
       trigger = getSelectTriggerElement(fixture);
       event = createKeydownEvent(KEYS.DOWN_ARROW);
       trigger.dispatchEvent(event);
 
       expect(cohortInstance.cohortDateRangeChange).not.toHaveBeenCalled();
-      expect(cohortInstance.disableDateRange).toBeFalsy();
     });
 
     test(`should emit change event if date range has any changes`, () => {