Add fieldset radio button example for Ecto.Enum field

Author: codeanpeace

lib/live_cal/scheduling/event.ex

@@ -6,6 +6,7 @@ defmodule LiveCal.Scheduling.Event do
     field :destination, :string
     field :name, :string
     field :type, :string
+    field :show_as, Ecto.Enum, values: [:free, :busy, :tbd], default: :busy
 
     belongs_to :calendar, LiveCal.Scheduling.Calendar
 
@@ -15,7 +16,7 @@ defmodule LiveCal.Scheduling.Event do
   @doc false
   def changeset(event, attrs) do
     event
-    |> cast(attrs, [:name, :type, :destination])
-    |> validate_required([:name, :type, :destination])
+    |> cast(attrs, [:name, :type, :destination, :show_as])
+    |> validate_required([:name, :type, :destination, :show_as])
   end
 end

lib/live_cal_web/components/core_components.ex

@@ -346,6 +346,24 @@ defmodule LiveCalWeb.CoreComponents do
     """
   end
 
+  def input(%{type: "radio"} = assigns) do
+    ~H"""
+    <div phx-feedback-for={@name}>
+      <.label for={@id}><%= @label %></.label>
+      <input
+        type="radio"
+        id={@id}
+        name={@name}
+        value={@value}
+        checked={@checked}
+        class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
+        {@rest}
+      />
+      <.error :for={msg <- @errors}><%= msg %></.error>
+    </div>
+    """
+  end
+
   # All other inputs text, datetime-local, url, password, etc. are handled here...
   def input(assigns) do
     ~H"""

lib/live_cal_web/live/calendar_live/form_component.ex

@@ -28,6 +28,31 @@ defmodule LiveCalWeb.CalendarLive.FormComponent do
           <.input type="text" field={ef[:name]} placeholder="name" />
           <.input type="select" field={ef[:type]} options={["-- select type --", "field trip"]} placeholder="type" />
           <.input :if={ef.params["type"] in ["field trip"]} type="text" field={ef[:destination]} placeholder="destination" />
+
+          <fieldset>
+            <.input field={ef[:show_as]}
+              id="show_as_busy"
+              type="radio"
+              label="Busy"
+              value="busy"
+              checked={(ef[:show_as].value == :busy) || (ef.params["show_as"] == "busy")}
+            />
+            <.input field={ef[:show_as]}
+              id="show_as_free"
+              type="radio"
+              label="Free"
+              value="free"
+              checked={(ef[:show_as].value == :free) || (ef.params["show_as"] == "free")}
+            />
+            <.input field={ef[:show_as]}
+              id="show_as_tbd"
+              type="radio"
+              label="Tbd"
+              value="tbd"
+              checked={(ef[:show_as].value == :tbd) || (ef.params["show_as"] == "tbd")}
+            />
+          </fieldset>
+
           <label>
             <input type="checkbox" name="calendar[events_drop][]" value={ef.index} class="hidden" />
             delete event

priv/repo/migrations/20230614220318_create_events.exs

@@ -6,6 +6,7 @@ defmodule LiveCal.Repo.Migrations.CreateEvents do
       add :name, :string
       add :type, :string
       add :destination, :string
+      add :show_as, :string
       add :calendar_id, references(:calendars, on_delete: :nothing)
 
       timestamps()