liveview for new member fields

lib/mv_web/components/core_components.ex

@@ -673,4 +673,28 @@ defmodule MvWeb.CoreComponents do
   def translate_errors(errors, field) when is_list(errors) do
     for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
   end
+
+  @doc """
+  Renders a list of items with name and value pairs.
+
+  ## Examples
+      <.generic_list items={[
+        {item.name, item.value},
+        {other.name, other.value}
+      ]} />
+  """
+  attr :items, :list, required: true, doc: "List of {name, value} tuples"
+
+  def generic_list(assigns) do
+    ~H"""
+    <div class="mt-14">
+      <dl class="-my-4 divide-y divide-zinc-100">
+        <div :for={{name, value} <- @items} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
+          <dt class="w-1/4 flex-none text-zinc-500">{name}</dt>
+          <dd class="text-zinc-700">{value}</dd>
+        </div>
+      </dl>
+    </div>
+    """
+  end
 end

lib/mv_web/member_live/form_component.ex

@@ -36,6 +36,21 @@ defmodule MvWeb.MemberLive.FormComponent do
         phx-change="validate"
         phx-submit="save"
       >
+        <.input field={@form[:first_name]} label="First Name" required />
+        <.input field={@form[:last_name]} label="Last Name" required />
+        <.input field={@form[:email]} label="Email" required type="email" />
+        <.input field={@form[:birth_date]} label="Birth Date" type="date" />
+        <.input field={@form[:paid]} label="Paid" type="checkbox" />
+        <.input field={@form[:phone_number]} label="Phone Number" />
+        <.input field={@form[:join_date]} label="Join Date" type="date" />
+        <.input field={@form[:exit_date]} label="Exit Date" type="date" />
+        <.input field={@form[:notes]} label="Notes" />
+        <.input field={@form[:city]} label="City" />
+        <.input field={@form[:street]} label="Street" />
+        <.input field={@form[:house_number]} label="House Number" />
+        <.input field={@form[:postal_code]} label="Postal Code" />
+
+        <h3 class="mt-8 mb-2 text-lg font-semibold">Custom Properties</h3>
         <.inputs_for :let={f_property} field={@form[:properties]}>
           <% type = Enum.find(@property_types, &(&1.id == f_property[:property_type_id].value)) %>
           <.inputs_for :let={value_form} field={f_property[:value]}>

lib/mv_web/member_live/index.ex

@@ -18,7 +18,12 @@ defmodule MvWeb.MemberLive.Index do
       rows={@streams.members}
       row_click={fn {_id, member} -> JS.navigate(~p"/members/#{member}") end}
     >
-      <:col :let={{_id, member}} label="Id">{member.id}</:col>
+      <!-- <:col :let={{_id, member}} label="Id">{member.id}</:col> -->
+      <:col :let={{_id, member}} label="First Name">{member.first_name}</:col>
+      <:col :let={{_id, member}} label="Last Name">{member.last_name}</:col>
+      <:col :let={{_id, member}} label="Email">{member.email}</:col>
+      <:col :let={{_id, member}} label="City">{member.city}</:col>
+      <:col :let={{_id, member}} label="Join Date">{member.join_date}</:col>
 
       <:action :let={{_id, member}}>
         <div class="sr-only">

lib/mv_web/member_live/show.ex

@@ -1,11 +1,12 @@
 defmodule MvWeb.MemberLive.Show do
   use MvWeb, :live_view
+  import Ash.Query
 
   @impl true
   def render(assigns) do
     ~H"""
     <.header>
-      Member {@member.id}
+      {@member.first_name} {@member.last_name}
       <:subtitle>This is a member record from your database.</:subtitle>
 
       <:actions>
@@ -17,8 +18,30 @@ defmodule MvWeb.MemberLive.Show do
 
     <.list>
       <:item title="Id">{@member.id}</:item>
+      <:item title="First Name">{@member.first_name}</:item>
+      <:item title="Last Name">{@member.last_name}</:item>
+      <:item title="Email">{@member.email}</:item>
+      <:item title="Birth Date">{@member.birth_date}</:item>
+      <:item title="Paid">{if @member.paid, do: "Yes", else: "No"}</:item>
+      <:item title="Phone Number">{@member.phone_number}</:item>
+      <:item title="Join Date">{@member.join_date}</:item>
+      <:item title="Exit Date">{@member.exit_date}</:item>
+      <:item title="Notes">{@member.notes}</:item>
+      <:item title="City">{@member.city}</:item>
+      <:item title="Street">{@member.street}</:item>
+      <:item title="House Number">{@member.house_number}</:item>
+      <:item title="Postal Code">{@member.postal_code}</:item>
     </.list>
 
+    <h3 class="mt-8 mb-2 text-lg font-semibold">Custom Properties</h3>
+    <.generic_list
+      items={Enum.map(@member.properties, fn p -> 
+        {
+          p.property_type && p.property_type.name,  # name
+          case p.value do %{value: v} -> v; v -> v end  # value
+        }
+      end)}
+    />
     <.back navigate={~p"/members"}>Back to members</.back>
 
     <.modal
@@ -46,10 +69,17 @@ defmodule MvWeb.MemberLive.Show do
 
   @impl true
   def handle_params(%{"id" => id}, _, socket) do
+    query =
+      Mv.Membership.Member
+      |> filter(id == ^id)
+      |> load(properties: [:property_type])
+
+    member = Ash.read_one!(query)
+
     {:noreply,
      socket
      |> assign(:page_title, page_title(socket.assigns.live_action))
-     |> assign(:member, Ash.get!(Mv.Membership.Member, id))}
+     |> assign(:member, member)}
   end
 
   defp page_title(:show), do: "Show Member"