Fields.MultiSelect: add support for option groups

Additionally, this fixes the `:options` field option not working when
passed a list rather than a function.

Author: gmazzamuto

demo/lib/demo_web/live/user_live.ex

@@ -197,7 +197,11 @@ defmodule DemoWeb.UserLive do
       permissions: %{
         module: Backpex.Fields.MultiSelect,
         label: "Permissions",
-        options: fn _assigns -> [{"Delete", "delete"}, {"Edit", "edit"}, {"Show", "show"}] end
+        options: [
+          {"Can access admin panel", "can_access_admin_panel"},
+          {"Item actions", [{"Delete", "delete"}, {"Edit", "edit"}, {"Show", "show"}]},
+          {"Other actions", [{"Can send email", "can_send_email"}]}
+        ]
       }
     ]
   end

lib/backpex/fields/multi_select.ex

@@ -1,8 +1,8 @@
 defmodule Backpex.Fields.MultiSelect do
   @config_schema [
     options: [
-      doc: "List of options or function that receives the assigns.",
-      type: {:or, [{:list, :any}, {:fun, 1}]},
+      doc: "List of possibly grouped options or function that receives the assigns.",
+      type: {:or, [{:list, :any}, {:map, :any, :any}, {:fun, 1}]},
       required: true
     ],
     prompt: [
@@ -66,18 +66,41 @@ defmodule Backpex.Fields.MultiSelect do
     %{assigns: %{field_options: field_options} = assigns} = socket
 
     options =
-      assigns
-      |> field_options.options.()
+      case Map.get(field_options, :options) do
+        options when is_function(options) -> options.(assigns)
+        options -> options
+      end
+
+    options =
+      options
       |> Enum.map(fn {label, value} ->
-        {to_string(label), to_string(value)}
+        case value do
+          value when is_list(value) or is_map(value) ->
+            {to_string(label), Enum.map(value, fn {lab, val} -> {to_string(lab), to_string(val)} end)}
+
+          value ->
+            {to_string(label), to_string(value)}
+        end
       end)
 
     assign(socket, :options, options)
   end
 
+  defp flatten_options(options) do
+    Enum.map(options, fn {_label, value} = option ->
+      case value do
+        value when is_list(value) or is_map(value) -> value
+        _value -> option
+      end
+    end)
+    |> List.flatten()
+  end
+
   defp assign_selected(socket) do
     %{assigns: %{type: type, options: options, item: item, name: name} = assigns} = socket
 
+    options = flatten_options(options)
+
     selected_ids =
       if type == :form do
         case PhoenixForm.input_value(assigns.form, name) do
@@ -99,6 +122,8 @@ defmodule Backpex.Fields.MultiSelect do
   defp maybe_assign_form(%{assigns: %{type: :form} = assigns} = socket) do
     %{selected: selected, options: options} = assigns
 
+    options = flatten_options(options)
+
     show_select_all = length(selected) != length(options)
 
     socket
@@ -156,21 +181,20 @@ defmodule Backpex.Fields.MultiSelect do
 
   @impl Phoenix.LiveComponent
   def handle_event("toggle-option", %{"id" => id}, socket) do
-    %{assigns: %{selected: selected, options: options, field_options: field_options}} = socket
+    %{assigns: %{selected: selected, options: options}} = socket
+
+    options = flatten_options(options)
 
-    selected_item = Enum.find(selected, fn {_label, value} -> value == id end)
+    clicked_item = Enum.find(options, fn {_label, value} -> value == id end)
 
     new_selected =
-      if selected_item do
-        Enum.reject(selected, fn {_label, value} -> value == id end)
+      if clicked_item in selected do
+        selected -- [clicked_item]
       else
-        selected
-        |> Enum.reverse()
-        |> Kernel.then(&[Enum.find(options, fn {_label, value} -> value == id end) | &1])
-        |> Enum.reverse()
+        [clicked_item] ++ selected
       end
 
-    show_select_all = length(new_selected) != length(field_options.options.(socket.assigns))
+    show_select_all = length(new_selected) != length(options)
 
     socket
     |> assign(:selected, new_selected)
@@ -180,13 +204,12 @@ defmodule Backpex.Fields.MultiSelect do
 
   @impl Phoenix.LiveComponent
   def handle_event("search", params, socket) do
-    %{assigns: %{name: name, field_options: field_options} = assigns} = socket
+    socket = assign_options(socket)
+    %{assigns: %{name: name, options: options}} = socket
 
     search_input = Map.get(params, "change[#{name}]_search")
 
-    options =
-      field_options.options.(assigns)
-      |> maybe_apply_search(search_input)
+    options = apply_search(options, search_input)
 
     socket
     |> assign(:options, options)
@@ -196,27 +219,37 @@ defmodule Backpex.Fields.MultiSelect do
 
   @impl Phoenix.LiveComponent
   def handle_event("toggle-select-all", _params, socket) do
-    %{assigns: %{field_options: field_options, show_select_all: show_select_all} = assigns} = socket
+    %{assigns: %{options: options, show_select_all: show_select_all}} = socket
+
+    options = flatten_options(options)
 
-    new_selected = if show_select_all, do: field_options.options.(assigns), else: []
+    new_selected = if show_select_all, do: options, else: []
 
     socket
     |> assign(:selected, new_selected)
     |> assign(:show_select_all, not show_select_all)
     |> noreply()
   end
 
-  defp maybe_apply_search(options, search_input) do
-    if String.trim(search_input) == "" do
-      options
-    else
-      search_input_downcase = String.downcase(search_input)
+  defp apply_search(options, search_input) do
+    Enum.map(options, fn {label, value} -> filter_option(label, value, search_input) end) |> Enum.filter(& &1)
+  end
 
-      Enum.filter(options, fn {label, _value} ->
-        String.downcase(label)
-        |> String.contains?(search_input_downcase)
-      end)
-    end
+  defp filter_option(label, value, search_input) when is_list(value) or is_map(value) do
+    search_input_downcase = String.downcase(search_input)
+
+    filtered =
+      Enum.filter(value, fn {_label, _value} -> String.downcase(label) |> String.contains?(search_input_downcase) end)
+
+    if not Enum.empty?(filtered), do: {label, filtered}
+  end
+
+  defp filter_option(label, _value, search_input) do
+    search_input_downcase = String.downcase(search_input)
+
+    label
+    |> String.downcase()
+    |> String.contains?(search_input_downcase)
   end
 
   defp prompt(assigns, field_options) do

lib/backpex/html/form.ex

@@ -435,6 +435,24 @@ defmodule Backpex.HTML.Form do
   attr :selected, :list, required: true
   attr :event_target, :any, required: true
 
+  defp multi_select_option(%{value: value} = assigns) when is_list(value) or is_map(value) do
+    ~H"""
+    <div class="not-first:mt-2">
+      <span class="font-medium">{@label}</span>
+      <div class="ml-4">
+        <.multi_select_option
+          :for={{lab, val} <- @value}
+          label={lab}
+          value={val}
+          event_target={@event_target}
+          field={@field}
+          selected={@selected}
+        />
+      </div>
+    </div>
+    """
+  end
+
   defp multi_select_option(assigns) do
     ~H"""
     <label