File

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

Description

Displays a hierarchical tree selector for assets.

Extends

AssetSelectorBase

Implements

OnInit

Metadata

Index

Properties
Methods
Inputs
Outputs

Inputs

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.

isNodeSelectable
Type : boolean |
Default value : true
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.

Outputs

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).

Methods

Async applyFilter
applyFilter(filter: string)

Applies a filter.

Parameters :
Name Type Optional Description
filter string No

The filter to apply.

Returns : any
back
back()

Changes the current root to one level back.

Returns : void
clearFilters
clearFilters()

Clears the current filter.

Returns : void
clearSelectedDevices
clearSelectedDevices()

Clears the currently selected device.

Returns : void
groupNameFilter
groupNameFilter(nameFilter: string, moId, showUnassignedDevices?: boolean)

This method builds a filter query based on the provided name filter and managed object ID.

Parameters :
Name Type Optional Description
nameFilter string No

The name filter to apply.

moId No

The managed object ID to filter by.

showUnassignedDevices boolean Yes

If true, it will show unassigned devices.

Returns : any

The filter query to apply.

handleNextMillerViewColumn
handleNextMillerViewColumn(node: GroupNode, index: number)

Checks when a node was selected, if a new column needs to be added.

Parameters :
Name Type Optional Description
node GroupNode No

The node that was clicked.

index number No

The current index of this node.

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 :
Name Type Optional
changes SimpleChanges No
Returns : any
onDeselect
onDeselect(config: literal type)
Parameters :
Name Type Optional
config literal type No
Returns : void
onLoading
onLoading(isLoading: boolean)
Parameters :
Name Type Optional
isLoading boolean No
Returns : void
Async onSearchResultClick
onSearchResultClick(mo: IManagedObject)

Called if the user clicks on a search result.

Parameters :
Name Type Optional
mo IManagedObject No
Returns : any
onSearchResultReset
onSearchResultReset(selectedItem)

Called when the user resets the search result.

Parameters :
Name Optional
selectedItem No
Returns : void
onSelect
onSelect(mo: IManagedObject)
Parameters :
Name Type Optional
mo IManagedObject 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

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)="$event.stopPropagation(); 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 }"
>
  <div class="d-flex" *ngIf="config.singleColumn && index !== 0">
    <i
      class="m-r-4"
      c8yIcon="home"
    ></i>
    <p
      class="text-12 text-muted text-truncate text-rtl m-b-4"
      title="{{ rootNode.breadcrumb || rootNode.label | translate }}"
    >
      {{ rootNode.breadcrumb || rootNode.label | translate }}
    </p>
  </div>
  <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)="$event.stopPropagation(); 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>

results matching ""

    No results matching ""