HTML Form input / what's required and what's the best approach

[kipcole9]

@cdvv7788, @LostKobrakai, one of the open issues is how to create a good experience inputting a money through an HTML form:

1. Generating the html and in what shape. 2 input boxes? In what order? How generalised?
2. Changeset functions to reassemble a money format in a valid fashion. Using virtual schema fields?

Your thoughts and suggestions would be most welcome.

[cdvv7788]

In my case, I solved it by having 2 virtual fields, one for the amount and one for the currency.
However, before the validate_required call, I had to add a step to pre-populate those fields from the amount field, if it exists, and another step after all the validations to populate the actual amount field.
I don't know if there is an easier way to correlate the fields (new to elixir/phoenix), but if there is not, providing those functions from the library and specifying the involved fields should be easy.

[tomwilsn]

I started with the virtual fields then I figured - The built in date time selector does a similar thing so I had a look at how that works and I came up with:

  @moduledoc """
  Helpers to render inputs for money with currency
  """
  use Phoenix.HTML

  def money_with_currency_input(form, field, opts \\ []) do
    value = Keyword.get(opts, :value, input_value(form, field) || Keyword.get(opts, :default))
    builder = Keyword.get(opts, :builder) || (&default_money_with_currency_builder(&1, opts))
    builder.(money_with_currency_builder(form, field, currency_value(value), currency_value(value), opts))
  end

  defp money_with_currency_options(type, values, id, name, parent, money_with_currency, opts) do
    opts = Keyword.merge(Keyword.get(parent, type, []), opts)
    suff = Atom.to_string(type)

    {value, opts} = Keyword.pop(opts, :options, values)

    {value,
     opts
     |> Keyword.put_new(:id, id <> "_" <> suff)
     |> Keyword.put_new(:name, name <> "[" <> suff <> "]")
     |> Keyword.put_new(:value, Map.get(money_with_currency, type))}
  end

  defp money_with_currency_builder(form, field, amount, currency, parent) do
    id = Keyword.get(parent, :id, input_id(form, field))
    name = Keyword.get(parent, :name, input_name(form, field))

    fn
      :amount, opts when amount != nil ->
        {_value, opts} = money_with_currency_options(:amount, [], id, name, parent, amount, opts)
        number_input(:currency_with_money, :amount, Keyword.merge([step: 0.01], opts))
      :currency, opts when amount != nil ->
        {value, opts} = money_with_currency_options(:currency, currencies(), id, name, parent, currency, opts)
        select(:currency_with_money, :currency, value, opts)
      end
  end

  defp default_money_with_currency_builder(b, _opts) do
    html_escape([b.(:amount, []), b.(:currency, [])])
  end

  defp currency_value(nil), do: nil
  defp currency_value(%{amount: amount, currency: currency}), do: %{amount: amount, currency: currency}

  defp currencies do
    Money.Currency.known_current_currencies()
    |> Stream.map(&Money.Currency.currency_for_code/1)
    |> Stream.map(&elem(&1, 1))
    |> Enum.map(fn %{code: code, name: name, symbol: symbol} ->
      {"#{code}: #{name} (#{symbol})", code}
    end)
  end

end

And then you can use it with like:

<%= money_with_currency_input f, :field_name %>

And then similar to the date/datetime selector in phoenix you can supply your own builder function to control the output.

I haven't fully tested this yet but I feel like this is the way to go vs having to clutter up your model with virtual fields

[kipcole9]

This looks promising indeed; do you have a proof-of-concept URL that demonstrates this by any chance?

For a generalised solution, the step: 0.01 option should be currency-specific. This can be retrieved with Money.Currency.currency_for_code(currency_code) |> Map.get(:digits).

[tomwilsn]

I could probably whip something up

The step thing per currency would probably require adding some JavaScript

[Wigny]

For those in the future who may arrive at this issue like me looking for a way to have a "single" input that can handle a Money: following @tomwilsn's idea, I came up with a version that defines an input Phoenix.Component to deal with Money. To start using it, simply add the following code to your CoreComponents module:

def input(%{type: "money"} = assigns) do
  assigns =
    assigns
    |> update(:value, &money_value/1)
    |> assign_new(:default_currency, fn ->
      backend = Money.default_backend()
      Cldr.Currency.current_currency_from_locale(backend.get_locale())
    end)

  ~H"""
  <div phx-feedback-for={"#{@name}[amount]"}>
    <.label for={@id}><%= @label %></.label>
    <div class="relative mt-2 rounded-lg">
      <input
        type="text"
        inputmode="numeric"
        id={"#{@id}_amount"}
        name={"#{@name}[amount]"}
        value={@value.amount}
        placeholder="0.00"
        class={[
          "block w-full rounded-lg border-0 pr-20 text-zinc-900 ring-1 ring-inset ring-zinc-300 placeholder:text-zinc-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6",
          "phx-no-feedback:ring-zinc-300 phx-no-feedback:focus:ring-zinc-400",
          @errors == [] && "ring-zinc-300 focus:ring-zinc-400",
          @errors != [] && "ring-rose-400 focus:ring-rose-400"
        ]}
      />
      <div class="absolute inset-y-0 right-0 flex items-center">
        <label for={"#{@id}_currency"} class="sr-only">Currency</label>
        <select
          id={"#{@id}_currency"}
          name={"#{@name}[currency]"}
          class="h-full rounded-lg border-0 bg-transparent py-0 pl-2 pr-7 text-zinc-500 focus:ring-1 focus:ring-inset focus:ring-zinc-600 sm:text-sm"
        >
          <%= Phoenix.HTML.Form.options_for_select(
            Money.known_currencies(),
            @value.currency || @default_currency
          ) %>
        </select>
      </div>
    </div>
    <.error :for={msg <- @errors}><%= msg %></.error>
  </div>
  """
end

defp money_value(%Money{} = money) do
  money
end

defp money_value(nil) do
  %Money{amount: nil, currency: nil}
end

defp money_value(%{"amount" => amount, "currency" => currency}) do
  %Money{amount: amount, currency: currency}
end

Then on your form, you can just use it like:

<.input type="money" field={@form[:price]} label="Price" />

[kipcole9]

@Wigny, thanks for the contribution, much appreciated. Perhaps you'd consider a blog post that you could then point elixirforum at?

Just a couple of obversations too if I may:

• Using Money.new/2 is preferred over directly building Money.t maps. Build the maps manually avoids any and all validations.
• %Money{amount: nil, currency: nil} isn't valid according to the Money.t type and could cause downstream issues. The amount needs to be a Decimal.t and the currency needs to be a valid code.

[Wigny]

Sure thing, that's a great idea! I will try to write the post and will share it here once I have something 😁. Thanks for the tips!

[Wigny]

Just sharing that after having (possibly) solved a small UX issue with error handling for composite inputs, I updated the gist to use the new Phoenix LV error handling.

[kipcole9]

Nice work, I'll give that a spin over the weekend. I think this is someone many people would value. Any thoughts on packaging it up for release?

[Wigny]

I thought about that but I'm not sure how we can provide this component in a extensible/customizable way. Any suggestions?