File
Metadata
| selector |
c8y-search-box |
| templateUrl |
./search-box.component.html |
Methods
|
keyDown
|
keyDown(event: KeyboardEvent)
|
Parameters :
| Name |
Type |
Optional |
| event |
KeyboardEvent
|
No
|
|
|
Async
ngOnInit
|
ngOnInit()
|
|
|
|
onOpenChange
|
onOpenChange(isOpen: boolean)
|
Parameters :
| Name |
Type |
Optional |
| isOpen |
boolean
|
No
|
|
|
open
|
open(event: Event, mo: IManagedObject)
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
| mo |
IManagedObject
|
No
|
|
|
filterPipe
|
filterPipe:
|
Default value : pipe(
map((data: IManagedObject[]) => {
return this.searchService.filterOnlyAssets(data);
})
)
|
|
isLoading
|
isLoading:
|
Default value : false
|
|
noMatch
|
noMatch:
|
Default value : false
|
|
recentlyRegisteredResults$
|
recentlyRegisteredResults$: Observable<IResultList<IManagedObject>>
|
Type : Observable<IResultList<IManagedObject>>
|
|
recentSearchResults
|
recentSearchResults: IManagedObject[]
|
Type : IManagedObject[]
|
Default value : []
|
|
results$
|
results$: Observable<IResultList<IManagedObject>>
|
Type : Observable<IResultList<IManagedObject>>
|
<div
class="dropdown"
dropdown
#dropdown="bs-dropdown"
[insideClick]="true"
(isOpenChange)="onOpenChange($event)"
>
<button
class="main-header-button dropdown-toggle c8y-dropdown"
dropdownToggle
type="button"
title="Search"
aria-controls="searchDropdown"
>
<i c8yIcon="search" class="icon-2x"></i>
</button>
<div
id="searchDropdown"
*dropdownMenu
class="search-header-menu dropdown-menu dropdown-menu-center"
>
<form novalidate #searchForm="ngForm" class="c8y-search-form">
<c8y-typeahead
[(ngModel)]="selected"
placeholder="{{ 'Search for groups or assets…' | translate }}"
(keydown)="keyDown($event)"
(onIconClick)="reset()"
[icon]="term ? 'times' : 'search'"
[allowFreeEntries]="false"
name="selected"
>
<!-- filter buttons -->
<c8y-li *ngIf="term.length !== 0" class="p-l-16 p-r-16">
<div class="flex-row">
<p class="m-r-4 text-muted">
<em translate>Searching by exact match. Click for other search options:</em>
</p>
<div class="btn-group btn-group-sm">
<button
class="btn btn-default"
title="{{ 'Starts with' | translate }}"
(click)="filter(term + '*')"
>
{{ 'Starts with' | translate }}
</button>
<button
class="btn btn-default"
title="{{ 'Contains' | translate }}"
(click)="filter('*' + term + '*')"
>
{{ 'Contains' | translate }}
</button>
<button
class="btn btn-default"
title="{{ 'Ends with' | translate }}"
(click)="filter('*' + term)"
>
{{ 'Ends with' | translate }}
</button>
</div>
</div>
</c8y-li>
<!-- Recent search -->
<c8y-li
*ngIf="term.length === 0 && recentSearchResults.length > 0"
[selectable]="false"
class="p-l-24 p-r-24"
>
<div class="legend form-block">
<span translate>Recent search results</span>
</div>
</c8y-li>
<c8y-li
*ngFor="let result of term.length === 0 ? recentSearchResults : []"
class="c8y-list__item--link m-l-16 m-r-16"
(click)="open($event, result)"
>
<c8y-li-icon>
<device-status [mo]="result" *ngIf="!result.c8y_IsDeviceGroup"></device-status>
<i
[c8yIcon]="'c8y-group-open'"
class="c8y-icon-duocolor"
*ngIf="result.c8y_IsDeviceGroup"
></i>
</c8y-li-icon>
{{ result.name || '--' }}
</c8y-li>
<!-- Recently registered devices -->
<c8y-li
*ngIf="term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0"
class="p-l-24 p-r-24"
[selectable]="false"
>
<div class="legend form-block">
<span translate>Recently registered devices</span>
</div>
</c8y-li>
<c8y-li
*c8yFor="
let result of term.length === 0 ? recentlyRegisteredResults$ : { data: [] };
loadMore: 'none';
pipe: filterPipe
"
class="c8y-list__item--link m-l-16 m-r-16"
(click)="open($event, result)"
>
<c8y-li-icon>
<device-status [mo]="result" *ngIf="!result.c8y_IsDeviceGroup"></device-status>
<i
[c8yIcon]="'c8y-group-open'"
class="c8y-icon-duocolor"
*ngIf="result.c8y_IsDeviceGroup"
></i>
</c8y-li-icon>
{{ result.name || '--' }}
</c8y-li>
<!-- Search results -->
<c8y-li *ngIf="term.length !== 0" class="p-l-24 p-r-24" [selectable]="false">
<div class="legend form-block">
<span translate>Search results</span>
</div>
</c8y-li>
<c8y-li
*c8yFor="
let result of results$;
loadMore: 'auto';
pipe: filterPipe;
notFound: notFoundTemplate;
loadingTemplate: loading;
loadNextLabel: 'Find more…'
"
class="c8y-list__item--link m-l-16 m-r-16"
(click)="open($event, result)"
>
<c8y-li-icon>
<device-status [mo]="result" *ngIf="!result.c8y_IsDeviceGroup"></device-status>
<i
[c8yIcon]="'c8y-group-open'"
class="c8y-icon-duocolor"
*ngIf="result.c8y_IsDeviceGroup"
></i>
</c8y-li-icon>
{{ result.name || '--' }}
</c8y-li>
<!-- No search results found entry -->
<ng-template #notFoundTemplate>
<c8y-li *ngIf="noMatch" class="p-16 c8y-empty-state" [selectable]="false">
<c8y-li-icon [icon]="'search'"></c8y-li-icon>
<p><strong translate>No match found.</strong></p>
<small translate>
Use a filter or go to the asset data table to show all devices and groups.
</small>
</c8y-li>
</ng-template>
<!-- loading bar first entries -->
<c8y-li *ngIf="isLoading" class="p-t-32 p-b-0 p-relative">
<div class="spinner" style="right:0;">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</c8y-li>
<!-- loading bar for loading more entries (inventory roles) -->
<ng-template #loading>
<c8y-li class="text-center p-t-32 p-b-0 p-relative">
<div class="spinner" style="right:0;">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</c8y-li>
</ng-template>
<!-- more filter possibilities -->
<c8y-li class="m-t-24 bg-gray-lighter p-t-16 p-b-16 p-l-24 p-r-24" [selectable]="false">
<div class="flex-row">
<i c8yIcon="info-circle" class="text-info m-r-4"></i>
<p translate class="m-r-8">Need more filter possibilities?</p>
<button
type="button"
class="m-l-auto btn btn-default btn-sm"
translate
(mousedown)="openSearch()"
>
Go to the asset data table
</button>
</div>
</c8y-li>
</c8y-typeahead>
</form>
</div>
</div>