Compare commits

...

6 commits

Author SHA1 Message Date
Renovate Bot
c3e50a2035 chore(deps): update dependency just to v1.44.1
Some checks reported errors
continuous-integration/drone/push Build encountered an error
2025-12-09 09:27:28 +00:00
18641bb6ea Merge pull request 'UX - Avoid opening member by clicking the checkbox closes #233' (#250) from feature/223_member_checkbox into main
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #250
Reviewed-by: carla <carla@noreply.git.local-it.org>
2025-12-08 12:11:47 +01:00
c3e95ca711 formatting
All checks were successful
continuous-integration/drone/push Build is passing
2025-12-08 11:51:45 +01:00
1b06f885bf Merge branch 'main' into feature/223_member_checkbox
Some checks failed
continuous-integration/drone/push Build is failing
2025-12-08 11:43:54 +01:00
6b0ec28d9b
fix checkbox tests 2025-12-03 14:34:31 +01:00
8e4f1ba674 feat: add col_click attribute to table component for checkbox column
- Add col_click slot attribute to table component that overrides row_click
- Clicking anywhere in the checkbox column now toggles the checkbox
- Clicking other columns still navigates to member details

Closes #223
2025-12-03 14:24:10 +01:00
5 changed files with 34 additions and 43 deletions

View file

@ -1,3 +1,3 @@
elixir 1.18.3-otp-27 elixir 1.18.3-otp-27
erlang 27.3.4 erlang 27.3.4
just 1.43.1 just 1.44.1

View file

@ -474,6 +474,7 @@ defmodule MvWeb.CoreComponents do
slot :col, required: true do slot :col, required: true do
attr :label, :string attr :label, :string
attr :col_click, :any, doc: "optional column-specific click handler that overrides row_click"
end end
slot :action, doc: "the slot for showing user actions in the last table column" slot :action, doc: "the slot for showing user actions in the last table column"
@ -509,8 +510,11 @@ defmodule MvWeb.CoreComponents do
<tr :for={row <- @rows} id={@row_id && @row_id.(row)}> <tr :for={row <- @rows} id={@row_id && @row_id.(row)}>
<td <td
:for={col <- @col} :for={col <- @col}
phx-click={@row_click && @row_click.(row)} phx-click={
class={["max-w-xs truncate", @row_click && "hover:cursor-pointer"]} (col[:col_click] && col[:col_click].(@row_item.(row))) ||
(@row_click && @row_click.(row))
}
class={["max-w-xs truncate", (col[:col_click] || @row_click) && "hover:cursor-pointer"]}
> >
{render_slot(col, @row_item.(row))} {render_slot(col, @row_item.(row))}
</td> </td>

View file

@ -1082,6 +1082,16 @@ defmodule MvWeb.MemberLive.Index do
|> Enum.map(&format_member_email/1) |> Enum.map(&format_member_email/1)
end end
@doc """
Returns a JS command to toggle member selection when clicking the checkbox column.
Used as `col_click` handler to ensure clicking anywhere in the checkbox column
toggles the checkbox instead of navigating to the member details.
"""
def checkbox_column_click(member) do
JS.push("select_member", value: %{id: member.id})
end
# Formats a member's email in the format "First Last <email>" # Formats a member's email in the format "First Last <email>"
# Used for copy_emails feature and mailto links to create email-client-friendly format. # Used for copy_emails feature and mailto links to create email-client-friendly format.
def format_member_email(member) do def format_member_email(member) do

View file

@ -65,6 +65,7 @@
<!-- <:col :let={member} label="Id">{member.id}</:col> --> <!-- <:col :let={member} label="Id">{member.id}</:col> -->
<:col <:col
:let={member} :let={member}
col_click={&MvWeb.MemberLive.Index.checkbox_column_click/1}
label={ label={
~H""" ~H"""
<.input <.input
@ -81,11 +82,7 @@
<.input <.input
type="checkbox" type="checkbox"
name={member.id} name={member.id}
phx-click="select_member"
phx-value-id={member.id}
checked={MapSet.member?(@selected_members, member.id)} checked={MapSet.member?(@selected_members, member.id)}
phx-capture-click
phx-stop-propagation
aria-label={gettext("Select member")} aria-label={gettext("Select member")}
role="checkbox" role="checkbox"
/> />

View file

@ -285,14 +285,9 @@ defmodule MvWeb.MemberLive.IndexTest do
conn = conn_with_oidc_user(conn) conn = conn_with_oidc_user(conn)
{:ok, view, _html} = live(conn, "/members") {:ok, view, _html} = live(conn, "/members")
# Select two members # Select two members by sending the select_member event directly
view render_click(view, "select_member", %{"id" => member1.id})
|> element("[phx-click='select_member'][phx-value-id='#{member1.id}']") render_click(view, "select_member", %{"id" => member2.id})
|> render_click()
view
|> element("[phx-click='select_member'][phx-value-id='#{member2.id}']")
|> render_click()
# Trigger copy_emails event # Trigger copy_emails event
view |> element("#copy-emails-btn") |> render_click() view |> element("#copy-emails-btn") |> render_click()
@ -336,10 +331,8 @@ defmodule MvWeb.MemberLive.IndexTest do
conn = conn_with_oidc_user(conn) conn = conn_with_oidc_user(conn)
{:ok, view, _html} = live(conn, "/members") {:ok, view, _html} = live(conn, "/members")
# Select member with umlauts # Select member with umlauts by sending the select_member event directly
view render_click(view, "select_member", %{"id" => member3.id})
|> element("[phx-click='select_member'][phx-value-id='#{member3.id}']")
|> render_click()
# Trigger copy_emails event - should not crash # Trigger copy_emails event - should not crash
view |> element("#copy-emails-btn") |> render_click() view |> element("#copy-emails-btn") |> render_click()
@ -355,10 +348,8 @@ defmodule MvWeb.MemberLive.IndexTest do
conn = conn_with_oidc_user(conn) conn = conn_with_oidc_user(conn)
{:ok, view, _html} = live(conn, "/members") {:ok, view, _html} = live(conn, "/members")
# Select a member # Select a member by sending the select_member event directly
view render_click(view, "select_member", %{"id" => member1.id})
|> element("[phx-click='select_member'][phx-value-id='#{member1.id}']")
|> render_click()
# Delete the member from the database # Delete the member from the database
Ash.destroy!(member1) Ash.destroy!(member1)
@ -379,14 +370,9 @@ defmodule MvWeb.MemberLive.IndexTest do
conn = conn_with_oidc_user(conn) conn = conn_with_oidc_user(conn)
{:ok, view, _html} = live(conn, "/members") {:ok, view, _html} = live(conn, "/members")
# Select two members # Select two members by sending the select_member event directly
view render_click(view, "select_member", %{"id" => member1.id})
|> element("[phx-click='select_member'][phx-value-id='#{member1.id}']") render_click(view, "select_member", %{"id" => member2.id})
|> render_click()
view
|> element("[phx-click='select_member'][phx-value-id='#{member2.id}']")
|> render_click()
# Get the socket state to verify the formatted email string # Get the socket state to verify the formatted email string
state = :sys.get_state(view.pid) state = :sys.get_state(view.pid)
@ -415,10 +401,8 @@ defmodule MvWeb.MemberLive.IndexTest do
{:ok, view, _html} = live(conn, "/members") {:ok, view, _html} = live(conn, "/members")
# Select the test member # Select the test member by sending the select_member event directly
view render_click(view, "select_member", %{"id" => test_member.id})
|> element("[phx-click='select_member'][phx-value-id='#{test_member.id}']")
|> render_click()
# The format should be "Test Format <test.format@example.com>" # The format should be "Test Format <test.format@example.com>"
# We verify this by checking the flash shows 1 email was copied # We verify this by checking the flash shows 1 email was copied
@ -441,10 +425,8 @@ defmodule MvWeb.MemberLive.IndexTest do
conn = conn_with_oidc_user(conn) conn = conn_with_oidc_user(conn)
{:ok, view, _html} = live(conn, "/members") {:ok, view, _html} = live(conn, "/members")
# Select a member # Select a member by sending the select_member event directly
view render_click(view, "select_member", %{"id" => member1.id})
|> element("[phx-click='select_member'][phx-value-id='#{member1.id}']")
|> render_click()
# Button should now be visible # Button should now be visible
assert has_element?(view, "#copy-emails-btn") assert has_element?(view, "#copy-emails-btn")
@ -457,10 +439,8 @@ defmodule MvWeb.MemberLive.IndexTest do
conn = conn_with_oidc_user(conn) conn = conn_with_oidc_user(conn)
{:ok, view, _html} = live(conn, "/members") {:ok, view, _html} = live(conn, "/members")
# Select a member # Select a member by sending the select_member event directly
view render_click(view, "select_member", %{"id" => member1.id})
|> element("[phx-click='select_member'][phx-value-id='#{member1.id}']")
|> render_click()
# Click copy button # Click copy button
view |> element("#copy-emails-btn") |> render_click() view |> element("#copy-emails-btn") |> render_click()