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
@@ -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