feat: add new filter component to members view

lib/mv_web/live/components/member_filter_component.ex

@@ -0,0 +1,454 @@
+defmodule MvWeb.Components.MemberFilterComponent do
+  @moduledoc """
+  Provides the MemberFilter Live-Component.
+
+  A DaisyUI dropdown filter for filtering members by payment status and boolean custom fields.
+  Uses radio inputs in a segmented control pattern (join + btn) for tri-state boolean filters.
+
+  ## Design Decisions
+
+  - Uses `div` panel instead of `ul.menu/li` structure to avoid DaisyUI menu styles
+    (padding, display, hover, font sizes) that would interfere with form controls.
+  - Filter controls are form elements (fieldset, radio inputs), not menu items.
+  - Dropdown stays open when clicking filter segments to allow multiple filter changes.
+  - Uses `phx-change` on form for radio inputs instead of individual `phx-click` events.
+
+  ## Props
+  - `:cycle_status_filter` - Current payment filter state: `nil` (all), `:paid`, or `:unpaid`
+  - `:boolean_custom_fields` - List of boolean custom fields to display
+  - `:boolean_filters` - Map of active boolean filters: `%{custom_field_id => true | false}`
+  - `:id` - Component ID (required)
+  - `:member_count` - Number of filtered members to display in badge (optional, default: 0)
+
+  ## Events
+  - Sends `{:payment_filter_changed, filter}` to parent when payment filter changes
+  - Sends `{:boolean_filter_changed, custom_field_id, filter_value}` to parent when boolean filter changes
+  """
+  use MvWeb, :live_component
+
+  @impl true
+  def mount(socket) do
+    {:ok, assign(socket, :open, false)}
+  end
+
+  @impl true
+  def update(assigns, socket) do
+    socket =
+      socket
+      |> assign(:id, assigns.id)
+      |> assign(:cycle_status_filter, assigns[:cycle_status_filter])
+      |> assign(:boolean_custom_fields, assigns[:boolean_custom_fields] || [])
+      |> assign(:boolean_filters, assigns[:boolean_filters] || %{})
+      |> assign(:member_count, assigns[:member_count] || 0)
+
+    {:ok, socket}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div
+      class="relative"
+      id={@id}
+      phx-window-keydown={@open && "close_dropdown"}
+      phx-key="Escape"
+      phx-target={@myself}
+    >
+      <button
+        type="button"
+        tabindex="0"
+        class={[
+          "btn gap-2",
+          (@cycle_status_filter || active_boolean_filters_count(@boolean_filters) > 0) && "btn-active"
+        ]}
+        phx-click="toggle_dropdown"
+        phx-target={@myself}
+        aria-haspopup="true"
+        aria-expanded={to_string(@open)}
+        aria-label={gettext("Filter members")}
+      >
+        <.icon name="hero-funnel" class="h-5 w-5" />
+        <span class="hidden sm:inline">
+          {button_label(@cycle_status_filter, @boolean_custom_fields, @boolean_filters)}
+        </span>
+        <span
+          :if={active_boolean_filters_count(@boolean_filters) > 0}
+          class="badge badge-primary badge-sm"
+        >
+          {active_boolean_filters_count(@boolean_filters)}
+        </span>
+        <span
+          :if={@cycle_status_filter && active_boolean_filters_count(@boolean_filters) == 0}
+          class="badge badge-primary badge-sm"
+        >
+          {@member_count}
+        </span>
+      </button>
+      
+    <!--
+        NOTE: We use a div panel instead of ul.menu/li structure to avoid DaisyUI menu styles
+        (padding, display, hover, font sizes) that would interfere with our form controls.
+        Filter controls are form elements (fieldset, radio inputs), not menu items.
+        We use relative/absolute positioning instead of DaisyUI dropdown classes to have
+        full control over the open/close state via LiveView.
+      -->
+      <div
+        :if={@open}
+        tabindex="0"
+        class="absolute left-0 mt-2 w-[28rem] rounded-box border border-base-300 bg-base-100 p-4 shadow-xl z-[100]"
+        phx-click-away="close_dropdown"
+        phx-target={@myself}
+        role="dialog"
+        aria-label={gettext("Member filter")}
+      >
+        <form phx-change="update_filters" phx-target={@myself}>
+          <!-- Payment Filter Group -->
+          <div class="mb-4">
+            <div class="text-xs font-semibold opacity-70 mb-2 uppercase tracking-wider">
+              {gettext("Payments")}
+            </div>
+            <div class="grid grid-cols-[1fr_auto] items-center gap-3 py-2">
+              <label class="text-sm font-medium" for="payment-filter">
+                {gettext("Payment Status")}
+              </label>
+              <fieldset class="join" aria-label={gettext("Payment status filter")}>
+                <label
+                  class={"#{payment_filter_label_class(@cycle_status_filter, nil)} has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary"}
+                  for="payment-filter-all"
+                >
+                  <input
+                    type="radio"
+                    id="payment-filter-all"
+                    name="payment_filter"
+                    value="all"
+                    class="absolute opacity-0 w-0 h-0 pointer-events-none"
+                    checked={@cycle_status_filter == nil}
+                  />
+                  <span class="text-xs">{gettext("All")}</span>
+                </label>
+                <label
+                  class={"#{payment_filter_label_class(@cycle_status_filter, :paid)} has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary"}
+                  for="payment-filter-paid"
+                >
+                  <input
+                    type="radio"
+                    id="payment-filter-paid"
+                    name="payment_filter"
+                    value="paid"
+                    class="absolute opacity-0 w-0 h-0 pointer-events-none"
+                    checked={@cycle_status_filter == :paid}
+                  />
+                  <.icon name="hero-check-circle" class="h-5 w-5" />
+                  <span class="text-xs">{gettext("Paid")}</span>
+                </label>
+                <label
+                  class={"#{payment_filter_label_class(@cycle_status_filter, :unpaid)} has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary"}
+                  for="payment-filter-unpaid"
+                >
+                  <input
+                    type="radio"
+                    id="payment-filter-unpaid"
+                    name="payment_filter"
+                    value="unpaid"
+                    class="absolute opacity-0 w-0 h-0 pointer-events-none"
+                    checked={@cycle_status_filter == :unpaid}
+                  />
+                  <.icon name="hero-x-circle" class="h-5 w-5" />
+                  <span class="text-xs">{gettext("Unpaid")}</span>
+                </label>
+              </fieldset>
+            </div>
+          </div>
+          
+    <!-- Custom Fields Group -->
+          <div :if={length(@boolean_custom_fields) > 0} class="mb-2">
+            <div class="text-xs font-semibold opacity-70 mb-2 uppercase tracking-wider">
+              {gettext("Custom Fields")}
+            </div>
+            <div class="max-h-60 overflow-y-auto pr-2">
+              <div
+                :for={custom_field <- @boolean_custom_fields}
+                class="grid grid-cols-[1fr_auto] items-center gap-3 py-2 border-b border-base-200 last:border-0"
+              >
+                <label
+                  class="text-sm font-medium"
+                  for={"custom-boolean-filter-#{custom_field.id}"}
+                >
+                  {custom_field.name}
+                </label>
+                <fieldset
+                  class="join"
+                  aria-label={gettext("Filter by %{name}", name: custom_field.name)}
+                >
+                  <label
+                    class={"#{boolean_filter_label_class(@boolean_filters, custom_field.id, nil)} has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary"}
+                    for={"custom-boolean-filter-#{custom_field.id}-all"}
+                  >
+                    <input
+                      type="radio"
+                      id={"custom-boolean-filter-#{custom_field.id}-all"}
+                      name={"custom_boolean[#{custom_field.id}]"}
+                      value="all"
+                      class="absolute opacity-0 w-0 h-0 pointer-events-none"
+                      checked={Map.get(@boolean_filters, to_string(custom_field.id)) == nil}
+                    />
+                    <span class="text-xs">{gettext("All")}</span>
+                  </label>
+                  <label
+                    class={"#{boolean_filter_label_class(@boolean_filters, custom_field.id, true)} has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary"}
+                    for={"custom-boolean-filter-#{custom_field.id}-true"}
+                    aria-label={gettext("Yes")}
+                    title={gettext("Yes")}
+                  >
+                    <input
+                      type="radio"
+                      id={"custom-boolean-filter-#{custom_field.id}-true"}
+                      name={"custom_boolean[#{custom_field.id}]"}
+                      value="true"
+                      class="absolute opacity-0 w-0 h-0 pointer-events-none"
+                      checked={Map.get(@boolean_filters, to_string(custom_field.id)) == true}
+                    />
+                    <.icon name="hero-check-circle" class="h-5 w-5" />
+                    <span class="text-xs">{gettext("Yes")}</span>
+                  </label>
+                  <label
+                    class={"#{boolean_filter_label_class(@boolean_filters, custom_field.id, false)} has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary"}
+                    for={"custom-boolean-filter-#{custom_field.id}-false"}
+                    aria-label={gettext("No")}
+                    title={gettext("No")}
+                  >
+                    <input
+                      type="radio"
+                      id={"custom-boolean-filter-#{custom_field.id}-false"}
+                      name={"custom_boolean[#{custom_field.id}]"}
+                      value="false"
+                      class="absolute opacity-0 w-0 h-0 pointer-events-none"
+                      checked={Map.get(@boolean_filters, to_string(custom_field.id)) == false}
+                    />
+                    <.icon name="hero-x-circle" class="h-5 w-5" />
+                    <span class="text-xs">{gettext("No")}</span>
+                  </label>
+                </fieldset>
+              </div>
+            </div>
+          </div>
+          
+    <!-- Footer -->
+          <div class="mt-4 flex justify-between pt-3 border-t border-base-200">
+            <button
+              type="button"
+              phx-click="reset_filters"
+              phx-target={@myself}
+              class="btn btn-sm"
+            >
+              {gettext("Reset")}
+            </button>
+            <button
+              type="button"
+              phx-click="close_dropdown"
+              phx-target={@myself}
+              class="btn btn-primary btn-sm"
+            >
+              {gettext("Close")}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+    """
+  end
+
+  @impl true
+  def handle_event("toggle_dropdown", _params, socket) do
+    {:noreply, assign(socket, :open, !socket.assigns.open)}
+  end
+
+  @impl true
+  def handle_event("close_dropdown", _params, socket) do
+    {:noreply, assign(socket, :open, false)}
+  end
+
+  @impl true
+  def handle_event("update_filters", params, socket) do
+    # Parse payment filter
+    payment_filter =
+      case Map.get(params, "payment_filter") do
+        "paid" -> :paid
+        "unpaid" -> :unpaid
+        _ -> nil
+      end
+
+    # Parse boolean custom field filters (including nil values for "all")
+    custom_boolean_filters_parsed =
+      params
+      |> Map.get("custom_boolean", %{})
+      |> Enum.reduce(%{}, fn {custom_field_id_str, value_str}, acc ->
+        filter_value = parse_tri_state(value_str)
+        Map.put(acc, custom_field_id_str, filter_value)
+      end)
+
+    # Update payment filter if changed
+    if payment_filter != socket.assigns.cycle_status_filter do
+      send(self(), {:payment_filter_changed, payment_filter})
+    end
+
+    # Update boolean filters - send events for each changed filter
+    current_filters = socket.assigns.boolean_filters
+
+    # Process all custom field filters from form (including those set to "all"/nil)
+    # Radio buttons in a group always send a value, so all active filters are in the form
+    Enum.each(custom_boolean_filters_parsed, fn {custom_field_id_str, new_value} ->
+      current_value = Map.get(current_filters, custom_field_id_str)
+
+      # Only send event if value actually changed
+      if current_value != new_value do
+        send(self(), {:boolean_filter_changed, custom_field_id_str, new_value})
+      end
+    end)
+
+    # Don't close dropdown - allow multiple filter changes
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_event("reset_filters", _params, socket) do
+    # Reset payment filter
+    if socket.assigns.cycle_status_filter != nil do
+      send(self(), {:payment_filter_changed, nil})
+    end
+
+    # Reset all boolean filters
+    Enum.each(socket.assigns.boolean_filters, fn {custom_field_id_str, _value} ->
+      send(self(), {:boolean_filter_changed, custom_field_id_str, nil})
+    end)
+
+    # Close dropdown after reset
+    {:noreply, assign(socket, :open, false)}
+  end
+
+  # Parse tri-state filter value: "all" | "true" | "false" -> nil | true | false
+  defp parse_tri_state("true"), do: true
+  defp parse_tri_state("false"), do: false
+  defp parse_tri_state("all"), do: nil
+  defp parse_tri_state(_), do: nil
+
+  # Get display label for button
+  defp button_label(cycle_status_filter, boolean_custom_fields, boolean_filters) do
+    # If payment filter is active, show payment filter label
+    if cycle_status_filter do
+      payment_filter_label(cycle_status_filter)
+    else
+      # Otherwise show boolean filter labels
+      boolean_filter_label(boolean_custom_fields, boolean_filters)
+    end
+  end
+
+  # Get payment filter label
+  defp payment_filter_label(nil), do: gettext("All")
+  defp payment_filter_label(:paid), do: gettext("Paid")
+  defp payment_filter_label(:unpaid), do: gettext("Unpaid")
+
+  # Get boolean filter label (comma-separated list of active filter names)
+  defp boolean_filter_label(_boolean_custom_fields, boolean_filters)
+       when map_size(boolean_filters) == 0 do
+    gettext("All")
+  end
+
+  defp boolean_filter_label(boolean_custom_fields, boolean_filters) do
+    # Get names of active boolean filters
+    active_filter_names =
+      boolean_filters
+      |> Enum.map(fn {custom_field_id_str, _value} ->
+        Enum.find(boolean_custom_fields, fn cf -> to_string(cf.id) == custom_field_id_str end)
+      end)
+      |> Enum.filter(&(&1 != nil))
+      |> Enum.map(& &1.name)
+
+    # Join with comma and truncate if too long
+    label = Enum.join(active_filter_names, ", ")
+    truncate_label(label, 30)
+  end
+
+  # Truncate label if longer than max_length
+  defp truncate_label(label, max_length) when byte_size(label) <= max_length, do: label
+
+  defp truncate_label(label, max_length) do
+    String.slice(label, 0, max_length) <> "..."
+  end
+
+  # Count active boolean filters
+  defp active_boolean_filters_count(boolean_filters) do
+    map_size(boolean_filters)
+  end
+
+  # Get CSS classes for payment filter label based on current state
+  defp payment_filter_label_class(current_filter, expected_value) do
+    base_classes = "join-item btn btn-sm"
+    is_active = current_filter == expected_value
+
+    cond do
+      # All button (nil expected)
+      expected_value == nil ->
+        if is_active do
+          "#{base_classes} btn-active"
+        else
+          "#{base_classes} btn"
+        end
+
+      # Paid button
+      expected_value == :paid ->
+        if is_active do
+          "#{base_classes} btn-success btn-active"
+        else
+          "#{base_classes} btn"
+        end
+
+      # Unpaid button
+      expected_value == :unpaid ->
+        if is_active do
+          "#{base_classes} btn-error btn-active"
+        else
+          "#{base_classes} btn"
+        end
+
+      true ->
+        "#{base_classes} btn-outline"
+    end
+  end
+
+  # Get CSS classes for boolean filter label based on current state
+  defp boolean_filter_label_class(boolean_filters, custom_field_id, expected_value) do
+    base_classes = "join-item btn btn-sm"
+    current_value = Map.get(boolean_filters, to_string(custom_field_id))
+    is_active = current_value == expected_value
+
+    cond do
+      # All button (nil expected)
+      expected_value == nil ->
+        if is_active do
+          "#{base_classes} btn-active"
+        else
+          "#{base_classes} btn"
+        end
+
+      # True button
+      expected_value == true ->
+        if is_active do
+          "#{base_classes} btn-success btn-active"
+        else
+          "#{base_classes} btn"
+        end
+
+      # False button
+      expected_value == false ->
+        if is_active do
+          "#{base_classes} btn-error btn-active"
+        else
+          "#{base_classes} btn"
+        end
+
+      true ->
+        "#{base_classes} btn-outline"
+    end
+  end
+end

lib/mv_web/live/components/payment_filter_component.ex

@@ -1,147 +0,0 @@
-defmodule MvWeb.Components.PaymentFilterComponent do
-  @moduledoc """
-  Provides the PaymentFilter Live-Component.
-
-  A dropdown filter for filtering members by cycle payment status (paid/unpaid/all).
-  Uses DaisyUI dropdown styling and sends filter changes to parent LiveView.
-  Filter is based on cycle status (last or current cycle, depending on cycle view toggle).
-
-  ## Props
-  - `:cycle_status_filter` - Current filter state: `nil` (all), `:paid`, or `:unpaid`
-  - `:id` - Component ID (required)
-  - `:member_count` - Number of filtered members to display in badge (optional, default: 0)
-
-  ## Events
-  - Sends `{:payment_filter_changed, filter}` to parent when filter changes
-  """
-  use MvWeb, :live_component
-
-  @impl true
-  def mount(socket) do
-    {:ok, assign(socket, :open, false)}
-  end
-
-  @impl true
-  def update(assigns, socket) do
-    socket =
-      socket
-      |> assign(:id, assigns.id)
-      |> assign(:cycle_status_filter, assigns[:cycle_status_filter])
-      |> assign(:member_count, assigns[:member_count] || 0)
-
-    {:ok, socket}
-  end
-
-  @impl true
-  def render(assigns) do
-    ~H"""
-    <div
-      class="relative"
-      id={@id}
-      phx-window-keydown={@open && "close_dropdown"}
-      phx-key="Escape"
-      phx-target={@myself}
-    >
-      <button
-        type="button"
-        class={[
-          "btn gap-2",
-          @cycle_status_filter && "btn-active"
-        ]}
-        phx-click="toggle_dropdown"
-        phx-target={@myself}
-        aria-haspopup="true"
-        aria-expanded={to_string(@open)}
-        aria-label={gettext("Filter by payment status")}
-      >
-        <.icon name="hero-funnel" class="h-5 w-5" />
-        <span class="hidden sm:inline">{filter_label(@cycle_status_filter)}</span>
-        <span :if={@cycle_status_filter} class="badge badge-primary badge-sm">{@member_count}</span>
-      </button>
-
-      <ul
-        :if={@open}
-        class="menu dropdown-content bg-base-100 rounded-box z-10 w-52 p-2 shadow-lg absolute right-0 mt-2"
-        role="menu"
-        aria-label={gettext("Payment filter")}
-        phx-click-away="close_dropdown"
-        phx-target={@myself}
-      >
-        <li role="none">
-          <button
-            type="button"
-            role="menuitemradio"
-            aria-checked={to_string(@cycle_status_filter == nil)}
-            class={@cycle_status_filter == nil && "active"}
-            phx-click="select_filter"
-            phx-value-filter=""
-            phx-target={@myself}
-          >
-            <.icon name="hero-users" class="h-4 w-4" />
-            {gettext("All")}
-          </button>
-        </li>
-        <li role="none">
-          <button
-            type="button"
-            role="menuitemradio"
-            aria-checked={to_string(@cycle_status_filter == :paid)}
-            class={@cycle_status_filter == :paid && "active"}
-            phx-click="select_filter"
-            phx-value-filter="paid"
-            phx-target={@myself}
-          >
-            <.icon name="hero-check-circle" class="h-4 w-4 text-success" />
-            {gettext("Paid")}
-          </button>
-        </li>
-        <li role="none">
-          <button
-            type="button"
-            role="menuitemradio"
-            aria-checked={to_string(@cycle_status_filter == :unpaid)}
-            class={@cycle_status_filter == :unpaid && "active"}
-            phx-click="select_filter"
-            phx-value-filter="unpaid"
-            phx-target={@myself}
-          >
-            <.icon name="hero-x-circle" class="h-4 w-4 text-error" />
-            {gettext("Unpaid")}
-          </button>
-        </li>
-      </ul>
-    </div>
-    """
-  end
-
-  @impl true
-  def handle_event("toggle_dropdown", _params, socket) do
-    {:noreply, assign(socket, :open, !socket.assigns.open)}
-  end
-
-  @impl true
-  def handle_event("close_dropdown", _params, socket) do
-    {:noreply, assign(socket, :open, false)}
-  end
-
-  @impl true
-  def handle_event("select_filter", %{"filter" => filter_str}, socket) do
-    filter = parse_filter(filter_str)
-
-    # Close dropdown and notify parent
-    socket = assign(socket, :open, false)
-    send(self(), {:payment_filter_changed, filter})
-
-    {:noreply, socket}
-  end
-
-  # Parse filter string to atom
-  defp parse_filter("paid"), do: :paid
-  defp parse_filter("unpaid"), do: :unpaid
-  defp parse_filter(_), do: nil
-
-  # Get display label for current filter
-  defp filter_label(nil), do: gettext("All")
-  defp filter_label(:paid), do: gettext("Paid")
-  defp filter_label(:unpaid), do: gettext("Unpaid")
-end

lib/mv_web/live/member_live/index.ex

@@ -396,6 +396,44 @@ defmodule MvWeb.MemberLive.Index do
      )}
   end
 
+  @impl true
+  def handle_info({:boolean_filter_changed, custom_field_id_str, filter_value}, socket) do
+    # Update boolean filters map
+    updated_filters =
+      if filter_value == nil do
+        # Remove filter if nil (All option selected)
+        Map.delete(socket.assigns.boolean_custom_field_filters, custom_field_id_str)
+      else
+        # Add or update filter
+        Map.put(socket.assigns.boolean_custom_field_filters, custom_field_id_str, filter_value)
+      end
+
+    socket =
+      socket
+      |> assign(:boolean_custom_field_filters, updated_filters)
+      |> load_members()
+      |> update_selection_assigns()
+
+    # Build the URL with all params including new filter
+    query_params =
+      build_query_params(
+        socket.assigns.query,
+        socket.assigns.sort_field,
+        socket.assigns.sort_order,
+        socket.assigns.cycle_status_filter,
+        socket.assigns.show_current_cycle,
+        updated_filters
+      )
+
+    new_path = ~p"/members?#{query_params}"
+
+    {:noreply,
+     push_patch(socket,
+       to: new_path,
+       replace: true
+     )}
+  end
+
   @impl true
   def handle_info({:field_toggled, field_string, visible}, socket) do
     # Update user field selection

lib/mv_web/live/member_live/index.html.heex

@@ -37,9 +37,11 @@
       placeholder={gettext("Search...")}
     />
     <.live_component
-      module={MvWeb.Components.PaymentFilterComponent}
-      id="payment-filter"
+      module={MvWeb.Components.MemberFilterComponent}
+      id="member-filter"
       cycle_status_filter={@cycle_status_filter}
+      boolean_custom_fields={@boolean_custom_fields}
+      boolean_filters={@boolean_custom_field_filters}
       member_count={length(@members)}
     />
     <button