kevinschweikert

kevinschweikert

Need help implementing a "Select All" checkbox with form data

Hi together,

i want to build a filter UI where the user can select some items with a checkbox and then the results get filtered based on the selected checkboxes. For example, a use case where we have some categories in a DB and give the user a checkbox for each category to filter for. So far so good and i had no problem implementing that.
But i want to have another checkbox which lets the user select all the categories at once or deselect every category at once. Additionally, the behaviour should be, that when a user deselects one category while the select all box is checked it should become unchecked and vice versa, when the user selects every category by hand, the select all checkbox should be checked as well.

My first step was to define a schema for the form which looks something like this:

  defp parse_filter(default_filter, attrs \\ %{}) do
    fields = %{
      all: :boolean,
      selected: {:array, :integer}
    }

    {default_filter, fields}
    |> Ecto.Changeset.cast(attrs, Map.keys(fields))
    |> Map.put(:action, :validate)
  end

Is store the filter params in the URL with:

  def handle_event("change-categories", %{"categories" => params}, socket) do
    form = parse_filter(socket.assigns.filter, params)
    filter = apply_filter(form)
    {:noreply, socket |> push_patch(to: ~p"/?#{filter}")}
  end
  def handle_params(params, _, socket) do
    form = parse_filter(socket.assigns.filter, params)
    filter = apply_filter(form)

    {:noreply,
     socket
     |> assign(
       filter: filter,
       filtered_categories: filter_categories(socket.assigns.categories, filter)
     )
     |> assign_form(form)}
  end

I’ve tried with some Ecto.Changeset.get_change/put_change in the validation with parse_filter/2 but all and selected would overwrite each other.

I’ve prepared a gist with my idea, but i can’t figure out if i am on the right track with my plan. Does anybody have a solution for this problem or can point me in the right direction?

Marked As Solved

LostKobrakai

LostKobrakai

You weren’t far off: Revisions · Phoenix LiveView filter toogle all problem · GitHub

Needed a bit working around the fact that empty lists cannot be represented in url encoding.

Also Liked

greven

greven

Here’s a snippet of what I have done in a multi-step form some years ago. Probably there is a more elegant solution for this, but this was done “in a rush” about 4 years ago, anyway, it might help you.

The amount of possible options here was like 4 and static, maybe if you have dynamic options it might not work that well with this approach.

defmodule Web.JobTypeStepComponentLive do

  @primary_key false
  embedded_schema do
    field(:job_types, {:array, :string})
  end

  @impl true
  def mount(socket) do
    socket = assign(socket, all_checked?: false)
    {:ok, socket}
  end

  @impl true
  def update(assigns, socket) do
    socket =
      socket
      |> assign(assigns)
      |> assign_job_types()
      |> assign_changeset()
      |> assign_job_type_options()

    {
      :ok,
      socket
      |> assign(all_checked?: all_checked?(socket))
    }
  end

  @impl true
  def handle_event("validate", params, socket) do
    params = Map.get(params, "job_type_step_component", %{"job_types" => []})
    all_checked? = all_checked?(socket, params["job_types"])

    changeset =
      %__MODULE__{}
      |> changeset(params)
      |> Map.put(:action, :validate)

    {:noreply, assign(socket, changeset: changeset, all_checked?: all_checked?)}
  end

  @impl true
  def handle_event("toggle_all", _payload, socket) do
    all_ids =
      socket.assigns.job_type_options
      |> Enum.map(&(elem(&1, 1) |> to_string()))

    all_checked? = all_checked?(socket)
    new_selection = if all_checked?, do: [], else: all_ids

    changeset =
      %__MODULE__{}
      |> changeset(%{"job_types" => new_selection})
      |> Map.put(:action, :validate)

    {:noreply, assign(socket, changeset: changeset, all_checked?: !all_checked?)}
  end

  defp all_checked?(socket) do
    current_ids = get_field(socket.assigns.changeset, :job_types) || []
    all_checked?(socket, current_ids)
  end

  defp all_checked?(socket, current_ids) do
    all_ids =
      socket.assigns.job_type_options
      |> Enum.map(&(elem(&1, 0) |> to_string()))

    length(current_ids) == length(all_ids)
  end

@impl true
  def render(assigns) do
    ~H"""
       (...)

          <div class="flex justify-center">
          <button type="button" class="btn btn--link btn--compact" phx-click="toggle_all" phx-target= 
               {@myself}>
            <%= if @all_checked?, do: gettext("Deselect all"), else: gettext("Select all") %>
          </button>
        </div>
    """
  end
end
LostKobrakai

LostKobrakai

So handle_params being called the first time is “special”. I’d have an assign preselected, which you fill in mount, in handle_params you adjust the result of parse_filter with all preselected categories and at the end of handle_params you set preselected: [] to essentially disable preselection going forward.

Last Post!

greven

greven

Saw this blog post from FullStackPhoenix that is also related. :slight_smile:

Where Next?

Popular in Questions Top

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
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New

Other popular topics Top

jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
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
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New

We're in Beta

About us Mission Statement