368 lines
12 KiB
Elixir
368 lines
12 KiB
Elixir
defmodule MvWeb.MemberLive.Show do
|
|
@moduledoc """
|
|
LiveView for displaying a single member's details.
|
|
|
|
## Features
|
|
- Display all member information in grouped sections
|
|
- Tab navigation for future features (Payments)
|
|
- Show custom field values with type-based formatting
|
|
- Navigate to edit form
|
|
- Return to member list
|
|
|
|
## Sections
|
|
- Personal Data: Name, address, contact information, membership dates, notes
|
|
- Custom Fields: Dynamic fields in uniform grid layout (sorted by name)
|
|
- Payment Data: Mockup section with placeholder data
|
|
|
|
## Navigation
|
|
- Back to member list
|
|
- Edit member (with return_to parameter for back navigation)
|
|
"""
|
|
use MvWeb, :live_view
|
|
import Ash.Query
|
|
|
|
@impl true
|
|
def render(assigns) do
|
|
~H"""
|
|
<Layouts.app flash={@flash} current_user={@current_user}>
|
|
<%!-- Header with Back button, Name, and Edit button --%>
|
|
<div class="flex items-center justify-between gap-4 pb-4">
|
|
<.button navigate={~p"/members"} aria-label={gettext("Back to members list")}>
|
|
<.icon name="hero-arrow-left" class="size-4" />
|
|
{gettext("Back")}
|
|
</.button>
|
|
|
|
<h1 class="text-2xl font-bold text-center flex-1">
|
|
{@member.first_name} {@member.last_name}
|
|
</h1>
|
|
|
|
<.button variant="primary" navigate={~p"/members/#{@member}/edit?return_to=show"}>
|
|
{gettext("Edit Member")}
|
|
</.button>
|
|
</div>
|
|
|
|
<%!-- Tab Navigation --%>
|
|
<div role="tablist" class="tabs tabs-bordered mb-6">
|
|
<button role="tab" class="tab tab-active" aria-selected="true">
|
|
<.icon name="hero-identification" class="size-4 mr-2" />
|
|
{gettext("Contact Data")}
|
|
</button>
|
|
<button role="tab" class="tab" disabled aria-disabled="true" title={gettext("Coming soon")}>
|
|
<.icon name="hero-credit-card" class="size-4 mr-2" />
|
|
{gettext("Payments")}
|
|
</button>
|
|
</div>
|
|
|
|
<%!-- Personal Data and Custom Fields Row --%>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
<%!-- Personal Data Section --%>
|
|
<div>
|
|
<.section_box title={gettext("Personal Data")}>
|
|
<div class="space-y-4">
|
|
<%!-- Name Row --%>
|
|
<div class="flex gap-6">
|
|
<.data_field label={gettext("First Name")} value={@member.first_name} class="w-48" />
|
|
<.data_field label={gettext("Last Name")} value={@member.last_name} class="w-48" />
|
|
</div>
|
|
|
|
<%!-- Address --%>
|
|
<div>
|
|
<.data_field label={gettext("Address")} value={format_address(@member)} />
|
|
</div>
|
|
|
|
<%!-- Email --%>
|
|
<div>
|
|
<.data_field label={gettext("Email")}>
|
|
<.mailto_link email={@member.email} display={@member.email} />
|
|
</.data_field>
|
|
</div>
|
|
|
|
<%!-- Phone --%>
|
|
<div>
|
|
<.data_field label={gettext("Phone")} value={@member.phone_number} />
|
|
</div>
|
|
|
|
<%!-- Membership Dates Row --%>
|
|
<div class="flex gap-6">
|
|
<.data_field
|
|
label={gettext("Join Date")}
|
|
value={format_date(@member.join_date)}
|
|
class="w-28"
|
|
/>
|
|
<.data_field
|
|
label={gettext("Exit Date")}
|
|
value={format_date(@member.exit_date)}
|
|
class="w-28"
|
|
/>
|
|
</div>
|
|
|
|
<%!-- Linked User --%>
|
|
<div>
|
|
<.data_field label={gettext("Linked User")}>
|
|
<%= if @member.user do %>
|
|
<.link
|
|
navigate={~p"/users/#{@member.user}"}
|
|
class="text-blue-700 hover:text-blue-800 underline inline-flex items-center gap-1"
|
|
>
|
|
<.icon name="hero-user" class="size-4" />
|
|
{@member.user.email}
|
|
</.link>
|
|
<% else %>
|
|
<span class="text-base-content/70 italic">{gettext("No user linked")}</span>
|
|
<% end %>
|
|
</.data_field>
|
|
</div>
|
|
|
|
<%!-- Notes --%>
|
|
<%= if @member.notes && String.trim(@member.notes) != "" do %>
|
|
<div>
|
|
<.data_field label={gettext("Notes")}>
|
|
<p class="whitespace-pre-wrap text-base-content/80">{@member.notes}</p>
|
|
</.data_field>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</.section_box>
|
|
</div>
|
|
|
|
<%!-- Custom Fields Section --%>
|
|
<%= if Enum.any?(@custom_fields) do %>
|
|
<div>
|
|
<.section_box title={gettext("Custom Fields")}>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<%= for custom_field <- @custom_fields do %>
|
|
<% cfv = find_custom_field_value(@member.custom_field_values, custom_field.id) %>
|
|
<.data_field label={custom_field.name}>
|
|
{format_custom_field_value(cfv, custom_field.value_type)}
|
|
</.data_field>
|
|
<% end %>
|
|
</div>
|
|
</.section_box>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%!-- Payment Data Section (Mockup) --%>
|
|
<div class="max-w-xl">
|
|
<.section_box title={gettext("Payment Data")}>
|
|
<div role="alert" class="alert alert-info mb-4">
|
|
<.icon name="hero-information-circle" class="size-5" />
|
|
<span>{gettext("This data is for demonstration purposes only (mockup).")}</span>
|
|
</div>
|
|
|
|
<div class="flex gap-6">
|
|
<.data_field label={gettext("Contribution")} value="72 €" class="w-24" />
|
|
<.data_field label={gettext("Payment Cycle")} value={gettext("monthly")} class="w-28" />
|
|
<.data_field label={gettext("Paid")} class="w-24">
|
|
<%= if @member.paid do %>
|
|
<span class="badge badge-success">{gettext("Paid")}</span>
|
|
<% else %>
|
|
<span class="badge badge-warning">{gettext("Pending")}</span>
|
|
<% end %>
|
|
</.data_field>
|
|
</div>
|
|
</.section_box>
|
|
</div>
|
|
</Layouts.app>
|
|
"""
|
|
end
|
|
|
|
@impl true
|
|
def mount(_params, _session, socket) do
|
|
{:ok, socket}
|
|
end
|
|
|
|
@impl true
|
|
def handle_params(%{"id" => id}, _, socket) do
|
|
# Load custom fields once using assign_new to avoid repeated queries
|
|
socket =
|
|
assign_new(socket, :custom_fields, fn ->
|
|
Mv.Membership.CustomField
|
|
|> Ash.Query.sort(name: :asc)
|
|
|> Ash.read!()
|
|
end)
|
|
|
|
query =
|
|
Mv.Membership.Member
|
|
|> filter(id == ^id)
|
|
|> load([:user, custom_field_values: [:custom_field]])
|
|
|
|
member = Ash.read_one!(query)
|
|
|
|
{:noreply,
|
|
socket
|
|
|> assign(:page_title, page_title(socket.assigns.live_action))
|
|
|> assign(:member, member)}
|
|
end
|
|
|
|
defp page_title(:show), do: gettext("Show Member")
|
|
defp page_title(:edit), do: gettext("Edit Member")
|
|
|
|
# -----------------------------------------------------------------
|
|
# Helper Components
|
|
# -----------------------------------------------------------------
|
|
|
|
# Renders a section box with border and title.
|
|
attr :title, :string, required: true
|
|
slot :inner_block, required: true
|
|
|
|
defp section_box(assigns) do
|
|
~H"""
|
|
<section class="mb-6">
|
|
<h2 class="text-lg font-semibold mb-3">{@title}</h2>
|
|
<div class="border border-base-300 rounded-lg p-4 bg-base-100">
|
|
{render_slot(@inner_block)}
|
|
</div>
|
|
</section>
|
|
"""
|
|
end
|
|
|
|
# Renders a labeled data field.
|
|
attr :label, :string, required: true
|
|
attr :value, :string, default: nil
|
|
attr :class, :string, default: ""
|
|
slot :inner_block
|
|
|
|
defp data_field(assigns) do
|
|
~H"""
|
|
<dl class={@class}>
|
|
<dt class="text-sm font-medium text-base-content/70">{@label}</dt>
|
|
<dd class="mt-1 text-base-content">
|
|
<%= if @inner_block != [] do %>
|
|
{render_slot(@inner_block)}
|
|
<% else %>
|
|
{display_value(@value)}
|
|
<% end %>
|
|
</dd>
|
|
</dl>
|
|
"""
|
|
end
|
|
|
|
# Renders a mailto link if email is present, otherwise renders empty value placeholder
|
|
attr :email, :string, required: true
|
|
attr :display, :string, default: nil
|
|
|
|
defp mailto_link(assigns) do
|
|
display_text = assigns.display || assigns.email
|
|
|
|
if assigns.email && String.trim(assigns.email) != "" do
|
|
assigns = %{email: assigns.email, display: display_text}
|
|
|
|
~H"""
|
|
<a
|
|
href={"mailto:#{@email}"}
|
|
class="text-blue-700 hover:text-blue-800 underline"
|
|
>
|
|
{@display}
|
|
</a>
|
|
"""
|
|
else
|
|
render_empty_value()
|
|
end
|
|
end
|
|
|
|
# -----------------------------------------------------------------
|
|
# Helper Functions
|
|
# -----------------------------------------------------------------
|
|
|
|
defp display_value(nil), do: render_empty_value()
|
|
defp display_value(""), do: render_empty_value()
|
|
defp display_value(value), do: value
|
|
|
|
defp format_address(member) do
|
|
street_part =
|
|
[member.street, member.house_number]
|
|
|> Enum.filter(&(&1 && &1 != ""))
|
|
|> Enum.join(" ")
|
|
|
|
city_part =
|
|
[member.postal_code, member.city]
|
|
|> Enum.filter(&(&1 && &1 != ""))
|
|
|> Enum.join(" ")
|
|
|
|
[street_part, city_part]
|
|
|> Enum.filter(&(&1 != ""))
|
|
|> Enum.join(", ")
|
|
|> case do
|
|
"" -> nil
|
|
address -> address
|
|
end
|
|
end
|
|
|
|
defp format_date(nil), do: nil
|
|
|
|
defp format_date(%Date{} = date) do
|
|
Calendar.strftime(date, "%d.%m.%Y")
|
|
end
|
|
|
|
defp format_date(date), do: to_string(date)
|
|
|
|
# Finds custom field value for a given custom field id
|
|
defp find_custom_field_value(nil, _custom_field_id), do: nil
|
|
|
|
defp find_custom_field_value(custom_field_values, custom_field_id)
|
|
when is_list(custom_field_values) do
|
|
Enum.find(custom_field_values, fn cfv ->
|
|
cfv.custom_field_id == custom_field_id or
|
|
(cfv.custom_field && cfv.custom_field.id == custom_field_id)
|
|
end)
|
|
end
|
|
|
|
defp find_custom_field_value(_custom_field_values, _custom_field_id), do: nil
|
|
|
|
# Formats custom field value based on type
|
|
# Handles both CustomFieldValue structs and direct values
|
|
defp format_custom_field_value(nil, _type), do: render_empty_value()
|
|
|
|
defp format_custom_field_value(%Mv.Membership.CustomFieldValue{} = cfv, value_type) do
|
|
format_custom_field_value(cfv.value, value_type)
|
|
end
|
|
|
|
defp format_custom_field_value(%Ash.Union{value: value, type: type}, _expected_type) do
|
|
format_custom_field_value(value, type)
|
|
end
|
|
|
|
defp format_custom_field_value(value, :boolean) when is_boolean(value) do
|
|
if value, do: gettext("Yes"), else: gettext("No")
|
|
end
|
|
|
|
defp format_custom_field_value(%Date{} = date, :date) do
|
|
Calendar.strftime(date, "%d.%m.%Y")
|
|
end
|
|
|
|
defp format_custom_field_value(value, :email) when is_binary(value) do
|
|
if String.trim(value) == "" do
|
|
render_empty_value()
|
|
else
|
|
assigns = %{email: value}
|
|
|
|
~H"""
|
|
<.mailto_link email={@email} display={@email} />
|
|
"""
|
|
end
|
|
end
|
|
|
|
defp format_custom_field_value(value, :integer) when is_integer(value) do
|
|
Integer.to_string(value)
|
|
end
|
|
|
|
defp format_custom_field_value(value, _type) when is_binary(value) do
|
|
if String.trim(value) == "", do: render_empty_value(), else: value
|
|
end
|
|
|
|
defp format_custom_field_value(value, _type), do: to_string(value)
|
|
|
|
# Renders accessible placeholder for empty values
|
|
# Uses translated text for screen readers while maintaining visual consistency
|
|
# The visual "—" is hidden from screen readers, while the translated text is only visible to screen readers
|
|
defp render_empty_value do
|
|
assigns = %{text: gettext("Not set")}
|
|
|
|
~H"""
|
|
<span class="text-base-content/50 italic">
|
|
<span aria-hidden="true">—</span>
|
|
<span class="sr-only">{@text}</span>
|
|
</span>
|
|
"""
|
|
end
|
|
end
|