add changeset_errors/1 helper to form components

This commit is contained in:
shibao 2022-02-05 23:41:10 -05:00
parent 1ee5195ab3
commit ad25164c16
6 changed files with 103 additions and 123 deletions

View File

@ -23,12 +23,7 @@ defmodule CanneryWeb.AmmoGroupLive.FormComponent do
@impl true @impl true
def handle_event("validate", %{"ammo_group" => ammo_group_params}, socket) do def handle_event("validate", %{"ammo_group" => ammo_group_params}, socket) do
ammo_group_params = ammo_group_params |> Map.put("user_id", socket.assigns.current_user.id) ammo_group_params = ammo_group_params |> Map.put("user_id", socket.assigns.current_user.id)
changeset = socket.assigns.ammo_group |> Ammo.change_ammo_group(ammo_group_params)
changeset =
socket.assigns.ammo_group
|> Ammo.change_ammo_group(ammo_group_params)
|> Map.put(:action, :validate)
{:noreply, socket |> assign(:changeset, changeset)} {:noreply, socket |> assign(:changeset, changeset)}
end end
@ -53,48 +48,44 @@ defmodule CanneryWeb.AmmoGroupLive.FormComponent do
phx-submit="save" phx-submit="save"
class="grid grid-cols-3 justify-center items-center space-y-4" class="grid grid-cols-3 justify-center items-center space-y-4"
> >
<%= if @changeset.action do %>
<div class="invalid-feedback col-span-3 text-center">
<%= changeset_errors(@changeset) %>
</div>
<% end %>
<%= label(f, :count, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :count, class: "mr-4 title text-lg text-primary-500") %>
<%= number_input(f, :count, <%= number_input(f, :count,
class: "text-center col-span-2 input input-primary", class: "text-center col-span-2 input input-primary",
min: 1 min: 1
) %> ) %>
<div class="col-span-3 text-center"> <%= error_tag(f, :count, "col-span-3 text-center") %>
<%= error_tag(f, :count) %>
</div>
<%= label(f, :price_paid, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :price_paid, class: "mr-4 title text-lg text-primary-500") %>
<%= number_input(f, :price_paid, <%= number_input(f, :price_paid,
step: "0.01", step: "0.01",
class: "text-center col-span-2 input input-primary" class: "text-center col-span-2 input input-primary"
) %> ) %>
<div class="col-span-3 text-center"> <%= error_tag(f, :price_paid, "col-span-3 text-center") %>
<%= error_tag(f, :price_paid) %>
</div>
<%= label(f, :notes, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :notes, class: "mr-4 title text-lg text-primary-500") %>
<%= textarea(f, :notes, <%= textarea(f, :notes,
class: "text-center col-span-2 input input-primary", class: "text-center col-span-2 input input-primary",
phx_hook: "MaintainAttrs" phx_hook: "MaintainAttrs"
) %> ) %>
<div class="col-span-3 text-center"> <%= error_tag(f, :notes, "col-span-3 text-center") %>
<%= error_tag(f, :notes) %>
</div>
<%= label(f, :ammo_type_id, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :ammo_type_id, class: "mr-4 title text-lg text-primary-500") %>
<%= select(f, :ammo_type_id, ammo_type_options(@ammo_types), <%= select(f, :ammo_type_id, ammo_type_options(@ammo_types),
class: "text-center col-span-2 input input-primary" class: "text-center col-span-2 input input-primary"
) %> ) %>
<div class="col-span-3 text-center"> <%= error_tag(f, :ammo_type_id, "col-span-3 text-center") %>
<%= error_tag(f, :ammo_type_id) %>
</div>
<%= label(f, :container, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :container, class: "mr-4 title text-lg text-primary-500") %>
<%= select(f, :container_id, container_options(@containers), <%= select(f, :container_id, container_options(@containers),
class: "text-center col-span-2 input input-primary" class: "text-center col-span-2 input input-primary"
) %> ) %>
<div class="col-span-3 text-center"> <%= error_tag(f, :container_id, "col-span-3 text-center") %>
<%= error_tag(f, :container_id) %>
</div>
<%= submit("Save", <%= submit("Save",
phx_disable_with: "Saving...", phx_disable_with: "Saving...",

View File

@ -20,11 +20,7 @@ defmodule CanneryWeb.AmmoTypeLive.FormComponent do
@impl true @impl true
def handle_event("validate", %{"ammo_type" => ammo_type_params}, socket) do def handle_event("validate", %{"ammo_type" => ammo_type_params}, socket) do
changeset = changeset = socket.assigns.ammo_type |> Ammo.change_ammo_type(ammo_type_params)
socket.assigns.ammo_type
|> Ammo.change_ammo_type(ammo_type_params)
|> Map.put(:action, :validate)
{:noreply, socket |> assign(:changeset, changeset)} {:noreply, socket |> assign(:changeset, changeset)}
end end
@ -48,20 +44,22 @@ defmodule CanneryWeb.AmmoTypeLive.FormComponent do
phx-submit="save" phx-submit="save"
class="grid grid-cols-3 justify-center items-center space-y-4" class="grid grid-cols-3 justify-center items-center space-y-4"
> >
<%= if @changeset.action do %>
<div class="invalid-feedback col-span-3 text-center">
<%= changeset_errors(@changeset) %>
</div>
<% end %>
<%= label(f, :name, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :name, class: "mr-4 title text-lg text-primary-500") %>
<%= text_input(f, :name, class: "text-center col-span-2 input input-primary") %> <%= text_input(f, :name, class: "text-center col-span-2 input input-primary") %>
<div class="col-span-3 text-center"> <%= error_tag(f, :name, "col-span-3 text-center") %>
<%= error_tag(f, :name) %>
</div>
<%= label(f, :desc, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :desc, class: "mr-4 title text-lg text-primary-500") %>
<%= textarea(f, :desc, <%= textarea(f, :desc,
class: "text-center col-span-2 input input-primary", class: "text-center col-span-2 input input-primary",
phx_hook: "MaintainAttrs" phx_hook: "MaintainAttrs"
) %> ) %>
<div class="col-span-3 text-center"> <%= error_tag(f, :desc, "col-span-3 text-center") %>
<%= error_tag(f, :desc) %>
</div>
<a <a
href="https://en.wikipedia.org/wiki/Bullet#Abbreviations" href="https://en.wikipedia.org/wiki/Bullet#Abbreviations"
@ -74,45 +72,35 @@ defmodule CanneryWeb.AmmoTypeLive.FormComponent do
class: "text-center col-span-2 input input-primary", class: "text-center col-span-2 input input-primary",
placeholder: "FMJ" placeholder: "FMJ"
) %> ) %>
<div class="col-span-3 text-center"> <%= error_tag(f, :bullet_type, "col-span-3 text-center") %>
<%= error_tag(f, :bullet_type) %>
</div>
<%= label(f, :bullet_core, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :bullet_core, class: "mr-4 title text-lg text-primary-500") %>
<%= text_input(f, :bullet_core, <%= text_input(f, :bullet_core,
class: "text-center col-span-2 input input-primary", class: "text-center col-span-2 input input-primary",
placeholder: "Steel" placeholder: "Steel"
) %> ) %>
<div class="col-span-3 text-center"> <%= error_tag(f, :bullet_core, "col-span-3 text-center") %>
<%= error_tag(f, :bullet_core) %>
</div>
<%= label(f, :cartridge, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :cartridge, class: "mr-4 title text-lg text-primary-500") %>
<%= text_input(f, :cartridge, <%= text_input(f, :cartridge,
class: "text-center col-span-2 input input-primary", class: "text-center col-span-2 input input-primary",
placeholder: "5.56x46mm NATO" placeholder: "5.56x46mm NATO"
) %> ) %>
<div class="col-span-3 text-center"> <%= error_tag(f, :cartridge, "col-span-3 text-center") %>
<%= error_tag(f, :cartridge) %>
</div>
<%= label(f, :caliber, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :caliber, class: "mr-4 title text-lg text-primary-500") %>
<%= text_input(f, :caliber, <%= text_input(f, :caliber,
class: "text-center col-span-2 input input-primary", class: "text-center col-span-2 input input-primary",
placeholder: ".223" placeholder: ".223"
) %> ) %>
<div class="col-span-3 text-center"> <%= error_tag(f, :caliber, "col-span-3 text-center") %>
<%= error_tag(f, :caliber) %>
</div>
<%= label(f, :case_material, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :case_material, class: "mr-4 title text-lg text-primary-500") %>
<%= text_input(f, :case_material, <%= text_input(f, :case_material,
class: "text-center col-span-2 input input-primary", class: "text-center col-span-2 input input-primary",
placeholder: "Brass" placeholder: "Brass"
) %> ) %>
<div class="col-span-3 text-center"> <%= error_tag(f, :case_material, "col-span-3 text-center") %>
<%= error_tag(f, :case_material) %>
</div>
<%= label(f, :grains, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :grains, class: "mr-4 title text-lg text-primary-500") %>
<%= number_input(f, :grains, <%= number_input(f, :grains,
@ -120,60 +108,42 @@ defmodule CanneryWeb.AmmoTypeLive.FormComponent do
class: "text-center col-span-2 input input-primary", class: "text-center col-span-2 input input-primary",
min: 1 min: 1
) %> ) %>
<div class="col-span-3 text-center"> <%= error_tag(f, :grains, "col-span-3 text-center") %>
<%= error_tag(f, :grains) %>
</div>
<%= label(f, :pressure, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :pressure, class: "mr-4 title text-lg text-primary-500") %>
<%= text_input(f, :pressure, <%= text_input(f, :pressure,
class: "text-center col-span-2 input input-primary", class: "text-center col-span-2 input input-primary",
placeholder: "+P" placeholder: "+P"
) %> ) %>
<div class="col-span-3 text-center"> <%= error_tag(f, :pressure, "col-span-3 text-center") %>
<%= error_tag(f, :pressure) %>
</div>
<%= label(f, :rimfire, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :rimfire, class: "mr-4 title text-lg text-primary-500") %>
<%= checkbox(f, :rimfire, class: "text-center col-span-2 checkbox") %> <%= checkbox(f, :rimfire, class: "text-center col-span-2 checkbox") %>
<div class="col-span-3 text-center"> <%= error_tag(f, :rimfire, "col-span-3 text-center") %>
<%= error_tag(f, :rimfire) %>
</div>
<%= label(f, :tracer, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :tracer, class: "mr-4 title text-lg text-primary-500") %>
<%= checkbox(f, :tracer, class: "text-center col-span-2 checkbox") %> <%= checkbox(f, :tracer, class: "text-center col-span-2 checkbox") %>
<div class="col-span-3 text-center"> <%= error_tag(f, :tracer, "col-span-3 text-center") %>
<%= error_tag(f, :tracer) %>
</div>
<%= label(f, :incendiary, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :incendiary, class: "mr-4 title text-lg text-primary-500") %>
<%= checkbox(f, :incendiary, class: "text-center col-span-2 checkbox") %> <%= checkbox(f, :incendiary, class: "text-center col-span-2 checkbox") %>
<div class="col-span-3 text-center"> <%= error_tag(f, :incendiary, "col-span-3 text-center") %>
<%= error_tag(f, :incendiary) %>
</div>
<%= label(f, :blank, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :blank, class: "mr-4 title text-lg text-primary-500") %>
<%= checkbox(f, :blank, class: "text-center col-span-2 checkbox") %> <%= checkbox(f, :blank, class: "text-center col-span-2 checkbox") %>
<div class="col-span-3 text-center"> <%= error_tag(f, :blank, "col-span-3 text-center") %>
<%= error_tag(f, :blank) %>
</div>
<%= label(f, :corrosive, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :corrosive, class: "mr-4 title text-lg text-primary-500") %>
<%= checkbox(f, :corrosive, class: "text-center col-span-2 checkbox") %> <%= checkbox(f, :corrosive, class: "text-center col-span-2 checkbox") %>
<div class="col-span-3 text-center"> <%= error_tag(f, :corrosive, "col-span-3 text-center") %>
<%= error_tag(f, :corrosive) %>
</div>
<%= label(f, :manufacturer, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :manufacturer, class: "mr-4 title text-lg text-primary-500") %>
<%= text_input(f, :manufacturer, class: "text-center col-span-2 input input-primary") %> <%= text_input(f, :manufacturer, class: "text-center col-span-2 input input-primary") %>
<div class="col-span-3 text-center"> <%= error_tag(f, :manufacturer, "col-span-3 text-center") %>
<%= error_tag(f, :manufacturer) %>
</div>
<%= label(f, :sku, class: "mr-4 title text-lg text-primary-500") %> <%= label(f, :sku, class: "mr-4 title text-lg text-primary-500") %>
<%= text_input(f, :sku, class: "text-center col-span-2 input input-primary") %> <%= text_input(f, :sku, class: "text-center col-span-2 input input-primary") %>
<div class="col-span-3 text-center"> <%= error_tag(f, :sku, "col-span-3 text-center") %>
<%= error_tag(f, :sku) %>
</div>
<%= submit("Save", <%= submit("Save",
phx_disable_with: "Saving...", phx_disable_with: "Saving...",

View File

@ -17,12 +17,7 @@ defmodule CanneryWeb.ContainerLive.FormComponent do
@impl true @impl true
def handle_event("validate", %{"container" => container_params}, socket) do def handle_event("validate", %{"container" => container_params}, socket) do
container_params = container_params |> Map.put("user_id", socket.assigns.current_user.id) container_params = container_params |> Map.put("user_id", socket.assigns.current_user.id)
changeset = socket.assigns.container |> Containers.change_container(container_params)
changeset =
socket.assigns.container
|> Containers.change_container(container_params)
|> Map.put(:action, :validate)
{:noreply, socket |> assign(:changeset, changeset)} {:noreply, socket |> assign(:changeset, changeset)}
end end
@ -47,40 +42,42 @@ defmodule CanneryWeb.ContainerLive.FormComponent do
phx-change="validate" phx-change="validate"
phx-submit="save" phx-submit="save"
> >
<%= if @changeset.action do %>
<div class="invalid-feedback col-span-3 text-center">
<%= changeset_errors(@changeset) %>
</div>
<% end %>
<%= label(f, :name, class: "title text-lg text-primary-500") %> <%= label(f, :name, class: "title text-lg text-primary-500") %>
<%= text_input(f, :name, <%= text_input(f, :name,
class: "input input-primary col-span-2", class: "input input-primary col-span-2",
placeholder: "My cool ammo can" placeholder: "My cool ammo can"
) %> ) %>
<span class="col-span-3"> <%= error_tag(f, :name, "col-span-3 text-center") %>
<%= error_tag(f, :name) %>
</span>
<%= label(f, :desc, class: "title text-lg text-primary-500") %> <%= label(f, :desc, class: "title text-lg text-primary-500") %>
<%= textarea(f, :desc, <%= textarea(f, :desc,
class: "input input-primary col-span-2", class: "input input-primary col-span-2",
phx_hook: "MaintainAttrs", phx_hook: "MaintainAttrs",
placeholder: "Metal ammo can with the anime girl sticker" placeholder: "Metal ammo can with the anime girl sticker"
) %> ) %>
<span class="col-span-3"> <%= error_tag(f, :desc, "col-span-3 text-center") %>
<%= error_tag(f, :desc) %>
</span>
<%= label(f, :type, class: "title text-lg text-primary-500") %> <%= label(f, :type, class: "title text-lg text-primary-500") %>
<%= text_input(f, :type, <%= text_input(f, :type,
class: "input input-primary col-span-2", class: "input input-primary col-span-2",
placeholder: "Magazine, Clip, Ammo Box, etc" placeholder: "Magazine, Clip, Ammo Box, etc"
) %> ) %>
<span class="col-span-3"> <%= error_tag(f, :type, "col-span-3 text-center") %>
<%= error_tag(f, :type) %>
</span>
<%= label(f, :location, class: "title text-lg text-primary-500") %> <%= label(f, :location, class: "title text-lg text-primary-500") %>
<%= textarea(f, :location, <%= textarea(f, :location,
class: "input input-primary col-span-2", class: "input input-primary col-span-2",
phx_hook: "MaintainAttrs", phx_hook: "MaintainAttrs",
placeholder: "On the bookshelf" placeholder: "On the bookshelf"
) %> ) %>
<span class="col-span-3"> <%= error_tag(f, :location, "col-span-3 text-center") %>
<%= error_tag(f, :location) %>
</span>
<%= submit("Save", <%= submit("Save",
class: "mx-auto btn btn-primary col-span-3", class: "mx-auto btn btn-primary col-span-3",
phx_disable_with: "Saving..." phx_disable_with: "Saving..."

View File

@ -20,11 +20,7 @@ defmodule CanneryWeb.InviteLive.FormComponent do
@impl true @impl true
def handle_event("validate", %{"invite" => invite_params}, socket) do def handle_event("validate", %{"invite" => invite_params}, socket) do
changeset = changeset = socket.assigns.invite |> Invites.change_invite(invite_params)
socket.assigns.invite
|> Invites.change_invite(invite_params)
|> Map.put(:action, :validate)
{:noreply, assign(socket, :changeset, changeset)} {:noreply, assign(socket, :changeset, changeset)}
end end
@ -48,16 +44,20 @@ defmodule CanneryWeb.InviteLive.FormComponent do
phx-change="validate" phx-change="validate"
phx-submit="save" phx-submit="save"
> >
<%= if @changeset.action do %>
<div class="invalid-feedback col-span-3 text-center">
<%= changeset_errors(@changeset) %>
</div>
<% end %>
<%= label(f, :name, class: "title text-lg text-primary-500") %> <%= label(f, :name, class: "title text-lg text-primary-500") %>
<%= text_input(f, :name, class: "input input-primary col-span-2") %> <%= text_input(f, :name, class: "input input-primary col-span-2") %>
<span class="col-span-3"> <%= error_tag(f, :name, "col-span-3") %>
<%= error_tag(f, :name) %>
</span>
<%= label(f, :uses_left, class: "title text-lg text-primary-500") %> <%= label(f, :uses_left, class: "title text-lg text-primary-500") %>
<%= number_input(f, :uses_left, min: 0, class: "input input-primary col-span-2") %> <%= number_input(f, :uses_left, min: 0, class: "input input-primary col-span-2") %>
<span class="col-span-3"> <%= error_tag(f, :uses_left, "col-span-3") %>
<%= error_tag(f, :uses_left) %>
</span>
<%= submit("Save", <%= submit("Save",
class: "mx-auto btn btn-primary col-span-3", class: "mx-auto btn btn-primary col-span-3",
phx_disable_with: "Saving..." phx_disable_with: "Saving..."

View File

@ -22,10 +22,7 @@ defmodule CanneryWeb.TagLive.FormComponent do
def handle_event("validate", %{"tag" => tag_params}, socket) do def handle_event("validate", %{"tag" => tag_params}, socket) do
tag_params = tag_params |> Map.put("user_id", socket.assigns.current_user.id) tag_params = tag_params |> Map.put("user_id", socket.assigns.current_user.id)
changeset = changeset = socket.assigns.tag |> Tags.change_tag(tag_params)
socket.assigns.tag
|> Tags.change_tag(tag_params)
|> Map.put(:action, :validate)
{:noreply, socket |> assign(:changeset, changeset)} {:noreply, socket |> assign(:changeset, changeset)}
end end
@ -51,25 +48,28 @@ defmodule CanneryWeb.TagLive.FormComponent do
phx-change="validate" phx-change="validate"
phx-submit="save" phx-submit="save"
> >
<%= if @changeset.action do %>
<div class="invalid-feedback col-span-3 text-center">
<%= changeset_errors(@changeset) %>
</div>
<% end %>
<%= label(f, :name, class: "title text-lg text-primary-500") %> <%= label(f, :name, class: "title text-lg text-primary-500") %>
<%= text_input(f, :name, class: "input input-primary col-span-2") %> <%= text_input(f, :name, class: "input input-primary col-span-2") %>
<span class="col-span-3"> <%= error_tag(f, :name, "col-span-3") %>
<%= error_tag(f, :name) %>
</span>
<%= label(f, :bg_color, class: "title text-lg text-primary-500") %> <%= label(f, :bg_color, class: "title text-lg text-primary-500") %>
<span class="mx-auto col-span-2" phx-update="ignore"> <span class="mx-auto col-span-2" phx-update="ignore">
<%= color_input(f, :bg_color) %> <%= color_input(f, :bg_color) %>
</span> </span>
<span class="col-span-3"> <%= error_tag(f, :bg_color, "col-span-3") %>
<%= error_tag(f, :bg_color) %>
</span>
<%= label(f, :text_color, class: "title text-lg text-primary-500") %> <%= label(f, :text_color, class: "title text-lg text-primary-500") %>
<span class="mx-auto col-span-2" phx-update="ignore"> <span class="mx-auto col-span-2" phx-update="ignore">
<%= color_input(f, :text_color) %> <%= color_input(f, :text_color) %>
</span> </span>
<span class="col-span-3"> <%= error_tag(f, :text_color, "col-span-3") %>
<%= error_tag(f, :text_color) %>
</span>
<%= submit("Save", <%= submit("Save",
class: "mx-auto btn btn-primary col-span-3", class: "mx-auto btn btn-primary col-span-3",
phx_disable_with: "Saving..." phx_disable_with: "Saving..."

View File

@ -4,22 +4,32 @@ defmodule CanneryWeb.ErrorHelpers do
""" """
use Phoenix.HTML use Phoenix.HTML
import Phoenix.LiveView.Helpers
alias Phoenix.{HTML.Form, LiveView.Rendered}
alias Ecto.Changeset
@doc """ @doc """
Generates tag for inlined form input errors. Generates tag for inlined form input errors.
""" """
def error_tag(form, field) do @spec error_tag(Form.t(), Form.field()) :: Rendered.t()
Enum.map(Keyword.get_values(form.errors, field), fn error -> @spec error_tag(Form.t(), Form.field(), String.t()) :: Rendered.t()
content_tag(:span, translate_error(error), def error_tag(form, field, extra_class \\ "") do
class: "invalid-feedback", assigns = %{extra_class: extra_class, form: form, field: field}
phx_feedback_for: input_name(form, field)
) ~H"""
end) <%= for error <- Keyword.get_values(@form.errors, @field) do %>
<span class={"invalid-feedback #{@extra_class}"}
phx-feedback-for={input_name(@form, @field)}>
<%= translate_error(error) %>
</span>
<% end %>
"""
end end
@doc """ @doc """
Translates an error message using gettext. Translates an error message using gettext.
""" """
@spec translate_error({String.t(), keyword() | map()}) :: String.t()
def translate_error({msg, opts}) do def translate_error({msg, opts}) do
# When using gettext, we typically pass the strings we want # When using gettext, we typically pass the strings we want
# to translate as a static argument: # to translate as a static argument:
@ -44,4 +54,16 @@ defmodule CanneryWeb.ErrorHelpers do
Gettext.dgettext(CanneryWeb.Gettext, "errors", msg, opts) Gettext.dgettext(CanneryWeb.Gettext, "errors", msg, opts)
end end
end end
@doc """
Displays all errors from a changeset
"""
@spec changeset_errors(Changeset.t()) :: String.t()
def changeset_errors(changeset) do
changeset
|> Changeset.traverse_errors(fn error -> error |> translate_error() end)
|> Enum.map_join(". ", fn {key, errors} ->
"#{key |> humanize()}: #{errors |> Enum.join(", ")}"
end)
end
end end