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:
parent
0a59cf5c33
commit
2d01c70c16
1 changed files with 42 additions and 40 deletions
|
|
@ -214,47 +214,49 @@ 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 %>
|
||||||
<button
|
<div class="join">
|
||||||
:if={cycle.status != :paid}
|
<button
|
||||||
type="button"
|
:if={cycle.status != :paid}
|
||||||
phx-click="mark_cycle_status"
|
type="button"
|
||||||
phx-value-cycle_id={cycle.id}
|
phx-click="mark_cycle_status"
|
||||||
phx-value-status="paid"
|
phx-value-cycle_id={cycle.id}
|
||||||
phx-target={@myself}
|
phx-value-status="paid"
|
||||||
class="btn btn-sm btn-success"
|
phx-target={@myself}
|
||||||
title={gettext("Mark as paid")}
|
class="join-item btn btn-sm btn-success"
|
||||||
>
|
title={gettext("Mark as paid")}
|
||||||
<.icon name="hero-check-circle" class="size-4" />
|
>
|
||||||
{gettext("Paid")}
|
<.icon name="hero-check-circle" class="size-4" />
|
||||||
</button>
|
{gettext("Paid")}
|
||||||
<button
|
</button>
|
||||||
:if={cycle.status != :suspended}
|
<button
|
||||||
type="button"
|
:if={cycle.status != :suspended}
|
||||||
phx-click="mark_cycle_status"
|
type="button"
|
||||||
phx-value-cycle_id={cycle.id}
|
phx-click="mark_cycle_status"
|
||||||
phx-value-status="suspended"
|
phx-value-cycle_id={cycle.id}
|
||||||
phx-target={@myself}
|
phx-value-status="suspended"
|
||||||
class="btn btn-sm btn-outline btn-warning"
|
phx-target={@myself}
|
||||||
title={gettext("Mark as suspended")}
|
class="join-item btn btn-sm btn-outline btn-warning"
|
||||||
>
|
title={gettext("Mark as suspended")}
|
||||||
<.icon name="hero-pause-circle" class="size-4" />
|
>
|
||||||
{gettext("Suspended")}
|
<.icon name="hero-pause-circle" class="size-4" />
|
||||||
</button>
|
{gettext("Suspended")}
|
||||||
<button
|
</button>
|
||||||
:if={cycle.status != :unpaid}
|
<button
|
||||||
type="button"
|
:if={cycle.status != :unpaid}
|
||||||
phx-click="mark_cycle_status"
|
type="button"
|
||||||
phx-value-cycle_id={cycle.id}
|
phx-click="mark_cycle_status"
|
||||||
phx-value-status="unpaid"
|
phx-value-cycle_id={cycle.id}
|
||||||
phx-target={@myself}
|
phx-value-status="unpaid"
|
||||||
class="btn btn-sm btn-error"
|
phx-target={@myself}
|
||||||
title={gettext("Mark as unpaid")}
|
class="join-item btn btn-sm btn-error"
|
||||||
>
|
title={gettext("Mark as unpaid")}
|
||||||
<.icon name="hero-x-circle" class="size-4" />
|
>
|
||||||
{gettext("Unpaid")}
|
<.icon name="hero-x-circle" class="size-4" />
|
||||||
</button>
|
{gettext("Unpaid")}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
<%= if @can_destroy_cycle do %>
|
<%= if @can_destroy_cycle do %>
|
||||||
<button
|
<button
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue