Skip to content

Commit

Permalink
ACS-6644 Updated config guide, added build example, fixed mistakes
Browse files Browse the repository at this point in the history
  • Loading branch information
g-jaskowski committed May 23, 2024
1 parent f2cfd68 commit 097751a
Show file tree
Hide file tree
Showing 13 changed files with 345 additions and 136 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
Title: Search check list component
Added: v2.4.0
Status: Active
Last reviewed: 2024-04-05
Last reviewed: 2024-05-13
---

# [Search check list component](../../../lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.ts "Defined in search-check-list.component.ts")

Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of 4 inputs representing logical conditions to form search query from.
Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of a list of checkboxes representing filters included in search query.

![Check list widget screenshot](../../docassets/images/search-check-list.png)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
Title: Search filter tabbed component
Added: v6.2.0
Status: Active
Last reviewed: 2023-07-10
Last reviewed: 2024-05-14
---

# [Search filter tabbed component](../../../lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.ts "Defined in search-filter-tabbed.component.ts")
Expand Down Expand Up @@ -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 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)
Expand Down
13 changes: 10 additions & 3 deletions docs/content-services/components/search-form.component.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,23 @@
Title: Search Form component
Added: v4.5.0
Status: Active
Last reviewed: 2021-06-11
Last reviewed: 2024-05-14
---

# [Search Form component](../../../lib/content-services/src/lib/search/components/search-form/search-form.component.ts "Defined in search-form.component.ts")

Implements a component consisting of a menu populated with search filter sets.

![Search Form screenshot](../../docassets/images/search-form-component.png)

## Basic usage

### In .html files
```html
<adf-search-form></adf-search-form>
```

### In app config
```json
{
"search": [
Expand All @@ -26,10 +34,9 @@ Last reviewed: 2021-06-11
}
```


## Details

This component pick a configuration for a search from the list of configuration.
This component allows user to choose between search filter sets specified in configuration.

## See also

Expand Down
2 changes: 1 addition & 1 deletion docs/content-services/components/search-input.component.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ user types `test`
user types `*`

```text
(cm:name:"**" OR cm:title:"**" OR cm:description:"**" OR TEXT:"**" OR TAG:"**")
(cm:name:"*" OR cm:title:"*" OR cm:description:"*" OR TEXT:"*" OR TAG:"*")
```

user types `one two`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
Title: Search number range component
Added: v2.4.0
Status: Active
Last reviewed: 2024-04-05
Last reviewed: 2024-05-03
---

# [Search number range component](../../../lib/content-services/src/lib/search/components/search-number-range/search-number-range.component.ts "Defined in search-number-range.component.ts")

Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of 4 inputs representing logical conditions to form search query from.
Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of 2 inputs accepting numerical values, representing start and end of a numerical parameter's range used as a search query parameter.

![Number Range Widget](../../docassets/images/search-number-range.png)

Expand Down
4 changes: 2 additions & 2 deletions docs/content-services/components/search-radio.component.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
Title: Search radio component
Added: v2.4.0
Status: Active
Last reviewed: 2024-04-05
Last reviewed: 2024-05-13
---

# [Search radio component](../../../lib/content-services/src/lib/search/components/search-radio/search-radio.component.ts "Defined in search-radio.component.ts")

Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of 4 inputs representing logical conditions to form search query from.
Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of a list of radio buttons representing filters included in search query.

![Radio Widget screenshot](../../docassets/images/search-radio.png)

Expand Down
4 changes: 2 additions & 2 deletions docs/content-services/components/search-slider.component.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
Title: Search slider component
Added: v2.4.0
Status: Active
Last reviewed: 2024-04-05
Last reviewed: 2024-05-13
---

# [Search slider component](../../../lib/content-services/src/lib/search/components/search-slider/search-slider.component.ts "Defined in search-slider.component.ts")

Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of 4 inputs representing logical conditions to form search query from.
Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of a slider for numerical parameter value selection used as a search query parameter.

![Slider Widget](../../docassets/images/search-slider.png)

Expand Down
4 changes: 2 additions & 2 deletions docs/content-services/components/search-text.component.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
Title: Search text component
Added: v2.4.0
Status: Active
Last reviewed: 2024-04-05
Last reviewed: 2024-05-13
---

# [Search text component](../../../lib/content-services/src/lib/search/components/search-text/search-text.component.ts "Defined in search-text.component.ts")

Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of 4 inputs representing logical conditions to form search query from.
Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of a input representing a value used in search query to specify field contents.

![Text Widget](../../docassets/images/search-text.png)

Expand Down
Binary file removed docs/docassets/images/search-facet-intervals.png
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/docassets/images/simple-search-example.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
170 changes: 170 additions & 0 deletions docs/user-guide/search-building.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
---
Title: Search Building
Added: 2024-05-17
---

# Search Building

This page covers the basics of creating a search page using components from this repository.

**Note:** Styling is covered only to a minimal necessary extent.

## Contents
- [Basic Implementation](#basic-implementation)
- [Used Components](#used-components)
- [Used Services](#used-services)
- [Template](#template)
- [Component](#component)
- [Search Configuration](#search-configuration)
- [Used Components](#used-components-1)
- [Template](#template-1)
- [Component](#component-1)

## Basic Implementation

Most basic search requires only three components to be included in the template.

Search is executed on *Enter* key press and the results are shown below.

![Simple Search](../docassets/images/simple-search-example.png)

For details of used properties, methods and events please refer to documentation pages covering the components and services, linked in the tables below and [See Also](#see-also) section.

### Used Components

|Name|Selector|Description|
|----|--------|-----------|
|[Search Input Component](../content-services/components/search-input.component.md)|`<adf-search-input>`|Manages, formats and emits user input on search.|
|[Document List Component](../content-services/components/document-list.component.md)|`<adf-document-list>`|Displays search results.|
|[Pagination Component](../core/components/pagination.component.md)|`<adf-pagination>`|Allows to alternate between search results pages.|

### Used Services

|Name|Description|
|----|-----------|
|[Search Query Builder Service](../content-services/services/search-query-builder.service.md)|Creates, formats and executes search query|

### Template

```html
<adf-search-input
[fields]="['cm:name', 'cm:title', 'cm:description', 'TEXT', 'TAG']"
(changed)="onSearchQueryChanged($event)"
>
</adf-search-input>

<adf-document-list style="overflow-y: auto;"
#documentList
[sortingMode]="'client'"
[node]="$any(data)"
>
</adf-document-list>

<adf-pagination
[target]="documentList"
(change)="onPaginationChanged($event)"
>
</adf-pagination>
```

### Component

```ts
@Component({
standalone: true,
imports: [SearchInputComponent, DocumentListModule, SearchModule, PaginationDirective, PaginationComponent],
selector: 'your-search',
templateUrl: './your-search.component.html',
styleUrls: ['./your-search.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class YourSearchComponent implements OnInit {
data: ResultSetPaging;

constructor(private queryBuilder: SearchQueryBuilderService) {
queryBuilder.paging = {
skipCount: 0,
maxItems: 25
};
}

ngOnInit() {
this.queryBuilder.resetToDefaults();
this.queryBuilder.updated.subscribe(() => void this.queryBuilder.execute());
this.queryBuilder.executed.subscribe((data) => {
this.queryBuilder.paging.skipCount = 0;
this.onSearchResultLoaded(data);
});
}

onSearchResultLoaded(resultSetPaging: ResultSetPaging) {
this.data = resultSetPaging;
}

onSearchQueryChanged(string: string) {
this.queryBuilder.userQuery = decodeURIComponent(string);
this.queryBuilder.update();
}

async onPaginationChanged(pagination: Pagination) {
this.queryBuilder.paging = {
maxItems: pagination.maxItems,
skipCount: pagination.skipCount
};
this.queryBuilder.update();
}
}
```

## Search Configuration

Adding those two components allows for usage of search configurations and switching between them.

![Search With Configs](../docassets/images/search-with-configs-example.png)

### Used Components

|Name|Selector|Description|
|----|--------|-----------|
|[Search Form Component](../content-services/components/search-form.component.md)|`<adf-search-form>`|Allows to switch search configurations.|
|[Search Filter Chips](../content-services/components/search-filter-chips.component.md)|`<adf-search-filter-chips>`|Container that displays customisable search filters from configuration.|

For more information about search configuration please refer to [Search Configuration Guide](./search-configuration-guide.md).

### Template

Place those components below search input for the same layout as shown on the picture above.

```html
...
<div style="diplay: flex;">
<adf-search-form></adf-search-form>
<adf-search-filter-chips></adf-search-filter-chips>
</div>
...
```

### Component

When adding those two components you need to remove one subscription from the `ngOnInit()`. No additional methods and properties are required.

```ts
...
ngOnInit() {
this.queryBuilder.resetToDefaults();
this.queryBuilder.executed.subscribe((data) => {
this.queryBuilder.paging.skipCount = 0;
this.onSearchResultLoaded(data);
});
}
...
```
## See Also

- [Search Configuration Guide](search-configuration-guide.md)
- [Search Input Component](../content-services/components/search-input.component.md)
- [Document List Component](../content-services/components/document-list.component.md)
- [Pagination Component](../core/components/pagination.component.md)
- [Search Form Component](../content-services/components/search-form.component.md)
- [Search Filter Chips](../content-services/components/search-filter-chips.component.md)
- [Search Query Builder Service](../content-services/services/search-query-builder.service.md)
Loading

0 comments on commit 097751a

Please sign in to comment.