Merge pull request #1472 from nolman/email-field

Add `Backpex.Fields.Email`

Author: Flo0807

guides/fields/index-edit.md

@@ -26,10 +26,11 @@ The example above will enable index editable for the `name` text field.
 - `Backpex.Fields.BelongsTo`
 - `Backpex.Fields.Date`
 - `Backpex.Fields.DateTime`
+- `Backpex.Fields.Email`
 - `Backpex.Fields.Number`
 - `Backpex.Fields.Select`
 - `Backpex.Fields.Text`
 
 ## Custom index editable implementation
 
-You can add index editable support to your custom fields by defining the [render_index_form/1](Backpex.Field.html#c:render_index_form/1) function and enabling index editable for your field.
+You can add index editable support to your custom fields by defining the [render_index_form/1](Backpex.Field.html#c:render_index_form/1) function and enabling index editable for your field.

guides/fields/what-is-a-field.md

@@ -13,6 +13,7 @@ Backpex provides the following built-in field types:
 - `Backpex.Fields.Currency`
 - `Backpex.Fields.DateTime`
 - `Backpex.Fields.Date`
+- `Backpex.Fields.Email`
 - `Backpex.Fields.HasManyThrough`
 - `Backpex.Fields.HasMany`
 - `Backpex.Fields.InlineCRUD`

lib/backpex/fields/email.ex

@@ -0,0 +1,96 @@
+defmodule Backpex.Fields.Email do
+  @config_schema [
+    placeholder: [
+      doc: "Placeholder value or function that receives the assigns.",
+      type: {:or, [:string, {:fun, 1}]}
+    ],
+    debounce: [
+      doc: "Timeout value (in milliseconds), \"blur\" or function that receives the assigns.",
+      type: {:or, [:pos_integer, :string, {:fun, 1}]}
+    ],
+    throttle: [
+      doc: "Timeout value (in milliseconds) or function that receives the assigns.",
+      type: {:or, [:pos_integer, {:fun, 1}]}
+    ],
+    readonly: [
+      doc: "Sets the field to readonly. Also see the [panels](/guides/fields/readonly.md) guide.",
+      type: {:or, [:boolean, {:fun, 1}]}
+    ]
+  ]
+
+  @moduledoc """
+  A field for handling an email value.
+
+  ## Field-specific options
+
+  See `Backpex.Field` for general field options.
+
+  #{NimbleOptions.docs(@config_schema)}
+  """
+  use Backpex.Field, config_schema: @config_schema
+
+  @impl Backpex.Field
+  def render_value(assigns) do
+    ~H"""
+    <p class={@live_action in [:index, :resource_action] && "truncate"}>
+      {HTML.pretty_value(@value)}
+    </p>
+    """
+  end
+
+  @impl Backpex.Field
+  def render_form(assigns) do
+    ~H"""
+    <div>
+      <Layout.field_container>
+        <:label align={Backpex.Field.align_label(@field_options, assigns, :center)}>
+          <Layout.input_label text={@field_options[:label]} />
+        </:label>
+        <BackpexForm.input
+          type="email"
+          field={@form[@name]}
+          placeholder={@field_options[:placeholder]}
+          translate_error_fun={Backpex.Field.translate_error_fun(@field_options, assigns)}
+          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)}
+          readonly={@readonly}
+          disabled={@readonly}
+        />
+      </Layout.field_container>
+    </div>
+    """
+  end
+
+  @impl Backpex.Field
+  def render_index_form(assigns) do
+    form = to_form(%{"value" => assigns.value}, as: :index_form)
+
+    assigns =
+      assigns
+      |> assign_new(:form, fn -> form end)
+      |> assign_new(:valid, fn -> true end)
+
+    ~H"""
+    <div>
+      <.form for={@form} class="relative" phx-change="update-field" phx-submit="update-field" phx-target={@myself}>
+        <BackpexForm.input
+          id={"index-form-input-#{@name}-#{LiveResource.primary_value(@item, @live_resource)}"}
+          type="email"
+          field={@form[:value]}
+          placeholder={@field_options[:placeholder]}
+          input_class={["input input-sm", @valid && "not-hover:input-ghost", !@valid && "input-error bg-error/10"]}
+          phx-debounce="100"
+          readonly={@readonly}
+          hide_errors
+        />
+      </.form>
+    </div>
+    """
+  end
+
+  @impl Phoenix.LiveComponent
+  def handle_event("update-field", %{"index_form" => %{"value" => value}}, socket) do
+    Backpex.Field.handle_index_editable(socket, value, Map.put(%{}, socket.assigns.name, value))
+  end
+end