feat(members,properties): add liveview

lib/mv_web/member_live/form_component.ex

@@ -0,0 +1,127 @@
+defmodule MvWeb.MemberLive.FormComponent do
+  use MvWeb, :live_component
+
+  @impl true
+  def mount(socket) do
+    {:ok, property_types} = Mv.Membership.list_property_types()
+
+    initial_properties =
+      Enum.map(property_types, fn pt ->
+        %{
+          "property_type_id" => pt.id,
+          "value" => nil
+        }
+      end)
+
+    {:ok, assign(socket, property_types: property_types, initial_properties: initial_properties)}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <.header>
+        {@title}
+        <:subtitle>Use this form to manage member records and their properties.</:subtitle>
+      </.header>
+
+      <.simple_form
+        for={@form}
+        id="member-form"
+        phx-target={@myself}
+        phx-change="validate"
+        phx-submit="save"
+      >
+        <.inputs_for :let={f_property} field={@form[:properties]}>
+          <% type = Enum.find(@property_types, &(&1.id == f_property[:property_type_id].value)) %>
+          <.input field={f_property[:value]} label={type && type.name} />
+          <input
+            type="hidden"
+            name={f_property[:property_type_id].name}
+            value={f_property[:property_type_id].value}
+          />
+        </.inputs_for>
+
+        <:actions>
+          <.button phx-disable-with="Saving...">Save Member</.button>
+        </:actions>
+      </.simple_form>
+    </div>
+    """
+  end
+
+  @impl true
+  def update(assigns, socket) do
+    {:ok,
+     socket
+     |> assign(assigns)
+     |> assign_form()}
+  end
+
+  @impl true
+  def handle_event("validate", %{"member" => member_params}, socket) do
+    {:noreply, assign(socket, form: AshPhoenix.Form.validate(socket.assigns.form, member_params))}
+  end
+
+  def handle_event("save", %{"member" => member_params}, socket) do
+    case AshPhoenix.Form.submit(socket.assigns.form, params: member_params) do
+      {:ok, member} ->
+        notify_parent({:saved, member})
+
+        socket =
+          socket
+          |> put_flash(:info, "Member #{socket.assigns.form.source.type}d successfully")
+          |> push_patch(to: socket.assigns.patch)
+
+        {:noreply, socket}
+
+      {:error, form} ->
+        {:noreply, assign(socket, form: form)}
+    end
+  end
+
+  defp notify_parent(msg), do: send(self(), {__MODULE__, msg})
+
+  defp assign_form(%{assigns: %{member: member}} = socket) do
+    form =
+      if member do
+        {: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
+
+        form =
+          AshPhoenix.Form.for_update(
+            member,
+            :update_member,
+            api: Mv.Membership,
+            as: "member",
+            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,
+          api: Mv.Membership,
+          as: "member",
+          params: %{"properties" => socket.assigns[:initial_properties]},
+          forms: [auto?: true]
+        )
+      end
+
+    assign(socket, form: to_form(form))
+  end
+end

lib/mv_web/member_live/index.ex

@@ -0,0 +1,99 @@
+defmodule MvWeb.MemberLive.Index do
+  use MvWeb, :live_view
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <.header>
+      Listing Members
+      <:actions>
+        <.link patch={~p"/members/new"}>
+          <.button>New Member</.button>
+        </.link>
+      </:actions>
+    </.header>
+
+    <.table
+      id="members"
+      rows={@streams.members}
+      row_click={fn {_id, member} -> JS.navigate(~p"/members/#{member}") end}
+    >
+      <:col :let={{_id, member}} label="Id">{member.id}</:col>
+
+      <:action :let={{_id, member}}>
+        <div class="sr-only">
+          <.link navigate={~p"/members/#{member}"}>Show</.link>
+        </div>
+
+        <.link patch={~p"/members/#{member}/edit"}>Edit</.link>
+      </:action>
+
+      <:action :let={{id, member}}>
+        <.link
+          phx-click={JS.push("delete", value: %{id: member.id}) |> hide("##{id}")}
+          data-confirm="Are you sure?"
+        >
+          Delete
+        </.link>
+      </:action>
+    </.table>
+
+    <.modal
+      :if={@live_action in [:new, :edit]}
+      id="member-modal"
+      show
+      on_cancel={JS.patch(~p"/members")}
+    >
+      <.live_component
+        module={MvWeb.MemberLive.FormComponent}
+        id={(@member && @member.id) || :new}
+        title={@page_title}
+        action={@live_action}
+        member={@member}
+        patch={~p"/members"}
+      />
+    </.modal>
+    """
+  end
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, stream(socket, :members, Ash.read!(Mv.Membership.Member))}
+  end
+
+  @impl true
+  def handle_params(params, _url, socket) do
+    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
+  end
+
+  defp apply_action(socket, :edit, %{"id" => id}) do
+    socket
+    |> assign(:page_title, "Edit Member")
+    |> assign(:member, Ash.get!(Mv.Membership.Member, id))
+  end
+
+  defp apply_action(socket, :new, _params) do
+    socket
+    |> assign(:page_title, "New Member")
+    |> assign(:member, nil)
+  end
+
+  defp apply_action(socket, :index, _params) do
+    socket
+    |> assign(:page_title, "Listing Members")
+    |> assign(:member, nil)
+  end
+
+  @impl true
+  def handle_info({MvWeb.MemberLive.FormComponent, {:saved, member}}, socket) do
+    {:noreply, stream_insert(socket, :members, member)}
+  end
+
+  @impl true
+  def handle_event("delete", %{"id" => id}, socket) do
+    member = Ash.get!(Mv.Membership.Member, id)
+    Ash.destroy!(member)
+
+    {:noreply, stream_delete(socket, :members, member)}
+  end
+end

lib/mv_web/member_live/show.ex

@@ -0,0 +1,57 @@
+defmodule MvWeb.MemberLive.Show do
+  use MvWeb, :live_view
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <.header>
+      Member {@member.id}
+      <:subtitle>This is a member record from your database.</:subtitle>
+
+      <:actions>
+        <.link patch={~p"/members/#{@member}/show/edit"} phx-click={JS.push_focus()}>
+          <.button>Edit member</.button>
+        </.link>
+      </:actions>
+    </.header>
+
+    <.list>
+      <:item title="Id">{@member.id}</:item>
+    </.list>
+
+    <.back navigate={~p"/members"}>Back to members</.back>
+
+    <.modal
+      :if={@live_action == :edit}
+      id="member-modal"
+      show
+      on_cancel={JS.patch(~p"/members/#{@member}")}
+    >
+      <.live_component
+        module={MvWeb.MemberLive.FormComponent}
+        id={@member.id}
+        title={@page_title}
+        action={@live_action}
+        member={@member}
+        patch={~p"/members/#{@member}"}
+      />
+    </.modal>
+    """
+  end
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  end
+
+  @impl true
+  def handle_params(%{"id" => id}, _, socket) do
+    {:noreply,
+     socket
+     |> assign(:page_title, page_title(socket.assigns.live_action))
+     |> assign(:member, Ash.get!(Mv.Membership.Member, id))}
+  end
+
+  defp page_title(:show), do: "Show Member"
+  defp page_title(:edit), do: "Edit Member"
+end

lib/mv_web/property_live/form_component.ex

@@ -0,0 +1,77 @@
+defmodule MvWeb.PropertyLive.FormComponent do
+  use MvWeb, :live_component
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <.header>
+        {@title}
+        <:subtitle>Use this form to manage property records in your database.</:subtitle>
+      </.header>
+
+      <.simple_form
+        for={@form}
+        id="property-form"
+        phx-target={@myself}
+        phx-change="validate"
+        phx-submit="save"
+      >
+        <.input field={@form[:value]} type="text" label="Value" /><.input
+          field={@form[:member_id]}
+          type="text"
+          label="Member"
+        /><.input field={@form[:property_type_id]} type="text" label="Property type" />
+
+        <:actions>
+          <.button phx-disable-with="Saving...">Save Property</.button>
+        </:actions>
+      </.simple_form>
+    </div>
+    """
+  end
+
+  @impl true
+  def update(assigns, socket) do
+    {:ok,
+     socket
+     |> assign(assigns)
+     |> assign_form()}
+  end
+
+  @impl true
+  def handle_event("validate", %{"property" => property_params}, socket) do
+    {:noreply,
+     assign(socket, form: AshPhoenix.Form.validate(socket.assigns.form, property_params))}
+  end
+
+  def handle_event("save", %{"property" => property_params}, socket) do
+    case AshPhoenix.Form.submit(socket.assigns.form, params: property_params) do
+      {:ok, property} ->
+        notify_parent({:saved, property})
+
+        socket =
+          socket
+          |> put_flash(:info, "Property #{socket.assigns.form.source.type}d successfully")
+          |> push_patch(to: socket.assigns.patch)
+
+        {:noreply, socket}
+
+      {:error, form} ->
+        {:noreply, assign(socket, form: form)}
+    end
+  end
+
+  defp notify_parent(msg), do: send(self(), {__MODULE__, msg})
+
+  defp assign_form(%{assigns: %{property: property}} = socket) do
+    form =
+      if property do
+        AshPhoenix.Form.for_update(property, :update, as: "property")
+      else
+        AshPhoenix.Form.for_create(Mv.Membership.Property, :create, as: "property")
+      end
+
+    assign(socket, form: to_form(form))
+  end
+end

lib/mv_web/property_live/index.ex

@@ -0,0 +1,99 @@
+defmodule MvWeb.PropertyLive.Index do
+  use MvWeb, :live_view
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <.header>
+      Listing Properties
+      <:actions>
+        <.link patch={~p"/properties/new"}>
+          <.button>New Property</.button>
+        </.link>
+      </:actions>
+    </.header>
+
+    <.table
+      id="properties"
+      rows={@streams.properties}
+      row_click={fn {_id, property} -> JS.navigate(~p"/properties/#{property}") end}
+    >
+      <:col :let={{_id, property}} label="Id">{property.id}</:col>
+
+      <:action :let={{_id, property}}>
+        <div class="sr-only">
+          <.link navigate={~p"/properties/#{property}"}>Show</.link>
+        </div>
+
+        <.link patch={~p"/properties/#{property}/edit"}>Edit</.link>
+      </:action>
+
+      <:action :let={{id, property}}>
+        <.link
+          phx-click={JS.push("delete", value: %{id: property.id}) |> hide("##{id}")}
+          data-confirm="Are you sure?"
+        >
+          Delete
+        </.link>
+      </:action>
+    </.table>
+
+    <.modal
+      :if={@live_action in [:new, :edit]}
+      id="property-modal"
+      show
+      on_cancel={JS.patch(~p"/properties")}
+    >
+      <.live_component
+        module={MvWeb.PropertyLive.FormComponent}
+        id={(@property && @property.id) || :new}
+        title={@page_title}
+        action={@live_action}
+        property={@property}
+        patch={~p"/properties"}
+      />
+    </.modal>
+    """
+  end
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, stream(socket, :properties, Ash.read!(Mv.Membership.Property))}
+  end
+
+  @impl true
+  def handle_params(params, _url, socket) do
+    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
+  end
+
+  defp apply_action(socket, :edit, %{"id" => id}) do
+    socket
+    |> assign(:page_title, "Edit Property")
+    |> assign(:property, Ash.get!(Mv.Membership.Property, id))
+  end
+
+  defp apply_action(socket, :new, _params) do
+    socket
+    |> assign(:page_title, "New Property")
+    |> assign(:property, nil)
+  end
+
+  defp apply_action(socket, :index, _params) do
+    socket
+    |> assign(:page_title, "Listing Properties")
+    |> assign(:property, nil)
+  end
+
+  @impl true
+  def handle_info({MvWeb.PropertyLive.FormComponent, {:saved, property}}, socket) do
+    {:noreply, stream_insert(socket, :properties, property)}
+  end
+
+  @impl true
+  def handle_event("delete", %{"id" => id}, socket) do
+    property = Ash.get!(Mv.Membership.Property, id)
+    Ash.destroy!(property)
+
+    {:noreply, stream_delete(socket, :properties, property)}
+  end
+end

lib/mv_web/property_live/show.ex

@@ -0,0 +1,57 @@
+defmodule MvWeb.PropertyLive.Show do
+  use MvWeb, :live_view
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <.header>
+      Property {@property.id}
+      <:subtitle>This is a property record from your database.</:subtitle>
+
+      <:actions>
+        <.link patch={~p"/properties/#{@property}/show/edit"} phx-click={JS.push_focus()}>
+          <.button>Edit property</.button>
+        </.link>
+      </:actions>
+    </.header>
+
+    <.list>
+      <:item title="Id">{@property.id}</:item>
+    </.list>
+
+    <.back navigate={~p"/properties"}>Back to properties</.back>
+
+    <.modal
+      :if={@live_action == :edit}
+      id="property-modal"
+      show
+      on_cancel={JS.patch(~p"/properties/#{@property}")}
+    >
+      <.live_component
+        module={MvWeb.PropertyLive.FormComponent}
+        id={@property.id}
+        title={@page_title}
+        action={@live_action}
+        property={@property}
+        patch={~p"/properties/#{@property}"}
+      />
+    </.modal>
+    """
+  end
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  end
+
+  @impl true
+  def handle_params(%{"id" => id}, _, socket) do
+    {:noreply,
+     socket
+     |> assign(:page_title, page_title(socket.assigns.live_action))
+     |> assign(:property, Ash.get!(Mv.Membership.Property, id))}
+  end
+
+  defp page_title(:show), do: "Show Property"
+  defp page_title(:edit), do: "Edit Property"
+end

lib/mv_web/property_type_live/form_component.ex

@@ -0,0 +1,81 @@
+defmodule MvWeb.PropertyTypeLive.FormComponent do
+  use MvWeb, :live_component
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <.header>
+        {@title}
+        <:subtitle>Use this form to manage property_type records in your database.</:subtitle>
+      </.header>
+
+      <.simple_form
+        for={@form}
+        id="property_type-form"
+        phx-target={@myself}
+        phx-change="validate"
+        phx-submit="save"
+      >
+        <.input field={@form[:name]} type="text" label="Name" /><.input
+          field={@form[:type]}
+          type="text"
+          label="Type"
+        /><.input field={@form[:description]} type="text" label="Description" /><.input
+          field={@form[:immutable]}
+          type="checkbox"
+          label="Immutable"
+        /><.input field={@form[:required]} type="checkbox" label="Required" />
+
+        <:actions>
+          <.button phx-disable-with="Saving...">Save Property type</.button>
+        </:actions>
+      </.simple_form>
+    </div>
+    """
+  end
+
+  @impl true
+  def update(assigns, socket) do
+    {:ok,
+     socket
+     |> assign(assigns)
+     |> assign_form()}
+  end
+
+  @impl true
+  def handle_event("validate", %{"property_type" => property_type_params}, socket) do
+    {:noreply,
+     assign(socket, form: AshPhoenix.Form.validate(socket.assigns.form, property_type_params))}
+  end
+
+  def handle_event("save", %{"property_type" => property_type_params}, socket) do
+    case AshPhoenix.Form.submit(socket.assigns.form, params: property_type_params) do
+      {:ok, property_type} ->
+        notify_parent({:saved, property_type})
+
+        socket =
+          socket
+          |> put_flash(:info, "Property type #{socket.assigns.form.source.type}d successfully")
+          |> push_patch(to: socket.assigns.patch)
+
+        {:noreply, socket}
+
+      {:error, form} ->
+        {:noreply, assign(socket, form: form)}
+    end
+  end
+
+  defp notify_parent(msg), do: send(self(), {__MODULE__, msg})
+
+  defp assign_form(%{assigns: %{property_type: property_type}} = socket) do
+    form =
+      if property_type do
+        AshPhoenix.Form.for_update(property_type, :update, as: "property_type")
+      else
+        AshPhoenix.Form.for_create(Mv.Membership.PropertyType, :create, as: "property_type")
+      end
+
+    assign(socket, form: to_form(form))
+  end
+end

lib/mv_web/property_type_live/index.ex

@@ -0,0 +1,103 @@
+defmodule MvWeb.PropertyTypeLive.Index do
+  use MvWeb, :live_view
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <.header>
+      Listing Property types
+      <:actions>
+        <.link patch={~p"/property_types/new"}>
+          <.button>New Property type</.button>
+        </.link>
+      </:actions>
+    </.header>
+
+    <.table
+      id="property_types"
+      rows={@streams.property_types}
+      row_click={fn {_id, property_type} -> JS.navigate(~p"/property_types/#{property_type}") end}
+    >
+      <:col :let={{_id, property_type}} label="Id">{property_type.id}</:col>
+
+      <:col :let={{_id, property_type}} label="Name">{property_type.name}</:col>
+
+      <:col :let={{_id, property_type}} label="Description">{property_type.description}</:col>
+
+      <:action :let={{_id, property_type}}>
+        <div class="sr-only">
+          <.link navigate={~p"/property_types/#{property_type}"}>Show</.link>
+        </div>
+
+        <.link patch={~p"/property_types/#{property_type}/edit"}>Edit</.link>
+      </:action>
+
+      <:action :let={{id, property_type}}>
+        <.link
+          phx-click={JS.push("delete", value: %{id: property_type.id}) |> hide("##{id}")}
+          data-confirm="Are you sure?"
+        >
+          Delete
+        </.link>
+      </:action>
+    </.table>
+
+    <.modal
+      :if={@live_action in [:new, :edit]}
+      id="property_type-modal"
+      show
+      on_cancel={JS.patch(~p"/property_types")}
+    >
+      <.live_component
+        module={MvWeb.PropertyTypeLive.FormComponent}
+        id={(@property_type && @property_type.id) || :new}
+        title={@page_title}
+        action={@live_action}
+        property_type={@property_type}
+        patch={~p"/property_types"}
+      />
+    </.modal>
+    """
+  end
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, stream(socket, :property_types, Ash.read!(Mv.Membership.PropertyType))}
+  end
+
+  @impl true
+  def handle_params(params, _url, socket) do
+    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
+  end
+
+  defp apply_action(socket, :edit, %{"id" => id}) do
+    socket
+    |> assign(:page_title, "Edit Property type")
+    |> assign(:property_type, Ash.get!(Mv.Membership.PropertyType, id))
+  end
+
+  defp apply_action(socket, :new, _params) do
+    socket
+    |> assign(:page_title, "New Property type")
+    |> assign(:property_type, nil)
+  end
+
+  defp apply_action(socket, :index, _params) do
+    socket
+    |> assign(:page_title, "Listing Property types")
+    |> assign(:property_type, nil)
+  end
+
+  @impl true
+  def handle_info({MvWeb.PropertyTypeLive.FormComponent, {:saved, property_type}}, socket) do
+    {:noreply, stream_insert(socket, :property_types, property_type)}
+  end
+
+  @impl true
+  def handle_event("delete", %{"id" => id}, socket) do
+    property_type = Ash.get!(Mv.Membership.PropertyType, id)
+    Ash.destroy!(property_type)
+
+    {:noreply, stream_delete(socket, :property_types, property_type)}
+  end
+end

lib/mv_web/property_type_live/show.ex

@@ -0,0 +1,61 @@
+defmodule MvWeb.PropertyTypeLive.Show do
+  use MvWeb, :live_view
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <.header>
+      Property type {@property_type.id}
+      <:subtitle>This is a property_type record from your database.</:subtitle>
+
+      <:actions>
+        <.link patch={~p"/property_types/#{@property_type}/show/edit"} phx-click={JS.push_focus()}>
+          <.button>Edit property_type</.button>
+        </.link>
+      </:actions>
+    </.header>
+
+    <.list>
+      <:item title="Id">{@property_type.id}</:item>
+
+      <:item title="Name">{@property_type.name}</:item>
+
+      <:item title="Description">{@property_type.description}</:item>
+    </.list>
+
+    <.back navigate={~p"/property_types"}>Back to property_types</.back>
+
+    <.modal
+      :if={@live_action == :edit}
+      id="property_type-modal"
+      show
+      on_cancel={JS.patch(~p"/property_types/#{@property_type}")}
+    >
+      <.live_component
+        module={MvWeb.PropertyTypeLive.FormComponent}
+        id={@property_type.id}
+        title={@page_title}
+        action={@live_action}
+        property_type={@property_type}
+        patch={~p"/property_types/#{@property_type}"}
+      />
+    </.modal>
+    """
+  end
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  end
+
+  @impl true
+  def handle_params(%{"id" => id}, _, socket) do
+    {:noreply,
+     socket
+     |> assign(:page_title, page_title(socket.assigns.live_action))
+     |> assign(:property_type, Ash.get!(Mv.Membership.PropertyType, id))}
+  end
+
+  defp page_title(:show), do: "Show Property type"
+  defp page_title(:edit), do: "Edit Property type"
+end

lib/mv_web/router.ex

@@ -18,6 +18,23 @@ defmodule MvWeb.Router do
     pipe_through :browser
 
     get "/", PageController, :home
+    live "/members", MemberLive.Index, :index
+    live "/members/new", MemberLive.Index, :new
+    live "/members/:id/edit", MemberLive.Index, :edit
+    live "/members/:id", MemberLive.Show, :show
+    live "/members/:id/show/edit", MemberLive.Show, :edit
+
+    live "/property_types", PropertyTypeLive.Index, :index
+    live "/property_types/new", PropertyTypeLive.Index, :new
+    live "/property_types/:id/edit", PropertyTypeLive.Index, :edit
+    live "/property_types/:id", PropertyTypeLive.Show, :show
+    live "/property_types/:id/show/edit", PropertyTypeLive.Show, :edit
+
+    live "/properties", PropertyLive.Index, :index
+    live "/properties/new", PropertyLive.Index, :new
+    live "/properties/:id/edit", PropertyLive.Index, :edit
+    live "/properties/:id", PropertyLive.Show, :show
+    live "/properties/:id/show/edit", PropertyLive.Show, :edit
   end
 
   # Other scopes may use custom stacks.