Advanced filter form fields in Flop Phoenix

Phoenix Forum Questions / Help
, ,
1

Hi all,

I am evaluating to start using Flop Phoenix to do sorting, filtering and pagination.
I was able to make a simple filter form with compund and join fields.
That is impressive work, kudos to the contributors!

My question is about the filter form:
I have a join field which refers to strings (think about a user that has many roles).

My goal would be to have a form with roles names as checkboxes, and run the filter using that.

Is that doable with Phoenix Flop?

Cheers!

2

Yes, definitely. If you use an input component as generated by Phoenix 1.7, you can add a new type checkbox-group that takes an options attribute the same way the select type does. I actually like to add both checkbox-group and radio-group that way, so that I can switch between a select, check boxes, and radio buttons just by changing the type attribute. The op of the filter needs to be set to in.

2 Likes
3

OMG this library is fantastic!!! :heart_eyes:

2 Likes
4

Expanding a bit on @woylie’s comment, for the benefit of anyone that’s brand new to Flop and happens to stumble upon this post (like myself, a few days ago) —

  1. If you don’t already have a checkbox group input in your project, you can start with @brainlid’s implementation here: Making a CheckboxGroup Input · The Phoenix Files (specifically, the function component (def input(%{type: "checkgroup"} = assigns)) is all you need, with one modification: checked={value in @value} → checked={@value && value in @value}.

  2. Assuming that you’re using a filter_form component like the one in the Flop Phoenix docs (Flop Phoenix — Flop Phoenix v0.22.4), your filter will need to look something like this:

user_id: [
  type: "checkgroup",
  multiple: true,
  op: :in,
  options: [
    {"Robert Baratheon", "01HGS9M6A2PFEK8QR1D1FXNBFS"},
    {"Ned Stark", "01HGS9M6A3EW19FRXASEN6HVB7"}
  ]
]

Note the op: :in (as mentioned by @woylie), as well as the multiple: true.

  1. One last thing: if no options are selected for a given checkbox group, the form params will include an array with one item: an empty string. Flop will ignore empty strings, but not an array with an empty string, like this:
params #=> %{
  "filters" => %{
    "0" => %{"field" => "user_id", "op" => "in", "value" => [""]}
  }
}

You’ll want to replace the [""] with "" before handing the params over to Flop, so that Flop knows to ignore the filter entirely. (I burned more time on this than I’d like to admit. Of course, if I had taken the time to learn and integrate Flop on its own before jumping in to Flop Phoenix, I would have caught this issue immediately… ;-))

3 Likes