Data Filtering

Several Back-kit components are designed to interact with a dataset. Data should be fetched by a client component from a backend resource.

The CRUD Client component is designed to interact with Mia Platform CRUD Service. The CRUD Client fetches data from a collection of the CRUD Service, and propagates it to other components as payload of a display-data event.

The CRUD Client fetches data by performing an HTTP request to the CRUD Service. Particularly, its internal state holds a representation of the query that it uses to fetch data. This is an object shaped like the payload of a change-query event, in which each field influences the parameters of the HTTP call that the CRUD Client executes to fetch data from the CRUD Service.

Components may signals the need to modify the way data is fetched by emitting a change-query event. When this happens, the CRUD Client updates its internal query to reflect the requested changes, and re-triggers data fetching with the updated configuration.

Using Back-kit components, data filtering happens by emitting change-query events that modify how the CRUD Client fetches data, by adding new filters.

Back-kit offers two solutions for interacting with the CRUD Client by applying filters: 1) the combination of the Filters Manager and the Filter Drawer 2) the Expandable Filters

both solutions need a component that emits a filter event to initiate the filtering process, like the Add Filter Button.

tip

Each filter is composed of the triple:

• property: the field to filter
• operator: the operator used to filter
• value: the value to filter for

While the Expandable Filters component allows to apply multiple filters in one go, it does not allow the user to configure the property nor the operator associated to each filter, which are set by configuration using the filtersConfig property of the component.

If the user should be allowed to set the property and the operator of each filter, the Filter Drawer solution should be used.

Data Filtering with the Filter Drawer

Data filtering may be achieved by including in the configuration:

• the CRUD Client, which must be configured with:
  • a basePath, which is the endpoint to reach the associated CRUD collection
  • a data-schema, which provides information on the structure of the data of the associated CRUD Service collection
• the Filters Manager
• the Filter Drawer, which should be configured with a data-schema
• the Add Filter Button (or any component emitting a filter event to initiate the filtering process)

Clicking the Add Filter Button initiates the process by emitting a filter event. The Filter Drawer reacts to the event by opening. The user can use the form inside the Filter Drawer to configure a new filter to apply to the underlying data. All three of the items that identify a filter (property, operator, value) can be set by the user using the Filter Drawer.

Upon submission, the Filter Drawer notifies the need to apply the new filter by emitting an add-filter event. When the Filter Manager listens to such event, performs two tasks: 1) re-renders to allow user interaction with the new filter, as well as other filters previously applied this way 2) emits a change-query event with the updated list of events

The CRUD Client reacts to the change-query event by newly fetching data from the backend with the filters, and propagating retrieved data to other components.

An example of how to configure filtering this way is provided.

Data Filtering with the Expandable Filters

Data filtering may be achieved by including in the configuration:

• the CRUD Client, which must be configured with:
  • a basePath, which is the endpoint to reach the associated CRUD collection
  • a data-schema, which provides information on the structure of the data of the associated CRUD Service collection
• the Expandable Filters, which must be configured with:
  • a data-schema, which provides information on the structure of the data of the associated CRUD Service collection
  • filtersConfig, which describes the property and operator of each filter that can be applied
• the Add Filter Button (or any component emitting a filter event to initiate the filtering process)

Clicking the Add Filter Button initiates the process by emitting a filter event, which toggles the Expandable Filters.

The user can use the form inside the Expandable Filters to configure filters to be applied to the underlying data.

While the Expandable Filters component allows to apply multiple filters in one go, it does not allow the user to configure the property nor the operator associated to each filter, which are set by configuration using the filtersConfig property.

tip

If the user should be allowed to set the property and the operator of each filter, the Filter Drawer solution should be used instead.

Submitting the form of the Expandable Filters triggers the emission of a change-query event with the applied filters.

The CRUD Client reacts to the change-query event by newly fetching data from the backend with the filters, and propagating retrieved data to other components.

An example of how to configure filtering this way is provided.

Examples

Example: Filter data with the Filter Drawer

The following configuration snippet shows how data fetching and filtering can be achieved by combining the following components:

• the CRUD Client
• the Filters Manager
• the Filter Drawer
• the Add Filter Button

{
  "tag": "bk-add-new-filter"
},
{
  "tag": "bk-filters-manager"
},
{
  "tag": "bk-filter-drawer",
  "properties": {
    "dataSchema": {
      "type": "object",
      "properties": {
        "_id_": {"type": "string"},
        "__STATE__": {"type": "string"},
        "name": {"type": "string"},
        "price": {"type": "number"}
      }
    }
  }
},
{
  "tag": "bk-crud-client",
  "properties": {
    "basePath": "/v2/orders",
    "dataSchema": { // <- same as `bk-filter-drawer`
      "type": "object",
      "properties": {
        "_id_": {"type": "string"},
        "__STATE__": {"type": "string"},
        "name": {"type": "string"},
        "price": {"type": "number"}
      }
    }
  }
}

Clicking the Add New Button opens the Filter Drawer, which allow the user to specify one filter for each property of the data-schema. Assuming the inserted values to be representable as:

{
  "property": "name",
  "operator": "equal",
  "value": "Joe",
}

And assuming the Filters Manager to already include a filter like:

{
  "property": "price",
  "operator": "greater",
  "value": 100
}

Then the updated filters are the combination of the two:

{
  "property": "name",
  "operator": "equal",
  "value": "Joe"
},
{
  "property": "price",
  "operator": "greater",
  "value": 100
}

The CRUD Client chains these filters inside an $and MongoDB-like query, and retrieves filtered data.

Example: Filter data with the Expandable Filters

The following configuration snippet shows how data fetching and filtering can be achieved by combining the following components:

• the CRUD Client
• the Expandable Filters
• the Add Filter Button

{
  "tag": "bk-add-new-filter"
},
{
  "tag": "bk-expanded-filters",
  "properties": {
    "dataSchema": {
      "type": "object",
      "properties": {
        "_id_": {"type": "string"},
        "__STATE__": {"type": "string"},
        "name": {"type": "string"},
        "price": {"type": "number"}
      }
    },
    "filtersConfig": [
      {
        "property": "price",
        "operator": "greater"
      },
      "name" // same as: `{"property": "name", "operator": "equal"}`
    ]
  }
},
{
  "tag": "bk-crud-client",
  "properties": {
    "basePath": "/v2/orders",
    "dataSchema": { // <- same as `bk-expanded-filters`
      "type": "object",
      "properties": {
        "_id_": {"type": "string"},
        "__STATE__": {"type": "string"},
        "name": {"type": "string"},
        "price": {"type": "number"}
      }
    }
  }
}

Clicking the Add New Button toggles the Expanded Filters, which allow the user to specify a value for filtering properties price and name. Assuming the inserted values to be representable as:

{
  "name": "Joe",
  "price": 100
}

Then the emitted filters look like:

{
  "property": "name",
  "operator": "equal",
  "value": "Joe"
},
{
  "property": "price",
  "operator": "greater",
  "value": 100
}

The CRUD Client chains these filters inside an $and MongoDB-like query, and retrieves filtered data.