aaron_nad/cannery
1
0
Fork 0
forked from shibao/cannery
Code Pull Requests Activity

update to liveview 0.18

Browse Source
This commit is contained in:
shibao
2023-01-26 00:28:34 -05:00
committed by oliviasculley
parent 2c2b9fefc9
commit bbaa1dfd6b
25 changed files with 349 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/lokal_web.ex
View File

@ -90,8 +90,8 @@ defmodule LokalWeb do
# Use all HTML functionality (forms, tags, etc)
use Phoenix.HTML
# Import LiveView and .heex helpers (live_render, live_patch, <.form>, etc)
import Phoenix.LiveView.Helpers
# Import LiveView and .heex helpers (live_render, link, <.form>, etc)
import Phoenix.Component
# Import basic rendering functionality (render, render_layout, etc)
import Phoenix.View

22
lib/lokal_web/components/invite_card.ex
View File

@ -7,6 +7,8 @@ defmodule LokalWeb.Components.InviteCard do
alias LokalWeb.Endpoint
def invite_card(assigns) do
assigns = assigns |> assign_new(:code_actions, fn -> [] end)
~H"""
<div class="mx-4 my-2 px-8 py-4 flex flex-col justify-center items-center space-y-4
border border-gray-400 rounded-lg shadow-lg hover:shadow-md
@ -17,8 +19,14 @@ defmodule LokalWeb.Components.InviteCard do
<%= if @invite.disabled_at |> is_nil() do %>
<h2 class="title text-md">
<%= gettext("Uses Left:") %>
<%= @invite.uses_left || "Unlimited" %>
<%= if @invite.uses_left do %>
<%= gettext(
"Uses Left: %{uses_left}",
uses_left: @invite.uses_left
) %>
<% else %>
<%= gettext("Uses Left: Unlimited") %>
<% end %>
</h2>
<% else %>
<h2 class="title text-md">
@ -30,13 +38,9 @@ defmodule LokalWeb.Components.InviteCard do
<code
id={"code-#{@invite.id}"}
class="mx-2 my-1 text-xs px-4 py-2 rounded-lg text-center break-all text-gray-100 bg-primary-800"
>
<%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %>
</code>
<%= if @code_actions do %>
<%= render_slot(@code_actions) %>
<% end %>
phx-no-format
><%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %></code>
<%= render_slot(@code_actions) %>
</div>
<%= if @inner_block do %>

68
lib/lokal_web/components/topbar.ex
View File

@ -16,10 +16,12 @@ defmodule LokalWeb.Components.Topbar do
<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, HomeLive),
class: "mx-2 my-1 leading-5 text-xl text-white hover:underline"
) %>
<.link
navigate={Routes.live_path(Endpoint, HomeLive)}
class="mx-2 my-1 leading-5 text-xl text-white hover:underline"
>
<%= gettext("Lokal") %>
</.link>
<%= if @title_content do %>
<span class="mx-2 my-1">
@ -53,47 +55,59 @@ defmodule LokalWeb.Components.Topbar do
</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-white text-white hover:underline"
) %>
<.link
navigate={Routes.invite_index_path(Endpoint, :index)}
class="text-white text-white hover:underline"
>
<%= gettext("Invites") %>
</.link>
</li>
<% end %>
<li class="mx-2 my-1">
<%= live_redirect(@current_user.email,
to: Routes.user_settings_path(Endpoint, :edit),
class: "text-white text-white hover:underline truncate"
) %>
<.link
navigate={Routes.user_settings_path(Endpoint, :edit)}
class="text-white text-white hover:underline truncate"
>
<%= @current_user.email %>
</.link>
</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 %>
<.link
href={Routes.user_session_path(Endpoint, :delete)}
method="delete"
data-confirm={dgettext("prompts", "Are you sure you want to log out?")}
>
<i class="fas fa-sign-out-alt"></i>
<% end %>
</.link>
</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-white text-white hover:underline" do %>
<.link
navigate={Routes.live_dashboard_path(Endpoint, :home)}
class="text-white text-white hover:underline"
>
<i class="fas fa-gauge"></i>
<% end %>
</.link>
</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-white text-white hover:underline truncate"
) %>
<.link
navigate={Routes.user_registration_path(Endpoint, :new)}
class="text-white text-white hover:underline truncate"
>
<%= dgettext("actions", "Register") %>
</.link>
</li>
<% end %>
<li class="mx-2 my-1">
<%= live_redirect(dgettext("actions", "Log in"),
to: Routes.user_session_path(Endpoint, :new),
class: "text-white text-white hover:underline truncate"
) %>
<.link
navigate={Routes.user_session_path(Endpoint, :new)}
class="text-white text-white hover:underline truncate"
>
<%= dgettext("actions", "Log in") %>
</.link>
</li>
<% end %>
</ul>

17
lib/lokal_web/components/user_card.ex
View File

@ -19,16 +19,23 @@ defmodule LokalWeb.Components.UserCard do
<h3 class="px-4 py-2 rounded-lg title text-lg">
<p>
<%= if @user.confirmed_at |> is_nil() do %>
Email unconfirmed
<%= if @user.confirmed_at do %>
<%= gettext(
"User was confirmed at%{confirmed_datetime}",
confirmed_datetime: ""
) %>
<.datetime datetime={@user.confirmed_at} />
<% else %>
User was confirmed at <%= @user.confirmed_at |> display_datetime() %>
<%= gettext("Email unconfirmed") %>
<% end %>
</p>
<p>
<%= gettext("User registered on") %>
<%= @user.inserted_at |> display_datetime() %>
<%= gettext(
"User registered on%{registered_datetime}",
registered_datetime: ""
) %>
<.datetime datetime={@user.inserted_at} />
</p>
</h3>

2
lib/lokal_web/live/init_assigns.ex
View File

@ -2,7 +2,7 @@ defmodule LokalWeb.InitAssigns do
@moduledoc """
Ensures common `assigns` are applied to all LiveViews attaching this hook.
"""
import Phoenix.LiveView
import Phoenix.Component
alias Lokal.Accounts
def on_mount(:default, _params, %{"locale" => locale, "user_token" => user_token}, socket) do

2
lib/lokal_web/live/invite_live/form_component.html.heex
View File

@ -3,7 +3,7 @@
<%= @title %>
</h2>
<.form
let={f}
:let={f}
for={@changeset}
id="invite-form"
class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"

103
lib/lokal_web/live/invite_live/index.html.heex
View File

@ -8,15 +8,13 @@
<%= gettext("No invites 😔") %>
</h1>
<%= live_patch(dgettext("actions", "Invite someone new!"),
to: Routes.invite_index_path(Endpoint, :new),
class: "btn btn-primary"
) %>
<.link patch={Routes.invite_index_path(Endpoint, :new)} class="btn btn-primary">
<%= dgettext("actions", "Invite someone new!") %>
</.link>
<% else %>
<%= live_patch(dgettext("actions", "Create Invite"),
to: Routes.invite_index_path(Endpoint, :new),
class: "btn btn-primary"
) %>
<.link patch={Routes.invite_index_path(Endpoint, :new)} class="btn btn-primary">
<%= dgettext("actions", "Create Invite") %>
</.link>
<% end %>
<div class="w-full flex flex-row flex-wrap justify-center items-center">
@ -33,25 +31,28 @@
</button>
</form>
</:code_actions>
<%= live_patch to: Routes.invite_index_path(Endpoint, :edit, invite),
class: "text-primary-600 link",
data: [qa: "edit-#{invite.id}"] do %>
<.link
patch={Routes.invite_index_path(Endpoint, :edit, invite)}
class="text-primary-600 link"
data-qa={"edit-#{invite.id}"}
>
<i class="fa-fw fa-lg fas fa-edit"></i>
<% end %>
</.link>
<%= link to: "#",
class: "text-primary-600 link",
phx_click: "delete_invite",
phx_value_id: invite.id,
data: [
confirm:
dgettext("prompts", "Are you sure you want to delete the invite for %{invite_name}?",
invite_name: invite.name
),
qa: "delete-#{invite.id}"
] do %>
<.link
href="#"
class="text-primary-600 link"
phx-click="delete_invite"
phx-value-id={invite.id}
data-confirm={
dgettext("prompts", "Are you sure you want to delete the invite for %{invite_name}?",
invite_name: invite.name
)
}
data-qa={"delete-#{invite.id}"}
>
<i class="fa-fw fa-lg fas fa-trash"></i>
<% end %>
</.link>
<%= if invite.disabled_at |> is_nil() do %>
<a href="#" class="btn btn-primary" phx-click="disable_invite" phx-value-id={invite.id}>
@ -92,20 +93,21 @@
<div class="w-full flex flex-row flex-wrap justify-center items-center">
<%= for admin <- @admins do %>
<.user_card user={admin}>
<%= link to: "#",
class: "text-primary-600 link",
phx_click: "delete_user",
phx_value_id: admin.id,
data: [
confirm:
dgettext(
"prompts",
"Are you sure you want to delete %{email}? This action is permanent!",
email: admin.email
)
] do %>
<.link
href="#"
class="text-primary-600 link"
phx-click="delete_user"
phx-value-id={admin.id}
data-confirm={
dgettext(
"prompts",
"Are you sure you want to delete %{email}? This action is permanent!",
email: admin.email
)
}
>
<i class="fa-fw fa-lg fas fa-trash"></i>
<% end %>
</.link>
</.user_card>
<% end %>
</div>
@ -121,20 +123,21 @@
<div class="w-full flex flex-row flex-wrap justify-center items-center">
<%= for user <- @users do %>
<.user_card user={user}>
<%= link to: "#",
class: "text-primary-600 link",
phx_click: "delete_user",
phx_value_id: user.id,
data: [
confirm:
dgettext(
"prompts",
"Are you sure you want to delete %{email}? This action is permanent!",
email: user.email
)
] do %>
<.link
href="#"
class="text-primary-600 link"
phx-click="delete_user"
phx-value-id={user.id}
data-confirm={
dgettext(
"prompts",
"Are you sure you want to delete %{email}? This action is permanent!",
email: user.email
)
}
>
<i class="fa-fw fa-lg fas fa-trash"></i>
<% end %>
</.link>
</.user_card>
<% end %>
</div>

35
lib/lokal_web/live/live_helpers.ex
View File

@ -3,7 +3,7 @@ defmodule LokalWeb.LiveHelpers do
Contains resuable methods for all liveviews
"""
import Phoenix.LiveView.Helpers
import Phoenix.Component
alias Phoenix.LiveView.JS
@doc """
@ -27,17 +27,17 @@ defmodule LokalWeb.LiveHelpers do
"""
def modal(assigns) do
~H"""
<%= live_patch to: @return_to,
id: "modal-bg",
class:
"fade-in fixed z-10 left-0 top-0
<.link
id="modal-bg"
patch={@return_to}
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 %>
p-8 flex flex-col justify-center items-center cursor-auto"
style="background-color: rgba(0,0,0,0.4);"
phx_remove={hide_modal()}
>
<span class="hidden"></span>
<% end %>
</.link>
<div
id="modal"
@ -53,15 +53,16 @@ defmodule LokalWeb.LiveHelpers do
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
<.link
id="close"
href={@return_to}
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 %>
transition-all duration-500 ease-in-out"
phx_remove={hide_modal()}
>
<i class="fa-fw fa-lg fas fa-times"></i>
<% end %>
</.link>
<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) %>

5
lib/lokal_web/templates/layout/root.html.heex
View File

@ -5,8 +5,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<%= csrf_meta_tag() %>
<%= if(assigns |> Map.has_key?(:page_title), do: @page_title, else: "Lokal")
|> live_title_tag(suffix: " | Lokal") %>
<.live_title suffix={" | #{gettext("Lokal")}"}>
<%= assigns[:page_title] || gettext("Lokal") %>
</.live_title>
<link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/css/app.css")} />
<script
defer

16
lib/lokal_web/templates/user_confirmation/new.html.heex
View File

@ -4,7 +4,7 @@
</h1>
<.form
let={f}
:let={f}
for={:user}
action={Routes.user_confirmation_path(@conn, :create)}
class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
@ -21,14 +21,12 @@
<div class="flex flex-row justify-center items-center space-x-4">
<%= if Accounts.allow_registration?() do %>
<%= link(dgettext("actions", "Register"),
to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary"
) %>
<.link href={Routes.user_registration_path(@conn, :new)} class="btn btn-primary">
<%= dgettext("actions", "Register") %>
</.link>
<% end %>
<%= link(dgettext("actions", "Log in"),
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary"
) %>
<.link href={Routes.user_session_path(@conn, :new)} class="btn btn-primary">
<%= dgettext("actions", "Log in") %>
</.link>
</div>
</div>

16
lib/lokal_web/templates/user_registration/new.html.heex
View File

@ -4,7 +4,7 @@
</h1>
<.form
let={f}
:let={f}
for={@changeset}
action={Routes.user_registration_path(@conn, :create)}
class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
@ -44,13 +44,11 @@
<hr class="hr" />
<div class="flex flex-row justify-center items-center space-x-4">
<%= link(dgettext("actions", "Log in"),
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary"
) %>
<%= link(dgettext("actions", "Forgot your password?"),
to: Routes.user_reset_password_path(@conn, :new),
class: "btn btn-primary"
) %>
<.link href={Routes.user_session_path(@conn, :new)} class="btn btn-primary">
<%= dgettext("actions", "Log in") %>
</.link>
<.link href={Routes.user_reset_password_path(@conn, :new)} class="btn btn-primary">
<%= dgettext("actions", "Forgot your password?") %>
</.link>
</div>
</div>

16
lib/lokal_web/templates/user_reset_password/edit.html.heex
View File

@ -4,7 +4,7 @@
</h1>
<.form
let={f}
:let={f}
for={@changeset}
action={Routes.user_reset_password_path(@conn, :update, @token)}
class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
@ -39,14 +39,12 @@
<div class="flex flex-row justify-center items-center space-x-4">
<%= if Accounts.allow_registration?() do %>
<%= link(dgettext("actions", "Register"),
to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary"
) %>
<.link href={Routes.user_registration_path(@conn, :new)} class="btn btn-primary">
<%= dgettext("actions", "Register") %>
</.link>
<% end %>
<%= link(dgettext("actions", "Log in"),
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary"
) %>
<.link href={Routes.user_session_path(@conn, :new)} class="btn btn-primary">
<%= dgettext("actions", "Log in") %>
</.link>
</div>
</div>

16
lib/lokal_web/templates/user_reset_password/new.html.heex
View File

@ -4,7 +4,7 @@
</h1>
<.form
let={f}
:let={f}
for={:user}
action={Routes.user_reset_password_path(@conn, :create)}
class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
@ -21,14 +21,12 @@
<div class="flex flex-row justify-center items-center space-x-4">
<%= if Accounts.allow_registration?() do %>
<%= link(dgettext("actions", "Register"),
to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary"
) %>
<.link href={Routes.user_registration_path(@conn, :new)} class="btn btn-primary">
<%= dgettext("actions", "Register") %>
</.link>
<% end %>
<%= link(dgettext("actions", "Log in"),
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary"
) %>
<.link href={Routes.user_session_path(@conn, :new)} class="btn btn-primary">
<%= dgettext("actions", "Log in") %>
</.link>
</div>
</div>

16
lib/lokal_web/templates/user_session/new.html.heex
View File

@ -4,7 +4,7 @@
</h1>
<.form
let={f}
:let={f}
for={@conn}
action={Routes.user_session_path(@conn, :create)}
as="user"
@ -36,14 +36,12 @@
<div class="flex flex-row justify-center items-center space-x-4">
<%= if Accounts.allow_registration?() do %>
<%= link(dgettext("actions", "Register"),
to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary"
) %>
<.link href={Routes.user_registration_path(@conn, :new)} class="btn btn-primary">
<%= dgettext("actions", "Register") %>
</.link>
<% end %>
<%= link(dgettext("actions", "Forgot your password?"),
to: Routes.user_reset_password_path(@conn, :new),
class: "btn btn-primary"
) %>
<.link href={Routes.user_reset_password_path(@conn, :new)} class="btn btn-primary">
<%= dgettext("actions", "Forgot your password?") %>
</.link>
</div>
</div>

20
lib/lokal_web/templates/user_settings/edit.html.heex
View File

@ -6,7 +6,7 @@
<hr class="hr" />
<.form
let={f}
:let={f}
for={@email_changeset}
action={Routes.user_settings_path(@conn, :update)}
class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
@ -49,7 +49,7 @@
<hr class="hr" />
<.form
let={f}
:let={f}
for={@password_changeset}
action={Routes.user_settings_path(@conn, :update)}
class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
@ -104,7 +104,7 @@
<hr class="hr" />
<.form
let={f}
:let={f}
for={@locale_changeset}
action={Routes.user_settings_path(@conn, :update)}
class="flex flex-col space-y-4 justify-center items-center"
@ -136,10 +136,12 @@
<hr class="hr" />
<%= link(dgettext("actions", "Delete User"),
to: Routes.user_settings_path(@conn, :delete, @current_user),
method: :delete,
class: "btn btn-alert",
data: [confirm: dgettext("prompts", "Are you sure you want to delete your account?")]
) %>
<.link
href={Routes.user_settings_path(@conn, :delete, @current_user)}
method={:delete}
class="btn btn-alert"
data-confirm={dgettext("prompts", "Are you sure you want to delete your account?")}
>
<%= dgettext("actions", "Delete User") %>
</.link>
</div>

2
lib/lokal_web/views/error_helpers.ex
View File

@ -4,7 +4,7 @@ defmodule LokalWeb.ErrorHelpers do
"""
use Phoenix.HTML
import Phoenix.LiveView.Helpers
import Phoenix.Component
alias Ecto.Changeset
alias Phoenix.{HTML.Form, LiveView.Rendered}

70
lib/lokal_web/views/view_helpers.ex
View File

@ -5,48 +5,62 @@ defmodule LokalWeb.ViewHelpers do
:view`
"""
import Phoenix.LiveView.Helpers
use Phoenix.Component
@doc """
Returns a <time> element that renders the naivedatetime in the user's local
timezone with Alpine.js
Phoenix.Component for a <time> element that renders the naivedatetime in the
user's local timezone with Alpine.js
"""
@spec display_datetime(NaiveDateTime.t() | nil) :: Phoenix.LiveView.Rendered.t()
def display_datetime(nil), do: ""
def display_datetime(datetime) do
assigns = %{
datetime: datetime |> DateTime.from_naive!("Etc/UTC") |> DateTime.to_iso8601(:extended)
}
attr :datetime, :any, required: true, doc: "A `DateTime` struct or nil"
def datetime(assigns) do
~H"""
<time datetime={@datetime} x-data={"{
date:
Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
.format(new Date(\"#{@datetime}\"))
}"} x-text="date">
<%= @datetime %>
</time>
<%= if @datetime do %>
<time
datetime={cast_datetime(@datetime)}
x-data={"{
datetime:
Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
.format(new Date(\"#{cast_datetime(@datetime)}\"))
}"}
x-text="datetime"
>
<%= cast_datetime(@datetime) %>
</time>
<% end %>
"""
end
@spec cast_datetime(NaiveDateTime.t() | nil) :: String.t()
defp cast_datetime(%NaiveDateTime{} = datetime) do
datetime |> DateTime.from_naive!("Etc/UTC") |> DateTime.to_iso8601(:extended)
end
defp cast_datetime(_datetime), do: ""
@doc """
Returns a <date> element that renders the Date in the user's local
timezone with Alpine.js
Phoenix.Component for a <date> element that renders the Date in the user's
local timezone with Alpine.js
"""
@spec display_date(Date.t() | nil) :: Phoenix.LiveView.Rendered.t()
def display_date(nil), do: ""
def display_date(date) do
assigns = %{date: date |> Date.to_iso8601(:extended)}
attr :date, :any, required: true, doc: "A `Date` struct or nil"
def date(assigns) do
~H"""
<time datetime={@date} x-data={"{
date:
Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'}).format(new Date(\"#{@date}\"))
}"} x-text="date">
<%= @date %>
</time>
<%= if @date do %>
<time
datetime={@date |> Date.to_iso8601(:extended)}
x-data={"{
date:
Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'})
.format(new Date(\"#{@date |> Date.to_iso8601(:extended)}\"))
}"}
x-text="date"
>
<%= @date |> Date.to_iso8601(:extended) %>
</time>
<% end %>
"""
end
end