Enable optional form fields (#193)

* Enable optional form fields

* Suffix optional text and email component labels

* Update gettext files

Author: raulrpearson

assets/css/app.css

@@ -4,6 +4,11 @@
 @import 'tailwindcss';
 @import './theme.css' layer(theme);
 
+@plugin "daisyui" {
+  themes: light --default;
+  include: toggle;
+}
+
 @layer base {
   *,
   ::after,

lib/claper/forms/field.ex

@@ -4,19 +4,21 @@ defmodule Claper.Forms.Field do
 
   @type t :: %__MODULE__{
           name: String.t(),
-          type: String.t()
+          type: String.t(),
+          required: boolean()
         }
 
   @primary_key false
   embedded_schema do
     field :name, :string
     field :type, :string
+    field :required, :boolean, default: true
   end
 
   @doc false
   def changeset(form, attrs \\ %{}) do
     form
-    |> cast(attrs, [:name, :type])
+    |> cast(attrs, [:name, :type, :required])
     |> validate_required([:name, :type])
   end
 end

lib/claper/forms/form_submit.ex

@@ -25,6 +25,6 @@ defmodule Claper.Forms.FormSubmit do
   def changeset(form_submit, attrs) do
     form_submit
     |> cast(attrs, [:attendee_identifier, :user_id, :form_id, :response])
-    |> validate_required([:form_id])
+    |> validate_required([:form_id, :user_id, :response])
   end
 end

lib/claper_web/live/event_live/form_component.ex

@@ -63,7 +63,7 @@ defmodule ClaperWeb.EventLive.FormComponent do
                       fieldClass="bg-gray-700 text-white"
                       key={String.to_atom(field.name)}
                       name={field.name}
-                      required="true"
+                      required={field.required}
                       value={
                         if is_nil(assigns.current_form_submit),
                           do: ~c"",
@@ -77,7 +77,7 @@ defmodule ClaperWeb.EventLive.FormComponent do
                       fieldClass="bg-gray-700 text-white"
                       key={String.to_atom(field.name)}
                       name={field.name}
-                      required="true"
+                      required={field.required}
                       value={
                         if is_nil(assigns.current_form_submit),
                           do: ~c"",

lib/claper_web/live/form_live/form_component.html.heex

@@ -34,6 +34,7 @@
             name={gettext("Type")}
             required="true"
           />
+          <ClaperWeb.Component.Input.toggle form={i} key={:required} label={gettext("Required")} />
         </div>
         <%= if i.index >= 1 do %>
           <button

lib/claper_web/views/components/input_component.ex

@@ -3,6 +3,7 @@ defmodule ClaperWeb.Component.Input do
     Input component for forms
   """
   use ClaperWeb, :view_component
+  use Gettext, backend: ClaperWeb.Gettext
 
   def text(assigns) do
     assigns =
@@ -11,6 +12,10 @@ defmodule ClaperWeb.Component.Input do
       |> assign_new(:autofocus, fn -> false end)
       |> assign_new(:placeholder, fn -> false end)
       |> assign_new(:readonly, fn -> false end)
+      |> assign_new(:label, fn
+        %{required: false, name: name} -> ~s/#{name} #{gettext("(optional)")}/
+        %{name: name} -> name
+      end)
       |> assign_new(:labelClass, fn -> "text-gray-700" end)
       |> assign_new(:fieldClass, fn -> "bg-white" end)
       |> assign_new(:value, fn -> input_value(assigns.form, assigns.key) end)
@@ -19,7 +24,7 @@ defmodule ClaperWeb.Component.Input do
 
     ~H"""
     <div class="relative">
-      {label(@form, @key, @name, class: "block text-sm font-medium #{@labelClass}")}
+      {label(@form, @key, @label, class: "block text-sm font-medium #{@labelClass}")}
       <div class="mt-1">
         {text_input(@form, @key,
           required: @required,
@@ -103,6 +108,23 @@ defmodule ClaperWeb.Component.Input do
     """
   end
 
+  attr :form, Phoenix.HTML.Form, required: true
+  attr :key, :atom, required: true
+  attr :label, :string, default: nil
+  attr :labelClass, :string, default: nil
+
+  def toggle(assigns) do
+    ~H"""
+    <div>
+      {@label &&
+        PhoenixHTMLHelpers.Form.label(@form, @key, @label,
+          class: ["block text-sm font-medium", @labelClass || "text-gray-700"]
+        )}
+      {PhoenixHTMLHelpers.Form.checkbox(@form, @key, class: "toggle")}
+    </div>
+    """
+  end
+
   def check(assigns) do
     assigns =
       assigns
@@ -269,13 +291,17 @@ defmodule ClaperWeb.Component.Input do
       |> assign_new(:autofocus, fn -> false end)
       |> assign_new(:readonly, fn -> false end)
       |> assign_new(:placeholder, fn -> false end)
+      |> assign_new(:label, fn
+        %{required: false, name: name} -> ~s/#{name} #{gettext("(optional)")}/
+        %{name: name} -> name
+      end)
       |> assign_new(:labelClass, fn -> "text-gray-700" end)
       |> assign_new(:fieldClass, fn -> "bg-white" end)
       |> assign_new(:value, fn -> input_value(assigns.form, assigns.key) end)
 
     ~H"""
     <div class="relative" x-data={"{input: '#{assigns.value}'}"}>
-      {label(@form, @key, @name, class: "block text-sm font-medium #{@labelClass}")}
+      {label(@form, @key, @label, class: "block text-sm font-medium #{@labelClass}")}
       <div class="mt-1">
         {email_input(@form, @key,
           required: @required,