@schemater/filter-bar

Filter bar that utilizes @schemater/core and @schemater/bootstrap to present nice filter bar as a complex searcher.

Usage

1. Import @schemater/core and @schemater/bootstrap and define all fields.
2. Import SchematerFilterBarModule.forRoot({})
3. Put <schemater-filter-bar [fields]="fields" [mainField]="mainField"></schemater-filter-bar> into template

Parameters

Inputs

fields: SchematerFieldConfig[] definitions of available fields. required

mainField: string - id of main search field. Field must be of type string required

options: SchematerFilterBarOptions search bar options:

• filters: boolean - Filters turned on or not. Default: true
• showSearchButton: boolean - Show search button in bar. Default: true
• emitSearchOnFormChange: boolean - Emit search event on every form value change. Default: true
• emitSearchDebounce: number - Debounce time of emit search event. Default: 500
• filterManagement: boolean - Filter management turned on or not. Default: false
• mainFieldPlaceholder: string - placeholder text for main field. If not provided the name of mainField is taken

value: { [s: string]: SchematerSearchFieldValue } value of form. Component will emit search event on every value change. JSON.stringify is used for compariosion weather value has changed

defaultFilters: Filter[] array of default filters. Those filters cannot be removed or edited

customFilters: Filter[] array of user defined filters. Those filters can be removed or edited

selectedFilter: string|number filter's id of selected Filter

Outputs

search: { [s: string]: SchematerSearchFieldValue } event triggered on form value change or search button clicked

searchButtonClicked: { [s: string]: SchematerSearchFieldValue } event triggered on search button clicked. Using that Output You can force to perform search on user action

filterChange: string|number event triggered when filter is changed. Passes id of Filter

customFiltersChange: Filter[] event triggered when custom filters are changed