File

search/search-custom-filters.component.ts

Implements

OnInit

Metadata

Index

Properties
Methods
Inputs
Outputs

Inputs

isOnlyHierarchyQuery
Type : boolean
Default value : false
useTabs
Type : boolean
Default value : false

Outputs

customDataQuery
Type : EventEmitter
isOnlyHierarchyQueryChange
Type : EventEmitter
refresh
Type : EventEmitter

Methods

ngOnInit
ngOnInit()
Returns : void
onCheckboxChange
onCheckboxChange(event: Event, checkbox: Checkbox)
Parameters :
Name Type Optional
event Event No
checkbox Checkbox No
Returns : void
onHierarchyQueryChange
onHierarchyQueryChange(checked: boolean)
Parameters :
Name Type Optional
checked boolean No
Returns : void
onSearchFilterChange
onSearchFilterChange(all: boolean, devices: boolean, groupsAndAssets: boolean, currentHierarchy)
Parameters :
Name Type Optional Default value
all boolean No
devices boolean No
groupsAndAssets boolean No
currentHierarchy No false
Returns : void
onTabChange
onTabChange(tabName)
Parameters :
Name Optional Default value
tabName No this.tabNames.all
Returns : void

Properties

checkboxesState
Type : Array<Checkbox>
Default value : [ { label: gettext('All'), name: SearchFilters.ALL_FILTERS, value: true, indeterminate: false, isDisabled: true }, { label: gettext('Show only devices'), name: SearchFilters.ONLY_DEVICES, value: true }, { label: gettext('Show only groups and assets'), name: SearchFilters.ONLY_GROUPS_AND_ASSETS, value: true } ]
context$
Default value : this.contextRouteData$.pipe( startWith(this.contextRouteService.activatedContextData), takeUntilDestroyed() )
contextRouteData$
Default value : this.router.events.pipe( filter(event => event instanceof ActivationEnd), map((routeData: ActivationEnd) => { const data = this.contextRouteService.getContextData(routeData.snapshot); if (data?.context === ViewContext.Group) { return data; } return null; }), takeUntilDestroyed() )
selectedTab
Default value : this.tabNames.all
tabNames
Type : object
Default value : { all: gettext('All'), devices: gettext('Devices'), groupsAndAssets: gettext('Groups and assets') }
<div class="d-flex gap-16 p-l-4 p-l-24 p-r-24">
  <div
    class="p-b-8 separator-bottom sticky-top p-t-4"
    *ngIf="!useTabs"
  >
    <label
      class="c8y-checkbox"
      *ngFor="let checkbox of checkboxesState"
    >
      <input
        type="checkbox"
        [checked]="checkbox.value"
        [indeterminate]="checkbox.indeterminate"
        (click)="onCheckboxChange($event, checkbox)"
        [attr.disabled]="checkbox.isDisabled ? true : null"
      />
      <span></span>
      <span>{{ checkbox.label | translate }}</span>
    </label>
  </div>
</div>

<c8y-tabs-outlet
  class="elevation-none"
  *ngIf="useTabs"
  outletName="searchTabs"
  orientation="horizontal"
></c8y-tabs-outlet>

<c8y-tab
  [icon]="'asterisk-key'"
  [title]="'All devices, assets and groups' | translate"
  [isActive]="selectedTab === tabNames.all"
  [tabsOutlet]="'searchTabs'"
  [label]="tabNames.all | translate"
  [priority]="1000"
  (onSelect)="onTabChange(tabNames.all)"
></c8y-tab>
<c8y-tab
  [icon]="'exchange'"
  [title]="'Devices only' | translate"
  [isActive]="selectedTab === tabNames.devices"
  [tabsOutlet]="'searchTabs'"
  [label]="tabNames.devices | translate"
  [priority]="750"
  (onSelect)="onTabChange(tabNames.devices)"
></c8y-tab>
<c8y-tab
  [icon]="'c8y-modules'"
  [title]="'Assets and groups only' | translate"
  [isActive]="selectedTab === tabNames.groupsAndAssets"
  [tabsOutlet]="'searchTabs'"
  [label]="tabNames.groupsAndAssets | translate"
  [priority]="500"
  (onSelect)="onTabChange(tabNames.groupsAndAssets)"
></c8y-tab>

<div
  class="p-l-48 p-t-8 d-flex a-i-center"
  *ngIf="useTabs && (context$ | async)?.contextData?.name"
>
  <span translate>Search only in</span>
  <span class="text-bold p-l-4">{{ (context$ | async)?.contextData?.name }}</span>
  <label
    class="m-l-8 c8y-switch c8y-switch--inline"
    [title]="'Search only within the current group or asset hierarchy' | translate"
  >
    <input
      type="checkbox"
      [ngModel]="isOnlyHierarchyQuery"
      [attr.aria-label]="'Search only within the current group or asset hierarchy' | translate"
      (ngModelChange)="onHierarchyQueryChange($event)"
    />
    <span></span>
  </label>
</div>

results matching ""

    No results matching ""