#2 mix phx.gen.live - create LiveView files

README.md

@@ -227,9 +227,54 @@ a registration form
 for our fictitious
 **_Awesome_ Conference**.
 
+# 4. Create `attendee` schema
+
+The goal is to allow `people` attending **_Awesome_ Conf**
+to submit the following data:
+
++ `first_name` - how we greet you. Will appear on your conference pass.
++ `last_name` - your family name. Will appear on you conference pass.
++ `email` - to confirm attendance
++ `phone_number` - to verify your access when attending the secret event.
++ `address` - so we can send the welcome pack
++ `address_line_2` - if your address has multiple lines.
++ `postcode` - for the address.
++ `gender` - for venue capacity planning.
++ `dietary_preference` - for meals and snacks provided by the conference.
++ `website` - share your awesomeness and have it as a QR code on your conference pass.
++ `description` - brief description of your awesome project.
++ `feedback` - Feedback or suggestions
+
+
+## 4.1 `gen.schema`
+
+Using the 
+[`mix phx.gen.live`](https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Schema.html)
+command, 
+run: 
+```sh
+mix phx.gen.live Accounts Attendee attendees first_name:string last_name:string email:string --no-context
+```
+
+You should expect to see output similar to the following:
 
+```sh
+* creating lib/fields_demo_web/live/attendee_live/show.ex
+* creating lib/fields_demo_web/live/attendee_live/index.ex
+* creating lib/fields_demo_web/live/attendee_live/form_component.ex
+* creating lib/fields_demo_web/live/attendee_live/index.html.heex
+* creating lib/fields_demo_web/live/attendee_live/show.html.heex
+* creating test/fields_demo_web/live/attendee_live_test.exs
+
+Add the live routes to your browser scope in lib/fields_demo_web/router.ex:
 
+ live "/attendees", AttendeeLive.Index, :index
+ live "/attendees/new", AttendeeLive.Index, :new
+ live "/attendees/:id/edit", AttendeeLive.Index, :edit
 
+ live "/attendees/:id", AttendeeLive.Show, :show
+ live "/attendees/:id/show/edit", AttendeeLive.Show, :edit
+```
 
 
 # FieldsDemo

lib/fields_demo_web/live/attendee_live/form_component.ex

@@ -0,0 +1,92 @@
+defmodule FieldsDemoWeb.AttendeeLive.FormComponent do
+ use FieldsDemoWeb, :live_component
+
+ alias FieldsDemo.Accounts
+
+ @impl true
+ def render(assigns) do
+ ~H"""
+ <div>
+ <.header>
+ <%= @title %>
+ <:subtitle>Use this form to manage attendee records in your database.</:subtitle>
+ </.header>
+
+ <.simple_form
+ for={@form}
+ id="attendee-form"
+ phx-target={@myself}
+ phx-change="validate"
+ phx-submit="save"
+ >
+ <.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" />
+ <:actions>
+ <.button phx-disable-with="Saving...">Save Attendee</.button>
+ </:actions>
+ </.simple_form>
+ </div>
+ """
+ end
+
+ @impl true
+ def update(%{attendee: attendee} = assigns, socket) do
+ changeset = Accounts.change_attendee(attendee)
+
+ {:ok,
+ socket
+ |> assign(assigns)
+ |> assign_form(changeset)}
+ end
+
+ @impl true
+ def handle_event("validate", %{"attendee" => attendee_params}, socket) do
+ changeset =
+ socket.assigns.attendee
+ |> Accounts.change_attendee(attendee_params)
+ |> Map.put(:action, :validate)
+
+ {:noreply, assign_form(socket, changeset)}
+ end
+
+ def handle_event("save", %{"attendee" => attendee_params}, socket) do
+ save_attendee(socket, socket.assigns.action, attendee_params)
+ end
+
+ defp save_attendee(socket, :edit, attendee_params) do
+ case Accounts.update_attendee(socket.assigns.attendee, attendee_params) do
+ {:ok, attendee} ->
+ notify_parent({:saved, attendee})
+
+ {:noreply,
+ socket
+ |> put_flash(:info, "Attendee updated successfully")
+ |> push_patch(to: socket.assigns.patch)}
+
+ {:error, %Ecto.Changeset{} = changeset} ->
+ {:noreply, assign_form(socket, changeset)}
+ end
+ end
+
+ defp save_attendee(socket, :new, attendee_params) do
+ case Accounts.create_attendee(attendee_params) do
+ {:ok, attendee} ->
+ notify_parent({:saved, attendee})
+
+ {:noreply,
+ socket
+ |> put_flash(:info, "Attendee created successfully")
+ |> push_patch(to: socket.assigns.patch)}
+
+ {:error, %Ecto.Changeset{} = changeset} ->
+ {:noreply, assign_form(socket, changeset)}
+ end
+ end
+
+ defp assign_form(socket, %Ecto.Changeset{} = changeset) do
+ assign(socket, :form, to_form(changeset))
+ end
+
+ defp notify_parent(msg), do: send(self(), {__MODULE__, msg})
+end

lib/fields_demo_web/live/attendee_live/index.ex

@@ -0,0 +1,47 @@
+defmodule FieldsDemoWeb.AttendeeLive.Index do
+ use FieldsDemoWeb, :live_view
+
+ alias FieldsDemo.Accounts
+ alias FieldsDemo.Accounts.Attendee
+
+ @impl true
+ def mount(_params, _session, socket) do
+ {:ok, stream(socket, :attendees, Accounts.list_attendees())}
+ 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 Attendee")
+ |> assign(:attendee, Accounts.get_attendee!(id))
+ end
+
+ defp apply_action(socket, :new, _params) do
+ socket
+ |> assign(:page_title, "New Attendee")
+ |> assign(:attendee, %Attendee{})
+ end
+
+ defp apply_action(socket, :index, _params) do
+ socket
+ |> assign(:page_title, "Listing Attendees")
+ |> assign(:attendee, nil)
+ end
+
+ @impl true
+ def handle_info({FieldsDemoWeb.AttendeeLive.FormComponent, {:saved, attendee}}, socket) do
+ {:noreply, stream_insert(socket, :attendees, attendee)}
+ end
+
+ @impl true
+ def handle_event("delete", %{"id" => id}, socket) do
+ attendee = Accounts.get_attendee!(id)
+ {:ok, _} = Accounts.delete_attendee(attendee)
+
+ {:noreply, stream_delete(socket, :attendees, attendee)}
+ end
+end

lib/fields_demo_web/live/attendee_live/index.html.heex

@@ -0,0 +1,43 @@
+<.header>
+ Listing Attendees
+ <:actions>
+ <.link patch={~p"/attendees/new"}>
+ <.button>New Attendee</.button>
+ </.link>
+ </:actions>
+</.header>
+
+<.table
+ id="attendees"
+ rows={@streams.attendees}
+ row_click={fn {_id, attendee} -> JS.navigate(~p"/attendees/#{attendee}") end}
+>
+ <:col :let={{_id, attendee}} label="First name"><%= attendee.first_name %></:col>
+ <:col :let={{_id, attendee}} label="Last name"><%= attendee.last_name %></:col>
+ <:col :let={{_id, attendee}} label="Email"><%= attendee.email %></:col>
+ <:action :let={{_id, attendee}}>
+ <div class="sr-only">
+ <.link navigate={~p"/attendees/#{attendee}"}>Show</.link>
+ </div>
+ <.link patch={~p"/attendees/#{attendee}/edit"}>Edit</.link>
+ </:action>
+ <:action :let={{id, attendee}}>
+ <.link
+ phx-click={JS.push("delete", value: %{id: attendee.id}) |> hide("##{id}")}
+ data-confirm="Are you sure?"
+ >
+ Delete
+ </.link>
+ </:action>
+</.table>
+
+<.modal :if={@live_action in [:new, :edit]} id="attendee-modal" show on_cancel={JS.patch(~p"/attendees")}>
+ <.live_component
+ module={FieldsDemoWeb.AttendeeLive.FormComponent}
+ id={@attendee.id || :new}
+ title={@page_title}
+ action={@live_action}
+ attendee={@attendee}
+ patch={~p"/attendees"}
+ />
+</.modal>

lib/fields_demo_web/live/attendee_live/show.ex

@@ -0,0 +1,21 @@
+defmodule FieldsDemoWeb.AttendeeLive.Show do
+ use FieldsDemoWeb, :live_view
+
+ alias FieldsDemo.Accounts
+
+ @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(:attendee, Accounts.get_attendee!(id))}
+ end
+
+ defp page_title(:show), do: "Show Attendee"
+ defp page_title(:edit), do: "Edit Attendee"
+end

lib/fields_demo_web/live/attendee_live/show.html.heex

@@ -0,0 +1,28 @@
+<.header>
+ Attendee <%= @attendee.id %>
+ <:subtitle>This is a attendee record from your database.</:subtitle>
+ <:actions>
+ <.link patch={~p"/attendees/#{@attendee}/show/edit"} phx-click={JS.push_focus()}>
+ <.button>Edit attendee</.button>
+ </.link>
+ </:actions>
+</.header>
+
+<.list>
+ <:item title="First name"><%= @attendee.first_name %></:item>
+ <:item title="Last name"><%= @attendee.last_name %></:item>
+ <:item title="Email"><%= @attendee.email %></:item>
+</.list>
+
+<.back navigate={~p"/attendees"}>Back to attendees</.back>
+
+<.modal :if={@live_action == :edit} id="attendee-modal" show on_cancel={JS.patch(~p"/attendees/#{@attendee}")}>
+ <.live_component
+ module={FieldsDemoWeb.AttendeeLive.FormComponent}
+ id={@attendee.id}
+ title={@page_title}
+ action={@live_action}
+ attendee={@attendee}
+ patch={~p"/attendees/#{@attendee}"}
+ />
+</.modal>