assets-navigator/asset-selector/asset-selector.component.ts
Displays a hierarchical tree selector for assets.
OnInit
providers |
{
provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => AssetSelectorComponent)
}
{
provide: NG_VALIDATORS, useExisting: forwardRef(() => AssetSelectorComponent), multi: true
}
|
selector | c8y-asset-selector |
templateUrl | ./asset-selector.component.html |
Properties |
Methods |
|
Inputs |
Outputs |
active |
Type : GroupNode
|
Defines the node, which should be displayed as active. |
asset |
Type : IIdentified
|
Default value : undefined
|
The asset to use as root. |
config |
Type : AssetSelectorOptions
|
Default value : {}
|
Config object containing all options for the asset selector. |
container |
Type : string | "body"
|
Default value : 'body'
|
disabled |
Type : boolean
|
Default value : false
|
index |
Type : number
|
Default value : 0
|
Used only for miller-view, displays the column level for the current node. E.g if the index is one, this will be second column. |
rootNode |
Type : GroupNode
|
The node to use as root. You can either set this, or the asset to start from. |
selected |
Type : Array<Partial<IManagedObject>> | IIdentified[] | IIdentified
|
Default value : []
|
An array of predefined nodes. |
selectedDevice |
Type : IManagedObject
|
Default value : undefined
|
The selected device. |
selectedItems |
Type : IIdentified[] | IIdentified
|
Default value : []
|
All currently selected assets. |
onClearSelected |
Type : EventEmitter
|
Emits if the currently selected asset is cleared. |
onLoad |
Type : EventEmitter
|
Emits the current loading state of the node. |
onRowSelected |
Type : EventEmitter
|
Used only for miller view. Emit the selected node and use it as a 'rootNode' for the new column. |
onSelected |
Type : EventEmitter
|
Emits if one item was selected (all currently selected nodes). |
Async applyFilter | ||||||||
applyFilter(filter: string)
|
||||||||
Applies a filter.
Parameters :
Returns :
any
|
back |
back()
|
Changes the current root to one level back.
Returns :
void
|
clearFilters |
clearFilters()
|
Clears the current filter.
Returns :
void
|
clearSelectedDevices |
clearSelectedDevices()
|
Returns :
void
|
groupNameFilter |
groupNameFilter(nameFilter: string, moId, showUnassignedDevices?: boolean)
|
Returns :
any
|
handleNextMillerViewColumn | ||||||||||||
handleNextMillerViewColumn(node: GroupNode, index: number)
|
||||||||||||
Checks when a node was selected, if a new column needs to be added.
Parameters :
Returns :
boolean
True if the click was handled and a new column was added. |
isGroupSelected |
isGroupSelected()
|
Returns :
boolean
|
isUnassignedDevicesNode |
isUnassignedDevicesNode()
|
Check if the UnassignedDevice node is the rootNode.
Returns :
boolean
|
Async ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
Parameters :
Returns :
any
|
onDeselect | ||||||
onDeselect(config: literal type)
|
||||||
Parameters :
Returns :
void
|
onLoading | ||||||
onLoading(isLoading: boolean)
|
||||||
Parameters :
Returns :
void
|
Async onSearchResultClick | ||||||
onSearchResultClick(mo: IManagedObject)
|
||||||
Called if the user clicks on a search result.
Parameters :
Returns :
any
|
onSearchResultReset | ||||
onSearchResultReset(selectedItem)
|
||||
Called when the user resets the search result.
Parameters :
Returns :
void
|
onSelect | ||||||
onSelect(mo: IManagedObject)
|
||||||
Parameters :
Returns :
void
|
createDefaultRootNode |
createDefaultRootNode()
|
Returns :
any
|
Async createManagedObjectRootNode | ||||||
createManagedObjectRootNode(asset: IIdentified)
|
||||||
Parameters :
Returns :
unknown
|
deselect | ||||||||
deselect(selectedMo: IManagedObject)
|
||||||||
Removes a managed object from the selected array and emits the change.
Parameters :
Returns :
void
|
deselectAll | ||||||||
deselectAll(selectedMo?: IManagedObject)
|
||||||||
Deselects all expect the given one.
Parameters :
Returns :
void
|
emitChange | ||||||||||||
emitChange(selected: IIdentified | IIdentified[], item: IManagedObject, isSelected: boolean)
|
||||||||||||
Parameters :
Returns :
void
|
getIndexOfSelected | ||||||||||||
getIndexOfSelected(selected: Array
|
||||||||||||
Returns the index of the currently selected item.
Parameters :
Returns :
any
An index, or -1 if not found. |
select | ||||||||
select(selectedMo: IManagedObject)
|
||||||||
Adds an managed object to the selected array and emits the change.
Parameters :
Returns :
void
|
Readonly ASSET_CONST |
Default value : gettext('Asset {{ assetId }}')
|
filterText |
Type : string
|
Default value : ''
|
The current filter applied. |
getHeaderHeight$ |
Default value : new BehaviorSubject(0)
|
Returns the current header hight in pixel. |
root |
Default value : false
|
Displays the global search at all times if the miller view is used on root group level. |
config |
Type : AssetSelectorOptions
|
Default value : {}
|
Config object containing all options for the asset selector. |
isLoading |
Default value : false
|
The loading state of the current node. |
onClearSelected |
Default value : new EventEmitter<void>()
|
Emits if the currently selected asset is cleared. |
onSelected |
Default value : new EventEmitter<AssetSelectionChangeEvent>()
|
Emit the selected asset or assets. |
selected |
Type : Array<Partial<IManagedObject>> | IIdentified[] | IIdentified
|
An array of predefined nodes. |
<div
class="bg-inherit p-t-8 p-b-8 separator-bottom p-r-16 p-l-16 sticky-top"
[ngStyle]="{ 'z-index': config.singleColumn && config.search ? '30' : '20' }"
#header
[ngClass]="{
'p-absolute miller-column__selection d-flex flex-wrap a-i-center': config.view === 'miller',
'miller-column__search': config.search,
'miller-column__multi': config.multi
}"
*ngIf="
!selectedDevice &&
index === 0 &&
(config.search || config.multi || config.label?.length || config.showSelected)
"
>
<p
class="text-medium flex-no-shrink a-s-center"
[ngClass]="{
'm-b-4': config.search && root && config.singleColumn,
'm-r-8': !config.singleColumn && !config.search,
'fit-w': config.singleColumn
}"
*ngIf="config.label?.length"
>
{{ config.label | translate }}
</p>
<c8y-search-input
[ngStyle]="{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }"
*ngIf="config.search && root"
(onClick)="onSearchResultClick($event)"
(reset)="onSearchResultReset($event)"
[mode]="'select'"
[container]="container"
[groupsOnly]="config.groupsOnly"
[ngClass]="{
'm-l-auto': !config.singleColumn && config.label.length,
'fit-w': config.singleColumn || !config.label.length
}"
></c8y-search-input>
<div
class="bg-inherit d-flex gap-4 fit-w"
*ngIf="config.showSelected"
[ngClass]="{ 'm-t-4': config.search }"
>
<span class="text-label-small m-r-4 a-s-center l-h-1">{{ 'Selected' | translate }}</span>
<div class="flex-grow inner-scroll d-flex gap-4 a-i-center">
<ng-container *ngIf="!selected.length">
<em class="text-12 text-muted d-flex a-i-center fit-h-20">{{ 'None' | translate }}</em>
</ng-container>
<span
class="tag tag--info chip"
*ngFor="let selectedItem of selected"
>
<button
class="btn btn-xs btn-clean text-10"
title="{{ selectedItem.name }}"
[disabled]="disabled"
type="button"
(click)="config.multi ? deselect(selectedItem) : deselectAll()"
>
<i c8yIcon="times"></i>
</button>
{{ selectedItem.name || (ASSET_CONST | translate: { assetId: selectedItem.id }) }}
</span>
</div>
</div>
</div>
<div
class="p-r-16"
*ngIf="selectedDevice"
>
<div class="d-flex p-b-4">
<p
class="text-medium p-t-8 m-r-8"
*ngIf="selectedDevice; else multiAssets"
>
{{ 'Selected asset' | translate }}
</p>
<ng-template #multiAssets>
<p class="text-medium m-r-8">{{ 'Selected assets' | translate }}</p>
</ng-template>
<button
class="btn btn-default btn-xs a-s-center m-t-4 m-l-auto"
title="{{ 'Change' | translate }}"
type="button"
(click)="clearSelectedDevices()"
>
{{ 'Change' | translate }}
</button>
</div>
<div class="d-flex">
<i
class="text-success p-l-0 p-r-8"
[c8yIcon]="'check-circle'"
></i>
<i
class="m-r-4 icon-20"
[c8yIcon]="selectedDevice | getGroupIcon | async"
></i>
<span>{{ selectedDevice.name }}</span>
</div>
</div>
<!-- miller columns header -->
<div
class="miller-column__header sticky-top bg-inherit separator-bottom"
*ngIf="
config.view === 'miller' &&
((config.showFilter && !rootNode.root) || config.columnHeaders) &&
!selectedDevice
"
[ngClass]="{ 'p-t-8': config.search }"
>
<p
class="text-12 text-muted text-truncate m-b-4"
title="{{ rootNode.breadcrumb || rootNode.label | translate }}"
*ngIf="config.singleColumn && index !== 0"
>
<i
class="m-r-4"
c8yIcon="home"
></i>
{{ rootNode.breadcrumb || rootNode.label | translate }}
</p>
<div
class="d-flex a-i-center"
*ngIf="config.columnHeaders || config.singleColumn"
>
<button
class="btn btn-default btn-xs m-r-8 p-t-0 p-b-0 p-l-4 p-r-4 l-h-1"
title="{{ 'Back' | translate }}"
type="button"
*ngIf="config.singleColumn && !rootNode.root && index !== 0"
(click)="back()"
>
<i c8yIcon="angle-left"></i>
</button>
<label
class="c8y-radio checkbox-inline m-r-8"
*ngIf="!rootNode.root && index === 0 && (config.groupsSelectable || !rootNode.isGroup())"
>
<input
title="{{ 'Select group' | translate }}"
type="radio"
(change)="select(rootNode.mo)"
[checked]="isGroupSelected()"
/>
<span></span>
</label>
<i
class="icon-20 c8y-icon-duocolor m-r-4"
[c8yIcon]="this.rootNode.mo | getGroupIcon: true : this.rootNode.icon | async"
*ngIf="config.columnHeaders && (config.singleColumn || (!rootNode.root && index === 0))"
></i>
<p
class="text-truncate"
title="{{ rootNode.label | translate }}"
*ngIf="config.columnHeaders"
[ngClass]="{
'text-label-small': !config.singleColumn,
'text-medium': config.singleColumn
}"
>
{{ rootNode.label | translate }}
</p>
</div>
<div
*ngIf="!rootNode.root && config.showFilter"
[ngClass]="{ 'p-t-4': config.columnHeaders }"
>
<div class="input-group input-group-sm input-group-search">
<input
class="form-control"
placeholder="{{ 'Filter this column…' | translate }}"
[(ngModel)]="filterText"
(keyup.enter)="applyFilter('*' + filterText + '*')"
/>
<span class="input-group-btn">
<button
class="btn btn-dot p-r-8 p-l-4"
title="{{ 'Apply filter' | translate }}"
type="button"
(click)="applyFilter('*' + filterText + '*')"
>
<i c8yIcon="filter"></i>
</button>
<button
class="btn btn-dot p-r-8 p-l-4"
title=" {{ 'Clear filters' | translate }}"
type="button"
(click)="clearFilters()"
*ngIf="filterText.length"
>
<i c8yIcon="times"></i>
</button>
</span>
</div>
</div>
</div>
<c8y-asset-selector-node
class="d-block bg-inherit p-relative"
style="z-index: 9"
*ngIf="rootNode && !selectedDevice"
[node]="rootNode"
[rootNode]="rootNode"
[preselected]="selected"
[multi]="config.multi"
[view]="config.view"
[index]="index"
[active]="active"
[disabled]="disabled"
[handleNextMillerViewColumn]="handleNextMillerViewColumn.bind(this)"
(isLoadingState)="onLoading($event)"
(onSelect)="onSelect($event)"
(onDeselect)="onDeselect($event)"
[ngClass]="{ 'collapse show': !rootNode.root && !rootNode.hidden && config.view !== 'miller' }"
></c8y-asset-selector-node>