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

fix: resolve pr remarks

Browse source
This commit is contained in:
Simon 2026-01-23 14:00:18 +01:00
parent a92f503752
commit b4657cae23
Signed by: simon
GPG key ID: 40E7A58C4AA1EDB2
6 changed files with 139 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

38
lib/mv_web/live/components/member_filter_component.ex
View file

@ -9,7 +9,8 @@ defmodule MvWeb.Components.MemberFilterComponent do
- 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.
- Filter controls are form elements (fieldset with legend, radio inputs), not menu items.
Uses semantic `<fieldset>` and `<legend>` for proper accessibility and form structure.
- 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.
@ -88,7 +89,8 @@ defmodule MvWeb.Components.MemberFilterComponent do
<!--
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.
Filter controls are form elements (fieldset with legend, radio inputs), not menu items.
We use semantic fieldset/legend structure for proper accessibility.
We use relative/absolute positioning instead of DaisyUI dropdown classes to have
full control over the open/close state via LiveView.
-->
@ -107,11 +109,11 @@ defmodule MvWeb.Components.MemberFilterComponent do
<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">
<fieldset class="grid grid-cols-[1fr_auto] items-center gap-3 py-2 border-0 p-0 m-0 min-w-0">
<legend class="text-sm font-medium col-start-1 float-left w-auto">
{gettext("Payment Status")}
</label>
<fieldset class="join" aria-label={gettext("Payment status filter")}>
</legend>
<div class="join col-start-2">
<label
class={"#{payment_filter_label_class(@cycle_status_filter, nil)} has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary"}
for="payment-filter-all"
@ -156,8 +158,8 @@ defmodule MvWeb.Components.MemberFilterComponent do
<.icon name="hero-x-circle" class="h-5 w-5" />
<span class="text-xs">{gettext("Unpaid")}</span>
</label>
</fieldset>
</div>
</div>
</fieldset>
</div>
<!-- Custom Fields Group -->
@ -166,20 +168,14 @@ defmodule MvWeb.Components.MemberFilterComponent do
{gettext("Custom Fields")}
</div>
<div class="max-h-60 overflow-y-auto pr-2">
<div
<fieldset
: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"
class="grid grid-cols-[1fr_auto] items-center gap-3 py-2 border-b border-base-200 last:border-0 border-0 p-0 m-0 min-w-0"
>
<label
class="text-sm font-medium"
for={"custom-boolean-filter-#{custom_field.id}"}
>
<legend class="text-sm font-medium col-start-1 float-left w-auto">
{custom_field.name}
</label>
<fieldset
class="join"
aria-label={gettext("Filter by %{name}", name: custom_field.name)}
>
</legend>
<div class="join col-start-2">
<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"}
@ -228,8 +224,8 @@ defmodule MvWeb.Components.MemberFilterComponent do
<.icon name="hero-x-circle" class="h-5 w-5" />
<span class="text-xs">{gettext("No")}</span>
</label>
</fieldset>
</div>
</div>
</fieldset>
</div>
</div>