Mark required fields in UI

This commit is contained in:
Rafael Epplée 2025-12-02 09:56:54 +01:00
parent e803dbdf8b
commit dea452ab5c
No known key found for this signature in database
GPG key ID: B4EFE6DC59FAE118
5 changed files with 86 additions and 30 deletions

View file

@ -56,7 +56,7 @@ defmodule MvWeb.CoreComponents do
id={@id} id={@id}
phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")} phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
role="alert" role="alert"
class="toast toast-top toast-end z-50" class="z-50 toast toast-top toast-end"
{@rest} {@rest}
> >
<div class={[ <div class={[
@ -71,7 +71,7 @@ defmodule MvWeb.CoreComponents do
<p>{msg}</p> <p>{msg}</p>
</div> </div>
<div class="flex-1" /> <div class="flex-1" />
<button type="button" class="group self-start cursor-pointer" aria-label={gettext("close")}> <button type="button" class="self-start cursor-pointer group" aria-label={gettext("close")}>
<.icon name="hero-x-mark" class="size-5 opacity-40 group-hover:opacity-70" /> <.icon name="hero-x-mark" class="size-5 opacity-40 group-hover:opacity-70" />
</button> </button>
</div> </div>
@ -180,7 +180,7 @@ defmodule MvWeb.CoreComponents do
end) end)
~H""" ~H"""
<fieldset class="fieldset mb-2"> <fieldset class="mb-2 fieldset">
<label> <label>
<input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} /> <input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />
<span class="label"> <span class="label">
@ -192,7 +192,11 @@ defmodule MvWeb.CoreComponents do
checked={@checked} checked={@checked}
class={@class || "checkbox checkbox-sm"} class={@class || "checkbox checkbox-sm"}
{@rest} {@rest}
/>{@label} />{@label}<span
:if={@rest[:required]}
class="text-red-300 tooltip tooltip-right"
data-tip={gettext("This field cannot be empty")}
>*</span>
</span> </span>
</label> </label>
<.error :for={msg <- @errors}>{msg}</.error> <.error :for={msg <- @errors}>{msg}</.error>
@ -202,9 +206,15 @@ defmodule MvWeb.CoreComponents do
def input(%{type: "select"} = assigns) do def input(%{type: "select"} = assigns) do
~H""" ~H"""
<fieldset class="fieldset mb-2"> <fieldset class="mb-2 fieldset">
<label> <label>
<span :if={@label} class="label mb-1">{@label}</span> <span :if={@label} class="mb-1 label">
{@label}<span
:if={@rest[:required]}
class="text-red-400 tooltip tooltip-right"
data-tip={gettext("This field cannot be empty")}
>*</span>
</span>
<select <select
id={@id} id={@id}
name={@name} name={@name}
@ -223,9 +233,15 @@ defmodule MvWeb.CoreComponents do
def input(%{type: "textarea"} = assigns) do def input(%{type: "textarea"} = assigns) do
~H""" ~H"""
<fieldset class="fieldset mb-2"> <fieldset class="mb-2 fieldset">
<label> <label>
<span :if={@label} class="label mb-1">{@label}</span> <span :if={@label} class="mb-1 label">
{@label}<span
:if={@rest[:required]}
class="text-red-400 tooltip tooltip-right"
data-tip={gettext("This field cannot be empty")}
>*</span>
</span>
<textarea <textarea
id={@id} id={@id}
name={@name} name={@name}
@ -244,9 +260,15 @@ defmodule MvWeb.CoreComponents do
# All other inputs text, datetime-local, url, password, etc. are handled here... # All other inputs text, datetime-local, url, password, etc. are handled here...
def input(assigns) do def input(assigns) do
~H""" ~H"""
<fieldset class="fieldset mb-2"> <fieldset class="mb-2 fieldset">
<label> <label>
<span :if={@label} class="label mb-1">{@label}</span> <span :if={@label} class="mb-1 label">
{@label}<span
:if={@rest[:required]}
class="text-red-400 tooltip tooltip-right"
data-tip={gettext("This field cannot be empty")}
>*</span>
</span>
<input <input
type={@type} type={@type}
name={@name} name={@name}
@ -517,7 +539,7 @@ defmodule MvWeb.CoreComponents do
<div class="mt-14"> <div class="mt-14">
<dl class="-my-4 divide-y divide-zinc-100"> <dl class="-my-4 divide-y divide-zinc-100">
<div :for={{name, value} <- @items} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8"> <div :for={{name, value} <- @items} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
<dt class="w-1/4 flex-none text-zinc-500">{name}</dt> <dt class="flex-none w-1/4 text-zinc-500">{name}</dt>
<dd class="text-zinc-700">{value}</dd> <dd class="text-zinc-700">{value}</dd>
</div> </div>
</dl> </dl>

View file

@ -37,7 +37,7 @@ defmodule MvWeb.MemberLive.Form do
<.header> <.header>
{@page_title} {@page_title}
<:subtitle> <:subtitle>
{gettext("Use this form to manage member records and their properties.")} {gettext("Fields marked with an asterisk (*) cannot be empty.")}
</:subtitle> </:subtitle>
</.header> </.header>

View file

@ -10,7 +10,7 @@ msgid ""
msgstr "" msgstr ""
"Language: en\n" "Language: en\n"
#: lib/mv_web/components/core_components.ex:356 #: lib/mv_web/components/core_components.ex:378
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Actions" msgid "Actions"
msgstr "Aktionen" msgstr "Aktionen"
@ -174,11 +174,6 @@ msgstr "Speichern..."
msgid "Street" msgid "Street"
msgstr "Straße" msgstr "Straße"
#: lib/mv_web/live/member_live/form.ex:40
#, elixir-autogen, elixir-format
msgid "Use this form to manage member records and their properties."
msgstr "Dieses Formular dient zur Verwaltung von Mitgliedern und deren Eigenschaften."
#: lib/mv_web/live/member_live/show.ex:47 #: lib/mv_web/live/member_live/show.ex:47
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Id" msgid "Id"
@ -782,7 +777,25 @@ msgstr "Mitglied entverknüpfen"
msgid "Unlinking scheduled" msgid "Unlinking scheduled"
msgstr "Entverknüpfung geplant" msgstr "Entverknüpfung geplant"
#: lib/mv_web/live/member_live/form.ex:40
#, elixir-autogen, elixir-format
msgid "Fields marked with an asterisk (*) cannot be empty."
msgstr "Felder, die mit einem Sternchen (*) markiert sind, dürfen nicht leer bleiben."
#: lib/mv_web/components/core_components.ex:198
#: lib/mv_web/components/core_components.ex:215
#: lib/mv_web/components/core_components.ex:242
#: lib/mv_web/components/core_components.ex:269
#, elixir-autogen, elixir-format, fuzzy
msgid "This field cannot be empty"
msgstr "Dieses Feld darf nicht leer bleiben"
#~ #: lib/mv_web/live/custom_field_live/index.ex:97 #~ #: lib/mv_web/live/custom_field_live/index.ex:97
#~ #, elixir-autogen, elixir-format #~ #, elixir-autogen, elixir-format
#~ msgid "To confirm deletion, please enter the custom field slug:" #~ msgid "To confirm deletion, please enter the custom field slug:"
#~ msgstr "Um die Löschung zu bestätigen, gib bitte den Slug des benutzerdefinierten Feldes ein:" #~ msgstr "Um die Löschung zu bestätigen, gib bitte den Slug des benutzerdefinierten Feldes ein:"
#~ #: lib/mv_web/live/member_live/form.ex:40
#~ #, elixir-autogen, elixir-format
#~ msgid "Use this form to manage member records and their properties."
#~ msgstr "Dieses Formular dient zur Verwaltung von Mitgliedern und deren Eigenschaften."

View file

@ -11,7 +11,7 @@
msgid "" msgid ""
msgstr "" msgstr ""
#: lib/mv_web/components/core_components.ex:356 #: lib/mv_web/components/core_components.ex:378
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Actions" msgid "Actions"
msgstr "" msgstr ""
@ -175,11 +175,6 @@ msgstr ""
msgid "Street" msgid "Street"
msgstr "" msgstr ""
#: lib/mv_web/live/member_live/form.ex:40
#, elixir-autogen, elixir-format
msgid "Use this form to manage member records and their properties."
msgstr ""
#: lib/mv_web/live/member_live/show.ex:47 #: lib/mv_web/live/member_live/show.ex:47
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Id" msgid "Id"
@ -782,3 +777,16 @@ msgstr ""
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Unlinking scheduled" msgid "Unlinking scheduled"
msgstr "" msgstr ""
#: lib/mv_web/live/member_live/form.ex:40
#, elixir-autogen, elixir-format
msgid "Fields marked with an asterisk (*) cannot be empty."
msgstr ""
#: lib/mv_web/components/core_components.ex:198
#: lib/mv_web/components/core_components.ex:215
#: lib/mv_web/components/core_components.ex:242
#: lib/mv_web/components/core_components.ex:269
#, elixir-autogen, elixir-format
msgid "This field cannot be empty"
msgstr ""

View file

@ -11,7 +11,7 @@ msgstr ""
"Language: en\n" "Language: en\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n" "Plural-Forms: nplurals=2; plural=(n != 1);\n"
#: lib/mv_web/components/core_components.ex:356 #: lib/mv_web/components/core_components.ex:378
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Actions" msgid "Actions"
msgstr "" msgstr ""
@ -175,11 +175,6 @@ msgstr ""
msgid "Street" msgid "Street"
msgstr "" msgstr ""
#: lib/mv_web/live/member_live/form.ex:40
#, elixir-autogen, elixir-format
msgid "Use this form to manage member records and their properties."
msgstr ""
#: lib/mv_web/live/member_live/show.ex:47 #: lib/mv_web/live/member_live/show.ex:47
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Id" msgid "Id"
@ -783,7 +778,25 @@ msgstr ""
msgid "Unlinking scheduled" msgid "Unlinking scheduled"
msgstr "" msgstr ""
#: lib/mv_web/live/member_live/form.ex:40
#, elixir-autogen, elixir-format
msgid "Fields marked with an asterisk (*) cannot be empty."
msgstr ""
#: lib/mv_web/components/core_components.ex:198
#: lib/mv_web/components/core_components.ex:215
#: lib/mv_web/components/core_components.ex:242
#: lib/mv_web/components/core_components.ex:269
#, elixir-autogen, elixir-format, fuzzy
msgid "This field cannot be empty"
msgstr ""
#~ #: lib/mv_web/live/custom_field_live/index.ex:97 #~ #: lib/mv_web/live/custom_field_live/index.ex:97
#~ #, elixir-autogen, elixir-format #~ #, elixir-autogen, elixir-format
#~ msgid "To confirm deletion, please enter the custom field slug:" #~ msgid "To confirm deletion, please enter the custom field slug:"
#~ msgstr "" #~ msgstr ""
#~ #: lib/mv_web/live/member_live/form.ex:40
#~ #, elixir-autogen, elixir-format
#~ msgid "Use this form to manage member records and their properties."
#~ msgstr ""