Merge pull request #1621 from gmazzamuto/inline-crud-all-fields

Add support for most field types in `Backpex.Fields.InlineCRUD`

Author: Flo0807

demo/lib/demo/ecto_factory.ex

@@ -51,7 +51,11 @@ defmodule Demo.EctoFactory do
   def supplier_factory do
     %Supplier{
       name: Faker.Company.name(),
-      url: "https://example.com/"
+      url: "https://example.com/",
+      country: Enum.random(Supplier.countries()),
+      contract_date: Faker.Date.backward(365 * 3),
+      minimum_order: Enum.random([100_000, 200_000, 300_000, 400_000, 500_000]),
+      preferred: boolean()
     }
   end
 

demo/lib/demo/supplier.ex

@@ -6,20 +6,29 @@ defmodule Demo.Supplier do
 
   @primary_key {:id, :binary_id, autogenerate: true}
 
+  @countries ["Austria", "France", "Germany", "Italy", "Spain", "Switzerland"]
+
+  def countries, do: @countries
+
   schema "suppliers" do
     field :name, :string
     field :url, :string
+    field :country, Ecto.Enum, values: Enum.map(@countries, &String.to_atom/1)
+    field :contract_date, :date
+    field :minimum_order, Money.Ecto.Amount.Type
+    field :preferred, :boolean, default: false
 
     belongs_to :product, Demo.Product, type: :binary_id
 
     timestamps()
   end
 
   @required_fields ~w[name url]a
+  @optional_fields ~w[country contract_date minimum_order preferred]a
 
   def changeset(supplier, attrs) do
     supplier
-    |> cast(attrs, @required_fields)
+    |> cast(attrs, @required_fields ++ @optional_fields)
     |> validate_required(@required_fields)
   end
 end

demo/lib/demo_web/live/product_live.ex

@@ -96,8 +96,26 @@ defmodule DemoWeb.ProductLive do
             label: "Name"
           },
           url: %{
-            module: Backpex.Fields.Text,
+            module: Backpex.Fields.URL,
             label: "URL"
+          },
+          country: %{
+            module: Backpex.Fields.Select,
+            label: "Country",
+            prompt: "—",
+            options: Demo.Supplier.countries()
+          },
+          contract_date: %{
+            module: Backpex.Fields.Date,
+            label: "Contract Date"
+          },
+          minimum_order: %{
+            module: Backpex.Fields.Currency,
+            label: "Minimum Order"
+          },
+          preferred: %{
+            module: Backpex.Fields.Boolean,
+            label: "Preferred"
           }
         ]
       },

demo/priv/repo/migrations/20251020222823_add_extra_suppliers_fields.exs

@@ -0,0 +1,12 @@
+defmodule Demo.Repo.Migrations.AddExtraSuppliersFields do
+  use Ecto.Migration
+
+  def change do
+    alter table(:suppliers) do
+      add :country, :string, null: true
+      add :contract_date, :date, null: true
+      add :minimum_order, :integer, default: 0, null: false
+      add :preferred, :boolean, null: true
+    end
+  end
+end

guides/upgrading/v0.17.md

@@ -21,3 +21,9 @@ end
 - `"Toggle menu"`
 
 See the [the backpex.pot file for v0.17.0](https://github.com/naymspace/backpex/blob/0.17.0/priv/gettext/backpex.pot) in our GitHub repository for all available translations to match on.
+
+## Remove `input_type` option for `Backpex.Fields.InlineCRUD`
+
+The `:input_type` option in the child fields of `Backpex.Fields.InlineCRUD` is no longer supported. To update, simply remove that option or you will get a validation error.
+
+With this version of Backpex, `Backpex.Fields.InlineCRUD` supports most field types out of the box.

lib/backpex/field.ex

@@ -11,6 +11,13 @@ defmodule Backpex.Field do
       type: :string,
       required: true
     ],
+    class: [
+      type: {:or, [:string, {:fun, 1}]},
+      doc: """
+      Class or classes to be applied when the field is used as a child field in `Backpex.Fields.InlineCRUD`. The class
+      can be a string or a function that takes the assigns and must return a string.
+      """
+    ],
     help_text: [
       doc: "A text to be displayed below the input on form views.",
       type: {:or, [:string, {:fun, 1}]}

lib/backpex/fields/belongs_to.ex

@@ -135,7 +135,7 @@ defmodule Backpex.Fields.BelongsTo do
     ~H"""
     <div>
       <Layout.field_container>
-        <:label align={Backpex.Field.align_label(@field_options, assigns)}>
+        <:label :if={not @hide_label} align={Backpex.Field.align_label(@field_options, assigns)}>
           <Layout.input_label for={@form[@owner_key]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
@@ -147,6 +147,7 @@ defmodule Backpex.Fields.BelongsTo do
           help_text={Backpex.Field.help_text(@field_options, assigns)}
           phx-debounce={Backpex.Field.debounce(@field_options, assigns)}
           phx-throttle={Backpex.Field.throttle(@field_options, assigns)}
+          aria-labelledby={Map.get(assigns, :aria_labelledby)}
         />
       </Layout.field_container>
     </div>

lib/backpex/fields/boolean.ex

@@ -36,7 +36,7 @@ defmodule Backpex.Fields.Boolean do
     ~H"""
     <div>
       <Layout.field_container>
-        <:label align={Backpex.Field.align_label(@field_options, assigns, :top)}>
+        <:label :if={not @hide_label} align={Backpex.Field.align_label(@field_options, assigns, :top)}>
           <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
@@ -46,6 +46,7 @@ defmodule Backpex.Fields.Boolean do
           help_text={Backpex.Field.help_text(@field_options, assigns)}
           phx-debounce={Backpex.Field.debounce(@field_options, assigns)}
           phx-throttle={Backpex.Field.throttle(@field_options, assigns)}
+          aria-labelledby={Map.get(assigns, :aria_labelledby)}
         />
       </Layout.field_container>
     </div>

lib/backpex/fields/currency.ex

@@ -92,7 +92,7 @@ defmodule Backpex.Fields.Currency do
     ~H"""
     <div>
       <Layout.field_container>
-        <:label align={Backpex.Field.align_label(@field_options, assigns)}>
+        <:label :if={not @hide_label} align={Backpex.Field.align_label(@field_options, assigns)}>
           <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.currency_input
@@ -107,6 +107,7 @@ defmodule Backpex.Fields.Currency do
           unit={@field_options[:unit]}
           unit_position={@field_options[:unit_position]}
           symbol_space={@field_options[:symbol_space]}
+          aria-labelledby={Map.get(assigns, :aria_labelledby)}
         />
       </Layout.field_container>
     </div>

lib/backpex/fields/date.ex

@@ -102,7 +102,7 @@ defmodule Backpex.Fields.Date do
     ~H"""
     <div>
       <Layout.field_container>
-        <:label align={Backpex.Field.align_label(@field_options, assigns, :top)}>
+        <:label :if={not @hide_label} align={Backpex.Field.align_label(@field_options, assigns, :top)}>
           <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
@@ -114,6 +114,7 @@ defmodule Backpex.Fields.Date do
           phx-throttle={Backpex.Field.throttle(@field_options, assigns)}
           readonly={@readonly}
           disabled={@readonly}
+          aria-labelledby={Map.get(assigns, :aria_labelledby)}
         />
       </Layout.field_container>
     </div>