Membership Fee 6 - UI Components & LiveViews closes #280 #304

Open
moritz wants to merge 65 commits from feature/280_membership_fee_ui into main
4 changed files with 35 additions and 10 deletions
Showing only changes of commit 9233f56847 - Show all commits

View file

@ -47,7 +47,10 @@ defmodule MvWeb.MemberLive.Show do
<div role="tablist" class="tabs tabs-bordered mb-6"> <div role="tablist" class="tabs tabs-bordered mb-6">
<button <button
role="tab" role="tab"
class={["tab", if(@active_tab == :contact, do: "tab-active", else: "")]} class={[
"tab",
if(@active_tab == :contact, do: "tab-active", else: "!text-gray-800")
]}
aria-selected={@active_tab == :contact} aria-selected={@active_tab == :contact}
phx-click="switch_tab" phx-click="switch_tab"
phx-value-tab="contact" phx-value-tab="contact"
@ -57,7 +60,10 @@ defmodule MvWeb.MemberLive.Show do
</button> </button>
<button <button
role="tab" role="tab"
class={["tab", if(@active_tab == :membership_fees, do: "tab-active", else: "")]} class={[
"tab",
if(@active_tab == :membership_fees, do: "tab-active", else: "!text-gray-800")
]}
aria-selected={@active_tab == :membership_fees} aria-selected={@active_tab == :membership_fees}
phx-click="switch_tab" phx-click="switch_tab"
phx-value-tab="membership_fees" phx-value-tab="membership_fees"

View file

@ -311,17 +311,19 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
<h3 class="text-lg font-bold">{gettext("Create Cycle")}</h3> <h3 class="text-lg font-bold">{gettext("Create Cycle")}</h3>
<form phx-submit="create_cycle" phx-target={@myself}> <form phx-submit="create_cycle" phx-target={@myself}>
<div class="form-control w-full mt-4"> <div class="form-control w-full mt-4">
<label class="label"> <label class="label" for="create-cycle-date">
<span class="label-text">{gettext("Date")}</span> <span class="label-text">{gettext("Date")}</span>
</label> </label>
<input <input
moritz marked this conversation as resolved

If I select a date I get an error and the modal closes and the member overview is shown

If I select a date I get an error and the modal closes and the member overview is shown
type="date" type="date"
id="create-cycle-date"
name="date" name="date"
value={@create_cycle_date || ""} value={@create_cycle_date || ""}
phx-change="update_create_cycle_date" phx-change="update_create_cycle_date"
phx-target={@myself} phx-target={@myself}
class="input input-bordered w-full" class="input input-bordered w-full"
required required
aria-label={gettext("Date")}
/> />
<label class="label"> <label class="label">
<span class="label-text-alt"> <span class="label-text-alt">
@ -345,17 +347,19 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
</div> </div>
<% end %> <% end %>
<div class="form-control w-full mt-4"> <div class="form-control w-full mt-4">
<label class="label"> <label class="label" for="create-cycle-amount">
<span class="label-text">{gettext("Amount")}</span> <span class="label-text">{gettext("Amount")}</span>
</label> </label>
<input <input
type="number" type="number"
id="create-cycle-amount"
name="amount" name="amount"
step="0.01" step="0.01"
min="0" min="0"
value={Decimal.to_string(@member.membership_fee_type.amount)} value={Decimal.to_string(@member.membership_fee_type.amount)}
class="input input-bordered w-full" class="input input-bordered w-full"
required required
aria-label={gettext("Amount")}
/> />
</div> </div>
<%= if @create_cycle_error do %> <%= if @create_cycle_error do %>

View file

@ -48,14 +48,16 @@ defmodule MvWeb.MembershipFeeTypeLive.Form do
/> />
moritz marked this conversation as resolved

Interval is neccessary to create a fee type, but it is not marked as required. So when I leave it out there is no error message but my fee type is not created.

Interval is neccessary to create a fee type, but it is not marked as required. So when I leave it out there is no error message but my fee type is not created.
<div class="form-control"> <div class="form-control">
<label class="label"> <label class="label" for="membership-fee-type-form_interval">
<span class="label-text font-semibold"> <span class="label-text font-semibold">
{gettext("Interval")} {gettext("Interval")}
<span <span
:if={is_nil(@membership_fee_type)} :if={is_nil(@membership_fee_type)}
class="text-red-700 tooltip tooltip-right" class="text-red-700 tooltip tooltip-right"
data-tip={gettext("This field cannot be empty")} data-tip={gettext("This field cannot be empty")}
>*</span> >
*
</span>
</span> </span>
</label> </label>
<select <select
@ -67,6 +69,7 @@ defmodule MvWeb.MembershipFeeTypeLive.Form do
name="membership_fee_type[interval]" name="membership_fee_type[interval]"
id="membership-fee-type-form_interval" id="membership-fee-type-form_interval"
required={is_nil(@membership_fee_type)} required={is_nil(@membership_fee_type)}
aria-label={gettext("Interval")}
> >
<option value="">{gettext("Select interval")}</option> <option value="">{gettext("Select interval")}</option>
<option <option
@ -135,7 +138,7 @@ defmodule MvWeb.MembershipFeeTypeLive.Form do
<%= if @show_amount_warning do %> <%= if @show_amount_warning do %>
<dialog id="amount-warning-modal" class="modal modal-open"> <dialog id="amount-warning-modal" class="modal modal-open">
<div class="modal-box"> <div class="modal-box">
<h3 class="text-lg font-bold">{gettext("Change Amount?")}</h3> <h2 class="text-lg font-bold">{gettext("Change Amount?")}</h2>
<div class="py-4 space-y-4"> <div class="py-4 space-y-4">
<div class="alert alert-warning"> <div class="alert alert-warning">
<.icon name="hero-exclamation-triangle" class="size-5" /> <.icon name="hero-exclamation-triangle" class="size-5" />
@ -163,7 +166,7 @@ defmodule MvWeb.MembershipFeeTypeLive.Form do
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<span class="text-base-content/70">{gettext("New amount")}:</span> <span class="text-base-content/70">{gettext("New amount")}:</span>
<span class="font-mono font-semibold text-primary"> <span class="font-mono font-semibold text-base-content">
{MembershipFeeHelpers.format_currency(@new_amount)} {MembershipFeeHelpers.format_currency(@new_amount)}
</span> </span>
</div> </div>

View file

@ -57,7 +57,7 @@ defmodule MvWeb.MembershipFeeTypeLive.Index do
> >
<:col :let={mft} label={gettext("Name")}> <:col :let={mft} label={gettext("Name")}>
<span class="font-medium">{mft.name}</span> <span class="font-medium">{mft.name}</span>
<p :if={mft.description} class="text-sm text-base-content/60">{mft.description}</p> <p :if={mft.description} class="text-sm text-base-content/70">{mft.description}</p>
</:col> </:col>
<:col :let={mft} label={gettext("Amount")}> <:col :let={mft} label={gettext("Amount")}>
@ -75,7 +75,11 @@ defmodule MvWeb.MembershipFeeTypeLive.Index do
</:col> </:col>
<:action :let={mft}> <:action :let={mft}>
<.link navigate={~p"/membership_fee_types/#{mft.id}/edit"} class="btn btn-ghost btn-xs"> <.link
navigate={~p"/membership_fee_types/#{mft.id}/edit"}
class="btn btn-ghost btn-xs"
aria-label={gettext("Edit membership fee type")}
>
<.icon name="hero-pencil" class="size-4" /> <.icon name="hero-pencil" class="size-4" />
</.link> </.link>
</:action> </:action>
@ -92,6 +96,14 @@ defmodule MvWeb.MembershipFeeTypeLive.Index do
else: "text-error" else: "text-error"
) )
]} ]}
aria-label={
if get_member_count(mft, @member_counts) > 0,
do:
gettext("Cannot delete - %{count} member(s) assigned",
count: get_member_count(mft, @member_counts)
),
else: gettext("Delete membership fee type")
}
title={ title={
if get_member_count(mft, @member_counts) > 0, if get_member_count(mft, @member_counts) > 0,
do: do: