style: highlight selected table and add tooltip
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
02af136fd9
commit
49fd2181a7
19 changed files with 687 additions and 151 deletions
|
|
@ -122,6 +122,7 @@ defmodule MvWeb.MemberLive.Index do
|
|||
|> assign(:groups, groups)
|
||||
|> assign(:boolean_custom_field_filters, %{})
|
||||
|> assign(:selected_members, MapSet.new())
|
||||
|> assign(:selected_member_id, nil)
|
||||
|> assign(:settings, settings)
|
||||
|> assign(:custom_fields_visible, custom_fields_visible)
|
||||
|> assign(:all_custom_fields, all_custom_fields)
|
||||
|
|
@ -160,6 +161,12 @@ defmodule MvWeb.MemberLive.Index do
|
|||
- `"select_all"` - Toggles selection of all visible members
|
||||
- `"sort"` - Sort event from SortHeaderComponent. Updates sort field/order and syncs URL
|
||||
"""
|
||||
@impl true
|
||||
def handle_event("select_row_and_navigate", %{"id" => id}, socket) do
|
||||
# Navigate to member show. Back button on show page uses ?highlight=id so returning to index shows row as selected.
|
||||
{:noreply, push_navigate(socket, to: ~p"/members/#{id}")}
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_event("select_member", %{"id" => id}, socket) do
|
||||
selected =
|
||||
|
|
@ -599,6 +606,7 @@ defmodule MvWeb.MemberLive.Index do
|
|||
|> assign(:member_fields_visible_db, visible_member_fields_db)
|
||||
|> assign(:member_fields_visible_computed, visible_member_fields_computed)
|
||||
|> assign(:visible_custom_field_ids, extract_custom_field_ids(visible_custom_fields))
|
||||
|> assign(:selected_member_id, parse_highlight_param(params["highlight"]))
|
||||
|
||||
next_sig = build_signature(socket)
|
||||
|
||||
|
|
@ -798,6 +806,18 @@ defmodule MvWeb.MemberLive.Index do
|
|||
end
|
||||
end
|
||||
|
||||
# Parses optional "highlight" URL param (member id for selected row styling). Returns nil if missing or invalid.
|
||||
defp parse_highlight_param(nil), do: nil
|
||||
defp parse_highlight_param(""), do: nil
|
||||
|
||||
defp parse_highlight_param(id) when is_binary(id) do
|
||||
if String.length(id) <= @max_uuid_length and match?({:ok, _}, Ecto.UUID.cast(id)),
|
||||
do: id,
|
||||
else: nil
|
||||
end
|
||||
|
||||
defp parse_highlight_param(_), do: nil
|
||||
|
||||
defp merge_fields_param_from_uri(params, nil), do: params
|
||||
|
||||
defp merge_fields_param_from_uri(params, %URI{query: query}) when is_binary(query) do
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@
|
|||
variant="secondary"
|
||||
class={["gap-2", @show_current_cycle && "btn-active"]}
|
||||
phx-click="toggle_cycle_view"
|
||||
data-testid="toggle-cycle-view"
|
||||
aria-label={
|
||||
if(@show_current_cycle,
|
||||
do: gettext("Current Cycle Payment Status"),
|
||||
|
|
@ -93,7 +94,9 @@
|
|||
id="members"
|
||||
rows={@members}
|
||||
row_id={fn member -> "row-#{member.id}" end}
|
||||
row_click={fn member -> JS.navigate(~p"/members/#{member}") end}
|
||||
row_click={fn member -> JS.push("select_row_and_navigate", value: %{id: member.id}) end}
|
||||
row_tooltip={gettext("Click for member details")}
|
||||
row_selected?={fn member -> MapSet.member?(@selected_members, member.id) end}
|
||||
dynamic_cols={@dynamic_cols}
|
||||
sort_field={@sort_field}
|
||||
sort_order={@sort_order}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ defmodule MvWeb.MemberLive.Show do
|
|||
{MvWeb.Helpers.MemberHelpers.display_name(@member)}
|
||||
<:actions>
|
||||
<.button
|
||||
navigate={~p"/members"}
|
||||
navigate={~p"/members?highlight=#{@member.id}"}
|
||||
variant="neutral"
|
||||
aria-label={gettext("Back to members list")}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue