defmodule LivebookWeb.UserComponent do
use LivebookWeb, :live_component
import LivebookWeb.UserHelpers
alias Livebook.Users.User
@impl true
def update(assigns, socket) do
socket = assign(socket, assigns)
user = socket.assigns.user
{:ok, assign(socket, data: user_to_data(user), valid: true, preview_user: user)}
end
defp user_to_data(user) do
%{"name" => user.name || "", "hex_color" => user.hex_color}
end
@impl true
def render(assigns) do
~L"""
User profile
<%= render_user_avatar(@preview_user, class: "h-20 w-20", text_class: "text-3xl") %>
<%= f = form_for :data, "#",
id: "user_form",
phx_target: @myself,
phx_submit: "save",
phx_change: "validate",
phx_hook: "UserForm" %>
Display name
<%= text_input f, :name, value: @data["name"], class: "input", spellcheck: "false" %>
Cursor color
<%= text_input f, :hex_color, value: @data["hex_color"], class: "input", spellcheck: "false", maxlength: 7 %>
<%= tag :button, class: "icon-button absolute right-2 top-1",
type: "button",
phx_click: "randomize_color",
phx_target: @myself %>
<%= remix_icon("refresh-line", class: "text-xl") %>
<%= tag :button, class: "button button-blue flex space-x-1 justify-center items-center",
type: "submit",
disabled: not @valid %>
<%= remix_icon("save-line") %>
Save
"""
end
@impl true
def handle_event("randomize_color", %{}, socket) do
data = %{
socket.assigns.data
| "hex_color" => User.random_hex_color(except: [socket.assigns.preview_user.hex_color])
}
handle_event("validate", %{"data" => data}, socket)
end
def handle_event("validate", %{"data" => data}, socket) do
{valid, user} =
case User.change(socket.assigns.user, data) do
{:ok, user} -> {true, user}
{:error, _errors, user} -> {false, user}
end
{:noreply, assign(socket, data: data, valid: valid, preview_user: user)}
end
def handle_event("save", %{"data" => data}, socket) do
{:ok, user} = User.change(socket.assigns.user, data)
Livebook.Users.broadcast_change(user)
{:noreply, push_patch(socket, to: socket.assigns.return_to)}
end
end