feat: migration to phoenix 1.8 - merge old live views into new live views

lib/mv_web/live/member_live/form.ex

@@ -7,39 +7,47 @@ defmodule MvWeb.MemberLive.Form do
     <Layouts.app flash={@flash}>
       <.header>
         {@page_title}
-        <:subtitle>Use this form to manage member records in your database.</:subtitle>
+        <:subtitle>
+          {gettext("Use this form to manage member records and their properties.")}
+        </:subtitle>
       </.header>
 
       <.form for={@form} id="member-form" phx-change="validate" phx-submit="save">
-        <.input field={@form[:properties]} type="select" multiple label="Properties" options={[]} />
-        <.input field={@form[:first_name]} type="text" label="First name" /><.input
-          field={@form[:last_name]}
-          type="text"
-          label="Last name"
-        /><.input field={@form[:email]} type="text" label="Email" /><.input
-          field={@form[:birth_date]}
-          type="date"
-          label="Birth date"
-        /><.input field={@form[:paid]} type="checkbox" label="Paid" /><.input
-          field={@form[:phone_number]}
-          type="text"
-          label="Phone number"
-        /><.input field={@form[:join_date]} type="date" label="Join date" /><.input
-          field={@form[:exit_date]}
-          type="date"
-          label="Exit date"
-        /><.input field={@form[:notes]} type="text" label="Notes" /><.input
-          field={@form[:city]}
-          type="text"
-          label="City"
-        /><.input field={@form[:street]} type="text" label="Street" /><.input
-          field={@form[:house_number]}
-          type="text"
-          label="House number"
-        /><.input field={@form[:postal_code]} type="text" label="Postal code" />
+        <.input field={@form[:first_name]} label={gettext("First Name")} required />
+        <.input field={@form[:last_name]} label={gettext("Last Name")} required />
+        <.input field={@form[:email]} label={gettext("Email")} required type="email" />
+        <.input field={@form[:birth_date]} label={gettext("Birth Date")} type="date" />
+        <.input field={@form[:paid]} label={gettext("Paid")} type="checkbox" />
+        <.input field={@form[:phone_number]} label={gettext("Phone Number")} />
+        <.input field={@form[:join_date]} label={gettext("Join Date")} type="date" />
+        <.input field={@form[:exit_date]} label={gettext("Exit Date")} type="date" />
+        <.input field={@form[:notes]} label={gettext("Notes")} />
+        <.input field={@form[:city]} label={gettext("City")} />
+        <.input field={@form[:street]} label={gettext("Street")} />
+        <.input field={@form[:house_number]} label={gettext("House Number")} />
+        <.input field={@form[:postal_code]} label={gettext("Postal Code")} />
 
-        <.button phx-disable-with="Saving..." variant="primary">Save Member</.button>
-        <.button navigate={return_path(@return_to, @member)}>Cancel</.button>
+        <h3 class="mt-8 mb-2 text-lg font-semibold">{gettext("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]}>
+            <% input_type =
+              cond do
+                type && type.value_type == :boolean -> "checkbox"
+                type && type.value_type == :date -> :date
+                true -> :text
+              end %>
+            <.input field={value_form[:value]} label={type && type.name} type={input_type} />
+          </.inputs_for>
+          <input
+            type="hidden"
+            name={f_property[:property_type_id].name}
+            value={f_property[:property_type_id].value}
+          />
+        </.inputs_for>
+
+        <.button phx-disable-with={gettext("Saving...")} variant="primary">{gettext("Save Member")}</.button>
+        <.button navigate={return_path(@return_to, @member)}>{gettext("Cancel")}</.button>
       </.form>
     </Layouts.app>
     """
@@ -47,6 +55,20 @@ defmodule MvWeb.MemberLive.Form do
 
   @impl true
   def mount(params, _session, socket) do
+    {:ok, property_types} = Mv.Membership.list_property_types()
+
+    initial_properties =
+      Enum.map(property_types, fn pt ->
+        %{
+          "property_type_id" => pt.id,
+          "value" => %{
+            "type" => pt.value_type,
+            "value" => nil,
+            "_union_type" => Atom.to_string(pt.value_type)
+          }
+        }
+      end)
+
     member =
       case params["id"] do
         nil -> nil
@@ -59,6 +81,8 @@ defmodule MvWeb.MemberLive.Form do
     {:ok,
      socket
      |> assign(:return_to, return_to(params["return_to"]))
+     |> assign(:property_types, property_types)
+     |> assign(:initial_properties, initial_properties)
      |> assign(member: member)
      |> assign(:page_title, page_title)
      |> assign_form()}
@@ -77,9 +101,16 @@ defmodule MvWeb.MemberLive.Form do
       {:ok, member} ->
         notify_parent({:saved, member})
 
+        action =
+          case socket.assigns.form.source.type do
+            :create -> gettext("create")
+            :update -> gettext("update")
+            other -> to_string(other)
+          end
+
         socket =
           socket
-          |> put_flash(:info, "Member #{socket.assigns.form.source.type}d successfully")
+          |> put_flash(:info, gettext("Member %{action} successfully", action: action))
           |> push_navigate(to: return_path(socket.assigns.return_to, member))
 
         {:noreply, socket}
@@ -94,9 +125,56 @@ defmodule MvWeb.MemberLive.Form do
   defp assign_form(%{assigns: %{member: member}} = socket) do
     form =
       if member do
-        AshPhoenix.Form.for_update(member, :update_member, as: "member")
+        {:ok, member} = Ash.load(member, properties: [:property_type])
+
+        existing_properties =
+          member.properties
+          |> Enum.map(& &1.property_type_id)
+
+        is_missing_property = fn i ->
+          not Enum.member?(existing_properties, Map.get(i, "property_type_id"))
+        end
+
+        params = %{
+          "properties" =>
+            Enum.map(member.properties, fn prop ->
+              %{
+                "property_type_id" => prop.property_type_id,
+                "value" => %{
+                  "_union_type" => Atom.to_string(prop.value.type),
+                  "type" => prop.value.type,
+                  "value" => prop.value.value
+                }
+              }
+            end)
+        }
+
+        form =
+          AshPhoenix.Form.for_update(
+            member,
+            :update_member,
+            api: Mv.Membership,
+            as: "member",
+            params: params,
+            forms: [auto?: true]
+          )
+
+        missing_properties = Enum.filter(socket.assigns[:initial_properties], is_missing_property)
+
+        Enum.reduce(
+          missing_properties,
+          form,
+          &AshPhoenix.Form.add_form(&2, [:properties], params: &1)
+        )
       else
-        AshPhoenix.Form.for_create(Mv.Membership.Member, :create_member, as: "member")
+        AshPhoenix.Form.for_create(
+          Mv.Membership.Member,
+          :create_member,
+          api: Mv.Membership,
+          as: "member",
+          params: %{"properties" => socket.assigns[:initial_properties]},
+          forms: [auto?: true]
+        )
       end
 
     assign(socket, form: to_form(form))

lib/mv_web/live/member_live/index.ex

@@ -6,10 +6,10 @@ defmodule MvWeb.MemberLive.Index do
     ~H"""
     <Layouts.app flash={@flash}>
       <.header>
-        Listing Members
+        {gettext("Listing Members")}
         <:actions>
           <.button variant="primary" navigate={~p"/members/new"}>
-            <.icon name="hero-plus" /> New Member
+            <.icon name="hero-plus" /> {gettext("New Member")}
           </.button>
         </:actions>
       </.header>
@@ -19,22 +19,27 @@ 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={gettext("First Name")}>{member.first_name}</:col>
+        <:col :let={{_id, member}} label={gettext("Last Name")}>{member.last_name}</:col>
+        <:col :let={{_id, member}} label={gettext("Email")}>{member.email}</:col>
+        <:col :let={{_id, member}} label={gettext("City")}>{member.city}</:col>
+        <:col :let={{_id, member}} label={gettext("Join Date")}>{member.join_date}</:col>
 
         <:action :let={{_id, member}}>
           <div class="sr-only">
-            <.link navigate={~p"/members/#{member}"}>Show</.link>
+            <.link navigate={~p"/members/#{member}"}>{gettext("Show")}</.link>
           </div>
 
-          <.link navigate={~p"/members/#{member}/edit"}>Edit</.link>
+          <.link navigate={~p"/members/#{member}/edit"}>{gettext("Edit")}</.link>
         </:action>
 
         <:action :let={{id, member}}>
           <.link
             phx-click={JS.push("delete", value: %{id: member.id}) |> hide("##{id}")}
-            data-confirm="Are you sure?"
+            data-confirm={gettext("Are you sure?")}
           >
-            Delete
+            {gettext("Delete")}
           </.link>
         </:action>
       </.table>
@@ -46,7 +51,7 @@ defmodule MvWeb.MemberLive.Index do
   def mount(_params, _session, socket) do
     {:ok,
      socket
-     |> assign(:page_title, "Listing Members")
+     |> assign(:page_title, gettext("Listing Members"))
      |> stream(:members, Ash.read!(Mv.Membership.Member))}
   end
 

lib/mv_web/live/member_live/show.ex

@@ -1,36 +1,82 @@
 defmodule MvWeb.MemberLive.Show do
   use MvWeb, :live_view
+  import Ash.Query
 
   @impl true
   def render(assigns) do
     ~H"""
     <Layouts.app flash={@flash}>
       <.header>
-        Member {@member.id}
-        <:subtitle>This is a member record from your database.</:subtitle>
+        {@member.first_name} {@member.last_name}
+        <:subtitle>{gettext("This is a member record from your database.")}</:subtitle>
 
         <:actions>
           <.button navigate={~p"/members"}>
             <.icon name="hero-arrow-left" />
           </.button>
           <.button variant="primary" navigate={~p"/members/#{@member}/edit?return_to=show"}>
-            <.icon name="hero-pencil-square" /> Edit Member
+            <.icon name="hero-pencil-square" /> {gettext("Edit Member")}
           </.button>
         </:actions>
       </.header>
 
       <.list>
-        <:item title="Id">{@member.id}</:item>
+        <:item title={gettext("Id")}>{@member.id}</:item>
+        <:item title={gettext("First Name")}>{@member.first_name}</:item>
+        <:item title={gettext("Last Name")}>{@member.last_name}</:item>
+        <:item title={gettext("Email")}>{@member.email}</:item>
+        <:item title={gettext("Birth Date")}>{@member.birth_date}</:item>
+        <:item title={gettext("Paid")}>
+          {if @member.paid, do: gettext("Yes"), else: gettext("No")}
+        </:item>
+        <:item title={gettext("Phone Number")}>{@member.phone_number}</:item>
+        <:item title={gettext("Join Date")}>{@member.join_date}</:item>
+        <:item title={gettext("Exit Date")}>{@member.exit_date}</:item>
+        <:item title={gettext("Notes")}>{@member.notes}</:item>
+        <:item title={gettext("City")}>{@member.city}</:item>
+        <:item title={gettext("Street")}>{@member.street}</:item>
+        <:item title={gettext("House Number")}>{@member.house_number}</:item>
+        <:item title={gettext("Postal Code")}>{@member.postal_code}</:item>
       </.list>
+
+      <h3 class="mt-8 mb-2 text-lg font-semibold">{gettext("Custom Properties")}</h3>
+      <.generic_list items={
+        Enum.map(@member.properties, fn p ->
+          {
+            # name
+            p.property_type && p.property_type.name,
+            # value
+            case p.value do
+              %{value: v} -> v
+              v -> v
+            end
+          }
+        end)
+      } />
     </Layouts.app>
     """
   end
 
   @impl true
-  def mount(%{"id" => id}, _session, socket) do
-    {:ok,
-     socket
-     |> assign(:page_title, "Show Member")
-     |> assign(:member, Ash.get!(Mv.Membership.Member, id))}
+  def mount(_params, _session, socket) do
+    {:ok, socket}
   end
+
+  @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, member)}
+  end
+
+  defp page_title(:show), do: gettext("Show Member")
+  defp page_title(:edit), do: gettext("Edit Member")
 end