Packages
livebook
0.7.0
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.6
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.3
0.17.2
0.17.1
0.17.0
0.16.4
0.16.3
0.16.2
0.16.1
0.16.0
0.15.5
0.15.4
0.15.3
0.15.2
0.15.1
0.15.0
0.14.7
0.14.6
0.14.5
0.14.4
0.14.3
0.14.2
0.14.1
0.14.0
0.14.0-rc.1
0.14.0-rc.0
0.13.3
0.13.2
0.13.1
0.13.0
0.12.1
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.2
0.8.1
0.8.0
0.7.2
0.7.1
0.7.0
0.6.3
0.6.2
0.6.1
0.6.0
0.5.2
0.5.1
0.5.0
0.4.1
0.4.0
0.3.2
0.3.1
0.3.0
0.2.3
0.2.2
0.2.1
0.2.0
0.1.2
0.1.1
0.1.0
Automate code & data workflows with interactive notebooks
Current section
Files
Jump to
Current section
Files
lib/livebook_web/live/user_component.ex
defmodule LivebookWeb.UserComponent do
use LivebookWeb, :live_component
import LivebookWeb.UserHelpers
alias Livebook.EctoTypes.HexColor
alias Livebook.Users
@impl true
def update(assigns, socket) do
socket = assign(socket, assigns)
user = socket.assigns.user
changeset = Users.change_user(user)
{:ok, assign(socket, changeset: changeset, valid?: changeset.valid?, user: user)}
end
@impl true
def render(assigns) do
~H"""
<div class="p-6 flex flex-col space-y-5">
<h3 class="text-2xl font-semibold text-gray-800">
User profile
</h3>
<div class="flex justify-center">
<.user_avatar user={@user} class="h-20 w-20" text_class="text-3xl" />
</div>
<.form
:let={f}
for={@changeset}
phx-submit={@on_save |> JS.push("save")}
phx-change="validate"
phx-target={@myself}
id="user_form"
phx-hook="UserForm"
>
<div class="flex flex-col space-y-5">
<.input_wrapper form={f} field={:name}>
<div class="input-label">Display name</div>
<%= text_input(f, :name, class: "input", spellcheck: "false") %>
</.input_wrapper>
<.input_wrapper form={f} field={:hex_color}>
<div class="input-label">Cursor color</div>
<.hex_color_input
form={f}
field={:hex_color}
randomize={JS.push("randomize_color", target: @myself)}
/>
</.input_wrapper>
<button
class="button-base button-blue flex space-x-1 justify-center items-center"
type="submit"
disabled={not @valid?}
>
<.remix_icon icon="save-line" />
<span>Save</span>
</button>
</div>
</.form>
</div>
"""
end
@impl true
def handle_event("randomize_color", %{}, socket) do
hex_color = HexColor.random(except: [socket.assigns.user.hex_color])
handle_event("validate", %{"user" => %{"hex_color" => hex_color}}, socket)
end
def handle_event("validate", %{"user" => params}, socket) do
changeset = Users.change_user(socket.assigns.user, params)
user =
if changeset.valid? do
Ecto.Changeset.apply_action!(changeset, :update)
else
socket.assigns.user
end
{:noreply, assign(socket, changeset: changeset, valid?: changeset.valid?, user: user)}
end
def handle_event("save", %{"user" => params}, socket) do
changeset = Users.change_user(socket.assigns.user, params)
case Users.update_user(changeset) do
{:ok, user} ->
{:noreply, assign(socket, changeset: changeset, valid?: changeset.valid?, user: user)}
{:error, changeset} ->
{:noreply, assign(socket, changeset: changeset, valid?: changeset.valid?)}
end
end
end