[ADF-5085] Adding possibility to search for future dates search-date-range component (#5525)

* [ADF-5085] Remove maxDate and set the max of the from date to the to date

* [ADF-5085] Add maxDate optional setting

* [ADF-5085] Add unit test for maxDate

* [ADF-5085] Add documentation for maxDate setting

* [ADF-5085] Unit tests for default and today value

* [ADF-5085] Refactor

demo-shell/src/app.config.json

@@ -378,7 +378,8 @@
           "selector": "date-range",
           "settings": {
             "field": "cm:created",
-            "dateFormat": "DD-MMM-YY"
+            "dateFormat": "DD-MMM-YY",
+            "maxDate": "today"
           }
         }
       },

docs/content-services/components/search-date-range.component.md

@@ -39,6 +39,7 @@ Implements a date range [widget](../../../lib/testing/src/lib/core/pages/form/wi
 | ---- | ---- | ----------- |
 | field | string | Field to apply the query to. Required value |
 | dateFormat | string | Date format. Dates used by the datepicker are [Moment.js](https://momentjs.com/docs/#/parsing/string-format/) instances, so you can use any date format supported by Moment. Default is 'DD/MM/YYYY'. |
+| maxDate | string | A fixed date or the string `"today"` that will set the maximum searchable date. Default is no maximum. |
 
 ## Details
 
@@ -50,7 +51,7 @@ in a search query.
 
 You can set the date range picker to work with any date format your app requires. You can use
 any date format supported by [Moment.js](https://momentjs.com/docs/#/parsing/string-format/)
-in the `dateFormat` setting:
+in the `dateFormat` and in the `maxDate` setting:
 
 ```json
 {
@@ -64,7 +65,8 @@ in the `dateFormat` setting:
                     "selector": "date-range",
                     "settings": {
                         "field": "cm:created",
-                        "dateFormat": "DD-MMM-YY"
+                        "dateFormat": "DD-MMM-YY",
+                        "maxDate": "02-Mar-20"
                     }
                 }
             }

lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.html

@@ -6,7 +6,7 @@
                 [errorStateMatcher]="matcher"
                 placeholder="{{ 'SEARCH.FILTER.RANGE.FROM-DATE' | translate }}"
                 [matDatepicker]="fromDatepicker"
-                [max]="maxDate"
+                [max]="getFromMaxDate()"
                 (focusout)="onChangedHandler($event, from)"
                 data-automation-id="date-range-from-input">
         <mat-datepicker-toggle matSuffix [for]="fromDatepicker" data-automation-id="date-range-from-date-toggle"></mat-datepicker-toggle>

lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.spec.ts

@@ -29,6 +29,7 @@ describe('SearchDateRangeComponent', () => {
         let adapter: MomentDateAdapter;
         const fromDate = '2016-10-16';
         const toDate = '2017-10-16';
+        const maxDate = '10-Mar-20';
         const dateFormatFixture = 'DD-MMM-YY';
 
         setupTestBed({
@@ -151,7 +152,7 @@ describe('SearchDateRangeComponent', () => {
 
         it('should show date-format error when Invalid found', async(() => {
             fixture.detectChanges();
-            const input = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"');
+            const input = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"]');
             input.value = '10-05-18';
             input.dispatchEvent(new Event('focusout'));
             fixture.detectChanges();
@@ -162,7 +163,7 @@ describe('SearchDateRangeComponent', () => {
 
         it('should not show date-format error when valid found', async(() => {
             fixture.detectChanges();
-            const input = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"');
+            const input = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"]');
             input.value = '10/10/2018';
             input.dispatchEvent(new Event('focusout'));
             fixture.detectChanges();
@@ -171,4 +172,33 @@ describe('SearchDateRangeComponent', () => {
                 expect(component.getFromValidationMessage()).toBeFalsy();
             });
         }));
+
+        it('should have no maximum date by default', async(() => {
+            fixture.detectChanges();
+
+            expect(fixture.debugElement.nativeElement.querySelector('input[ng-reflect-max]')).toBeNull();
+        }));
+
+        it('should be able to set a fixed maximum date', async(() => {
+            component.settings = { field: 'cm:created', dateFormat: dateFormatFixture, maxDate: maxDate };
+            fixture.detectChanges();
+
+            const inputs = fixture.debugElement.nativeElement.querySelectorAll('input[ng-reflect-max="Tue Mar 10 2020 23:59:59 GMT+0"]');
+            expect(inputs[0]).toBeDefined();
+            expect(inputs[0]).not.toBeNull();
+            expect(inputs[1]).toBeDefined();
+            expect(inputs[1]).not.toBeNull();
+        }));
+
+        it('should be able to set the maximum date to today', async(() => {
+            component.settings = { field: 'cm:created', dateFormat: dateFormatFixture, maxDate: 'today' };
+            fixture.detectChanges();
+            const today = adapter.today().endOf('day').toString().slice(0, -3);
+
+            const inputs = fixture.debugElement.nativeElement.querySelectorAll('input[ng-reflect-max="' + today + '"]');
+            expect(inputs[0]).toBeDefined();
+            expect(inputs[0]).not.toBeNull();
+            expect(inputs[1]).toBeDefined();
+            expect(inputs[1]).not.toBeNull();
+        }));
 });

lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts

@@ -54,9 +54,8 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
     id: string;
     settings?: SearchWidgetSettings;
     context?: SearchQueryBuilderService;
-    maxDate: any;
     datePickerDateFormat = DEFAULT_FORMAT_DATE;
-
+    maxDate: any;
     private onDestroy$ = new Subject<boolean>();
 
     constructor(private dateAdapter: DateAdapter<Moment>,
@@ -102,7 +101,13 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
             to: this.to
         });
 
-        this.maxDate = this.dateAdapter.today().startOf('day');
+        if (this.settings && this.settings.maxDate) {
+            if (this.settings.maxDate === 'today') {
+                this.maxDate = this.dateAdapter.today().endOf('day');
+            } else {
+                this.maxDate = moment(this.settings.maxDate).endOf('day');
+            }
+        }
     }
 
     ngOnDestroy() {
@@ -161,4 +166,13 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
         event.srcElement.click();
     }
 
+    getFromMaxDate(): any {
+        let maxDate: string;
+        if (!this.to.value || this.maxDate && (moment(this.maxDate).isBefore(this.to.value))) {
+            maxDate = this.maxDate;
+        } else {
+            maxDate = moment(this.to.value);
+        }
+        return maxDate;
+    }
 }