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

feat(overview): show suspended cycles separately in the payment tooltip

Browse source
This commit is contained in:
Simon 2026-07-10 16:27:16 +02:00
parent e967cb59e9
commit 4d6294771a
7 changed files with 91 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

47
lib/mv_web/live/member_live/index.html.heex
View file

@ -511,8 +511,9 @@
{badge.label}
</.link>
<%= if count > 0 do %>
<% cycles = PaymentAging.open_cycles(member, @payment_period) %>
<% {shown, overflow} = PaymentAging.tooltip_cycles(cycles) %>
<% %{unpaid: unpaid, suspended: suspended} =
PaymentAging.partition_open_cycles(member, @payment_period) %>
<% {shown, overflow} = PaymentAging.tooltip_cycles(unpaid) %>
<div
id={tip_id}
popover="manual"
@ -521,15 +522,21 @@
class="payment-tip m-0 w-fit rounded-box border border-base-300 bg-base-100 p-2 text-sm shadow-xl"
data-testid="payment-tooltip"
>
<ul class="m-0 flex list-none flex-col items-stretch gap-1 p-0">
<ul
class="m-0 flex list-none flex-col items-stretch gap-1 p-0"
data-testid="payment-tooltip-unpaid"
>
<li :for={cycle <- shown} class="flex">
<span class={[
"badge badge-soft badge-sm w-full justify-start",
PaymentAging.cycle_color_class(cycle.status)
]}>
<.icon name={PaymentAging.cycle_icon(cycle.status)} class="size-3.5" />
<.badge
variant={MembershipFeeHelpers.status_variant(cycle.status)}
size="sm"
class="w-full justify-start"
>
<:icon>
<.icon name={MembershipFeeHelpers.status_icon(cycle.status)} class="size-3.5" />
</:icon>
{PaymentAging.short_period(cycle)}
</span>
</.badge>
</li>
<li :if={overflow > 0} class="flex">
<span class="badge badge-soft badge-sm badge-ghost w-full justify-start">
@ -538,6 +545,28 @@
</span>
</li>
</ul>
<%!-- Suspended cycles are shown separately under their own label so
the status distinction is not color-only (§1.14). --%>
<div :if={suspended != []} class="mt-2" data-testid="payment-tooltip-suspended">
<p class="mb-1 text-xs font-medium opacity-70">{gettext("Suspended")}</p>
<ul class="m-0 flex list-none flex-col items-stretch gap-1 p-0">
<li :for={cycle <- suspended} class="flex">
<.badge
variant={MembershipFeeHelpers.status_variant(cycle.status)}
size="sm"
class="w-full justify-start"
>
<:icon>
<.icon
name={MembershipFeeHelpers.status_icon(cycle.status)}
class="size-3.5"
/>
</:icon>
{PaymentAging.short_period(cycle)}
</.badge>
</li>
</ul>
</div>
</div>
<% end %>
</:col>