File size: 2,113 Bytes
24d78ad 3f219b5 24d78ad |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
defmodule Storybook.Examples.CoreComponents do
use PhoenixStorybook.Story, :example
import MedicodeWeb.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
|