[AAE-3967] Add datetime-range search filter component (#6297)

* [AAE-3967] Add datetime-range search filter component

* Fix bug from max date is not resetting when clicking the clear button

* Fix formatting identation on date-range component

* Add unit tests

* Add documentation

* Fix comments

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

@@ -7,7 +7,7 @@ Last reviewed: 2018-06-11
 
 # [Search date range component](../../../lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts "Defined in search-date-range.component.ts")
 
-Implements a date range [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) for the [Search Filter component](search-filter.component.md).
+Implements a [search widget](../../../lib/content-services/src/lib/search/search-widget.interface.ts) for the [Search Filter component](search-filter.component.md).
 
 ![Date Range Widget](../../docassets/images/search-date-range.png)
 

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

@@ -0,0 +1,85 @@
+---
+Title: Search datetime range component
+Added: v4.2.0
+Status: Active
+Last reviewed: 2020-11-02
+---
+
+# [Search datetime range component](../../../lib/content-services/src/lib/search/components/search-datetime-range/search-datetime-range.component.ts "Defined in search-datetime-range.component.ts")
+
+Implements a [search widget](../../../lib/content-services/src/lib/search/search-widget.interface.ts) for the [Search Filter component](search-filter.component.md).
+
+![Date Range Widget](../../docassets/images/search-datetime-range.png)
+
+## Basic usage
+
+```json
+{
+    "search": {
+        "categories": [
+            {
+                "id": "createdDatetimeRange",
+                "name": "Created Datetime (range)",
+                "enabled": true,
+                "component": {
+                    "selector": "datetime-range",
+                    "settings": {
+                        "field": "cm:created"
+                    }
+                }
+            }
+        ]
+    }
+}
+```
+
+### Settings
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| field | string | Field to apply the query to. Required value |
+| datetimeFormat | string | Datetime format. Datetime formats used by the datetime picker are [Moment.js](https://momentjs.com/docs/#/parsing/string-format/) instances, so you can use any datetime format supported by Moment. Default is 'DD/MM/YYYY HH:mm'. |
+| maxDatetime | string | A fixed datetime that will set the maximum searchable datetime. Default is no maximum. |
+
+## Details
+
+This component lets the user select a range between two dates and times based on the particular `field`.
+See the [Search filter component](search-filter.component.md) for full details of how to use widgets
+in a search query.
+
+### Custom datetime format
+
+You can set the datetime range picker to work with any datetime format your app requires. You can use
+any datetime format supported by [Moment.js](https://momentjs.com/docs/#/parsing/string-format/)
+in the `datetimeFormat` and in the `maxDatetime` setting:
+
+```json
+{
+    "search": {
+        "categories": [
+            {
+                "id": "createdDateTimeRange",
+                "name": "Created Datetime (range)",
+                "enabled": true,
+                "component": {
+                    "selector": "datetime-range",
+                    "settings": {
+                        "field": "cm:created",
+                        "datetimeFormat": "DD-MMM-YY HH:mm:ss",
+                        "maxDatetime": "10-Mar-20 20:00"
+                    }
+                }
+            }
+        ]
+    }
+}
+```
+
+## See also
+
+-   [Search filter component](search-filter.component.md)
+-   [Search check list component](search-check-list.component.md)
+-   [Search number range component](search-number-range.component.md)
+-   [Search radio component](search-radio.component.md)
+-   [Search slider component](search-slider.component.md)
+-   [Search text component](search-text.component.md)

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.service.spec.ts

@@ -40,6 +40,7 @@ describe('ContentNodeSelectorPanelService', () => {
         const expectedSupportedTypesMap = new Map<string, string> ();
         expectedSupportedTypesMap.set('d:text', 'text');
         expectedSupportedTypesMap.set('d:date', 'date-range');
+        expectedSupportedTypesMap.set('d:datetime', 'datetime-range');
 
         expect(contentNodeSelectorPanelService.modelPropertyTypeToSearchFilterTypeMap).toEqual(expectedSupportedTypesMap);
     });

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.service.ts

@@ -23,13 +23,14 @@ import { SearchCategory } from '../search/search-category.interface';
 })
 export class ContentNodeSelectorPanelService {
 
-    propertyTypes = ['d:text', 'd:date'];
+    propertyTypes = ['d:text', 'd:date', 'd:datetime'];
     modelPropertyTypeToSearchFilterTypeMap = new Map<string, string> ();
     customModels: any[];
 
     constructor() {
         this.modelPropertyTypeToSearchFilterTypeMap.set(this.propertyTypes[0], 'text');
         this.modelPropertyTypeToSearchFilterTypeMap.set(this.propertyTypes[1], 'date-range');
+        this.modelPropertyTypeToSearchFilterTypeMap.set(this.propertyTypes[2], 'datetime-range');
     }
 
     convertCustomModelPropertiesToSearchCategories(): SearchCategory[] {

lib/content-services/src/lib/i18n/en.json

@@ -252,7 +252,9 @@
         "NO-DAYS": "No days selected.",
         "INVALID-FORMAT": "Invalid Format",
         "INVALID-DATE": "Invalid date. The date must be in the format '{{ requiredFormat }}'",
-        "BEYOND-MAX-DATE": "The date is beyond the maximum date."
+        "BEYOND-MAX-DATE": "The date is beyond the maximum date.",
+        "INVALID-DATETIME": "Invalid datetime. The datetime must be in the format '{{ requiredFormat }}'",
+        "BEYOND-MAX-DATETIME": "The datetime is beyond the maximum datetime."
       }
     },
     "ICONS": {

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

@@ -12,7 +12,7 @@
         <mat-datepicker-toggle matSuffix [for]="fromDatepicker" data-automation-id="date-range-from-date-toggle"></mat-datepicker-toggle>
         <mat-datepicker #fromDatepicker color="accent"></mat-datepicker>
         <mat-error *ngIf="from.invalid" data-automation-id="date-range-from-error">
-            {{ getFromValidationMessage() | translate: { requiredFormat: datePickerDateFormat } }}
+            {{ getFromValidationMessage() | translate: { requiredFormat: datePickerFormat } }}
         </mat-error>
     </mat-form-field>
 
@@ -30,7 +30,7 @@
         <mat-datepicker-toggle matSuffix [for]="toDatepicker" data-automation-id="date-range-to-date-toggle"></mat-datepicker-toggle>
         <mat-datepicker #toDatepicker color="accent"></mat-datepicker>
         <mat-error *ngIf="to.invalid" data-automation-id="date-range-to-error">
-            {{ getToValidationMessage() | translate: { requiredFormat: datePickerDateFormat } }}
+            {{ getToValidationMessage() | translate: { requiredFormat: datePickerFormat } }}
         </mat-error>
     </mat-form-field>