assets-navigator/asset-selector/miller-view.component.ts
OnInit
| 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. |
| onClearSelected |
Type : EventEmitter
|
|
Emits if the currently selected asset is cleared. |
| 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
|
| assetSelectorHeaderHeight$ |
Default value : of('0px')
|
|
The height of the first asset selector header. |
| 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,
label: gettext('Asset selection')
}
|
| 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 |
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="miller-view-wrapper {{ config.label }}"
[ngStyle]="{
'padding-top': selectedDevice ? '0px' : (assetSelectorHeaderHeight$ | async)
}"
#millerViewWrapper
[ngClass]="{
'single-column': config.singleColumn,
}"
>
<div
class="miller-column bg-inherit"
*ngFor="let column of columns; index as i"
>
<c8y-asset-selector
class="bg-inherit"
#assetSelector
[config]="config"
[index]="i"
[active]="columns[i + 1]"
[rootNode]="column"
[selected]="selected || []"
[selectedDevice]="selectedDevice"
(onSelected)="onSelectionChange($event)"
(onClearSelected)="onClearSelected.emit()"
(onRowSelected)="addNewColumn($event)"
(onLoad)="onLoad($event)"
[container]="container"
></c8y-asset-selector>
<div
class="p-relative p-b-64"
*ngIf="isLoading && columnIndex === i && !selectedDevice"
>
<c8y-loading></c8y-loading>
</div>
<div
class="p-l-8 p-r-8"
*ngIf="!column.children.length && !isLoading"
>
<c8y-ui-empty-state
[icon]="'folder-open'"
[title]="'No results to display.' | translate"
[subtitle]="'The selected asset has no children.' | translate"
*ngIf="!filterText; else noSearchResults"
[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>