update components

This commit is contained in:
shibao 2022-02-25 21:55:27 -05:00
parent 8cd75c7358
commit 7430e31065
4 changed files with 182 additions and 155 deletions

View File

@ -1,104 +0,0 @@
defmodule LokalWeb.Components.Topbar do
@moduledoc """
Phoenix.Component for rendering an interactive topbar
Assign
"""
use LokalWeb, :component
alias LokalWeb.PageLive
def topbar(assigns) do
assigns =
%{results: [], title_content: nil, current_user: nil, flash: nil}
|> Map.merge(assigns)
~H"""
<header class="mb-8 px-8 py-4 w-full bg-primary-400">
<nav role="navigation">
<div class="flex flex-row justify-between items-center space-x-4">
<div class="flex flex-row justify-start items-center space-x-2">
<%= link to: Routes.live_path(LokalWeb.Endpoint, PageLive) do %>
<h1 class="leading-5 text-xl text-white hover:underline">
Lokal
</h1>
<% end %>
<%= if @title_content do %>
<span>|</span>
<%= render_slot(@title_content) %>
<% end %>
</div>
<ul class="flex flex-row flex-wrap justify-center items-center
text-lg space-x-4 text-lg text-white">
<form phx-change="suggest" phx-submit="search">
<input
type="text"
name="q"
class="input input-primary"
placeholder="Search"
list="results"
autocomplete="off"
/>
<datalist id="results">
<%= for {app, _vsn} <- @results do %>
<option value={app}>
"> <%= app %>
</option>
<% end %>
</datalist>
</form>
<%= if @current_user do %>
<li>
<%= @current_user.email %>
</li>
<li>
<%= link("Settings",
class: "hover:underline",
to: Routes.user_settings_path(LokalWeb.Endpoint, :edit)
) %>
</li>
<li>
<%= link("Log out",
class: "hover:underline",
to: Routes.user_session_path(LokalWeb.Endpoint, :delete),
method: :delete
) %>
</li>
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
<li>
<%= link("LiveDashboard",
class: "hover:underline",
to: Routes.live_dashboard_path(LokalWeb.Endpoint, :home)
) %>
</li>
<% end %>
<% else %>
<li>
<%= link("Register",
class: "hover:underline",
to: Routes.user_registration_path(LokalWeb.Endpoint, :new)
) %>
</li>
<li>
<%= link("Log in",
class: "hover:underline",
to: Routes.user_session_path(LokalWeb.Endpoint, :new)
) %>
</li>
<% end %>
</ul>
</div>
</nav>
<%= if @flash && @flash |> Map.has_key?(:info) do %>
<p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
<%= live_flash(@flash, :info) %>
</p>
<% end %>
<%= if @flash && @flash |> Map.has_key?(:error) do %>
<p class="alert alert-danger" role="alert" phx-click="lv:clear-flash" phx-value-key="error">
<%= live_flash(@flash, :error) %>
</p>
<% end %>
</header>
"""
end
end

View File

@ -0,0 +1,106 @@
defmodule LokalWeb.Components.Topbar do
@moduledoc """
Component that renders a topbar with user functions/links
"""
use LokalWeb, :component
alias Lokal.Accounts
alias LokalWeb.{Endpoint, PageLive}
def topbar(assigns) do
assigns =
%{results: [], title_content: nil, flash: nil, current_user: nil} |> Map.merge(assigns)
~H"""
<nav role="navigation" class="mb-8 px-8 py-4 w-full bg-primary-400">
<div class="flex flex-col sm:flex-row justify-between items-center">
<div class="mb-4 sm:mb-0 sm:mr-8 flex flex-row justify-start items-center space-x-2">
<%= live_redirect("Lokal",
to: Routes.live_path(Endpoint, PageLive),
class: "mx-2 my-1 leading-5 text-xl text-white hover:underline"
) %>
<%= if @title_content do %>
<span class="mx-2 my-1">
|
</span>
<%= @title_content %>
<% end %>
</div>
<hr class="mb-2 sm:hidden hr-light" />
<ul
class="flex flex-row flex-wrap justify-center items-center
text-lg text-white text-ellipsis"
>
<%= if @current_user do %>
<form phx-change="suggest" phx-submit="search">
<input
type="text"
name="q"
class="input input-primary"
placeholder="Search"
list="results"
autocomplete="off"
/>
<datalist id="results">
<%= for {app, _vsn} <- @results do %>
<option value={app}>
"> <%= app %>
</option>
<% end %>
</datalist>
</form>
<%= if @current_user.role == :admin do %>
<li class="mx-2 my-1">
<%= live_redirect(gettext("Invites"),
to: Routes.invite_index_path(Endpoint, :index),
class: "text-primary-600 text-white hover:underline"
) %>
</li>
<% end %>
<li class="mx-2 my-1">
<%= live_redirect(@current_user.email,
to: Routes.user_settings_path(Endpoint, :edit),
class: "text-primary-600 text-white hover:underline truncate"
) %>
</li>
<li class="mx-2 my-1">
<%= link to: Routes.user_session_path(Endpoint, :delete),
method: :delete,
data: [confirm: dgettext("prompts", "Are you sure you want to log out?")] do %>
<i class="fas fa-sign-out-alt"></i>
<% end %>
</li>
<%= if @current_user.role == :admin and function_exported?(Routes, :live_dashboard_path, 2) do %>
<li class="mx-2 my-1">
<%= live_redirect to: Routes.live_dashboard_path(Endpoint, :home),
class: "text-primary-600 text-white hover:underline" do %>
<i class="fas fa-tachometer-alt"></i>
<% end %>
</li>
<% end %>
<% else %>
<%= if Accounts.allow_registration?() do %>
<li class="mx-2 my-1">
<%= live_redirect(dgettext("actions", "Register"),
to: Routes.user_registration_path(Endpoint, :new),
class: "text-primary-600 text-white hover:underline truncate"
) %>
</li>
<% end %>
<li class="mx-2 my-1">
<%= live_redirect(dgettext("actions", "Log in"),
to: Routes.user_session_path(Endpoint, :new),
class: "text-primary-600 text-white hover:underline truncate"
) %>
</li>
<% end %>
</ul>
</div>
</nav>
"""
end
end

View File

@ -4,28 +4,9 @@ defmodule LokalWeb.LiveHelpers do
""" """
import Phoenix.LiveView.Helpers import Phoenix.LiveView.Helpers
import Phoenix.LiveView, only: [assign_new: 3] import Phoenix.LiveView
alias Lokal.Accounts alias Lokal.Accounts
alias Phoenix.LiveView.JS
@doc """
Renders a component inside the `LokalWeb.ModalComponent` component.
The rendered modal receives a `:return_to` option to properly update
the URL when the modal is closed.
## Examples
<%= live_modal LokalWeb.TagLive.FormComponent,
id: @tag.id || :new,
action: @live_action,
tag: @tag,
return_to: Routes.tag_index_path(@socket, :index) %>
"""
def live_modal(component, opts) do
path = Keyword.fetch!(opts, :return_to)
modal_opts = [id: :modal, return_to: path, component: component, opts: opts]
live_component(LokalWeb.ModalComponent, modal_opts)
end
def assign_defaults(socket, %{"user_token" => user_token} = _session) do def assign_defaults(socket, %{"user_token" => user_token} = _session) do
socket socket
@ -37,4 +18,78 @@ defmodule LokalWeb.LiveHelpers do
def assign_defaults(socket, _session) do def assign_defaults(socket, _session) do
socket socket
end end
@doc """
Renders a live component inside a modal.
The rendered modal receives a `:return_to` option to properly update
the URL when the modal is closed.
## Examples
<.modal return_to={Routes.<%= schema.singular %>_index_path(Endpoint, :index)}>
<.live_component
module={<%= inspect context.web_module %>.<%= inspect Module.concat(schema.web_namespace, schema.alias) %>Live.FormComponent}
id={@<%= schema.singular %>.id || :new}
title={@page_title}
action={@live_action}
return_to={Routes.<%= schema.singular %>_index_path(Endpoint, :index)}
<%= schema.singular %>: @<%= schema.singular %>
/>
</.modal>
"""
def modal(assigns) do
~H"""
<%= live_patch to: @return_to,
id: "modal-bg",
class:
"fade-in fixed z-10 left-0 top-0
w-full h-full overflow-hidden
p-8 flex flex-col justify-center items-center cursor-auto",
style: "background-color: rgba(0,0,0,0.4);",
phx_remove: hide_modal()
do %>
<span class="hidden"></span>
<% end %>
<div
id="modal"
class="fixed z-10 left-0 top-0 pointer-events-none
w-full h-full overflow-hidden
p-4 sm:p-8 flex flex-col justify-center items-center"
>
<div
id="modal-content"
class="fade-in-scale w-full max-w-3xl relative
pointer-events-auto overflow-hidden
px-8 py-4 sm:py-8 flex flex-col justify-center items-center
flex flex-col justify-start items-center
bg-white border-2 rounded-lg"
>
<%= live_patch to: @return_to,
id: "close",
class:
"absolute top-8 right-10
text-gray-500 hover:text-gray-800
transition-all duration-500 ease-in-out",
phx_remove: hide_modal() do %>
<i class="fa-fw fa-lg fas fa-times"></i>
<% end %>
<div
class="overflow-x-hidden overflow-y-auto w-full p-8 flex flex-col space-y-4 justify-start items-center"
>
<%= render_slot(@inner_block) %>
</div>
</div>
</div>
"""
end
def hide_modal(js \\ %JS{}) do
js
|> JS.hide(to: "#modal", transition: "fade-out")
|> JS.hide(to: "#modal-bg", transition: "fade-out")
|> JS.hide(to: "#modal-content", transition: "fade-out-scale")
end
end end

View File

@ -1,30 +0,0 @@
defmodule LokalWeb.ModalComponent do
@moduledoc """
Component that provides a floating modal
"""
use LokalWeb, :live_component
@impl true
def render(assigns) do
~L"""
<div id="<%= @id %>" class="phx-modal"
phx-capture-click="close"
phx-window-keydown="close"
phx-key="escape"
phx-target="#<%= @id %>"
phx-page-loading>
<div class="phx-modal-content">
<%= live_patch raw("&times;"), to: @return_to, class: "phx-modal-close" %>
<%= live_component @component, @opts %>
</div>
</div>
"""
end
@impl true
def handle_event("close", _, socket) do
{:noreply, push_patch(socket, to: socket.assigns.return_to)}
end
end