medicode / storybook /examples /core_components.story.exs
noahsettersten's picture
chore: Run `mix phx.gen.storybook`
24d78ad
raw
history blame
2.13 kB
defmodule Storybook.Examples.CoreComponents do
use PhoenixStorybook.Story, :example
import MedicalTranscriptionWeb.CoreComponents
alias Phoenix.LiveView.JS
def doc do
"An example of what you can achieve with Phoenix core components."
end
defstruct [:id, :first_name, :last_name]
@impl true
def mount(_params, _session, socket) do
{:ok,
assign(socket,
current_id: 2,
users: [
%__MODULE__{id: 1, first_name: "Jose", last_name: "Valim"},
%__MODULE__{
id: 2,
first_name: "Chris",
last_name: "McCord"
}
]
)}
end
@impl true
def render(assigns) do
~H"""
<.header>
List of users
<:subtitle>Feel free to add any missing user!</:subtitle>
<:actions>
<.button phx-click={show_modal("new-user-modal")}>Create user</.button>
</:actions>
</.header>
<.table id="user-table" rows={@users}>
<:col :let={user} label="Id">
<%= user.id %>
</:col>
<:col :let={user} label="First name">
<%= user.first_name %>
</:col>
<:col :let={user} label="Last name">
<%= user.last_name %>
</:col>
</.table>
<.modal id="new-user-modal">
<.header>
Create new user
<:subtitle>This won't be persisted into DB, memory only</:subtitle>
</.header>
<.simple_form
:let={f}
for={%{}}
as={:user}
phx-submit={JS.push("save_user") |> hide_modal("new-user-modal")}
>
<.input field={f[:first_name]} label="First name" />
<.input field={f[:last_name]} label="Last name" />
<:actions>
<.button>Save user</.button>
</:actions>
</.simple_form>
</.modal>
"""
end
@impl true
def handle_event("save_user", %{"user" => params}, socket) do
user = %__MODULE__{
first_name: params["first_name"],
last_name: params["last_name"],
id: socket.assigns.current_id + 1
}
{:noreply,
socket
|> update(:users, &(&1 ++ [user]))
|> update(:current_id, &(&1 + 1))}
end
end