inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-6107] Replaced SearchDateRange component with SearchDateRangeAdvanced Component (#9023)

Browse Source 
* [ACS-6107] Removed date range component from ADF content-services

* [ACS-6107] Removed references of date range component in code

* [ACS-6107] Updated documentation to replace occurrences of date range component with date-range-advanced-tabbed component

* [ACS-6107] Renamed DateRangeAdvanced to DateRange. Renamed DateRangeAdvancedTabbed to DateRangeTabbed

* [ACS-6107] Fixed missing export of SearchDateRangeTabbedComponent

* [ACS-6107] Replaced occurrences of date-range-advanced with date-range in HTML and Unit Tests automation ids

* [ACS-6107] Documentation corrections

* [ACS-6107] Reverted unneeded documentation formatting

* [ACS-6107] Reverted unneeded documentation formatting

* [ACS-6107] Reverted unneeded documentation formatting

* [ACS-6107] Migrated unneeded E2E test case to unit test

* [ACS-6107] Removed search-date-range E2E

* [ACS-6107] Resolved PR comments. Removed date-range-filter.page.ts. Removed unused translation keys. Updated documentation to refer proper comment name

* [ACS-6107] Updated documentation for SearchDateRange component to mention the change from original configuration to the newer configuration

* [ACS-6107] Corrected wrong version in documentation

* [ci:force]

* [ACS-6107] Removed unneeded file

* [ACS-6107] Updated unit tests and mock data after rebase

* [ci:force]

* [ACS-6107] Revert unneeded change. Remove unneeded file

* [ci:force]

* [ACS-6107] Updated E2E search config

* [ci:force]

* [ACS-6107] Updated E2E expects after component changes

* [ci:force]
This commit is contained in:
swapnil-verma-gl 2023-12-06 17:03:43 +05:30 committed by GitHub
parent 88ab336d05
commit f47fb2a7e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
50 changed files with 220 additions and 1143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
demo-shell/src/app.config.json
View File

@ -310,25 +310,12 @@
}
}
},
{
"id": "createdDateRange",
"name": "Created Date (range)",
"enabled": true,
"component": {
"selector": "date-range",
"settings": {
"field": "cm:created",
"dateFormat": "DD-MMM-YY",
"maxDate": "today"
}
}
},
{
"id": "createdModifiedDateRange",
"name": "Date",
"enabled": true,
"component": {
"selector": "date-range-advanced",
"selector": "date-range",
"settings": {
"dateFormat": "dd-MMM-yy",
"maxDate": "today",
@ -746,15 +733,17 @@
{
"id": "createdDateRange",
"name": "SEARCH.SEARCH_HEADER.FILTERS.DATE.TITLE",
"columnKey": "createdAt",
"enabled": true,
"component": {
"selector": "date-range",
"settings": {
"allowUpdateOnChange": false,
"dateFormat": "dd-MMM-yy",
"maxDate": "today",
"field": "cm:created",
"dateFormat": "DD-MMM-YY",
"maxDate": "today"
"displayedLabelsByField": {
"cm:created": "Created Date"
}
}
}
}

5
docs/README.md
View File

@ -290,10 +290,9 @@ 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 Date Range Component](content-services/components/search-date-range.component.md) | Displays a UI to configure different kinds of search criteria around date. Options are 'Anytime', 'In the last' and 'Between' | [Source](../lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.ts) |
| [Search Date Range Tabbed component](content-services/components/search-date-range-tabbed.component.md) | Implements a tabbed advanced search widget for the Search Date Range component. | [Source](../lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-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) |

2
docs/content-services/components/search-check-list.component.md
View File

@ -76,7 +76,7 @@ items in the list.
- [Search Configuration Guide](../../user-guide/search-configuration-guide.md)
- [Search filter chips component](search-filter-chips.component.md)
- [Search filter component](search-filter.component.md)
- [Search date range component](search-date-range.component.md)
- [Search date range tabbed component](search-date-range-tabbed.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)

2
docs/content-services/components/search-chip-autocomplete-input.component.md
View File

@ -50,7 +50,7 @@ Represents an input with autocomplete options.
- [Search Filter Autocomplete Chips component](search-filter-autocomplete-chips.component.md)
- [Search Logical Filter component](search-logical-filter.component.md)
- [Search check list component](search-check-list.component.md)
- [Search date range component](search-date-range.component.md)
- [Search date range tabbed component](search-date-range-tabbed.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)

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

@ -1,47 +0,0 @@
---
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.

18
docs/content-services/components/search-date-range-advanced-tabbed.component.md → docs/content-services/components/search-date-range-tabbed.component.md
View File

@ -1,16 +1,15 @@
---
Title: Search date range advanced tabbed component
Title: Search date range 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")
# [Search date range tabbed component](../../../lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.ts "Defined in search-date-range-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).
Represents a tabbed 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)
![Date Range Tabbed Widget](../../docassets/images/search-date-range-tabbed.png)
## Basic usage
@ -23,7 +22,7 @@ the [Search Filter component](search-filter.component.md).
"name": "Date",
"enabled": true,
"component": {
"selector": "date-range-advanced",
"selector": "date-range",
"settings": {
"dateFormat": "dd-MMM-yy",
"maxDate": "today",
@ -51,7 +50,7 @@ the [Search Filter component](search-filter.component.md).
## 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.
This component creates a tabbed layout where each tab consists of the [SearchDateRange](./search-date-range.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.
@ -70,7 +69,7 @@ in the `dateFormat` and in the `maxDate` setting:
"name": "Date",
"enabled": true,
"component": {
"selector": "date-range-advanced",
"selector": "date-range",
"settings": {
"dateFormat": "dd-MMM-yy",
"maxDate": "02-May-23",
@ -87,7 +86,7 @@ in the `dateFormat` and in the `maxDate` setting:
}
```
The [SearchDateRangeAdvanced](./search-date-range-advanced-tabbed.component.md) component allows 3 different kinds of date related operations to be performed.
The [SearchDateRange](./search-date-range.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
@ -105,7 +104,6 @@ The queries generated by this filter when using the 'In the last' or 'Between' o
- [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)

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

@ -1,88 +1,49 @@
---
Title: Search date range component
Added: v2.4.0
Added: v6.2.0
Status: Active
Last reviewed: 2018-06-11
Last reviewed: 2023-07-10
---
# [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")
# [Search date range component](../../../lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.ts "Defined in search-date-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).
Represents a date range component for the [SearchDateRangeTabbedComponent](search-date-range-tabbed.component.md).
![Date Range Widget](../../docassets/images/search-date-range.png)
NOTE: As of v6.5.0, the settings configuration for the original SearchDateRangeComponent have changed. If you have been using this component since
before that release, please ensure that your component configuration is updated according to the new settings listed below.
## Basic usage
```json
{
"search": {
"categories": [
{
"id": "createdDateRange",
"name": "Created Date (range)",
"enabled": true,
"component": {
"selector": "date-range",
"settings": {
"field": "cm:created"
}
}
}
]
}
}
```html
<adf-search-date-range></adf-search-date-range>
```
### Settings
## Class Members
| Name | Type | Description |
| ---- | ---- | ----------- |
| 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. |
| hideDefaultAction | boolean | Show/hide the [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) actions. By default is false. |
### 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 | SearchDateRange | Initial value for the component |
### Events
| Name | Type | Description |
|---------------------|----------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------|
| changed | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Partial<SearchDateRange>>` | 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 select a range between two dates 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.
This component lets the user choose a variety of options to perform date related operations.
### 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 [Moment.js](https://momentjs.com/docs/#/parsing/string-format/)
in the `dateFormat` and in the `maxDate` setting:
```json
{
"search": {
"categories": [
{
"id": "createdDateRange",
"name": "Created Date (range)",
"enabled": true,
"component": {
"selector": "date-range",
"settings": {
"field": "cm:created",
"dateFormat": "DD-MMM-YY",
"maxDate": "02-Mar-20"
}
}
}
]
}
}
```
## See also
- [Search Configuration Guide](../../user-guide/search-configuration-guide.md)
- [Search filter chips component](search-filter-chips.component.md)
- [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)
- 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.

2
docs/content-services/components/search-filter-autocomplete-chips.component.md
View File

@ -59,7 +59,7 @@ See the [Search Chip Autocomplete Input component](search-chip-autocomplete-inpu
- [Search Chip Autocomplete Input component](search-chip-autocomplete-input.component.md)
- [Search Chip Input component](search-chip-input.component.md)
- [Search check list component](search-check-list.component.md)
- [Search date range component](search-date-range.component.md)
- [Search date range tabbed component](search-date-range-tabbed.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)

2
docs/content-services/components/search-filter-chips.component.md
View File

@ -70,7 +70,7 @@ here is the [example configuration](https://github.com/Alfresco/alfresco-ng2-com
- [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 tabbed component](search-date-range-tabbed.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)

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

@ -34,7 +34,7 @@ with the name input property being assigned the value of whatever name should be
- [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 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)

2
docs/content-services/components/search-filter.component.md
View File

@ -36,8 +36,8 @@ to build and execute the query.
- [Search Sorting Picker Component](search-sorting-picker.component.md)
- [Search Widget Interface](../interfaces/search-widget.interface.md)
- [Search check list component](search-check-list.component.md)
- [Search date range tabbed component](search-date-range-tabbed.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)

2
docs/content-services/components/search-logical-filter.component.md
View File

@ -52,7 +52,7 @@ This component lets the user provide logical conditions to apply to each `field`
- [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 tabbed component](search-date-range-tabbed.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)

2
docs/content-services/components/search-number-range.component.md
View File

@ -75,7 +75,7 @@ cm:content.size:[0 TO 100]
- [Search filter chips component](search-filter-chips.component.md)
- [Search filter component](search-filter.component.md)
- [Search check list component](search-check-list.component.md)
- [Search date range component](search-date-range.component.md)
- [Search date range tabbed component](search-date-range-tabbed.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)

2
docs/content-services/components/search-properties.component.md
View File

@ -54,7 +54,7 @@ Allows to search by file size and type.
- [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 tabbed component](search-date-range-tabbed.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)

2
docs/content-services/components/search-radio.component.md
View File

@ -66,7 +66,7 @@ buttons as appropriate.
- [Search filter chips component](search-filter-chips.component.md)
- [Search filter component](search-filter.component.md)
- [Search check list component](search-check-list.component.md)
- [Search date range component](search-date-range.component.md)
- [Search date range tabbed component](search-date-range-tabbed.component.md)
- [Search number range component](search-number-range.component.md)
- [Search slider component](search-slider.component.md)
- [Search text component](search-text.component.md)

2
docs/content-services/components/search-slider.component.md
View File

@ -73,7 +73,7 @@ or zero and the corresponsing query fragment is removed from the query.
- [Search filter chips component](search-filter-chips.component.md)
- [Search filter component](search-filter.component.md)
- [Search check list component](search-check-list.component.md)
- [Search date range component](search-date-range.component.md)
- [Search date range tabbed component](search-date-range-tabbed.component.md)
- [Search number range component](search-number-range.component.md)
- [Search radio component](search-radio.component.md)
- [Search text component](search-text.component.md)

2
docs/content-services/components/search-text.component.md
View File

@ -63,7 +63,7 @@ details of how to use widgets in a search query.
- [Search filter chips component](search-filter-chips.component.md)
- [Search filter component](search-filter.component.md)
- [Search check list component](search-check-list.component.md)
- [Search date range component](search-date-range.component.md)
- [Search date range tabbed component](search-date-range-tabbed.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)

2
docs/content-services/interfaces/search-widget.interface.md
View File

@ -186,7 +186,7 @@ and pass custom attributes, if your component supports them:
- [Search filter component](../components/search-filter.component.md)
- [Search check list component](../components/search-check-list.component.md)
- [Search date range component](../components/search-date-range.component.md)
- [Search date range tabbed component](../components/search-date-range-tabbed.component.md)
- [Search number range component](../components/search-number-range.component.md)
- [Search radio component](../components/search-radio.component.md)
- [Search slider component](../components/search-slider.component.md)

2
docs/content-services/services/search-query-builder.service.md
View File

@ -139,7 +139,7 @@ constructor(queryBuilder: SearchQueryBuilderService) {
- [Search Form Component](../components/search-form.component.md)
- [Search Widget interface](../interfaces/search-widget.interface.md)
- [Search check list component](../components/search-check-list.component.md)
- [Search date range component](../components/search-date-range.component.md)
- [Search date range tabbed component](../components/search-date-range-tabbed.component.md)
- [Search number range component](../components/search-number-range.component.md)
- [Search radio component](../components/search-radio.component.md)
- [Search slider component](../components/search-slider.component.md)

BIN
docs/docassets/images/search-date-range-advanced.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.0 KiB

0
docs/docassets/images/search-date-range-advanced-tabbed.png → docs/docassets/images/search-date-range-tabbed.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
docs/docassets/images/search-date-range.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

8
docs/user-guide/search-configuration-guide.md
View File

@ -294,10 +294,10 @@ The Search Filter supports a number of widgets out of the box, each implemented
by an ADF component. The `selector` property specifies which [widget](../../lib/content-services/src/lib/search/models/search-widget.interface.ts) is used for
a category:
| [`Widget`](../../lib/content-services/src/lib/search/models/search-widget.interface.ts) name | Selector | Description |
| ------------------------------------------------------------------------------- | -------- | ----------- |
| [`Widget`](../../lib/content-services/src/lib/search/models/search-widget.interface.ts) name | Selector | Description |
|----------------------------------------------------------------------------------------------| -------- |------------------------------------------------------------------------------|
| [Check List](../content-services/components/search-check-list.component.md) | `check-list` | Toggles individual query fragments for the search |
| [Date Range](../content-services/components/search-date-range.component.md) | `date-range` | Specifies a range f dates that a field may contain |
| [Date Range](../content-services/components/search-date-range.component.md) | `date-range` | Specifies a varities of options for selecting dates that a field may contain |
| [Number Range](../content-services/components/search-number-range.component.md) | `number-range` | Specifies a range of numeric values that a field may contain |
| [Radio List](../content-services/components/search-radio.component.md) | `radio` | Selects one query fragment from a list of options |
| [Slider](../content-services/components/search-slider.component.md) | `slider` | Selects a single numeric value in a given range that a field may contain |
@ -589,7 +589,7 @@ then be added in each node entry response. An example partial response is shown
- [Search Form Component](../content-services/components/search-form.component.md)
- [Search Widget interface](../interfaces/search-widget.interface.md)
- [Search check list component](../content-services/components/search-check-list.component.md)
- [Search date range component](../content-services/components/search-date-range.component.md)
- [Search date range tabbed component](../content-services/components/search-date-range-tabbed.component.md)
- [Search number range component](../content-services/components/search-number-range.component.md)
- [Search radio component](../content-services/components/search-radio.component.md)
- [Search slider component](../content-services/components/search-slider.component.md)

4
docs/versionIndex.md
View File

@ -57,8 +57,8 @@ 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 Date Range Component](content-services/components/search-date-range.component.md)
- [Search Date Range Tabbed Component](content-services/components/search-date-range-tabbed.component.md)
- [Search Filter Tabbed Component](content-services/components/search-filter-tabbed.component.md)
- [Search Facet Chip Tabbed Component](content-services/components/search-facet-chip-tabbed.md)
- [Date Time Pipe](core/pipes/date-time.pipe.md)

107
e2e/search/components/search-date-range.e2e.ts
View File

@ -1,107 +0,0 @@
/*!
* @license
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { BrowserActions, DataTableComponentPage, LoginPage } from '@alfresco/adf-testing';
import { browser, ElementFinder } from 'protractor';
import { SearchBarPage } from '../pages/search-bar.page';
import { SearchFiltersPage } from '../pages/search-filters.page';
import { SearchResultsPage } from '../pages/search-results.page';
import { format, parse, addDays } from 'date-fns';
describe('Search Date Range Filter', () => {
const loginPage = new LoginPage();
const searchBarPage = new SearchBarPage();
const searchFilters = new SearchFiltersPage();
const dateRangeFilter = searchFilters.createdDateRangeFilterPage();
const searchResults = new SearchResultsPage();
const dataTable = new DataTableComponentPage();
beforeAll(async () => {
await loginPage.loginWithProfile('admin');
await searchBarPage.checkSearchIconIsVisible();
await searchBarPage.clickOnSearchIcon();
await searchBarPage.enterTextAndPressEnter('*');
await searchResults.dataTable.waitTillContentLoaded();
});
beforeEach(async () => {
await searchFilters.checkCreatedRangeFilterIsDisplayed();
await searchFilters.clickCreatedRangeFilterHeader();
await searchFilters.checkCreatedRangeFilterIsExpanded();
});
afterEach(async () => {
await browser.refresh();
});
it('[C277119] FROM and TO dates should depend on each other', async () => {
await dateRangeFilter.checkFromDateToggleIsDisplayed();
const fromDatePicker = await dateRangeFilter.openFromDatePicker();
await fromDatePicker.checkDatesAfterDateAreDisabled(new Date());
await fromDatePicker.closeDatePicker();
await dateRangeFilter.checkToDateToggleIsDisplayed();
let datePickerTo = await dateRangeFilter.openToDatePicker();
await datePickerTo.checkDatesAfterDateAreDisabled(new Date());
await datePickerTo.closeDatePicker();
await dateRangeFilter.checkFromDateToggleIsDisplayed();
const datePickerFrom = await dateRangeFilter.openFromDatePicker();
await datePickerFrom.selectTodayDate();
await datePickerFrom.checkDatePickerIsNotDisplayed();
await dateRangeFilter.checkToDateToggleIsDisplayed();
datePickerTo = await dateRangeFilter.openToDatePicker();
await datePickerTo.checkDatesBeforeDateAreDisabled(new Date());
await datePickerTo.checkDatesAfterDateAreDisabled(new Date());
});
it('[C277107] Should be able to apply a date range', async () => {
await dateRangeFilter.checkFromDateToggleIsDisplayed();
const datePickerToday = await dateRangeFilter.openFromDatePicker();
await datePickerToday.selectTodayDate();
await datePickerToday.checkDatePickerIsNotDisplayed();
let fromDate = await dateRangeFilter.getFromDate();
fromDate = format(parse(fromDate, 'd-MMM-yy', new Date()), 'dd-MM-yy');
await dateRangeFilter.checkApplyButtonIsDisabled();
await dateRangeFilter.checkToDateToggleIsDisplayed();
const toDatePicker = await dateRangeFilter.openToDatePicker();
await toDatePicker.selectTodayDate();
await toDatePicker.checkDatePickerIsNotDisplayed();
let toDate = await dateRangeFilter.getToDate();
toDate = format(addDays(parse(toDate, 'dd-MMM-yy', new Date()), 1), 'dd-MM-yy');
await dateRangeFilter.checkApplyButtonIsEnabled();
await dateRangeFilter.clickApplyButton();
await searchResults.sortByCreated('ASC');
const results = (await dataTable.geCellElementDetail('Created')) as ElementFinder[];
for (const currentResult of results) {
const currentDate = await BrowserActions.getAttribute(currentResult, 'title');
const currentDateFormatted = parse(currentDate, 'MMM dd, yyyy, h:mm:ss a', new Date());
await expect(currentDateFormatted <= parse(toDate, 'dd-MM-yy', new Date())).toBe(true);
await expect(currentDateFormatted >= parse(fromDate, 'dd-MM-yy', new Date())).toBe(true);
}
});
});

18
e2e/search/components/search-radio.e2e.ts
View File

@ -155,7 +155,7 @@ describe('Search Radio Component', () => {
await searchFiltersPage.clickTypeFilterHeader();
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(13);
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(16);
await navigationBarPage.navigateToContentServices();
@ -170,7 +170,7 @@ describe('Search Radio Component', () => {
await searchFiltersPage.clickTypeFilterHeader();
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(13);
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(16);
await navigationBarPage.navigateToContentServices();
jsonFile.categories[5].component.settings.pageSize = 9;
@ -184,7 +184,7 @@ describe('Search Radio Component', () => {
await searchFiltersPage.clickTypeFilterHeader();
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(12);
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(15);
await searchFiltersPage.typeFiltersPage().checkShowMoreButtonIsDisplayed();
await searchFiltersPage.typeFiltersPage().checkShowLessButtonIsNotDisplayed();
@ -213,21 +213,21 @@ describe('Search Radio Component', () => {
await searchFiltersPage.clickTypeFilterHeader();
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(8);
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(11);
await searchFiltersPage.typeFiltersPage().checkShowMoreButtonIsDisplayed();
await searchFiltersPage.typeFiltersPage().checkShowLessButtonIsNotDisplayed();
await searchFiltersPage.typeFiltersPage().clickShowMoreButton();
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(13);
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(16);
await searchFiltersPage.typeFiltersPage().checkShowMoreButtonIsNotDisplayed();
await searchFiltersPage.typeFiltersPage().checkShowLessButtonIsDisplayed();
await searchFiltersPage.typeFiltersPage().clickShowLessButton();
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(8);
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(11);
await searchFiltersPage.typeFiltersPage().checkShowMoreButtonIsDisplayed();
await searchFiltersPage.typeFiltersPage().checkShowLessButtonIsNotDisplayed();
@ -244,21 +244,21 @@ describe('Search Radio Component', () => {
await searchFiltersPage.clickTypeFilterHeader();
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(8);
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(11);
await searchFiltersPage.typeFiltersPage().checkShowMoreButtonIsDisplayed();
await searchFiltersPage.typeFiltersPage().checkShowLessButtonIsNotDisplayed();
await searchFiltersPage.typeFiltersPage().clickShowMoreButton();
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(13);
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(16);
await searchFiltersPage.typeFiltersPage().checkShowMoreButtonIsNotDisplayed();
await searchFiltersPage.typeFiltersPage().checkShowLessButtonIsDisplayed();
await searchFiltersPage.typeFiltersPage().clickShowLessButton();
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(8);
await expect(await searchFiltersPage.typeFiltersPage().getRadioButtonsNumberOnPage()).toBe(11);
await searchFiltersPage.typeFiltersPage().checkShowMoreButtonIsDisplayed();
await searchFiltersPage.typeFiltersPage().checkShowLessButtonIsNotDisplayed();

18
e2e/search/pages/search-filters.page.ts
View File

@ -17,7 +17,6 @@
import {
BrowserVisibility,
DateRangeFilterPage,
NumberRangeFilterPage,
SearchCategoriesPage,
SearchCheckListPage,
@ -36,7 +35,6 @@ export class SearchFiltersPage {
fileSizeFilter = $('[data-automation-id="expansion-panel-SEARCH.FACET_FIELDS.SIZE"]');
nameFilter = $('[data-automation-id="expansion-panel-Name"]');
checkListFilter = $('[data-automation-id="expansion-panel-Check List"]');
createdDateRangeFilter = $('[data-automation-id="expansion-panel-Created Date (range)"]');
typeFilter = $('[data-automation-id="expansion-panel-Type"]');
sizeRangeFilter = $('[data-automation-id="expansion-panel-Content Size (range)"]');
sizeSliderFilter = $('[data-automation-id="expansion-panel-Content Size"]');
@ -56,10 +54,6 @@ export class SearchFiltersPage {
return SearchCategoriesPage.numberRangeFilter(this.sizeRangeFilter);
}
createdDateRangeFilterPage(): DateRangeFilterPage {
return SearchCategoriesPage.dateRangeFilter(this.createdDateRangeFilter);
}
textFiltersPage(): SearchTextPage {
return SearchCategoriesPage.textFiltersPage(this.nameFilter);
}
@ -156,18 +150,6 @@ export class SearchFiltersPage {
await this.searchCategoriesPage.checkFilterIsExpanded(this.checkListFilter);
}
async checkCreatedRangeFilterIsDisplayed(): Promise<void> {
await this.searchCategoriesPage.checkFilterIsDisplayed(this.createdDateRangeFilter);
}
async clickCreatedRangeFilterHeader(): Promise<void> {
await this.searchCategoriesPage.clickFilterHeader(this.createdDateRangeFilter);
}
async checkCreatedRangeFilterIsExpanded(): Promise<void> {
await this.searchCategoriesPage.checkFilterIsExpanded(this.createdDateRangeFilter);
}
async checkTypeFilterIsDisplayed(): Promise<void> {
await this.searchCategoriesPage.checkFilterIsDisplayed(this.typeFilter);
}

7
e2e/search/search.config.ts
View File

@ -155,7 +155,10 @@ export class SearchConfiguration {
selector: 'date-range',
settings: {
field: 'cm:created',
dateFormat: 'DD-MMM-YY'
dateFormat: 'DD-MMM-YY',
displayedLabelsByField: {
'cm:created': 'Created Date'
}
}
}
},
@ -182,7 +185,7 @@ export class SearchConfiguration {
name: 'Date',
enabled: true,
component: {
selector: 'date-range-advanced',
selector: 'date-range',
settings: {
dateFormat: 'dd-MMM-yy',
maxDate: 'today',

48
lib/content-services/src/lib/i18n/en.json
View File

@ -319,9 +319,7 @@
"FROM": "From",
"TO": "To",
"FROM-DATE": "From",
"TO-DATE": "To",
"SELECT-FROM-DATE": "Select From Date",
"SELECT-TO-DATE": "Select To Date"
"TO-DATE": "To"
},
"VALIDATION": {
"REQUIRED-VALUE": "Required value",
@ -378,14 +376,14 @@
}
},
"UNKNOWN_CONFIGURATION": "Unknown Configuration",
"SEARCH_HEADER" : {
"TITLE":"Filter",
"SEARCH_HEADER": {
"TITLE": "Filter",
"TYPE": "Type",
"FILTER_BY": "Filter by {{ category }}",
"CLEAR": "Clear",
"APPLY": "Apply",
"FILTERS" : {
"NAME" : {
"FILTERS": {
"NAME": {
"TITLE": "Name",
"PLACEHOLDER": "Enter the name"
},
@ -395,14 +393,14 @@
"DOCUMENT": "Document"
},
"SIZE": {
"TITLE" : "Content Size (range)",
"TITLE": "Content Size (range)",
"SMALL": "Small",
"MEDIUM": "Medium",
"LARGE": "Large",
"HUGE": "Huge"
},
"DATE" :{
"TITLE" : "Created Date (range)"
"DATE": {
"TITLE": "Created Date (range)"
}
}
},
@ -493,15 +491,15 @@
"ADD_TAG_TOOLTIP": "Add tag"
},
"CONTENT_TYPE": {
"DIALOG" :{
"TITLE" : "Change content type",
"DIALOG": {
"TITLE": "Change content type",
"DESCRIPTION": "Making this change to the content type will permanently add some properties and stored metadata to the document.",
"CONFIRM": "Are you sure you want to change the content type?",
"CANCEL": "CANCEL",
"APPLY": "SAVE CHANGES",
"VIEW_DETAILS": "View details",
"PROPERTY" :{
"NAME" : "Name",
"PROPERTY": {
"NAME": "Name",
"DESCRIPTION": "Description",
"DATA_TYPE": "Data type"
}
@ -524,7 +522,7 @@
"LINK-WITH-EXPIRY-SETTINGS": "New link has been generated with expiry settings",
"EXPIRES": "Expires on",
"LINK-EXPIRY-DATE": "Link Expiry Date",
"EXPIRATION-LABEL" : "Expiration Date",
"EXPIRATION-LABEL": "Expiration Date",
"EXPIRATION-PLACEHOLDER": "MM/DD/YYYY",
"CLIPBOARD-MESSAGE": "Link copied to the clipboard",
"CLOSE": "Close",
@ -666,19 +664,19 @@
"ARIA_LABEL": "Open {{ name }}"
}
},
"ADF-ASPECT-LIST" : {
"ADF-ASPECT-LIST": {
"PROPERTY_NAME": "Property Name",
"DESCRIPTION": "Description",
"DATA_TYPE": "Data Type",
"DIALOG" : {
"TITLE" : "Customize Properties",
"DESCRIPTION": "Manage the properties associated with selected file(s). Choose from property aspects listed below, to expose and apply additional metadata and functionality",
"RESET": "Reset",
"CLEAR": "Clear",
"CANCEL": "Cancel",
"APPLY": "Apply",
"OVER-TABLE-MESSAGE" : "Select property aspects",
"SELECTED": "Selected"
"DIALOG": {
"TITLE": "Customize Properties",
"DESCRIPTION": "Manage the properties associated with selected file(s). Choose from property aspects listed below, to expose and apply additional metadata and functionality",
"RESET": "Reset",
"CLEAR": "Clear",
"CANCEL": "Cancel",
"APPLY": "Apply",
"OVER-TABLE-MESSAGE": "Select property aspects",
"SELECTED": "Selected"
}
},
"NODE_COUNTER": {

5
lib/content-services/src/lib/mock/search-filter-mock.ts
View File

@ -375,7 +375,10 @@ export const searchFilter = {
selector: 'date-range',
settings: {
field: 'cm:created',
dateFormat: 'DD-MMM-YY'
dateFormat: 'DD-MMM-YY',
displayedLabelsByField: {
'cm:created': 'Created Date (range)'
}
}
}
},

4
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced-tabbed.component.html → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.html
View File

@ -1,6 +1,6 @@
<adf-search-filter-tabbed>
<ng-container *ngFor="let field of fields">
<adf-search-date-range-advanced
<adf-search-date-range
*adf-search-filter-tab="settings.displayedLabelsByField[field]"
[dateFormat]="settings.dateFormat"
[maxDate]="settings.maxDate"
@ -8,6 +8,6 @@
[initialValue]="startValue"
(changed)="onDateRangedValueChanged($event, field)"
(valid)="tabsValidity[field]=$event">
</adf-search-date-range-advanced>
</adf-search-date-range>
</ng-container>
</adf-search-filter-tabbed>

44
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced-tabbed.component.spec.ts → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.spec.ts
View File

@ -19,12 +19,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';
import { ContentTestingModule } from '../../../testing/content.testing.module';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { SearchDateRangeAdvanced } from './search-date-range-advanced/search-date-range-advanced';
import { SearchDateRange } from './search-date-range/search-date-range';
import { SearchFilterTabbedComponent } from '../search-filter-tabbed/search-filter-tabbed.component';
import { SearchDateRangeAdvancedComponent } from './search-date-range-advanced/search-date-range-advanced.component';
import { SearchDateRangeAdvancedTabbedComponent } from './search-date-range-advanced-tabbed.component';
import { DateRangeType } from './search-date-range-advanced/date-range-type';
import { InLastDateType } from './search-date-range-advanced/in-last-date-type';
import { SearchDateRangeComponent } from './search-date-range/search-date-range.component';
import { SearchDateRangeTabbedComponent } from './search-date-range-tabbed.component';
import { DateRangeType } from './search-date-range/date-range-type';
import { InLastDateType } from './search-date-range/in-last-date-type';
import {
endOfDay,
endOfToday,
@ -44,10 +44,10 @@ import {
export class MockSearchFilterTabbedComponent {}
@Component({
selector: 'adf-search-date-range-advanced',
selector: 'adf-search-date-range',
template: ``
})
export class MockSearchDateRangeAdvancedComponent {
export class MockSearchDateRangeComponent {
@Input()
dateFormat: string;
@Input()
@ -55,39 +55,39 @@ export class MockSearchDateRangeAdvancedComponent {
@Input()
field: string;
@Input()
initialValue: SearchDateRangeAdvanced;
initialValue: SearchDateRange;
@Output()
changed = new EventEmitter<Partial<SearchDateRangeAdvanced>>();
changed = new EventEmitter<Partial<SearchDateRange>>();
@Output()
valid = new EventEmitter<boolean>();
}
describe('SearchDateRangeAdvancedTabbedComponent', () => {
let component: SearchDateRangeAdvancedTabbedComponent;
let fixture: ComponentFixture<SearchDateRangeAdvancedTabbedComponent>;
let betweenMockData: SearchDateRangeAdvanced;
let inLastMockData: SearchDateRangeAdvanced;
let anyMockDate: SearchDateRangeAdvanced;
describe('SearchDateRangeTabbedComponent', () => {
let component: SearchDateRangeTabbedComponent;
let fixture: ComponentFixture<SearchDateRangeTabbedComponent>;
let betweenMockData: SearchDateRange;
let inLastMockData: SearchDateRange;
let anyMockDate: SearchDateRange;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [SearchDateRangeAdvancedTabbedComponent, SearchFilterTabbedComponent, SearchDateRangeAdvancedComponent],
declarations: [SearchDateRangeTabbedComponent, SearchFilterTabbedComponent, SearchDateRangeComponent],
imports: [
TranslateModule.forRoot(),
ContentTestingModule
],
providers: [
{ provide: SearchFilterTabbedComponent, useClass: MockSearchFilterTabbedComponent },
{ provide: SearchDateRangeAdvancedComponent, useClass: MockSearchDateRangeAdvancedComponent }
{ provide: SearchDateRangeComponent, useClass: MockSearchDateRangeComponent }
]
});
fixture = TestBed.createComponent(SearchDateRangeAdvancedTabbedComponent);
fixture = TestBed.createComponent(SearchDateRangeTabbedComponent);
component = fixture.componentInstance;
component.id = 'dateRangeAdvanced';
component.id = 'dateRange';
component.context = {
queryFragments: {
dateRangeAdvanced: ''
dateRange: ''
},
update: jasmine.createSpy('update')
} as any;
@ -219,7 +219,7 @@ describe('SearchDateRangeAdvancedTabbedComponent', () => {
const inLastStartDate = startOfWeek(subWeeks(new Date(), 5));
const query = `createdDate:['${formatISO(startOfDay(betweenMockData.betweenStartDate))}' TO '${formatISO(endOfDay(betweenMockData.betweenEndDate))}']` +
` AND modifiedDate:['${formatISO(startOfDay(inLastStartDate))}' TO '${formatISO(endOfToday())}']`;
expect(component.context.queryFragments['dateRangeAdvanced']).toEqual(query);
expect(component.context.queryFragments['dateRange']).toEqual(query);
expect(component.context.update).toHaveBeenCalled();
});
@ -230,7 +230,7 @@ describe('SearchDateRangeAdvancedTabbedComponent', () => {
expect(component.combinedQuery).toBe('');
expect(component.combinedDisplayValue).toBe('');
expect(component.displayValue$.next).toHaveBeenCalledWith('');
expect(component.context.queryFragments['dateRangeAdvanced']).toEqual('');
expect(component.context.queryFragments['dateRange']).toEqual('');
expect(component.context.update).toHaveBeenCalled();
});
});

30
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced-tabbed.component.ts → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.ts
View File

@ -17,12 +17,12 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs';
import { SearchDateRangeAdvanced } from './search-date-range-advanced/search-date-range-advanced';
import { DateRangeType } from './search-date-range-advanced/date-range-type';
import { DateRangeType } from './search-date-range/date-range-type';
import { SearchDateRange } from './search-date-range/search-date-range';
import { SearchWidget } from '../../models/search-widget.interface';
import { SearchWidgetSettings } from '../../models/search-widget-settings.interface';
import { SearchQueryBuilderService } from '../../services/search-query-builder.service';
import { InLastDateType } from './search-date-range-advanced/in-last-date-type';
import { InLastDateType } from './search-date-range/in-last-date-type';
import { TranslationService } from '@alfresco/adf-core';
import {
endOfDay,
@ -38,14 +38,14 @@ import {
} from 'date-fns';
@Component({
selector: 'adf-search-date-range-advanced-tabbed',
templateUrl: './search-date-range-advanced-tabbed.component.html',
selector: 'adf-search-date-range-tabbed',
templateUrl: './search-date-range-tabbed.component.html',
encapsulation: ViewEncapsulation.None
})
export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnInit {
export class SearchDateRangeTabbedComponent implements SearchWidget, OnInit {
displayValue$ = new Subject<string>();
id: string;
startValue: SearchDateRangeAdvanced = {
startValue: SearchDateRange = {
dateRangeType: DateRangeType.ANY,
inLastValueType: InLastDateType.DAYS,
inLastValue: undefined,
@ -59,7 +59,7 @@ export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnI
combinedQuery: string;
combinedDisplayValue: string;
private value: { [key: string]: Partial<SearchDateRangeAdvanced> } = {};
private value: { [key: string]: Partial<SearchDateRange> } = {};
private queryMapByField: Map<string, string> = new Map<string, string>();
private displayValueMapByField: Map<string, string> = new Map<string, string>();
@ -69,7 +69,7 @@ export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnI
this.fields = this.settings?.field.split(',').map(field => field.trim());
}
getCurrentValue(): { [key: string]: Partial<SearchDateRangeAdvanced> } {
getCurrentValue(): { [key: string]: Partial<SearchDateRange> } {
return this.value;
}
@ -86,7 +86,7 @@ export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnI
this.submitValues();
}
setValue(value: { [key: string]: SearchDateRangeAdvanced }) {
setValue(value: { [key: string]: SearchDateRange }) {
this.value = value;
}
@ -97,13 +97,13 @@ export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnI
this.context.update();
}
}
onDateRangedValueChanged(value: Partial<SearchDateRangeAdvanced>, field: string) {
onDateRangedValueChanged(value: Partial<SearchDateRange>, field: string) {
this.value[field] = value;
this.updateQuery(value, field);
this.updateDisplayValue(value, field);
}
private generateQuery(value: Partial<SearchDateRangeAdvanced>, field: string): string {
private generateQuery(value: Partial<SearchDateRange>, field: string): string {
let query = '';
let startDate: Date;
let endDate: Date;
@ -136,7 +136,7 @@ export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnI
return query;
}
private generateDisplayValue(value: Partial<SearchDateRangeAdvanced>): string {
private generateDisplayValue(value: Partial<SearchDateRange>): string {
let displayValue = '';
if (value.dateRangeType === DateRangeType.IN_LAST && value.inLastValue) {
displayValue = this.translateService.instant(`SEARCH.DATE_RANGE_ADVANCED.IN_LAST_DISPLAY_LABELS.${value.inLastValueType}`, {
@ -148,7 +148,7 @@ export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnI
return displayValue;
}
private updateQuery(value: Partial<SearchDateRangeAdvanced>, field: string) {
private updateQuery(value: Partial<SearchDateRange>, field: string) {
this.combinedQuery = '';
this.queryMapByField.set(field, this.generateQuery(value, field));
this.queryMapByField.forEach((query: string) => {
@ -158,7 +158,7 @@ export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnI
});
}
private updateDisplayValue(value: Partial<SearchDateRangeAdvanced>, field: string) {
private updateDisplayValue(value: Partial<SearchDateRange>, field: string) {
this.combinedDisplayValue = '';
this.displayValueMapByField.set(field, this.generateDisplayValue(value));
this.displayValueMapByField.forEach((displayValue: string, fieldForDisplayLabel: string) => {

0
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/date-range-type.ts → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/date-range-type.ts
View File

0
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/in-last-date-type.ts → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/in-last-date-type.ts
View File

22
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.html → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html
View File

@ -1,41 +1,41 @@
<div class="adf-search-date-range-container" [formGroup]="form">
<mat-radio-group formControlName="dateRangeType">
<span class="adf-search-date-range-container-row">
<mat-radio-button [value]="DateRangeType.ANY" data-automation-id="date-range-advanced-anytime">
<mat-radio-button [value]="DateRangeType.ANY" data-automation-id="date-range-anytime">
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.ANYTIME' | translate }}
</mat-radio-button>
</span>
<span class="adf-search-date-range-container-row">
<mat-radio-button [value]="DateRangeType.IN_LAST" data-automation-id="date-range-advanced-in-last">
<mat-radio-button [value]="DateRangeType.IN_LAST" data-automation-id="date-range-in-last">
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.IN_LAST' | translate }}
</mat-radio-button>
<mat-form-field class="adf-search-date-range-form-field adf-search-date-range-input-field">
<input matInput [attr.aria-label]="'SEARCH.DATE_RANGE_ADVANCED.ARIA_LABEL.NUMBER_INPUT' | translate"
type="number" min="1" formControlName="inLastValue"
data-automation-id="date-range-advanced-in-last-input" (input)="narrowDownAllowedCharacters($event)"
data-automation-id="date-range-in-last-input" (input)="narrowDownAllowedCharacters($event)"
(keydown)="preventIncorrectNumberCharacters($event)">
<mat-error *ngIf="form.controls.inLastValue.errors?.required">{{ 'SEARCH.DATE_RANGE_ADVANCED.ERROR.IN_LAST' | translate }}</mat-error>
</mat-form-field>
<mat-form-field class="adf-search-date-range-form-field">
<mat-select formControlName="inLastValueType" data-automation-id="date-range-advanced-in-last-dropdown">
<mat-option data-automation-id="date-range-advanced-in-last-option-days" [value]="InLastDateType.DAYS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.DAYS' | translate }}</mat-option>
<mat-option data-automation-id="date-range-advanced-in-last-option-weeks" [value]="InLastDateType.WEEKS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.WEEKS' | translate }}</mat-option>
<mat-option data-automation-id="date-range-advanced-in-last-option-months" [value]="InLastDateType.MONTHS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.MONTHS' | translate }}</mat-option>
<mat-select formControlName="inLastValueType" data-automation-id="date-range-in-last-dropdown">
<mat-option data-automation-id="date-range-in-last-option-days" [value]="InLastDateType.DAYS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.DAYS' | translate }}</mat-option>
<mat-option data-automation-id="date-range-in-last-option-weeks" [value]="InLastDateType.WEEKS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.WEEKS' | translate }}</mat-option>
<mat-option data-automation-id="date-range-in-last-option-months" [value]="InLastDateType.MONTHS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.MONTHS' | translate }}</mat-option>
</mat-select>
</mat-form-field>
</span>
<span class="adf-search-date-range-container-row">
<mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-advanced-between">
<mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-between">
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }}
</mat-radio-button>
<mat-form-field class="adf-search-date-range-form-field">
<mat-date-range-input [rangePicker]="$any(picker)" [max]="convertedMaxDate">
<input matStartDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.START_DATE' | translate }}"
data-automation-id="date-range-advanced-between-start-input" [formControl]="betweenStartDateFormControl" (change)="dateChanged($event, betweenStartDateFormControl)">
data-automation-id="date-range-between-start-input" [formControl]="betweenStartDateFormControl" (change)="dateChanged($event, betweenStartDateFormControl)">
<input matEndDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.END_DATE' | translate }}"
data-automation-id="date-range-advanced-between-end-input" [formControl]="betweenEndDateFormControl" (change)="dateChanged($event, betweenEndDateFormControl)">
data-automation-id="date-range-between-end-input" [formControl]="betweenEndDateFormControl" (change)="dateChanged($event, betweenEndDateFormControl)">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker" data-automation-id="date-range-advanced-between-datepicker-toggle"></mat-datepicker-toggle>
<mat-datepicker-toggle matSuffix [for]="picker" data-automation-id="date-range-between-datepicker-toggle"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
<mat-error *ngIf="betweenStartDateFormControl.errors?.invalidDate">{{ 'SEARCH.DATE_RANGE_ADVANCED.ERROR.START_DATE.INVALID_FORMAT' | translate }}</mat-error>

2
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.scss → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss
View File

@ -1,4 +1,4 @@
adf-search-date-range-advanced {
adf-search-date-range {
.adf-search-date-range-container {
margin-top: 20px;
padding: 10px;

70
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.spec.ts → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.spec.ts
View File

@ -19,29 +19,29 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { TranslateModule } from '@ngx-translate/core';
import { ContentTestingModule } from '../../../../testing/content.testing.module';
import { SearchDateRangeAdvancedComponent } from './search-date-range-advanced.component';
import { SearchDateRangeComponent } from './search-date-range.component';
import { addDays, endOfToday, format, parse, startOfYesterday, subDays } from 'date-fns';
import { Validators } from '@angular/forms';
describe('SearchDateRangeAdvancedComponent', () => {
let component: SearchDateRangeAdvancedComponent;
let fixture: ComponentFixture<SearchDateRangeAdvancedComponent>;
describe('SearchDateRangeComponent', () => {
let component: SearchDateRangeComponent;
let fixture: ComponentFixture<SearchDateRangeComponent>;
const startDateSampleValue = parse('05-Jun-23', 'dd-MMM-yy', new Date());
const endDateSampleValue = parse('07-Jun-23', 'dd-MMM-yy', new Date());
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [SearchDateRangeAdvancedComponent],
declarations: [SearchDateRangeComponent],
imports: [
TranslateModule.forRoot(),
ContentTestingModule
]
});
fixture = TestBed.createComponent(SearchDateRangeAdvancedComponent);
fixture = TestBed.createComponent(SearchDateRangeComponent);
component = fixture.componentInstance;
component.field = 'test-field';
component.field = 'test-field';
component.dateFormat = 'dd-MMM-yy';
component.maxDate = 'today';
component.form.setValue({
@ -64,7 +64,7 @@ describe('SearchDateRangeAdvancedComponent', () => {
};
const selectDropdownOption = (itemId: string) => {
const matSelect = fixture.debugElement.query(By.css('[data-automation-id="date-range-advanced-in-last-dropdown"]')).nativeElement;
const matSelect = fixture.debugElement.query(By.css('[data-automation-id="date-range-in-last-dropdown"]')).nativeElement;
matSelect.click();
fixture.detectChanges();
const matOption = fixture.debugElement.query(By.css(`[data-automation-id="${itemId}"]`)).nativeElement;
@ -131,20 +131,20 @@ describe('SearchDateRangeAdvancedComponent', () => {
it('should not be able to set zero or negative values in In the last input field', () => {
component.form.controls.dateRangeType.setValue(component.DateRangeType.IN_LAST);
fixture.detectChanges();
enterValueInInputFieldAndTriggerEvent('date-range-advanced-in-last-input', '-5');
let inLastInputFieldValue = getElementBySelector('[data-automation-id="date-range-advanced-in-last-input"]').value;
enterValueInInputFieldAndTriggerEvent('date-range-in-last-input', '-5');
let inLastInputFieldValue = getElementBySelector('[data-automation-id="date-range-in-last-input"]').value;
expect(inLastInputFieldValue).toBe('5');
enterValueInInputFieldAndTriggerEvent('date-range-advanced-in-last-input', '0');
inLastInputFieldValue = getElementBySelector('[data-automation-id="date-range-advanced-in-last-input"]').value;
enterValueInInputFieldAndTriggerEvent('date-range-in-last-input', '0');
inLastInputFieldValue = getElementBySelector('[data-automation-id="date-range-in-last-input"]').value;
expect(inLastInputFieldValue).toBe('');
});
it('should give an invalid date error when manually setting a start date and an end date that are not in the correct format', () => {
component.form.controls.dateRangeType.setValue(component.DateRangeType.BETWEEN);
fixture.detectChanges();
enterValueInInputFieldAndTriggerEvent('date-range-advanced-between-start-input', 'invalid-date-input', 'change');
enterValueInInputFieldAndTriggerEvent('date-range-advanced-between-end-input', 'invalid-date-input', 'change');
enterValueInInputFieldAndTriggerEvent('date-range-between-start-input', 'invalid-date-input', 'change');
enterValueInInputFieldAndTriggerEvent('date-range-between-end-input', 'invalid-date-input', 'change');
expect(component.form.controls.betweenStartDate.errors.invalidDate).toBeTrue();
expect(component.form.controls.betweenEndDate.errors.invalidDate).toBeTrue();
});
@ -154,7 +154,7 @@ describe('SearchDateRangeAdvancedComponent', () => {
fixture.detectChanges();
component.form.controls.betweenEndDate.setValue(new Date());
const startDate = format(addDays(component.form.controls.betweenEndDate.value, 3), component.dateFormat);
enterValueInInputFieldAndTriggerEvent('date-range-advanced-between-start-input', startDate, 'change');
enterValueInInputFieldAndTriggerEvent('date-range-between-start-input', startDate, 'change');
expect(component.form.controls.betweenEndDate.errors.invalidDate).toBeTrue();
});
@ -163,7 +163,7 @@ describe('SearchDateRangeAdvancedComponent', () => {
fixture.detectChanges();
component.form.controls.betweenStartDate.setValue(new Date());
const endDate = format(subDays(component.form.controls.betweenStartDate.value, 3), component.dateFormat);
enterValueInInputFieldAndTriggerEvent('date-range-advanced-between-end-input', endDate, 'change');
enterValueInInputFieldAndTriggerEvent('date-range-between-end-input', endDate, 'change');
expect(component.form.controls.betweenEndDate.errors.invalidDate).toBeTrue();
});
@ -171,16 +171,28 @@ describe('SearchDateRangeAdvancedComponent', () => {
component.form.controls.dateRangeType.setValue(component.DateRangeType.BETWEEN);
fixture.detectChanges();
const endDate = format(addDays(component.convertedMaxDate, 3), component.dateFormat);
enterValueInInputFieldAndTriggerEvent('date-range-advanced-between-end-input', endDate, 'change');
enterValueInInputFieldAndTriggerEvent('date-range-between-end-input', endDate, 'change');
expect(component.form.controls.betweenEndDate.errors.invalidDate).toBeTrue();
});
it('should not be able to select a date after the max date when selecting the BETWEEN option', async () => {
component.form.controls.dateRangeType.setValue(component.DateRangeType.BETWEEN);
component.maxDate = 'today';
fixture.detectChanges();
getElementBySelector('[data-automation-id="date-range-between-datepicker-toggle"]').click();
fixture.detectChanges();
const afterDate = format(addDays(new Date(), 1), 'MMM d, yyyy');
const afterDateItem = document.querySelector(`.mat-calendar-body-cell[aria-label="${afterDate}"]`);
expect(afterDateItem.getAttribute('aria-disabled')).toBeTruthy();
});
it('should emit valid as false when form is invalid', () => {
spyOn(component.valid, 'emit');
component.form.controls.dateRangeType.setValue(component.DateRangeType.IN_LAST);
fixture.detectChanges();
enterValueInInputFieldAndTriggerEvent('date-range-advanced-in-last-input', '');
selectDropdownOption('date-range-advanced-in-last-option-weeks');
enterValueInInputFieldAndTriggerEvent('date-range-in-last-input', '');
selectDropdownOption('date-range-in-last-option-weeks');
expect(component.valid.emit).toHaveBeenCalledWith(false);
component.form.controls.dateRangeType.setValue(component.DateRangeType.BETWEEN);
@ -192,8 +204,8 @@ describe('SearchDateRangeAdvancedComponent', () => {
spyOn(component.valid, 'emit');
component.form.controls.dateRangeType.setValue(component.DateRangeType.IN_LAST);
fixture.detectChanges();
enterValueInInputFieldAndTriggerEvent('date-range-advanced-in-last-input', '5');
selectDropdownOption('date-range-advanced-in-last-option-weeks');
enterValueInInputFieldAndTriggerEvent('date-range-in-last-input', '5');
selectDropdownOption('date-range-in-last-option-weeks');
expect(component.valid.emit).toHaveBeenCalledWith(true);
component.form.controls.dateRangeType.setValue(component.DateRangeType.BETWEEN);
@ -213,10 +225,10 @@ describe('SearchDateRangeAdvancedComponent', () => {
betweenStartDate: undefined,
betweenEndDate: undefined
};
let dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-advanced-in-last"] .mat-radio-input');
let dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-in-last"] .mat-radio-input');
dateRangeTypeRadioButton.click();
selectDropdownOption('date-range-advanced-in-last-option-weeks');
enterValueInInputFieldAndTriggerEvent('date-range-advanced-in-last-input', '');
selectDropdownOption('date-range-in-last-option-weeks');
enterValueInInputFieldAndTriggerEvent('date-range-in-last-input', '');
expect(component.changed.emit).not.toHaveBeenCalledWith(value);
component.form.patchValue({
@ -234,7 +246,7 @@ describe('SearchDateRangeAdvancedComponent', () => {
betweenStartDate: '',
betweenEndDate: ''
};
dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-advanced-between"] .mat-radio-input');
dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-between"] .mat-radio-input');
dateRangeTypeRadioButton.click();
fixture.detectChanges();
expect(component.changed.emit).not.toHaveBeenCalledWith(value);
@ -249,10 +261,10 @@ describe('SearchDateRangeAdvancedComponent', () => {
betweenStartDate: null,
betweenEndDate: null
};
let dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-advanced-in-last"] .mat-radio-input');
let dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-in-last"] .mat-radio-input');
dateRangeTypeRadioButton.click();
selectDropdownOption('date-range-advanced-in-last-option-weeks');
enterValueInInputFieldAndTriggerEvent('date-range-advanced-in-last-input', '5');
selectDropdownOption('date-range-in-last-option-weeks');
enterValueInInputFieldAndTriggerEvent('date-range-in-last-input', '5');
fixture.detectChanges();
expect(component.changed.emit).toHaveBeenCalledWith(value);
@ -271,7 +283,7 @@ describe('SearchDateRangeAdvancedComponent', () => {
betweenStartDate: startDateSampleValue,
betweenEndDate: endDateSampleValue
};
dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-advanced-between"] .mat-radio-input');
dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-between"] .mat-radio-input');
dateRangeTypeRadioButton.click();
component.betweenStartDateFormControl.setValue(startDateSampleValue);
component.betweenEndDateFormControl.setValue(endDateSampleValue);

18
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.ts → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.ts
View File

@ -22,7 +22,7 @@ import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatDateFormats } from '
import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter';
import { InLastDateType } from './in-last-date-type';
import { DateRangeType } from './date-range-type';
import { SearchDateRangeAdvanced } from './search-date-range-advanced';
import { SearchDateRange } from './search-date-range';
import { FormBuilder, UntypedFormControl, Validators } from '@angular/forms';
import { takeUntil } from 'rxjs/operators';
import { UserPreferencesService, UserPreferenceValues, DateFnsUtils } from '@alfresco/adf-core';
@ -30,17 +30,17 @@ import { UserPreferencesService, UserPreferenceValues, DateFnsUtils } from '@alf
const DEFAULT_DATE_DISPLAY_FORMAT = 'dd-MMM-yy';
@Component({
selector: 'adf-search-date-range-advanced',
templateUrl: './search-date-range-advanced.component.html',
styleUrls: ['./search-date-range-advanced.component.scss'],
selector: 'adf-search-date-range',
templateUrl: './search-date-range.component.html',
styleUrls: ['./search-date-range.component.scss'],
providers: [
{ provide: DateAdapter, useClass: DateFnsAdapter, deps: [ MAT_DATE_LOCALE ] },
{ provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS }
],
encapsulation: ViewEncapsulation.None,
host: {class: 'adf-search-date-range-advanced'}
host: {class: 'adf-search-date-range'}
})
export class SearchDateRangeAdvancedComponent implements OnInit, OnDestroy {
export class SearchDateRangeComponent implements OnInit, OnDestroy {
@Input()
dateFormat = DEFAULT_DATE_DISPLAY_FORMAT;
@Input()
@ -48,18 +48,18 @@ export class SearchDateRangeAdvancedComponent implements OnInit, OnDestroy {
@Input()
field: string;
@Input()
set initialValue(value: SearchDateRangeAdvanced) {
set initialValue(value: SearchDateRange) {
if (value) {
this.form.patchValue(value);
}
}
@Output()
changed = new EventEmitter<Partial<SearchDateRangeAdvanced>>();
changed = new EventEmitter<Partial<SearchDateRange>>();
@Output()
valid = new EventEmitter<boolean>();
form = this.formBuilder.group<SearchDateRangeAdvanced>({
form = this.formBuilder.group<SearchDateRange>({
dateRangeType: DateRangeType.ANY,
inLastValueType: InLastDateType.DAYS,
inLastValue: undefined,

2
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.ts → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.ts
View File

@ -18,7 +18,7 @@
import { DateRangeType } from './date-range-type';
import { InLastDateType } from './in-last-date-type';
export interface SearchDateRangeAdvanced {
export interface SearchDateRange {
dateRangeType: DateRangeType;
inLastValueType?: InLastDateType;
inLastValue?: string;

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

@ -1,49 +0,0 @@
<form [formGroup]="form" novalidate (ngSubmit)="apply(form.value, form.valid)">
<mat-form-field>
<mat-label>{{ 'SEARCH.FILTER.RANGE.SELECT-FROM-DATE' | translate }}</mat-label>
<input matInput
(input)="forcePlaceholder($event)"
[formControl]="from"
[errorStateMatcher]="matcher"
placeholder="{{ 'SEARCH.FILTER.RANGE.FROM-DATE' | translate }}"
[attr.aria-label]="'SEARCH.FILTER.RANGE.FROM-DATE' | translate"
[matDatepicker]="fromDatepicker"
[max]="fromMaxDate"
(dateChange)="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>
<mat-datepicker #fromDatepicker color="accent"></mat-datepicker>
<mat-error *ngIf="from.invalid" data-automation-id="date-range-from-error">
{{ getFromValidationMessage() | translate: { requiredFormat: datePickerFormat } }}
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>{{ 'SEARCH.FILTER.RANGE.SELECT-TO-DATE' | translate }}</mat-label>
<input matInput
(input)="forcePlaceholder($event)"
[formControl]="to"
[errorStateMatcher]="matcher"
placeholder="{{ 'SEARCH.FILTER.RANGE.TO-DATE' | translate }}"
[attr.aria-label]="'SEARCH.FILTER.RANGE.TO-DATE' | translate"
[matDatepicker]="toDatepicker"
[min]="from.value"
[max]="maxDate"
(dateChange)="onChangedHandler($event, to)"
data-automation-id="date-range-to-input">
<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: datePickerFormat } }}
</mat-error>
</mat-form-field>
<div class="adf-facet-buttons adf-facet-buttons--topSpace" *ngIf="!settings?.hideDefaultAction">
<button mat-button color="primary" type="button" (click)="clear()" data-automation-id="date-range-clear-btn">
{{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
</button>
<button mat-button color="primary" type="submit" [disabled]="!form.valid" data-automation-id="date-range-apply-btn">
{{ 'SEARCH.FILTER.ACTIONS.APPLY' | translate }}
</button>
</div>
</form>

5
lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.scss
View File

@ -1,5 +0,0 @@
.adf-search-date-range > form {
display: inline-flex;
flex-direction: column;
width: 100%;
}

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

@ -1,267 +0,0 @@
/*!
* @license
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { SearchDateRangeComponent } from './search-date-range.component';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ContentTestingModule } from '../../../testing/content.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { startOfDay, endOfDay, isValid, addDays, format } from 'date-fns';
describe('SearchDateRangeComponent', () => {
let fixture: ComponentFixture<SearchDateRangeComponent>;
let component: SearchDateRangeComponent;
const dateFormatFixture = 'dd-MMM-yy';
const fromDate = new Date('2016-10-16');
const toDate = new Date('2017-10-16');
beforeEach(() => {
TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), ContentTestingModule]
});
fixture = TestBed.createComponent(SearchDateRangeComponent);
component = fixture.componentInstance;
});
afterEach(() => fixture.destroy());
const getFromInput = () => fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"]');
const getToInput = () => fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-to-input"]');
it('should setup form elements on init', () => {
fixture.detectChanges();
expect(component.from).toBeDefined();
expect(component.to).toBeDefined();
expect(component.form).toBeDefined();
});
it('should setup form control with formatted valid date on change', () => {
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture };
fixture.detectChanges();
const date = new Date('20-feb-18');
expect(isValid(date)).toBeTrue();
component.onChangedHandler({ value: date } as MatDatepickerInputEvent<Date>, component.from);
expect(component.from.value.toString()).toEqual(date.toString());
});
it('should NOT setup form control with invalid date on change', () => {
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture };
fixture.detectChanges();
const date = new Date('20.f.18');
expect(isValid(date)).toBeFalse();
component.onChangedHandler({ value: date } as MatDatepickerInputEvent<Date>, component.from);
expect(component.from.value).not.toEqual(date);
});
it('should reset form', () => {
fixture.detectChanges();
component.form.setValue({ from: fromDate, to: toDate });
expect(component.from.value).toEqual(fromDate);
expect(component.to.value).toEqual(toDate);
component.reset();
expect(component.from.value).toBeNull();
expect(component.to.value).toBeNull();
expect(component.form.value).toEqual({ from: null, to: null });
});
it('should reset fromMaxDate on reset', () => {
fixture.detectChanges();
component.fromMaxDate = fromDate;
component.reset();
expect(component.fromMaxDate).toEqual(undefined);
});
it('should update query builder on reset', () => {
const context: any = {
queryFragments: {
createdDateRange: 'query'
},
update: () => {}
};
component.id = 'createdDateRange';
component.context = context;
spyOn(context, 'update').and.stub();
fixture.detectChanges();
component.reset();
expect(context.queryFragments.createdDateRange).toEqual('');
expect(context.update).toHaveBeenCalled();
});
it('should update query builder on value changes', () => {
const context: any = {
queryFragments: {},
update: () => {}
};
component.id = 'createdDateRange';
component.context = context;
component.settings = { field: 'cm:created' };
spyOn(context, 'update').and.stub();
fixture.detectChanges();
component.apply(
{
from: fromDate,
to: toDate
},
true
);
const startDate = startOfDay(fromDate).toISOString();
const endDate = endOfDay(toDate).toISOString();
const expectedQuery = `cm:created:['${startDate}' TO '${endDate}']`;
expect(context.queryFragments[component.id]).toEqual(expectedQuery);
expect(context.update).toHaveBeenCalled();
});
it('should show date-format error when Invalid found', async () => {
fixture.detectChanges();
const input = getFromInput();
input.value = '10-f-18';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(component.getFromValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.INVALID-DATE');
});
it('should hide date-format error when correcting input', async () => {
fixture.detectChanges();
const input = getFromInput();
input.value = '10-f-18';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(component.getFromValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.INVALID-DATE');
input.value = '10-10-2018';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(component.getFromValidationMessage()).toEqual('');
});
it('should show error for max date constraint', async () => {
component.settings = { field: 'cm:created', maxDate: 'today' };
fixture.detectChanges();
const input = getFromInput();
input.value = format(addDays(new Date(), 1), 'dd-MM-yyyy');
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(component.getFromValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.BEYOND-MAX-DATE');
});
it('should show error for required constraint', async () => {
fixture.detectChanges();
const fromInput = getFromInput();
fromInput.value = '';
fromInput.dispatchEvent(new Event('input'));
const toInput = getToInput();
toInput.value = '';
toInput.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(component.getFromValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.REQUIRED-VALUE');
expect(component.getToValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.REQUIRED-VALUE');
});
it('should show error for incorrect date range', async () => {
fixture.detectChanges();
const fromInput = getFromInput();
fromInput.value = '11-10-2018';
fromInput.dispatchEvent(new Event('input'));
const toInput = getToInput();
toInput.value = '10-10-2018';
toInput.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(component.getFromValidationMessage()).toEqual('');
expect(component.getToValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.NO-DAYS');
});
it('should not show date-format error when valid found', async () => {
fixture.detectChanges();
const input = getFromInput();
input.value = '10-10-2018';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(component.getFromValidationMessage()).toEqual('');
});
it('should have no maximum date by default', async () => {
fixture.detectChanges();
await fixture.whenStable();
expect(component.maxDate).toBeUndefined();
});
it('should be able to set a fixed maximum date', async () => {
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture, maxDate: '10-Mar-20' };
fixture.detectChanges();
const expected = endOfDay(new Date(2020, 2, 10));
expect(component.maxDate).toEqual(expected);
});
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 = endOfDay(new Date());
expect(component.maxDate).toEqual(today);
});
});

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

@ -1,240 +0,0 @@
/*!
* @license
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import { ADF_DATE_FORMATS, AdfDateFnsAdapter } from '@alfresco/adf-core';
import { SearchWidget } from '../../models/search-widget.interface';
import { SearchWidgetSettings } from '../../models/search-widget-settings.interface';
import { SearchQueryBuilderService } from '../../services/search-query-builder.service';
import { LiveErrorStateMatcher } from '../../forms/live-error-state-matcher';
import { Subject } from 'rxjs';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { startOfDay, endOfDay, isBefore, isValid as isValidDate } from 'date-fns';
export interface DateRangeValue {
from: string;
to: string;
}
const DEFAULT_FORMAT_DATE: string = 'DD/MM/YYYY';
interface DateRangeForm {
from: FormControl<Date>;
to: FormControl<Date>;
}
@Component({
selector: 'adf-search-date-range',
templateUrl: './search-date-range.component.html',
styleUrls: ['./search-date-range.component.scss'],
providers: [
{ provide: MAT_DATE_FORMATS, useValue: ADF_DATE_FORMATS },
{ provide: DateAdapter, useClass: AdfDateFnsAdapter }
],
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-search-date-range' }
})
export class SearchDateRangeComponent implements SearchWidget, OnInit {
from: FormControl<Date>;
to: FormControl<Date>;
form: FormGroup<DateRangeForm>;
matcher = new LiveErrorStateMatcher();
id: string;
settings?: SearchWidgetSettings;
context?: SearchQueryBuilderService;
datePickerFormat: string;
maxDate: Date;
fromMaxDate: Date;
isActive = false;
startValue: any;
enableChangeUpdate: boolean;
displayValue$ = new Subject<string>();
constructor(private dateAdapter: DateAdapter<Date>) {}
getFromValidationMessage(): string {
return this.from.hasError('invalidOnChange') || this.hasParseError(this.from)
? 'SEARCH.FILTER.VALIDATION.INVALID-DATE'
: this.from.hasError('matDatepickerMax')
? 'SEARCH.FILTER.VALIDATION.BEYOND-MAX-DATE'
: this.from.hasError('required')
? 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE'
: '';
}
getToValidationMessage(): string {
return this.to.hasError('invalidOnChange') || this.hasParseError(this.to)
? 'SEARCH.FILTER.VALIDATION.INVALID-DATE'
: this.to.hasError('matDatepickerMin')
? 'SEARCH.FILTER.VALIDATION.NO-DAYS'
: this.to.hasError('matDatepickerMax')
? 'SEARCH.FILTER.VALIDATION.BEYOND-MAX-DATE'
: this.to.hasError('required')
? 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE'
: '';
}
ngOnInit() {
this.datePickerFormat = this.settings?.dateFormat ? this.settings.dateFormat : DEFAULT_FORMAT_DATE;
const customDateAdapter = this.dateAdapter as AdfDateFnsAdapter;
customDateAdapter.displayFormat = this.datePickerFormat;
const validators = Validators.compose([Validators.required]);
if (this.settings?.maxDate) {
if (this.settings.maxDate === 'today') {
this.maxDate = endOfDay(this.dateAdapter.today());
} else {
this.maxDate = endOfDay(this.dateAdapter.parse(this.settings.maxDate, this.datePickerFormat));
}
}
if (this.startValue) {
const splitValue = this.startValue.split('||');
const fromValue = this.dateAdapter.parse(splitValue[0], this.datePickerFormat);
const toValue = this.dateAdapter.parse(splitValue[1], this.datePickerFormat);
this.from = new FormControl(fromValue, validators);
this.to = new FormControl(toValue, validators);
} else {
this.from = new FormControl(null, validators);
this.to = new FormControl(null, validators);
}
this.form = new FormGroup({
from: this.from,
to: this.to
});
this.setFromMaxDate();
this.enableChangeUpdate = this.settings?.allowUpdateOnChange ?? true;
}
apply(model: Partial<{ from: Date; to: Date }>, isValid: boolean) {
if (isValid && this.id && this.context && this.settings && this.settings.field) {
this.isActive = true;
const start = startOfDay(model.from).toISOString();
const end = endOfDay(model.to).toISOString();
this.context.queryFragments[this.id] = `${this.settings.field}:['${start}' TO '${end}']`;
this.updateDisplayValue();
this.context.update();
}
}
submitValues() {
this.apply(this.form.value, this.form.valid);
}
hasValidValue(): boolean {
return this.form.valid;
}
getCurrentValue(): DateRangeValue {
return {
from: this.dateAdapter.format(this.form.value.from, this.datePickerFormat),
to: this.dateAdapter.format(this.form.value.from, this.datePickerFormat)
};
}
updateDisplayValue(): void {
if (this.form.invalid || this.form.pristine) {
this.displayValue$.next('');
} else {
this.displayValue$.next(
`${this.dateAdapter.format(this.form.value.from, this.datePickerFormat)} - ${this.dateAdapter.format(
this.form.value.to,
this.datePickerFormat
)}`
);
}
}
setValue(parsedDate: string) {
const splitValue = parsedDate.split('||');
const fromValue = this.dateAdapter.parse(splitValue[0], this.datePickerFormat);
const toValue = this.dateAdapter.parse(splitValue[1], this.datePickerFormat);
this.from.setValue(fromValue);
this.from.markAsDirty();
this.from.markAsTouched();
this.to.setValue(toValue);
this.to.markAsDirty();
this.to.markAsTouched();
this.submitValues();
}
clear() {
this.isActive = false;
this.form.reset({
from: null,
to: null
});
if (this.id && this.context) {
this.context.queryFragments[this.id] = '';
if (this.enableChangeUpdate) {
this.updateQuery();
}
}
this.setFromMaxDate();
}
reset() {
this.clear();
this.updateQuery();
}
private updateQuery() {
if (this.id && this.context) {
this.updateDisplayValue();
this.context.update();
}
}
onChangedHandler(event: MatDatepickerInputEvent<Date>, formControl: FormControl) {
const inputValue = event.value;
if (isValidDate(inputValue)) {
formControl.setValue(inputValue);
} else if (inputValue) {
formControl.setErrors({
invalidOnChange: true
});
}
this.setFromMaxDate();
}
hasParseError(formControl: FormControl): boolean {
return formControl.hasError('matDatepickerParse') && formControl.getError('matDatepickerParse').text;
}
forcePlaceholder(event: any) {
event.srcElement.click();
}
setFromMaxDate() {
this.fromMaxDate = !this.to.value || (this.maxDate && isBefore(this.maxDate, this.to.value)) ? this.maxDate : this.to.value;
}
}

4
lib/content-services/src/lib/search/public-api.ts
View File

@ -47,7 +47,6 @@ export * from './components/search.component';
export * from './components/search-panel/search-panel.component';
export * from './components/search-check-list/search-check-list.component';
export * from './components/search-chip-list/search-chip-list.component';
export * from './components/search-date-range/search-date-range.component';
export * from './components/search-filter/search-filter.component';
export * from './components/search-filter-container/search-filter-container.component';
export * from './components/search-number-range/search-number-range.component';
@ -63,7 +62,8 @@ export * from './components/search-filter-chips/search-filter-chips.component';
export * from './components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component';
export * from './components/search-facet-field/search-facet-field.component';
export * from './components/search-logical-filter/search-logical-filter.component';
export * from './components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component';
export * from './components/search-date-range-tabbed/search-date-range/search-date-range.component';
export * from './components/search-date-range-tabbed/search-date-range-tabbed.component';
export * from './components/search-filter-tabbed/search-filter-tabbed.component';
export * from './components/reset-search.directive';
export * from './components/search-chip-autocomplete-input/search-chip-autocomplete-input.component';

14
lib/content-services/src/lib/search/search.module.ts
View File

@ -37,7 +37,6 @@ import { SearchSliderComponent } from './components/search-slider/search-slider.
import { SearchNumberRangeComponent } from './components/search-number-range/search-number-range.component';
import { SearchPanelComponent } from './components/search-panel/search-panel.component';
import { SearchCheckListComponent } from './components/search-check-list/search-check-list.component';
import { SearchDateRangeComponent } from './components/search-date-range/search-date-range.component';
import { SearchSortingPickerComponent } from './components/search-sorting-picker/search-sorting-picker.component';
import { SEARCH_QUERY_SERVICE_TOKEN } from './search-query-service.token';
import { SearchQueryBuilderService } from './services/search-query-builder.service';
@ -53,8 +52,8 @@ import { SearchLogicalFilterComponent } from './components/search-logical-filter
import { ResetSearchDirective } from './components/reset-search.directive';
import { SearchPropertiesComponent } from './components/search-properties/search-properties.component';
import { SearchFilterTabbedComponent } from './components/search-filter-tabbed/search-filter-tabbed.component';
import { SearchDateRangeAdvancedComponent } from './components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component';
import { SearchDateRangeAdvancedTabbedComponent } from './components/search-date-range-advanced-tabbed/search-date-range-advanced-tabbed.component';
import { SearchDateRangeComponent } from './components/search-date-range-tabbed/search-date-range/search-date-range.component';
import { SearchDateRangeTabbedComponent } from './components/search-date-range-tabbed/search-date-range-tabbed.component';
import { SearchFilterTabDirective } from './components/search-filter-tabbed/search-filter-tab.directive';
import { SearchFacetChipTabbedComponent } from './components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component';
import { SearchFacetTabbedContentComponent } from './components/search-filter-chips/search-facet-chip-tabbed/search-facet-tabbed-content.component';
@ -84,7 +83,6 @@ import { SearchFacetTabbedContentComponent } from './components/search-filter-ch
SearchNumberRangeComponent,
SearchPanelComponent,
SearchCheckListComponent,
SearchDateRangeComponent,
SearchDatetimeRangeComponent,
SearchSortingPickerComponent,
SearchFilterContainerComponent,
@ -98,8 +96,8 @@ import { SearchFacetTabbedContentComponent } from './components/search-filter-ch
ResetSearchDirective,
SearchPropertiesComponent,
SearchFilterTabbedComponent,
SearchDateRangeAdvancedComponent,
SearchDateRangeAdvancedTabbedComponent,
SearchDateRangeComponent,
SearchDateRangeTabbedComponent,
SearchFilterTabDirective,
SearchFacetChipTabbedComponent,
SearchFacetTabbedContentComponent
@ -119,7 +117,6 @@ import { SearchFacetTabbedContentComponent } from './components/search-filter-ch
SearchNumberRangeComponent,
SearchPanelComponent,
SearchCheckListComponent,
SearchDateRangeComponent,
SearchDatetimeRangeComponent,
SearchSortingPickerComponent,
SearchFilterContainerComponent,
@ -129,7 +126,8 @@ import { SearchFacetTabbedContentComponent } from './components/search-filter-ch
SearchFacetFieldComponent,
SearchLogicalFilterComponent,
SearchFilterTabbedComponent,
SearchDateRangeAdvancedComponent,
SearchDateRangeComponent,
SearchDateRangeTabbedComponent,
ResetSearchDirective,
SearchFacetChipTabbedComponent,
SearchFacetTabbedContentComponent

8
lib/content-services/src/lib/search/services/search-filter.service.ts
View File

@ -21,14 +21,11 @@ import { SearchRadioComponent } from '../components/search-radio/search-radio.co
import { SearchSliderComponent } from '../components/search-slider/search-slider.component';
import { SearchNumberRangeComponent } from '../components/search-number-range/search-number-range.component';
import { SearchCheckListComponent } from '../components/search-check-list/search-check-list.component';
import { SearchDateRangeComponent } from '../components/search-date-range/search-date-range.component';
import { SearchDatetimeRangeComponent } from '../components/search-datetime-range/search-datetime-range.component';
import { SearchLogicalFilterComponent } from '../components/search-logical-filter/search-logical-filter.component';
import { SearchFilterAutocompleteChipsComponent } from '../components/search-filter-autocomplete-chips/search-filter-autocomplete-chips.component';
import { SearchPropertiesComponent } from '../components/search-properties/search-properties.component';
import {
SearchDateRangeAdvancedTabbedComponent
} from '../components/search-date-range-advanced-tabbed/search-date-range-advanced-tabbed.component';
import { SearchDateRangeTabbedComponent } from '../components/search-date-range-tabbed/search-date-range-tabbed.component';
@Injectable({
providedIn: 'root'
@ -45,11 +42,10 @@ export class SearchFilterService {
properties: SearchPropertiesComponent,
'number-range': SearchNumberRangeComponent,
'check-list': SearchCheckListComponent,
'date-range': SearchDateRangeComponent,
'datetime-range': SearchDatetimeRangeComponent,
'logical-filter': SearchLogicalFilterComponent,
'autocomplete-chips': SearchFilterAutocompleteChipsComponent,
'date-range-advanced': SearchDateRangeAdvancedTabbedComponent
'date-range': SearchDateRangeTabbedComponent
};
}

141
lib/testing/src/lib/protractor/content-services/pages/search/date-range-filter.page.ts
View File

@ -1,141 +0,0 @@
/*!
* @license
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { protractor, ElementFinder, $ } from 'protractor';
import { DatePickerCalendarPage } from '../../../core/pages/material/date-picker-calendar.page';
import { BrowserVisibility } from '../../../core/utils/browser-visibility';
import { BrowserActions } from '../../../core/utils/browser-actions';
export class DateRangeFilterPage {
fromField = '[data-automation-id="date-range-from-input"]';
fromDateToggle = '[data-automation-id="date-range-from-date-toggle"]';
toField = '[data-automation-id="date-range-to-input"]';
toDateToggle = '[data-automation-id="date-range-to-date-toggle"]';
applyButton = '[data-automation-id="date-range-apply-btn"]';
clearButton = '[data-automation-id="date-range-clear-btn"]';
fromErrorMessage = '[data-automation-id="date-range-from-error"]';
toErrorMessage = '[data-automation-id="date-range-to-error"]';
filter: ElementFinder;
constructor(filter: ElementFinder) {
this.filter = filter;
}
async getFromDate(): Promise<string> {
return BrowserActions.getInputValue(this.filter.$(this.fromField));
}
async putFromDate(date): Promise<void> {
await this.checkFromFieldIsDisplayed();
await BrowserActions.clearSendKeys(this.filter.$(this.fromField), date);
await this.filter.$(this.fromField).sendKeys(protractor.Key.ENTER);
}
async getFromCalendarSelectedDate(): Promise<string> {
const datePicker = await this.openFromDatePicker();
const selectedDate = await datePicker.getSelectedDate();
await datePicker.closeDatePicker();
return selectedDate;
}
async openFromDatePicker(): Promise<DatePickerCalendarPage> {
await BrowserActions.click(this.filter.$(this.fromDateToggle));
const datePicker = new DatePickerCalendarPage();
await datePicker.checkDatePickerIsDisplayed();
return datePicker;
}
async openToDatePicker(): Promise<DatePickerCalendarPage> {
await BrowserActions.click(this.filter.$(this.toDateToggle));
const datePicker = new DatePickerCalendarPage();
await datePicker.checkDatePickerIsDisplayed();
return datePicker;
}
async clickFromField(): Promise<void> {
await BrowserActions.click(this.filter.$(this.fromField));
}
async checkFromErrorMessageIsDisplayed(msg: string): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.fromErrorMessage));
const text = await BrowserActions.getText(this.filter.$(this.fromErrorMessage));
await expect(text).toEqual(msg);
}
async checkFromErrorMessageIsNotDisplayed(): Promise<void> {
await BrowserVisibility.waitUntilElementIsNotVisible(this.filter.$(this.fromErrorMessage));
}
async checkFromFieldIsDisplayed(): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.fromField));
}
async checkFromDateToggleIsDisplayed(): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.fromDateToggle));
}
async getToDate(): Promise<string> {
return BrowserActions.getInputValue(this.filter.$(this.toField));
}
async putToDate(date): Promise<void> {
await this.checkToFieldIsDisplayed();
await BrowserActions.clearSendKeys($(this.toField), date);
await this.filter.$(this.toField).sendKeys(protractor.Key.ENTER);
}
async clickToField(): Promise<void> {
await BrowserActions.click(this.filter.$(this.toField));
}
async checkToErrorMessageIsDisplayed(msg): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.toErrorMessage));
const text = await BrowserActions.getText(this.filter.$(this.toErrorMessage));
await expect(text).toEqual(msg);
}
async checkToFieldIsDisplayed(): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.toField));
}
async checkToDateToggleIsDisplayed(): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.toDateToggle));
}
async clickApplyButton(): Promise<void> {
await BrowserActions.click(this.filter.$(this.applyButton));
}
async checkApplyButtonIsDisplayed(): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.applyButton));
}
async checkApplyButtonIsEnabled(): Promise<void> {
const isEnabled = await this.filter.$(this.applyButton).isEnabled();
await expect(isEnabled).toBe(true);
}
async checkApplyButtonIsDisabled(): Promise<void> {
const isEnabled = await this.filter.$(this.applyButton).isEnabled();
await expect(isEnabled).toBe(false);
}
async checkClearButtonIsDisplayed(): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.clearButton));
}
}

1
lib/testing/src/lib/protractor/content-services/pages/search/public-api.ts
View File

@ -16,7 +16,6 @@
*/
export * from './search-categories.page';
export * from './date-range-filter.page';
export * from './number-range-filter.page';
export * from './search-check-list.page';
export * from './search-radio.page';

5
lib/testing/src/lib/protractor/content-services/pages/search/search-categories.page.ts
View File

@ -19,7 +19,6 @@ import { ElementFinder } from 'protractor';
import { SearchTextPage } from './search-text.page';
import { SearchCheckListPage } from './search-check-list.page';
import { SearchRadioPage } from './search-radio.page';
import { DateRangeFilterPage } from './date-range-filter.page';
import { NumberRangeFilterPage } from './number-range-filter.page';
import { SearchSliderPage } from './search-slider.page';
import { BrowserActions } from '../../../core/utils/browser-actions';
@ -39,10 +38,6 @@ export class SearchCategoriesPage {
return new SearchRadioPage(filter);
}
static dateRangeFilter(filter: ElementFinder): DateRangeFilterPage {
return new DateRangeFilterPage(filter);
}
static numberRangeFilter(filter: ElementFinder): NumberRangeFilterPage {
return new NumberRangeFilterPage(filter);
}