(Proposal) UI Grid Filters

[jniles]

The current filtering of UI Grids is bulky and difficult to work with. Some problems with it:

1. Cannot selectively add or remove filters. The modal applies all filters at once, and removes them all when filtering again.
2. Filters should ideally be stored as JSON objects to be sent as query params to the server. They are currently stored in an array that is difficult to work with on the client.

Proposal
I propose that we model filters as a JSON object with column:value pairs. Like this:

// filters to be applied to the grid.
let filters = {
  name: "Christopher",
  limit: "10",
  sex: "M"
};

I also propose that we implement add/remove functionality that can remove or add a single filter at a time. The UI would look like this:

Fig 1: No filters applied.

Fig 2: Filtering with a single filter + limit.

Fig 3: Filtering with multiple, additive filters.

When the user clicks the "X" icon on a filter, it is removed, and the data is refreshed from the database.

[jniles]

After some discussion, I'm updating my recommendation for the data model. I propose:

var filters = [
  { field : 'first_name', displayName: 'FORM.LABELS.FIRST_NAME', value: undefined },
  // more filters
];

Advantages:

1. Looks like ui-grid.
2. Allows translation to be defined with columns as displayName.
3. Is extendable to hold other properties (greater than, less than, etc) in the future.