Web SDK documentation
  1. Components
  2. StatusFilterComponent

File

operations/status-filter/status-filter.component.ts

Metadata

selector c8y-status-filter
templateUrl ./status-filter.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

multiple
Type : boolean

Allows multiple options to be active simultaneosly.
options

List of filter options to be displayed
small
Type : boolean

Display the filter as a small button group

Outputs

onFilterChanged
Type : EventEmitter<StatusOption[]>

HostBindings

class.btn-group-sm
Type : boolean

Methods

activeFilters
activeFilters()
Returns : StatusOption[]
changeFilter
changeFilter(option: literal type)
Parameters :
Name Type Optional
option literal type No
Returns : void
isFilterApplied
isFilterApplied()
Returns : boolean
preset
preset(filters: StatusOption[], emit: boolean)

Allows the filter to be initalliy displayed with some preset filters.

Parameters :
Name Type Optional Default value Description
filters StatusOption[] No

An StatusOption array defining filter options to be preset.
emit boolean No true

(optional) If true component will emit onFilterChanged event.
Returns : void
removeFilter
removeFilter()
Returns : void
reset
reset()
Returns : void

Properties

isAllButtonSelected
Type : boolean
Default value : true
statusOptions
Type : Array<literal type>
Default value : []

Accessors

options
setoptions(options: OperationStatusOptionsMap)

List of filter options to be displayed

Parameters :
Name Type Optional
options OperationStatusOptionsMap No
Returns : void
_multiple
set_multiple(multiple: boolean)

Allows multiple options to be active simultaneosly.

Parameters :
Name Type Optional
multiple boolean No
Returns : void
_small
set_small(small: boolean)

Display the filter as a small button group

Parameters :
Name Type Optional
small boolean No
Returns : void
displaySmall
getdisplaySmall() 
<div dropdown placement="bottom left" class="dropdown c8y-child-assets-selector">
  <button
    id="status-filter"
    dropdownToggle
    type="button"
    class="btn dropdown-toggle d-flex a-i-center c8y-dropdown"
    title="{{ 'Status filter' | translate }}"
    aria-controls="dropdown-status-filter"
  >
    <span *ngFor="let option of statusOptions" class="d-contents">
      <span class="text-truncate" *ngIf="option.selected">
        <i [c8yIcon]="option.option.icon" [ngClass]="option.option.styleClass"></i>
        <span class="m-l-4">{{ option.option.label | translate }}</span>
      </span>
    </span>
    <span class="text-truncate" *ngIf="isAllButtonSelected">
      <i c8yIcon="c8y-energy" class="m-r-4 text-info"></i>
      {{ 'All statuses' | translate }}
    </span>
  </button>
  <ul
    id="dropdown-status-filter"
    *dropdownMenu
    class="dropdown-menu"
    role="menu"
    aria-labelledby="status-filter"
  >
    <li *ngFor="let option of statusOptions" [ngClass]="{ active: option.selected }">
      <button (click)="changeFilter(option)">
        <i [c8yIcon]="option.option.icon" [ngClass]="option.option.styleClass"></i>
        <span class="m-l-4">{{ option.option.label | translate }}</span>
      </button>
    </li>
    <li [ngClass]="{ active: isAllButtonSelected }">
      <button title="{{ 'All' | translate }}" (click)="removeFilter()">
        <i c8yIcon="c8y-energy" class="m-r-4 text-info"></i>
        {{ 'All statuses' | translate }}
      </button>
    </li>
  </ul>
</div>

results matching ""

    No results matching ""