Web SDK documentation
  1. Components
  2. StatusFilterComponent

File

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

Implements

ProductExperienceEventSource

Metadata

providers { provide: PRODUCT_EXPERIENCE_EVENT_SOURCE, useExisting: forwardRef(() => StatusFilterComponent) }
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
Type : OperationStatusOptionsMapShared

List of filter options to be displayed
small
Type : boolean

Display the filter as a small button group

Outputs

onFilterChanged
Type : EventEmitter<OperationStatusOption[]>

HostBindings

class.btn-group-sm
Type : boolean

Methods

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

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

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

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

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

Properties

ACTIONS
Default value : ACTIONS_OPERATIONS
isAllButtonSelected
Default value : true
productExperienceEvent
Type : ProductExperienceEvent
statusOptions
Type : Array<literal type>
Default value : []

Accessors

options
setoptions(options: OperationStatusOptionsMapShared)

List of filter options to be displayed

Parameters :
Name Type Optional
options OperationStatusOptionsMapShared 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
    class="btn dropdown-toggle d-flex a-i-center c8y-dropdown"
    type="button"
    title="{{ 'Status filter' | translate }}"
    dropdownToggle
  >
    <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
        type="button"
        [title]="option.option.label | translate"
        (click)="changeFilter(option)"
        c8yProductExperience
        inherit
        [actionData]="{
          action: ACTIONS.FILTER,
          filterBy: 'status',
          filterValue: option.option.label
        }"
      >
        <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
        type="button"
        title="{{ 'All statuses' | translate }}"
        (click)="removeFilter()"
        c8yProductExperience
        inherit
        [actionData]="{
          action: ACTIONS.FILTER,
          filterBy: 'status'
        }"
      >
        <i c8yIcon="c8y-energy" class="m-r-4 text-info"></i>
        {{ 'All statuses' | translate }}
      </button>
    </li>
  </ul>
</div>

results matching ""

    No results matching ""