Merge pull request #1528 from gmazzamuto/select-enhancements

Add support for option groups in `Select` and `MultiSelect` fields

Author: Flo0807

demo/lib/demo/address.ex

@@ -11,7 +11,7 @@ defmodule Demo.Address do
     field :street, :string
     field :zip, :string
     field :city, :string
-    field :country, Ecto.Enum, values: [:de, :at, :ch]
+    field :country, Ecto.Enum, values: [:de, :at, :ch, :us, :ca]
     field :full_address, :string, virtual: true
 
     timestamps()

demo/lib/demo_web/live/address_live.ex

@@ -36,7 +36,10 @@ defmodule DemoWeb.AddressLive do
       country: %{
         module: Backpex.Fields.Select,
         label: "Country",
-        options: [Germany: "de", Austria: "at", Switzerland: "ch"]
+        options: %{
+          "Europe" => [Germany: "de", Austria: "at", Switzerland: "ch"],
+          "North America" => [USA: "us", Canada: "ca"]
+        }
       }
     ]
   end

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,50 +66,64 @@ 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
-        values =
-          case PhoenixForm.input_value(assigns.form, name) do
-            value when is_binary(value) -> [value]
-            value when is_list(value) -> value
-            _value -> []
-          end
-
-        Enum.map(values, &to_string/1)
+        case PhoenixForm.input_value(assigns.form, name) do
+          value when is_binary(value) -> [value]
+          value when is_list(value) -> value
+          _value -> []
+        end
       else
-        value = Map.get(item, name)
-
-        if value, do: value, else: []
+        Map.get(item, name) || []
       end
 
-    selected =
-      Enum.reduce(options, [], fn {_label, value} = option, acc ->
-        if value in selected_ids do
-          [option | acc]
-        else
-          acc
-        end
-      end)
-      |> Enum.reverse()
+    selected_ids = Enum.map(selected_ids, &to_string/1)
+
+    selected = Enum.filter(options, fn {_label, value} -> value in selected_ids end)
 
     assign(socket, :selected, selected)
   end
 
   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
@@ -167,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
 
-    selected_item = Enum.find(selected, fn {_label, value} -> value == id end)
+    options = flatten_options(options)
+
+    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)
@@ -191,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)
@@ -207,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
 
-    new_selected = if show_select_all, do: field_options.options.(assigns), else: []
+    options = flatten_options(options)
+
+    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/fields/select.ex

@@ -1,8 +1,8 @@
 defmodule Backpex.Fields.Select 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: [
@@ -128,6 +128,15 @@ defmodule Backpex.Fields.Select do
   end
 
   defp get_label(value, options) do
+    options =
+      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()
+
     case Enum.find(options, fn option -> value?(option, value) end) do
       nil -> value
       {label, _value} -> label

lib/backpex/html/form.ex

@@ -435,6 +435,25 @@ 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}
+          class="mt-2"
+          label={lab}
+          value={val}
+          event_target={@event_target}
+          field={@field}
+          selected={@selected}
+        />
+      </div>
+    </div>
+    """
+  end
+
   defp multi_select_option(assigns) do
     ~H"""
     <label