How To Create A Select Control From A Lookup Table?

[Onor.io]

I have what I’ve heard referred to as a “lookup table” in my database. This is a way of assigning codes to common values. One common lookup table example is U. S. States. You might have something like this:

State Id State Name State Abbrev
1 Alabama AL
2 Alaska AK
3 Arizona AZ

etc. etc.

Now in other tables that need to reference the state I’d use an integer field which is a foreign key to my state table:

Street Address           City                    StateId             Zip

123 Any Street           AnyTown                 1                   11111
456 Any Avenue           OtherTown               2                   22222

etc.

Of course when I want data entry I don’t want to display the Id; I want to display the name in order to make it easy for my end user to select the right value. Is there a core component or some simple way to roll my own control such that it creates the proper tag for me? Something like (contiuning with the state example):

<select name="state" id="state">
  <option value="1">Alabama</option>
  <option value="2">Alaska</option>
  <option value="3">Arizona</option>

.

.

.

</select>

Right now the default created HEEx has a numeric field. I want to automatically generate a select tag with the correct option tags from the table.

[LostKobrakai]

You can use Phoenix.HTML.Form — Phoenix.HTML v4.3.0 with the core components input and type „select“

[kip]

Localize web has a form helper for this case. Something like:

<.form :let={f} for={@changeset} action={~p"/addresses"}>
  <label for="address_state">State</label>
    {Localize.HTML.subdivision_select(f, :state, territory: :US, prompt: "Choose a state")}
  <.button>Save</.button>
</.form>

Although note that this will return the subdivision (state for the US) short code. Ie al for Alabama, not 1. You could use the :mapper option to generate integers if thats a firm requirement.

Using localize_web means you can easily select subdivisions for other territories (countries), localize the content to a given language and sort the subdivisions appropriately (different locales sort differently). All of that comes “for free”.

[netoum]

If you are looking for an alternative, Corex Select component let you use either your own list or Localize values instead. Works in Controller and Live View

I used a similar approach for the language switch, Localize is great for getting each language names in each in its own language.

You can find a demo repo here

From Localize

state_items =
  Localize.HTML.Subdivision.subdivision_options(territory: :US)
  |> Enum.map(fn {name, code} -> %{label: name, value: to_string(code)} end)
  |> Corex.List.new()

<.form :let={f} for={@form} action={~p"/addresses"} method="post">
  <.select
    field={f[:state]}
    class="select ui-max-height-sm"
    items={@state_items}
    translation={%Corex.Select.Translation{placeholder: "Choose a state"}}
  >
    <:label>State</:label>
    <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  </.select>
  <.button>Save</.button>
</.form>

From DB

items =
  Repo.all(from s in State, order_by: s.name)
  |> Enum.map(&%{label: &1.name, value: to_string(&1.id)})
  |> Corex.List.new()

<.form :let={f} for={@form} action={~p"/addresses"} method="post">
  <.select
    field={f[:state_id]}
    class="select ui-max-height-2xs"
    items={@items}
    translation={%Corex.Select.Translation{placeholder: "Choose a state"}}
  >
    <:label>State</:label>
    <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  </.select>
  <.button>Save</.button>
</.form>

Hope this helps

[Onor.io]

Thank you for that but the state list was simply an example of what I call a lookup table. But thanks anyway!

[Onor.io]

Thanks for that but the state list was solely intended as an example of the issue I’m trying to solve. Still I might be able to use that stuff to solve the issue I am trying to solve so I greatly appreciate the pointer.