[ACS-4985] Created an advanced date range filter for search

demo-shell/src/app.config.json

@@ -322,6 +322,23 @@
           }
         }
       },
+      {
+        "id": "createdModifiedDateRange",
+        "name": "Date",
+        "enabled": true,
+        "component": {
+          "selector": "date-range-advanced",
+          "settings": {
+            "dateFormat": "dd-MMM-yy",
+            "maxDate": "today",
+            "field": "cm:created, cm:modified",
+            "displayedLabelsByField": {
+              "cm:created": "Created Date",
+              "cm:modified": "Modified Date"
+            }
+          }
+        }
+      },
       {
         "id": "queryType",
         "name": "Type",

demo-shell/src/app/components/search/search-result.component.scss

@@ -3,7 +3,6 @@
     margin-left: 5px;
 
     .app-search-settings {
-        width: 260px;
         border: 1px solid #eee;
     }
 

docs/README.md

@@ -289,12 +289,15 @@ for more information about installing and using the source code.
 | [Search Chip Input Component](content-services/components/search-chip-input.component.md) | Displays input for providing phrases display as "chips". | [Source](../lib/content-services/src/lib/search/components/search-chip-input/search-chip-input.component.ts) |
 | [Search Chip Autocomplete Input component](content-services/components/search-chip-autocomplete-input.component.md) | Displays an input with autocomplete options. | [Source](../lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts) |
 | [Search Chip List Component](content-services/components/search-chip-list.component.md) | Displays search criteria as a set of "chips". | [Source](../lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.ts) |
+| [Search Date Range Advanced Component](content-services/components/search-date-range-advanced.component.md) | Displays a UI to configure different kinds of search criteria around date. Options are 'Anyytime', 'In the last' and 'Between' | [Source](../lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.ts) |
 | [Search control component](content-services/components/search-control.component.md) | Displays a input text that shows find-as-you-type suggestions. | [Source](../lib/content-services/src/lib/search/components/search-control.component.ts) |
 | [Search date range component](content-services/components/search-date-range.component.md) | Implements a search widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts) |
+| [Search date range advanced tabbed component](content-services/components/search-date-range-advanced-tabbed.component.md) | Implements a tabbed advanced search widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced-tabbed.component.ts) |
 | [Search datetime range component](content-services/components/search-datetime-range.component.md) | Implements a search widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-datetime-range/search-datetime-range.component.ts) |
 | [Search Filter Autocomplete Chips component](content-services/components/search-filter-autocomplete-chips.component.md) | Implements a search widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-filter-autocomplete-chips/search-filter-autocomplete-chips.component.ts) |
 | [Search Filter Chips component](content-services/components/search-filter-chips.component.md) | Represents a chip based container component for custom search and faceted search settings. | [Source](../lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.ts) |
 | [Search Filter component](content-services/components/search-filter.component.md) | Represents a main container component for custom search and faceted search settings. | [Source](../lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts) |
+| [Search Filter Tabbed component](content-services/components/search-filter-tabbed.component.md) | Represents a container component for creating tabbed layout. | [Source](../lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts)                                         |
 | [Search Form component](content-services/components/search-form.component.md) | Search Form screenshot | [Source](../lib/content-services/src/lib/search/components/search-form/search-form.component.ts) |
 | [Search Logical Filter component](content-services/components/search-logical-filter.component.md) | Displays 3 chip inputs each representing different logical condition for search query. | [Source](../lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.ts) |
 | [Search Properties component](content-services/components/search-properties.component.md) | Allows to search by file size and type.| [Source](../lib/content-services/src/lib/search/components/search-properties/search-properties.component.ts) |

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

@@ -0,0 +1,113 @@
+---
+Title: Search date range advanced tabbed component
+Added: v6.2.0
+Status: Active
+Last reviewed: 2023-07-10
+---
+
+# [Search date range advanced tabbed component](../../../lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced-tabbed.component.ts "Defined in search-date-range-advanced-tabbed.component.ts")
+
+Represents a tabbed advanced date range [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) for
+the [Search Filter component](search-filter.component.md).
+
+![Date Range Advanced Widget](../../docassets/images/search-date-range-advanced-tabbed.png)
+
+## Basic usage
+
+```json
+{
+    "search": {
+        "categories": [
+            {
+                "id": "createdModifiedDateRange",
+                "name": "Date",
+                "enabled": true,
+                "component": {
+                    "selector": "date-range-advanced",
+                    "settings": {
+                        "dateFormat": "dd-MMM-yy",
+                        "maxDate": "today",
+                        "field": "cm:created, cm:modified",
+                        "displayedLabelsByField": {
+                            "cm:created": "Created Date",
+                            "cm:modified": "Modified Date"
+                        }
+                    }
+                }
+            }
+        ]
+    }
+}
+```
+
+### Settings
+
+| Name                   | Type                      | Description                                                                                                                                                                                                                                                |
+|------------------------|---------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| field                  | string                    | Fields to apply the query to. Multiple, comma separated fields can be passed, to create multiple tabs per field. Required value                                                                                                                            |
+| dateFormat             | string                    | Date format. Dates used by the datepicker are Javascript Date objects, using [date-fns](https://date-fns.org/v2.30.0/docs/format) for formatting, so you can use any date format supported by the library. Default is 'dd-MMM-yy (sample date - 07-Jun-23) |
+| maxDate                | string                    | A fixed date (in format mentioned above, default format: dd-MMM-yy) or the string `"today"` that will set the maximum searchable date. Default is today.                                                                                                   |
+| displayedLabelsByField | { [key: string]: string } | A javascript object containing the different display labels to be used for each tab name, identified by the field for a particular tab.                                                                                                                    |
+
+## Details
+
+This component creates a tabbed layout where each tab consists of the [SearchDateRangeAdvanced](./search-date-range-advanced-tabbed.component.md) component, which allows user to create a query containing multiple date related queries in one go. 
+
+See the [Search filter component](search-filter.component.md) for full details of how to use widgets in a search query.
+
+### Custom date format
+
+You can set the date range picker to work with any date format your app requires. You can use
+any date format supported by the [date-fns](https://date-fns.org/v2.30.0/docs/format) library
+in the `dateFormat` and in the `maxDate` setting:
+
+```json
+{
+    "search": {
+        "categories": [
+            {
+                "id": "createdModifiedDateRange",
+                "name": "Date",
+                "enabled": true,
+                "component": {
+                    "selector": "date-range-advanced",
+                    "settings": {
+                        "dateFormat": "dd-MMM-yy",
+                        "maxDate": "02-May-23",
+                        "field": "cm:created, cm:modified",
+                        "displayedLabelsByField": {
+                            "cm:created": "Created Date",
+                            "cm:modified": "Modified Date"
+                        }
+                    }
+                }
+            }
+        ]
+    }
+}
+```
+
+The [SearchDateRangeAdvanced](./search-date-range-advanced-tabbed.component.md) component allows 3 different kinds of date related operations to be performed.
+Based on what information is provided to that component, this component will create different kinds of queries -
+
+- Anytime - No date filters are applied on the `field`. This option is selected by default
+- In the last - Allows to user to apply a filter to only show results from the last 'n' unit of time.
+- Between - Allows the user to select a range of dates to filter the search results.
+
+The queries generated by this filter when using the 'In the last' or 'Between' options is of the form - 
+
+`<field>:[<from_date> TO <to_date>]`
+
+
+## See also
+
+- [Search Configuration Guide](../../user-guide/search-configuration-guide.md)
+- [Search Query Builder service](../services/search-query-builder.service.md)
+- [Search Widget Interface](../interfaces/search-widget.interface.md)
+- [Search check list component](search-check-list.component.md)
+- [Search date range component](search-date-range.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)
+- [Search filter tabbed component](search-filter-tabbed.component.md)

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

@@ -0,0 +1,47 @@
+---
+Title: Search date range advanced component
+Added: v6.2.0
+Status: Active
+Last reviewed: 2023-07-10
+---
+
+# [Search date range advanced component](../../../lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.ts "Defined in search-date-range-advanced.component.ts")
+
+Represents an advanced date range component for
+the [SearchAdvancedDateRangeTabbedComponent](search-date-range-advanced-tabbed.component.md).
+
+![Date Range Advanced Widget](../../docassets/images/search-date-range-advanced.png)
+
+## Basic usage
+
+```html
+
+<adf-search-date-range-advanced></adf-search-date-range-advanced>
+```
+
+## Class Members
+
+### Properties
+
+| Name         | Type                    | Description                                                                                                                                                                                                                                                |
+|--------------|-------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| field        | string                  | Field to apply the query to. Required value                                                                                                                                                                                                                |
+| maxDate      | string                  | A fixed date (default format: dd-MMM-yy) or the string `"today"` that will set the maximum searchable date. Default is today.                                                                                                                              |
+| dateFormat   | string                  | Date format. Dates used by the datepicker are Javascript Date objects, using [date-fns](https://date-fns.org/v2.30.0/docs/format) for formatting, so you can use any date format supported by the library. Default is 'dd-MMM-yy (sample date - 07-Jun-23) |
+| initialValue | SearchDateRangeAdvanced | Initial value for the component                                                                                                                                                                                                                            |
+
+### Events
+
+| Name                | Type                                                                                           | Description                                                                                                                                    |
+|---------------------|------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------|
+| changed             | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Partial<SearchDateRangeAdvanced>>` | Emitted whenever a change is made in the component values. Emits the changes being made in the component.                                      |
+| valid               | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>`                          | Emitted whenever a change is made in the component values. Emits a flag indicating whether the current state of the component is valid or not. |
+
+## Details
+
+This component lets the user choose a variety of options to perform date related operations.
+
+- Anytime - No date related data will be returned. This option is selected by default
+- In the last - Allows user to perform date related operations over a period of time. The user can select the length of the period from current time, 
+as well as its unit. Currently, 3 units are supported - Days, Weeks, and Months.
+- Between - Allows the user to select a range of dates to perform operations on.

docs/content-services/components/search-filter-tabbed.component.md

@@ -0,0 +1,41 @@
+---
+Title: Search filter tabbed component
+Added: v6.2.0
+Status: Active
+Last reviewed: 2023-07-10
+---
+
+# [Search filter tabbed component](../../../lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.ts "Defined in search-filter-tabbed.component.ts")
+
+Represents a container for [Search Filters](search-filter.component.md) to provide a tabbed user interface for the filters.
+
+![Search Filter Tabbed Widget](../../docassets/images/search-filter-tabbed.png)
+
+## Basic Usage
+
+```html
+
+<adf-search-filter-tabbed>
+    <ng-container *ngFor="let field of fields">
+        <my-search-filter *adf-search-filter-tab="MyTabLabel"></my-search-filter>
+    </ng-container>
+</adf-search-filter-tabbed>
+```
+
+In order to generate a tabbed widget for multiple search filters, you can pass in the search filter widget component as a content child of the adf-search-filter-tabbed component as shown above.
+
+Additionally, you also have to make sure that the search filter being passed as a content child of the adf-search-filter-tabbed component, also has the adf-search-filter-tabbed directive applied on it,
+with the name input property being assigned the value of whatever name should be displayed for that particular tab
+
+## See also
+
+- [Search Configuration Guide](../../user-guide/search-configuration-guide.md)
+- [Search Query Builder service](../services/search-query-builder.service.md)
+- [Search Widget Interface](../interfaces/search-widget.interface.md)
+- [Search check list component](search-check-list.component.md)
+- [Search date range component](search-date-range.component.md)
+- [Search date range advanced component](search-date-range-advanced.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)

docs/content-services/components/search-filter.component.md

@@ -37,7 +37,9 @@ to build and execute the query.
 -   [Search Widget Interface](../interfaces/search-widget.interface.md)
 -   [Search check list component](search-check-list.component.md)
 -   [Search date range component](search-date-range.component.md)
+-   [Search date range advanced component](search-date-range-advanced.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)
+-   [Search filter tabbed component](search-filter-tabbed.component.md)

docs/versionIndex.md

@@ -48,6 +48,9 @@ backend services have been tested with each released version of ADF.
 <!--v620 start-->
 
 -   [Search Properties component](content-services/components/search-properties.component.md)
+-   [Search Date Range Advanced Component](content-services/components/search-date-range-advanced.component.md)
+-   [Search Date Range Advanced Tabbed Component](content-services/components/search-date-range-advanced-tabbed.component.md)
+-   [Search Filter Tabbed Component](content-services/components/search-filter-tabbed.component.md)
 
 <!--v620 end-->