Skip to content

Single select filter

Job Haast edited this page Sep 20, 2024 · 2 revisions

Single select filter

Overview

The SingleSelectFilter class represents a filter that allows the user to select a single option at a time from a predefined list. This filter uses an equality operation to filter data based on the selected option, and it supports only one condition at a time.

Class: SingleSelectFilter

This class extends AbstractSelectFilter and is designed to operate on a single selectable option of type T. It provides the ability to filter data using a select dropdown or similar interface where the user can pick one option at a time.

Constructor

constructor(column: string, label: string, options: SelectOption[], conditions?: Condition[])

Parameters:

  • column: string: The name of the column or field that the filter applies to.
  • label: string: The label or display name of the filter.
  • options: SelectOption[]: An array of selectable options for the filter.
  • conditions?: Condition[]: An optional array of conditions to initialize the filter with. The array may contain only one condition; otherwise, a RangeError will be thrown.

Throws:

  • RangeError: If more than one condition is provided, a RangeError will be thrown, as the SingleSelectFilter only supports a single condition at a time.

Properties

options (public)

public options: SelectOption[];
  • Type: SelectOption[]
  • Description: The array of selectable options available for the filter.

_conditions (protected)

protected _conditions: Condition[] = [];
  • Type: Condition[]
  • Description: The internal array holding the single condition applied to the filter.

onApply (public)

onApply: EventEmitter;
  • Type: EventEmitter
  • Description: Emits an event when the filter is applied or updated with a new condition.

Methods

selectOption (public)

public selectOption(value: T): void;
  • Type: void
  • Description: Selects an option from the available options and applies the filter based on the selected value. It creates a new condition using the equality operation and updates the filter's condition.
  • Parameters:
    • value: T: The value of the option to select.

Remarks:

The selectOption method finds the corresponding option from the filter's available options and creates an equality condition using the selected value. The filter is then applied, and the onApply event is emitted.

Usage

The SingleSelectFilter class is ideal for cases where you need to filter data based on a single selection from a list of options, such as selecting a category, status, or any predefined list of values.

Example Usage

To create a filter that allows the user to select a country:

const countryOpetions = [
  new SelectOption("NL", 1),
  new SelectOption("BE", 2),
  new SelectOption("DE", 3),
  new SelectOption("CZ", 4),
  new SelectOption("PO", 5),
  new SelectOption("US", 6),
  new SelectOption("GB", 7),
];
const countryFilter = new SingleSelectFilter(
  "country_id",
  "Country",
  countryOpetions
);
countryFilter.selectOption(1); // Filters records with country id equal to '1'.

Clone this wiki locally