Overview

Filter Bar

wuic-filter-bar is the filtering/sorting/grouping toolbar connected to a wuic-data-source.

Description

Reads filter metadata from datasource.fetchInfo.
Exposes column filters, grouping, aggregations, sorting, and page-size.
Synchronizes grid state in the querystring (filterInfo, sortInfo, pageInfo).
Also handles routes with cursor mode.

API

Selector:

wuic-filter-bar

Input:

datasource: BehaviorSubject<DataSourceComponent>
hardcodedDatasource: DataSourceComponent

Output:

filterApplied: EventEmitter<void>
onFilterApplied: EventEmitter<{ mode, filterInfo }>
onSortingApplied: EventEmitter<{ sortInfo }>
onPageSizeApplied: EventEmitter<{ pageSize, currentPage }>
onGroupingChanged: EventEmitter<{ groupInfo, aggregationInfo, action }>
onFilterBarCollapseChanged: EventEmitter<{ collapsed }>

Main public methods:

filter()
clearFilter()
addGroupField()
addAggregateField()
clearGroups()
addSortField()
removeSortField(index)
clearSorting()
applySorting()
applyPageSize()
resetPageSize()

Events and Subscriptions (Host)

Snippet 1ts

@ViewChild(FilterBarComponent) filterBar?: FilterBarComponent;
private readonly subs = new Subscription();

ngAfterViewInit(): void {
  if (!this.filterBar) return;
  this.subs.add(this.filterBar.filterApplied.subscribe(() => console.log('filterApplied')));
  this.subs.add(this.filterBar.onFilterApplied.subscribe((e) => console.log(e)));