update components
This commit is contained in:
oliviasculley
parent
aa314e5ca1
commit
e35bdf101b
@ -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
|
|
||||||
106
lib/lokal_web/components/topbar.ex
Normal file
106
lib/lokal_web/components/topbar.ex
Normal 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
|
||||||
@ -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
|
||||||
|
|||||||
@ -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("×"), 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
|
|
||||||
Loading…
Reference in New Issue
Block a user