feat: add payment status filter and paid column to member list

Add PaymentFilterComponent dropdown and colored paid column. Filter supports URL bookmarking and combines with search/sort.

test/mv_web/components/payment_filter_component_test.exs

@@ -0,0 +1,182 @@
+defmodule MvWeb.Components.PaymentFilterComponentTest do
+  @moduledoc """
+  Unit tests for the PaymentFilterComponent.
+
+  Tests cover:
+  - Rendering in all 3 filter states (nil, :paid, :not_paid)
+  - Event emission when selecting options
+  - ARIA attributes for accessibility
+  - Dropdown open/close behavior
+  """
+  use MvWeb.ConnCase, async: true
+
+  import Phoenix.LiveViewTest
+
+  describe "rendering" do
+    test "renders with no filter active (nil)", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, view, _html} = live(conn, "/members")
+
+      # Should show "All" text and no badge
+      assert has_element?(view, "#payment-filter")
+      refute has_element?(view, "#payment-filter .badge")
+    end
+
+    test "renders with paid filter active", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, view, _html} = live(conn, "/members?paid_filter=paid")
+
+      # Should show badge when filter is active
+      assert has_element?(view, "#payment-filter .badge")
+    end
+
+    test "renders with not_paid filter active", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, view, _html} = live(conn, "/members?paid_filter=not_paid")
+
+      # Should show badge when filter is active
+      assert has_element?(view, "#payment-filter .badge")
+    end
+  end
+
+  describe "dropdown behavior" do
+    test "dropdown opens on button click", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, view, _html} = live(conn, "/members")
+
+      # Initially dropdown is closed
+      refute has_element?(view, "#payment-filter ul[role='menu']")
+
+      # Click to open
+      view
+      |> element("#payment-filter button[aria-haspopup='true']")
+      |> render_click()
+
+      # Dropdown should be visible
+      assert has_element?(view, "#payment-filter ul[role='menu']")
+    end
+
+    test "dropdown closes after selecting an option", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, view, _html} = live(conn, "/members")
+
+      # Open dropdown
+      view
+      |> element("#payment-filter button[aria-haspopup='true']")
+      |> render_click()
+
+      assert has_element?(view, "#payment-filter ul[role='menu']")
+
+      # Select an option - this should close the dropdown
+      view
+      |> element("#payment-filter button[phx-value-filter='paid']")
+      |> render_click()
+
+      # After selection, dropdown should be closed
+      # Note: The dropdown closes via assign, which is reflected in the next render
+      refute has_element?(view, "#payment-filter ul[role='menu']")
+    end
+  end
+
+  describe "filter selection" do
+    test "selecting 'All' clears the filter and updates URL", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, view, _html} = live(conn, "/members?paid_filter=paid")
+
+      # Open dropdown
+      view
+      |> element("#payment-filter button[aria-haspopup='true']")
+      |> render_click()
+
+      # Select "All" option
+      view
+      |> element("#payment-filter button[phx-value-filter='']")
+      |> render_click()
+
+      # URL should not contain paid_filter param - wait for patch
+      assert_patch(view)
+    end
+
+    test "selecting 'Paid' sets the filter and updates URL", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, view, _html} = live(conn, "/members")
+
+      # Open dropdown
+      view
+      |> element("#payment-filter button[aria-haspopup='true']")
+      |> render_click()
+
+      # Select "Paid" option
+      view
+      |> element("#payment-filter button[phx-value-filter='paid']")
+      |> render_click()
+
+      # Wait for patch and check URL contains paid_filter=paid
+      path = assert_patch(view)
+      assert path =~ "paid_filter=paid"
+    end
+
+    test "selecting 'Not paid' sets the filter and updates URL", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, view, _html} = live(conn, "/members")
+
+      # Open dropdown
+      view
+      |> element("#payment-filter button[aria-haspopup='true']")
+      |> render_click()
+
+      # Select "Not paid" option
+      view
+      |> element("#payment-filter button[phx-value-filter='not_paid']")
+      |> render_click()
+
+      # Wait for patch and check URL contains paid_filter=not_paid
+      path = assert_patch(view)
+      assert path =~ "paid_filter=not_paid"
+    end
+  end
+
+  describe "accessibility" do
+    test "has correct ARIA attributes", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, view, html} = live(conn, "/members")
+
+      # Main button should have aria-haspopup and aria-expanded
+      assert html =~ ~s(aria-haspopup="true")
+      assert html =~ ~s(aria-expanded="false")
+      assert html =~ ~s(aria-label=)
+
+      # Open dropdown
+      view
+      |> element("#payment-filter button[aria-haspopup='true']")
+      |> render_click()
+
+      html = render(view)
+
+      # Check aria-expanded is now true
+      assert html =~ ~s(aria-expanded="true")
+
+      # Menu should have role="menu"
+      assert html =~ ~s(role="menu")
+
+      # Options should have role="menuitemradio"
+      assert html =~ ~s(role="menuitemradio")
+    end
+
+    test "has aria-checked on selected option", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, view, _html} = live(conn, "/members?paid_filter=paid")
+
+      # Open dropdown
+      view
+      |> element("#payment-filter button[aria-haspopup='true']")
+      |> render_click()
+
+      html = render(view)
+
+      # "Paid" option should have aria-checked="true"
+      # Check both possible orderings of attributes
+      assert html =~ "aria-checked=\"true\"" and html =~ "phx-value-filter=\"paid\""
+    end
+  end
+end

test/mv_web/member_live/index_custom_fields_display_test.exs

@@ -9,7 +9,8 @@ defmodule MvWeb.MemberLive.IndexCustomFieldsDisplayTest do
   - Custom field values are correctly formatted for different types
   - Members without custom field values show empty cell or "-"
   """
-  use MvWeb.ConnCase, async: true
+  # async: false to prevent PostgreSQL deadlocks when creating members and custom fields
+  use MvWeb.ConnCase, async: false
   import Phoenix.LiveViewTest
   require Ash.Query
 

test/mv_web/member_live/index_test.exs

@@ -469,4 +469,221 @@ defmodule MvWeb.MemberLive.IndexTest do
       assert has_element?(view, "#flash-group")
     end
   end
+
+  describe "payment filter integration" do
+    setup do
+      # Create members with different payment status
+      # Use unique names that won't appear elsewhere in the HTML
+      {:ok, paid_member} =
+        Mv.Membership.create_member(%{
+          first_name: "Zahler",
+          last_name: "Mitglied",
+          email: "zahler@example.com",
+          paid: true
+        })
+
+      {:ok, unpaid_member} =
+        Mv.Membership.create_member(%{
+          first_name: "Nichtzahler",
+          last_name: "Mitglied",
+          email: "nichtzahler@example.com",
+          paid: false
+        })
+
+      {:ok, nil_paid_member} =
+        Mv.Membership.create_member(%{
+          first_name: "Unbestimmt",
+          last_name: "Mitglied",
+          email: "unbestimmt@example.com"
+          # paid is nil by default
+        })
+
+      %{paid_member: paid_member, unpaid_member: unpaid_member, nil_paid_member: nil_paid_member}
+    end
+
+    test "filter shows all members when no filter is active", %{
+      conn: conn,
+      paid_member: paid_member,
+      unpaid_member: unpaid_member,
+      nil_paid_member: nil_paid_member
+    } do
+      conn = conn_with_oidc_user(conn)
+      {:ok, _view, html} = live(conn, "/members")
+
+      assert html =~ paid_member.first_name
+      assert html =~ unpaid_member.first_name
+      assert html =~ nil_paid_member.first_name
+    end
+
+    test "filter shows only paid members when paid filter is active", %{
+      conn: conn,
+      paid_member: paid_member,
+      unpaid_member: unpaid_member,
+      nil_paid_member: nil_paid_member
+    } do
+      conn = conn_with_oidc_user(conn)
+      {:ok, _view, html} = live(conn, "/members?paid_filter=paid")
+
+      assert html =~ paid_member.first_name
+      refute html =~ unpaid_member.first_name
+      refute html =~ nil_paid_member.first_name
+    end
+
+    test "filter shows only unpaid members (including nil) when not_paid filter is active", %{
+      conn: conn,
+      paid_member: paid_member,
+      unpaid_member: unpaid_member,
+      nil_paid_member: nil_paid_member
+    } do
+      conn = conn_with_oidc_user(conn)
+      {:ok, _view, html} = live(conn, "/members?paid_filter=not_paid")
+
+      refute html =~ paid_member.first_name
+      assert html =~ unpaid_member.first_name
+      assert html =~ nil_paid_member.first_name
+    end
+
+    test "filter combines with search query (AND)", %{
+      conn: conn,
+      paid_member: paid_member
+    } do
+      conn = conn_with_oidc_user(conn)
+      {:ok, _view, html} = live(conn, "/members?query=Zahler&paid_filter=paid")
+
+      assert html =~ paid_member.first_name
+    end
+
+    test "filter combines with sorting", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+
+      {:ok, view, _html} =
+        live(conn, "/members?paid_filter=paid&sort_field=first_name&sort_order=asc")
+
+      # Click on email sort header
+      view
+      |> element("[data-testid='email']")
+      |> render_click()
+
+      # Filter should be preserved in URL
+      path = assert_patch(view)
+      assert path =~ "paid_filter=paid"
+      assert path =~ "sort_field=email"
+    end
+
+    test "URL parameter paid_filter is set when selecting filter", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, view, _html} = live(conn, "/members")
+
+      # Open filter dropdown
+      view
+      |> element("#payment-filter button[aria-haspopup='true']")
+      |> render_click()
+
+      # Select "Paid" option
+      view
+      |> element("#payment-filter button[phx-value-filter='paid']")
+      |> render_click()
+
+      path = assert_patch(view)
+      assert path =~ "paid_filter=paid"
+    end
+
+    test "URL parameter is correctly read on page load", %{
+      conn: conn,
+      paid_member: paid_member
+    } do
+      conn = conn_with_oidc_user(conn)
+      {:ok, _view, html} = live(conn, "/members?paid_filter=paid")
+
+      # Only paid member should be visible
+      assert html =~ paid_member.first_name
+      # Filter badge should be visible
+      assert html =~ "badge"
+    end
+
+    test "invalid URL parameter is ignored", %{
+      conn: conn,
+      paid_member: paid_member,
+      unpaid_member: unpaid_member
+    } do
+      conn = conn_with_oidc_user(conn)
+      {:ok, _view, html} = live(conn, "/members?paid_filter=invalid_value")
+
+      # All members should be visible (filter not applied)
+      assert html =~ paid_member.first_name
+      assert html =~ unpaid_member.first_name
+    end
+
+    test "search maintains filter state", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, view, _html} = live(conn, "/members?paid_filter=paid")
+
+      # Perform search
+      view
+      |> element("[data-testid='search-input']")
+      |> render_change(%{"query" => "test"})
+
+      # Filter state should be maintained in URL
+      path = assert_patch(view)
+      assert path =~ "paid_filter=paid"
+    end
+  end
+
+  describe "paid column in table" do
+    setup do
+      {:ok, paid_member} =
+        Mv.Membership.create_member(%{
+          first_name: "Paid",
+          last_name: "Member",
+          email: "paid.column@example.com",
+          paid: true
+        })
+
+      {:ok, unpaid_member} =
+        Mv.Membership.create_member(%{
+          first_name: "Unpaid",
+          last_name: "Member",
+          email: "unpaid.column@example.com",
+          paid: false
+        })
+
+      %{paid_member: paid_member, unpaid_member: unpaid_member}
+    end
+
+    test "paid column shows green badge for paid members", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, _view, html} = live(conn, "/members")
+
+      # Check for success badge (green)
+      assert html =~ "badge-success"
+    end
+
+    test "paid column shows red badge for unpaid members", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, _view, html} = live(conn, "/members")
+
+      # Check for error badge (red)
+      assert html =~ "badge-error"
+    end
+
+    test "paid column shows 'Yes' for paid members", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      Gettext.put_locale(MvWeb.Gettext, "en")
+      {:ok, _view, html} = live(conn, "/members")
+
+      # The table should contain "Yes" text inside badge
+      assert html =~ "badge-success"
+      assert html =~ "Yes"
+    end
+
+    test "paid column shows 'No' for unpaid members", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      Gettext.put_locale(MvWeb.Gettext, "en")
+      {:ok, _view, html} = live(conn, "/members")
+
+      # The table should contain "No" text inside badge
+      assert html =~ "badge-error"
+      assert html =~ "No"
+    end
+  end
 end