mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-1761] Search component refactoring (#2623)
* [ADF-1761] refactoring search * [ADF-1761] added click exit strategy and selection for list items * [ADF-1761] removed old search component replaced with the new implementation * [ADF-1761] removed old component and replaced with the refactored version * [ADF-1761] added the new tests for search control component * [ADF-1761] added test for refactored search component * [ADF-1761] fixed minor twitch start styling the list * [ADF-1761] fixed test * [ADF-1761] removed unused import * [ADF-1761] added search integrations with files component * [ADF-1761] rebased branch on lates development * [ADF-1761] added blur management for search * [ADF-1761] fixed wrong behaviour on blur * [ADF - 1761] fixed responsiveness on smaller resolution * [ADF-1761] reduced font and added white line * [ADF-1761] fixed some blur behaviour * [ADF-1761] added some fix for on blur behaviour * [ADF-1761] fixed some behaviour on blur * [ADF-1761] fix for angular 5 * [ADF-1761] changed name from search integration to search result into demoshell * [ADF-1761] fixed wrong change name * [ADF-1761] added documentation for search control component * [ADF-1761] added documentation for search component * [ADF-1761] fixed wrong link into documentation * [ADF-1761] fixed image for simple example * [ADF-1761] added some improvements and removed duplicated code * [ADF-1761] renamed directive to searchAutocomplete * [ADF-1761] added some changes after Peer review
This commit is contained in:
Vito
Eugenio Romano
@@ -372,7 +372,6 @@ for more information about installing and using the source code.
|
||||
|
||||
- [Search control component](search-control.component.md)
|
||||
- [Search component](search.component.md)
|
||||
- [*Search autocomplete component](../ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.ts)
|
||||
<!-- ng2-alfresco-search end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
BIN
docs/docassets/images/search-component-complex-template.png
Normal file
BIN
docs/docassets/images/search-component-complex-template.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/docassets/images/search-component-simple-template.png
Normal file
BIN
docs/docassets/images/search-component-simple-template.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
docs/docassets/images/search-control-component.png
Normal file
BIN
docs/docassets/images/search-control-component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -1,5 +1,10 @@
|
||||
# Search component
|
||||
|
||||
Displays a input text which shows find-as-you-type suggestions.
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
@@ -17,11 +22,9 @@
|
||||
|
||||
```html
|
||||
<adf-search-control
|
||||
[searchTerm]="searchTerm"
|
||||
inputType="search"
|
||||
(searchChange)="onSearchChange($event);"
|
||||
(searchSubmit)="onSearchSubmit($event);"
|
||||
(fileSelect)="onSearchResultSelect($event);">
|
||||
[highlight]="true"
|
||||
(optionClicked)="onItemClicked($event)"
|
||||
(submit)="onSearchSubmit($event)">
|
||||
</adf-search-control>
|
||||
```
|
||||
|
||||
@@ -45,18 +48,16 @@
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| searchChange | Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is less than three characters in length then the term is truncated to an empty string. |
|
||||
| searchSubmit | Emitted when the search form is submitted. The search term is provided in the 'value' property of the returned object. |
|
||||
| fileSelect | Emitted when a file item from the list of find-as-you-type results is selected |
|
||||
| submit | Emitted when the search is submitted pressing ENTER button. The search term is provided as value of the event. |
|
||||
| optionClicked | Emitted when a file item from the list of find-as-you-type results is selected |
|
||||
|
||||
## Details
|
||||
|
||||
```html
|
||||
<adf-search-control
|
||||
[searchTerm]="searchTerm"
|
||||
inputType="search"
|
||||
(searchChange)="onSearchChange($event);"
|
||||
(searchSubmit)="onSearchSubmit($event);"
|
||||
(fileSelect)="onSearchResultSelect($event);">
|
||||
<adf-search-control
|
||||
[highlight]="true"
|
||||
(optionClicked)="onItemClicked($event)"
|
||||
(submit)="onSearchSubmit($event)">
|
||||
</adf-search-control>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
# Search Results component
|
||||
|
||||
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
@@ -17,7 +19,8 @@
|
||||
|
||||
```html
|
||||
<adf-search
|
||||
[searchTerm]="searchTerm">
|
||||
[searchTerm]="searchTerm"
|
||||
(resultLoaded)="showSearchResult($event)">
|
||||
</adf-search>
|
||||
```
|
||||
|
||||
@@ -30,25 +33,93 @@
|
||||
| resultType | string | | Node type to filter search results by, e.g. 'cm:content', 'cm:folder' if you want only the files. |
|
||||
| maxResults | number | 20 | Maximum number of results to show in the search. |
|
||||
| resultSort | string | | Criteria to sort search results by, must be one of "name" , "modifiedAt" or "createdAt" |
|
||||
| navigationMode | string | "dblclick" | Event used to initiate a navigation action to a specific result, one of "click" or "dblclick" |
|
||||
| navigate | boolean | true | Allow documentlist to navigate or not. For more information see documentlist component's documentation |
|
||||
| displayWith | function | | Function that maps an option's value to its display value in the trigger |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| preview | Emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration |
|
||||
| nodeDbClick | Emitted when user acts upon files or folders with double click **only when `navigation-mode` is set to false**, giving more freedom then just simply previewing the file |
|
||||
| resultsLoad | Emitted when search results have fully loaded |
|
||||
| resultLoaded | Emitted when search results have fully loaded |
|
||||
|
||||
## Details
|
||||
|
||||
### Customise Search Results
|
||||
You have to add a template that will be shown when the results are loaded.
|
||||
|
||||
```html
|
||||
<adf-search
|
||||
[searchTerm]="searchTerm">
|
||||
<adf-search [searchTerm]="searchTerm">
|
||||
<ng-template let-result>
|
||||
<ul>
|
||||
<li *ngFor="let item of result?.list?.entries">
|
||||
{{ item?.entry.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</ng-template>
|
||||
</adf-search>
|
||||
```
|
||||
The results are provided via the [$implicit variable of angular2](https://angular.io/api/common/NgTemplateOutlet) and can be accessed via the sugar sintax 'let-yourChosenName'. As per example above the result will be something like :
|
||||
|
||||
|
||||
|
||||
But you can define even a more complex template :
|
||||
|
||||
```html
|
||||
<adf-search class="adf-search-result-autocomplete"
|
||||
[rootNodeId]="liveSearchRoot"
|
||||
[resultType]="liveSearchResultType"
|
||||
[resultSort]="liveSearchResultSort"
|
||||
[maxResults]="liveSearchMaxResults">
|
||||
<ng-template let-data>
|
||||
<mat-list *ngIf="isSearchBarActive()" id="autocomplete-search-result-list">
|
||||
<mat-list-item
|
||||
*ngFor="let item of data?.list?.entries; let idx = index"
|
||||
id="result_option_{{idx}}"
|
||||
[tabindex]="0"
|
||||
(focus)="onFocus($event)"
|
||||
(blur)="onBlur($event)"
|
||||
class="adf-search-autocomplete-item"
|
||||
(click)="elementClicked(item)"
|
||||
(keyup.enter)="elementClicked(item)">
|
||||
<mat-icon mat-list-icon>
|
||||
<img [src]="getMimeTypeIcon(item)" />
|
||||
</mat-icon>
|
||||
<h4 mat-line id="result_name_{{idx}}"
|
||||
*ngIf="highlight; else elseBlock"
|
||||
class="adf-search-fixed-text"
|
||||
[innerHtml]="item.entry.name | highlight: searchTerm">
|
||||
{{ item?.entry.name }}</h4>
|
||||
<ng-template #elseBlock>
|
||||
<h4 class="adf-search-fixed-text" mat-line id="result_name_{{idx}}" [innerHtml]="item.entry.name"></h4>
|
||||
</ng-template>
|
||||
<p mat-line class="adf-search-fixed-text"> {{item?.entry.createdByUser.displayName}} </p>
|
||||
</mat-list-item>
|
||||
<mat-list-item
|
||||
id="search_no_result"
|
||||
*ngIf="data?.list?.entries.length === 0">
|
||||
<p mat-line class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchTerm} }}</p>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</ng-template>
|
||||
</adf-search>
|
||||
```
|
||||
|
||||
Example of a component that displays search results, using the Angular2 router to supply a 'q' parameter containing the
|
||||
search term. If no router is present on the page or if the router does not provide such parameter then an empty
|
||||
results page will be shown.
|
||||
Which will look like :
|
||||
|
||||
|
||||
|
||||
|
||||
### Attach an input field to the search
|
||||
You can also attach your input field to the adf-search component via the trigger [searchAutocomplete]
|
||||
|
||||
```html
|
||||
<input type="text" [searchAutocomplete]="search">
|
||||
|
||||
<adf-search #search="searchAutocomplete">
|
||||
<ng-template let-result>
|
||||
<span *ngFor="let item of result?.list?.entries">
|
||||
{{ item?.entry.name }}
|
||||
</span>
|
||||
</ng-template>
|
||||
</adf-search>
|
||||
```
|
||||
In this way it is possible to fetch the results from the word typed into the input text straight into the adf-search component via the custom template variable.
|
||||
Reference in New Issue
Block a user