[ADF-2128] facet container component (#3094)

* (wip) facet container

* shaping out the API

* code lint fixes

* radiobox facet example

* fields selector facet

* search limits support

* scope locations facet example

* move custom search to 'search.query' config

* use facet fields and queries from the config file

* use facet filters

* use facet buckets in query

* preserve expanded/checked states

* code cleanup and binding fixes

* fix apis after rebase

* extract query builder into separate class

* code improvements

* full chip list (merge facet fields with queries)

* placeholder for range requests

* move search infrastructure to ADF core

* cleanup code

* auto-search on init

* move search components to the content services

* selected facets chip list

* split into separate components at ADF level

* move the rest of the implementation to ADF

* facet builder fixes and tests

* translation support for category names

* docs placeholders

* update language level

* unit tests and packaging updates

* fix after rebase

* remove fdescribe

* some docs on search settings

* rename components as per review

* simplify chip list as per review

* turn query builder into service

* improve search service, integrate old search results

* fix node selector integration

* move service to the top module

* update tests

* remove fdescribe

* update tests

* test fixes

* test fixes

* test updates

* fix tests

* code and test fixes

* remove fit

* fix tests

* fix tests

* remove obsolete test

* increase bundle threshold

* update docs to reflect PR changes

* fix docs
This commit is contained in:
Denys Vuika
2018-03-29 11:34:09 +01:00
committed by Eugenio Romano
parent d6f51c22aa
commit ed48994e67
59 changed files with 2328 additions and 183 deletions

View File

@@ -0,0 +1,13 @@
---
Added: v2.3.0
Status: Active
---
# Search Chip List Component
```html
<adf-search-chip-list [searchFilter]="searchFilter"></adf-search-chip-list>
<adf-search-filter #searchFilter></adf-search-filter>
```
![Selected Facets](../docassets/images/selected-facets.png)

View File

@@ -0,0 +1,154 @@
---
Added: v2.3.0
Status: Active
---
# Search Settings Component
Represents a main container component for custom search and faceted search settings.
## Usage example
```html
<adf-search-filter #settings></adf-search-filter>
```
The component is based on dynamically created Widgets to modify the resulting query and options,
and the `Query Builder` to build and execute the search queries.
## Query Builder Service
Stores information from all the custom search and faceted search widgets,
compiles and runs the final Search query.
The Query Builder is UI agnostic and does not rely on Angular components.
It is possible to reuse it with multiple component implementations.
Allows custom widgets to populate and edit the following parts of the resulting query:
- categories
- query fragments that form query expression
- include fields
- scope settings
- filter queries
- facet fields
- range queries
```ts
constructor(queryBuilder: QueryBuilderService) {
queryBuilder.updated.subscribe(query => {
this.queryBuilder.execute();
});
queryBuilder.executed.subscribe(data => {
this.onDataLoaded(data);
});
}
```
## Configuration
The configuration should be provided via the `search` entry in the `app.config.json` file.
Below is an example configuration:
```json
{
"search": {
"limits": {
"permissionEvaluationTime": null,
"permissionEvaluationCount": null
},
"filterQueries": [
{ "query": "TYPE:'cm:folder' OR TYPE:'cm:content'" },
{ "query": "NOT cm:creator:System" }
],
"facetFields": {
"facets": [
{ "field": "content.mimetype", "mincount": 1, "label": "Type" },
{ "field": "content.size", "mincount": 1, "label": "Size" },
{ "field": "creator", "mincount": 1, "label": "Creator" },
{ "field": "modifier", "mincount": 1, "label": "Modifier" }
]
},
"facetQueries": [
{ "query": "created:2018", "label": "Created This Year" },
{ "query": "content.mimetype", "label": "Type" },
{ "query": "content.size:[0 TO 10240]", "label": "Size: xtra small"},
{ "query": "content.size:[10240 TO 102400]", "label": "Size: small"},
{ "query": "content.size:[102400 TO 1048576]", "label": "Size: medium" },
{ "query": "content.size:[1048576 TO 16777216]", "label": "Size: large" },
{ "query": "content.size:[16777216 TO 134217728]", "label": "Size: xtra large" },
{ "query": "content.size:[134217728 TO MAX]", "label": "Size: XX large" }
],
"query": {
"categories": [
{
"id": "queryName",
"name": "Name",
"enabled": true,
"expanded": true,
"component": {
"selector": "adf-search-text",
"settings": {
"pattern": "cm:name:'(.*?)'",
"field": "cm:name",
"placeholder": "Enter the name"
}
}
}
]
}
}
}
```
## Categories
The Search Settings component and Query Builder require `categories` section provided within the configuration.
Categories are needed to build Widgets so that users can modify the search query at runtime. Every Category can be represented by a single Angular component, either simple or composite one.
```ts
export interface SearchCategory {
id: string;
name: string;
enabled: boolean;
expanded: boolean;
component: {
selector: string;
settings: SearchWidgetSettings;
};
}
```
The interface above also describes entries in the `search.query.categories` section for the `app.config.json`.
![Search Categories](../docassets/images/search-categories-01.png)
### Properties
For the property types please refer to the `SearchCategory` interface.
| Property | Description |
| --- | --- |
| id | Unique identifier of the category. Also used to access QueryBuilder customisations for a particular widget. |
| name | Public display name for the category. |
| enabled | Toggles category availability. Set to `false` if you want to exclude a category from processing. |
| expanded | Toggles the expanded state of the category. Use it |
| component.selector | The id of the Angular component selector to render the Category |
| component.settings | An object containing component specific settings. Put any properties needed for the target component. |
Every component can expect different set of settings.
For example Number editors may parse minimum and maximum values, while Text editors can support value formats or length constraints.
You can use `component.settings` to pass any information to your custom Widget using the following interface:
```ts
export interface SearchWidgetSettings {
field: string;
[indexer: string]: any;
}
```

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB