Update flash

This commit is contained in:
Chris McCord 2021-11-10 11:56:01 -05:00
parent fdd37c5da8
commit f482d5143a
5 changed files with 68 additions and 10 deletions

View file

@ -1,5 +1,6 @@
import "phoenix_html" import "phoenix_html"
import {Socket} from "phoenix" import {Socket} from "phoenix"
// import {LiveSocket} from "./phoenix_live_view"
import {LiveSocket} from "phoenix_live_view" import {LiveSocket} from "phoenix_live_view"
import topbar from "../vendor/topbar" import topbar from "../vendor/topbar"

View file

@ -9,6 +9,60 @@ defmodule LiveBeatsWeb.LiveHelpers do
Routes.song_index_path(socket, :index, socket.assigns.current_user.username) Routes.song_index_path(socket, :index, socket.assigns.current_user.username)
end end
def flash(%{kind: :error} = assigns) do
~H"""
<%= if live_flash(@flash, @kind) do %>
<div class="rounded-md bg-green-50 p-4 top-0 right-0 fade-in-scale w-96" phx-click="lv:clear-flash" phx-value-key="error">
<div class="flex">
<div class="flex-shrink-0">
<.icon name={:check_circle} solid />
</div>
<div class="ml-3">
<p class="text-sm font-medium text-red-800">
<%= live_flash(@flash, @kind) %>
</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" class="inline-flex bg-red-50 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600">
<span class="sr-only">Dismiss</span>
<.icon name={:x} solid />
</button>
</div>
</div>
</div>
</div>
<% end %>
"""
end
def flash(%{kind: :info} = assigns) do
~H"""
<%= if live_flash(@flash, @kind) do %>
<div class="rounded-md bg-green-50 p-4 fade-in-scale fixed top-1 right-1 w-96" phx-click="lv:clear-flash" phx-value-key="info">
<div class="flex">
<div class="flex-shrink-0">
<.icon name={:check_circle} solid />
</div>
<div class="ml-3">
<p class="text-sm font-medium text-green-800">
<%= live_flash(@flash, @kind) %>
</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" class="inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600">
<span class="sr-only">Dismiss</span>
<.icon name={:x} solid />
</button>
</div>
</div>
</div>
</div>
<% end %>
"""
end
def spinner(assigns) do def spinner(assigns) do
~H""" ~H"""
<svg class="inline-block animate-spin h-2.5 w-2.5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <svg class="inline-block animate-spin h-2.5 w-2.5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">

View file

@ -41,6 +41,10 @@ defmodule LiveBeatsWeb.SongLive.UploadFormComponent do
{:noreply, apply_params(socket, params, :validate)} {:noreply, apply_params(socket, params, :validate)}
end end
def handle_event("validate", %{"_target" => ["mp3"]}, socket) do
{:noreply, drop_invalid_uploads(socket)}
end
def handle_event("save", %{"songs" => params}, socket) do def handle_event("save", %{"songs" => params}, socket) do
socket = apply_params(socket, params, :insert) socket = apply_params(socket, params, :insert)
%{current_user: current_user} = socket.assigns %{current_user: current_user} = socket.assigns
@ -62,6 +66,10 @@ defmodule LiveBeatsWeb.SongLive.UploadFormComponent do
end end
end end
def handle_event("save", %{} = _params, socket) do
{:noreply, socket}
end
defp pending_stats?(socket) do defp pending_stats?(socket) do
Enum.find(socket.assigns.changesets, fn {_ref, chset} -> !chset.changes[:duration] end) Enum.find(socket.assigns.changesets, fn {_ref, chset} -> !chset.changes[:duration] end)
end end

View file

@ -1,17 +1,12 @@
<main> <main id>
<.live_component module={LiveBeatsWeb.LayoutComponent} id="layout" /> <.live_component module={LiveBeatsWeb.LayoutComponent} id="layout" />
<%= if @current_user do %> <%= if @current_user do %>
<%= live_render(@socket, LiveBeatsWeb.PlayerLive, id: "player", session: %{}, sticky: true) %> <%= live_render(@socket, LiveBeatsWeb.PlayerLive, id: "player", session: %{}, sticky: true) %>
<% end %> <% end %>
<p class="alert alert-info fade-in-scale" role="alert" <.flash flash={@flash} kind={:info}/>
phx-click="lv:clear-flash" <.flash flash={@flash} kind={:error}/>
phx-value-key="info"><%= live_flash(@flash, :info) %></p>
<p class="alert alert-danger fade-in-scale" role="alert"
phx-click="lv:clear-flash"
phx-value-key="error"><%= live_flash(@flash, :error) %></p>
<%= @inner_content %> <%= @inner_content %>
</main> </main>

View file

@ -39,8 +39,8 @@ defmodule LiveBeats.MixProject do
{:postgrex, ">= 0.0.0"}, {:postgrex, ">= 0.0.0"},
{:phoenix_html, "~> 3.0"}, {:phoenix_html, "~> 3.0"},
{:phoenix_live_reload, "~> 1.2", only: :dev}, {:phoenix_live_reload, "~> 1.2", only: :dev},
# {:phoenix_live_view, path: "~/oss/phoenix_live_view", override: true}, {:phoenix_live_view, path: "~/oss/phoenix_live_view", override: true},
{:phoenix_live_view, github: "phoenixframework/phoenix_live_view", branch: "cm-sticky-live-render", override: true}, # {:phoenix_live_view, github: "phoenixframework/phoenix_live_view", branch: "cm-sticky-live-render", override: true},
{:floki, ">= 0.30.0", only: :test}, {:floki, ">= 0.30.0", only: :test},
{:phoenix_live_dashboard, "~> 0.5"}, {:phoenix_live_dashboard, "~> 0.5"},
{:esbuild, "~> 0.2", runtime: Mix.env() == :dev}, {:esbuild, "~> 0.2", runtime: Mix.env() == :dev},