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

Allows multiple options to be active simultaneosly.

Type : boolean

options

List of filter options to be displayed

Type : []

small

Display the filter as a small button group

Type : boolean

Outputs

onFilterChanged $event Type: EventEmitter<IStatusOption[]>

HostBindings

class.btn-group-sm
class.btn-group-sm:

Methods

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

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

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

An IStatusOption 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
isAllButtonSelected: boolean
Type : boolean
Default value : true
statusOptions
statusOptions: Array<literal type>
Type : Array<literal type>
Default value : []

Accessors

options
setoptions(options: [])

List of filter options to be displayed

Parameters :
Name Type Optional
options [] 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 
<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 [class]="option.option?.iconClass"></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 [class]="option.option?.iconClass"></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>

result-matching ""

    No results matching ""