Web SDK documentation
  1. Components
  2. MillerViewComponent

File

assets-navigator/asset-selector/miller-view.component.ts

Extends

AssetSelectorBase

Implements

OnInit

Metadata

providers { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MillerViewComponent), multi: true }
selector c8y-asset-selector-miller
templateUrl ./miller-view.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(groupNodeService: GroupNodeService, inventory: InventoryService, assetSelectorService: AssetSelectorService, cd: ChangeDetectorRef)
Parameters :
Name Type Optional
groupNodeService GroupNodeService No
inventory InventoryService No
assetSelectorService AssetSelectorService No
cd ChangeDetectorRef No

Inputs

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.

Outputs

onSelected
Type : EventEmitter

Emits if the selection changes

Methods

addNewColumn
addNewColumn(node)

Create a new column with the selected node as root.

Parameters :
Name Optional
node No
Returns : void
onLoad
onLoad(event)

Change the loading state of the asset selector.

Parameters :
Name Optional
event No
Returns : void
onSelectionChange
onSelectionChange(event: AssetSelectionChangeEvent)

Add the selected node to the selected array.

Parameters :
Name Type Optional
event AssetSelectionChangeEvent No
Returns : void
createDefaultRootNode
createDefaultRootNode()
Returns : any
Async createManagedObjectRootNode
createManagedObjectRootNode(asset: IIdentified)
Parameters :
Name Type Optional
asset IIdentified No
Returns : unknown
deselect
deselect(selectedMo: IManagedObject)

Removes a managed object from the selected array and emits the change.

Parameters :
Name Type Optional Description
selectedMo IManagedObject No

The selected asset.
Returns : void
deselectAll
deselectAll(selectedMo?: IManagedObject)

Deselects all expect the given one.

Parameters :
Name Type Optional Description
selectedMo IManagedObject Yes

The selected asset (optional, if empty -> just deselect all).
Returns : void
emitChange
emitChange(selected: IIdentified | IIdentified[], item: IManagedObject, isSelected: boolean)
Parameters :
Name Type Optional
selected IIdentified | IIdentified[] No
item IManagedObject No
isSelected boolean No
Returns : void
getIndexOfSelected
getIndexOfSelected(selected: Array> | Partial, selectedMo: IIdentified)

Returns the index of the currently selected item.

Parameters :
Name Type Optional Description
selected Array<Partial<IIdentified>> | Partial<IIdentified> No

All selected items
selectedMo IIdentified No

The new selected item-
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 :
Name Type Optional Description
selectedMo IManagedObject No

The selected asset.
Returns : void

Properties

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>

results matching ""

    No results matching ""