ca1989

ca1989

Advanced filter form fields in Flop Phoenix

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!

Marked As Solved

woylie

woylie

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.

Also Liked

mjrusso

mjrusso

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.26.1), 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… ;-))

ca1989

ca1989

OMG this library is fantastic!!! :heart_eyes:

ppff01

ppff01

For future readers: you can avoid doing this by removing the hidden input in the checkbox group :slight_smile:

Last Post!

ppff01

ppff01

For future readers: you can avoid doing this by removing the hidden input in the checkbox group :slight_smile:

Where Next?

Popular in Questions Top

RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" => #BSON.ObjectId<58eb1a7a9ad169198c3dXXXX>, "email" => ...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Other popular topics Top

nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 44139 214
New

We're in Beta

About us Mission Statement