assets-navigator/asset-selector/miller-view.component.ts
providers |
{
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MillerViewComponent), multi: true
}
|
selector | c8y-asset-selector-miller |
templateUrl | ./miller-view.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor(groupNodeService: GroupNodeService, inventory: InventoryService, assetSelectorService: AssetSelectorService, cd: ChangeDetectorRef)
|
|||||||||||||||
Parameters :
|
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'
|
rootNode |
Type : GroupNode
|
The node to use as root. You can either set this, or the asset to start from. |
selectedDevice |
Type : IManagedObject
|
Default value : undefined
|
The selected devices. |
onSelected |
Type : EventEmitter
|
Emits if the selection changes |
addNewColumn | ||||
addNewColumn(node)
|
||||
Create a new column with the selected node as root.
Parameters :
Returns :
void
|
onLoad | ||||
onLoad(event)
|
||||
Change the loading state of the asset selector.
Parameters :
Returns :
void
|
onSelectionChange | ||||||
onSelectionChange(event: AssetSelectionChangeEvent)
|
||||||
Add the selected node to the selected array.
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
|
columnIndex |
Type : number
|
Index of the column used to check where to show the loading state. |
columns |
Type : []
|
Default value : []
|
The column array will contain all currently selected nodes which will form the miller view columns (only one per level). |
configOptionsDefault |
Type : AssetSelectorOptions
|
Default value : {
view: 'miller',
singleColumn: false
}
|
filterText |
Type : string
|
Default value : ''
|
The current filter applied. Used for the empty state text in the view. |
config |
Type : AssetSelectorOptions
|
Default value : {}
|
Config object containing all options for the asset selector. |
isLoading |
Type : boolean
|
Default value : false
|
The loading state of the current node. |
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
#millerViewWrapper
class="miller-view-wrapper"
[ngClass]="{ 'single-column': config.singleColumn }"
>
<div *ngFor="let column of columns; index as i" class="miller-column bg-inherit">
<c8y-asset-selector
[config]="config"
[index]="i"
[active]="columns[i + 1]"
[rootNode]="column"
[selectedItems]="selected || []"
[selectedDevice]="selectedDevice"
(onSelected)="onSelectionChange($event)"
(onRowSelected)="addNewColumn($event)"
(onLoad)="onLoad($event)"
[container]="container"
class="bg-inherit"
>
</c8y-asset-selector>
<div class="p-relative p-b-64" *ngIf="isLoading && columnIndex === i && !selectedDevice">
<c8y-loading></c8y-loading>
</div>
<div *ngIf="!column.children.length && !isLoading" class="p-l-8 p-r-8">
<c8y-ui-empty-state
*ngIf="!filterText; else noSearchResults"
[icon]="'folder-open'"
[title]="'No results to display.' | translate"
[subtitle]="'The selected asset has no children.' | translate"
[horizontal]="true"
></c8y-ui-empty-state>
<ng-template #noSearchResults>
<c8y-ui-empty-state
[icon]="'folder-open'"
[title]="'No results to display for the current filter.' | translate"
[subtitle]="'There are no assets matching the filter.' | translate"
[horizontal]="true"
></c8y-ui-empty-state>
</ng-template>
</div>
</div>
</div>