File
Implements
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Outputs
|
|
isOnlyHierarchyQuery
|
Type : boolean
|
Default value : false
|
useTabs
|
Type : boolean
|
Default value : false
|
Outputs
customDataQuery
|
Type : EventEmitter
|
isOnlyHierarchyQueryChange
|
Type : EventEmitter
|
refresh
|
Type : EventEmitter
|
Methods
onCheckboxChange
|
onCheckboxChange(event: Event, checkbox: Checkbox)
|
Parameters :
Name |
Type |
Optional |
event |
Event
|
No
|
checkbox |
Checkbox
|
No
|
|
onHierarchyQueryChange
|
onHierarchyQueryChange(checked: boolean)
|
Parameters :
Name |
Type |
Optional |
checked |
boolean
|
No
|
|
onSearchFilterChange
|
onSearchFilterChange(all: boolean, devices: boolean, groupsAndAssets: boolean, currentHierarchy)
|
Parameters :
Name |
Type |
Optional |
Default value |
all |
boolean
|
No
|
|
devices |
boolean
|
No
|
|
groupsAndAssets |
boolean
|
No
|
|
currentHierarchy |
|
No
|
false
|
|
onTabChange
|
onTabChange(tabName)
|
Parameters :
Name |
Optional |
Default value |
tabName |
No
|
this.tabNames.all
|
|
checkboxesState
|
Type : Array<Checkbox>
|
Default value : [
{
label: gettext('All'),
name: SearchFilters.ALL_FILTERS,
value: true,
indeterminate: false,
isDisabled: true
},
{ label: gettext('Show only devices'), name: SearchFilters.ONLY_DEVICES, value: true },
{
label: gettext('Show only groups and assets'),
name: SearchFilters.ONLY_GROUPS_AND_ASSETS,
value: true
}
]
|
context$
|
Default value : this.contextRouteData$.pipe(
startWith(this.contextRouteService.activatedContextData),
takeUntilDestroyed()
)
|
contextRouteData$
|
Default value : this.router.events.pipe(
filter(event => event instanceof ActivationEnd),
map((routeData: ActivationEnd) => {
const data = this.contextRouteService.getContextData(routeData.snapshot);
if (data?.context === ViewContext.Group) {
return data;
}
return null;
}),
takeUntilDestroyed()
)
|
selectedTab
|
Default value : this.tabNames.all
|
tabNames
|
Type : object
|
Default value : {
all: gettext('All'),
devices: gettext('Devices'),
groupsAndAssets: gettext('Groups and assets')
}
|
<div class="d-flex gap-16 p-l-4 p-l-24 p-r-24">
<div
class="p-b-8 separator-bottom sticky-top p-t-4"
*ngIf="!useTabs"
>
<label
class="c8y-checkbox"
*ngFor="let checkbox of checkboxesState"
>
<input
type="checkbox"
[checked]="checkbox.value"
[indeterminate]="checkbox.indeterminate"
(click)="onCheckboxChange($event, checkbox)"
[attr.disabled]="checkbox.isDisabled ? true : null"
/>
<span></span>
<span>{{ checkbox.label | translate }}</span>
</label>
</div>
</div>
<c8y-tabs-outlet
class="elevation-none"
*ngIf="useTabs"
outletName="searchTabs"
orientation="horizontal"
></c8y-tabs-outlet>
<c8y-tab
[icon]="'asterisk-key'"
[title]="'All devices, assets and groups' | translate"
[isActive]="selectedTab === tabNames.all"
[tabsOutlet]="'searchTabs'"
[label]="tabNames.all | translate"
[priority]="1000"
(onSelect)="onTabChange(tabNames.all)"
></c8y-tab>
<c8y-tab
[icon]="'exchange'"
[title]="'Devices only' | translate"
[isActive]="selectedTab === tabNames.devices"
[tabsOutlet]="'searchTabs'"
[label]="tabNames.devices | translate"
[priority]="750"
(onSelect)="onTabChange(tabNames.devices)"
></c8y-tab>
<c8y-tab
[icon]="'c8y-modules'"
[title]="'Assets and groups only' | translate"
[isActive]="selectedTab === tabNames.groupsAndAssets"
[tabsOutlet]="'searchTabs'"
[label]="tabNames.groupsAndAssets | translate"
[priority]="500"
(onSelect)="onTabChange(tabNames.groupsAndAssets)"
></c8y-tab>
<div
class="p-l-48 p-t-8 d-flex a-i-center"
*ngIf="useTabs && (context$ | async)?.contextData?.name"
>
<span translate>Search only in</span>
<span class="text-bold p-l-4">{{ (context$ | async)?.contextData?.name }}</span>
<label
class="m-l-8 c8y-switch c8y-switch--inline"
[title]="'Search only within the current group or asset hierarchy' | translate"
>
<input
type="checkbox"
[ngModel]="isOnlyHierarchyQuery"
[attr.aria-label]="'Search only within the current group or asset hierarchy' | translate"
(ngModelChange)="onHierarchyQueryChange($event)"
/>
<span></span>
</label>
</div>