Group cycle status buttons with DaisyUI join component

Wrap Paid/Suspended/Unpaid buttons in a <div class="join"> and add
join-item to each button. Delete button stays separate next to the group.
This commit is contained in:
Moritz 2026-02-24 10:34:17 +01:00
parent 0a59cf5c33
commit 2d01c70c16
Signed by: moritz
GPG key ID: 1020A035E5DD0824

View file

@ -214,8 +214,9 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
</:col> </:col>
<:action :let={cycle}> <:action :let={cycle}>
<div class="flex gap-1"> <div class="flex gap-2">
<%= if @can_update_cycle do %> <%= if @can_update_cycle do %>
<div class="join">
<button <button
:if={cycle.status != :paid} :if={cycle.status != :paid}
type="button" type="button"
@ -223,7 +224,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
phx-value-cycle_id={cycle.id} phx-value-cycle_id={cycle.id}
phx-value-status="paid" phx-value-status="paid"
phx-target={@myself} phx-target={@myself}
class="btn btn-sm btn-success" class="join-item btn btn-sm btn-success"
title={gettext("Mark as paid")} title={gettext("Mark as paid")}
> >
<.icon name="hero-check-circle" class="size-4" /> <.icon name="hero-check-circle" class="size-4" />
@ -236,7 +237,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
phx-value-cycle_id={cycle.id} phx-value-cycle_id={cycle.id}
phx-value-status="suspended" phx-value-status="suspended"
phx-target={@myself} phx-target={@myself}
class="btn btn-sm btn-outline btn-warning" class="join-item btn btn-sm btn-outline btn-warning"
title={gettext("Mark as suspended")} title={gettext("Mark as suspended")}
> >
<.icon name="hero-pause-circle" class="size-4" /> <.icon name="hero-pause-circle" class="size-4" />
@ -249,12 +250,13 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
phx-value-cycle_id={cycle.id} phx-value-cycle_id={cycle.id}
phx-value-status="unpaid" phx-value-status="unpaid"
phx-target={@myself} phx-target={@myself}
class="btn btn-sm btn-error" class="join-item btn btn-sm btn-error"
title={gettext("Mark as unpaid")} title={gettext("Mark as unpaid")}
> >
<.icon name="hero-x-circle" class="size-4" /> <.icon name="hero-x-circle" class="size-4" />
{gettext("Unpaid")} {gettext("Unpaid")}
</button> </button>
</div>
<% end %> <% end %>
<%= if @can_destroy_cycle do %> <%= if @can_destroy_cycle do %>
<button <button