local-it/mitgliederverwaltung
local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 59 Pull requests 5 Projects 2 Releases 5 Packages 1 Activity Actions

feat(member): make overview columns sortable through accessible sort headers

Browse source
This commit is contained in:
Simon 2026-07-06 10:48:28 +02:00
parent dfc616257d
commit 0c375234c8
9 changed files with 350 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

18
lib/mv_web/components/core_components.ex
View file

@ -1061,7 +1061,17 @@ defmodule MvWeb.CoreComponents do
>
{col[:label]}
</th>
<th :for={dyn_col <- @dynamic_cols} class={table_th_sticky_class(@sticky_header)}>
<th
:for={dyn_col <- @dynamic_cols}
class={table_th_sticky_class(@sticky_header)}
aria-sort={
table_th_aria_sort(
%{sort_field: "custom_field_#{dyn_col[:custom_field].id}"},
@sort_field,
@sort_order
)
}
>
<.live_component
module={MvWeb.Components.SortHeaderComponent}
id={:"sort_custom_field_#{dyn_col[:custom_field].id}"}
@ -1240,8 +1250,8 @@ defmodule MvWeb.CoreComponents do
end
# Combines column class with optional sticky header classes (desktop only; theme-friendly bg).
# hover:z-20/focus-within:z-20 lift the active header cell above sibling sticky cells (shared z-10)
# so its hover tooltip bubble is not clipped by an adjacent opaque bg-base-100 header background.
# bg-base-100 + z-10 keep the sticky header opaque and above body rows on vertical scroll.
# Sort tooltips use the Popover API (top layer) and need no header z-lift.
defp table_th_class(col, sticky_header) do
base = Map.get(col, :class)
sticky = if sticky_header, do: sticky_th_classes(), else: nil
@ -1253,7 +1263,7 @@ defmodule MvWeb.CoreComponents do
defp table_th_sticky_class(_), do: nil
defp sticky_th_classes,
do: "lg:sticky lg:top-0 bg-base-100 hover:bg-base-100 z-10 hover:z-20 focus-within:z-20"
do: "lg:sticky lg:top-0 bg-base-100 z-10"
@doc """
Renders a reorderable table (sortable list) with drag handle and keyboard support.