feat: added simple version of validation errors

coingaming · Nov 8, 2021 · 0deb8cc · 0deb8cc
1 parent dc51731
commit 0deb8cc
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 17 deletions.
diff --git a/lib/moon/components/error_tag.ex b/lib/moon/components/error_tag.ex
@@ -0,0 +1,15 @@
+defmodule Moon.Components.ErrorTag do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  prop(field, :any)
+
+  def render(assigns) do
+    ~F"""
+    <Surface.Components.Form.ErrorTag
+      field={@field && String.to_atom("#{@field}")}
+    />
+    """
+  end
+end
diff --git a/lib/moon/components/select.ex b/lib/moon/components/select.ex
@@ -4,6 +4,7 @@ defmodule Moon.Components.Select do
   use Moon.StatelessComponent
 
   alias Moon.Components.Label
+  alias Moon.Components.ErrorTag
 
   prop field, :any
   prop label, :string
@@ -34,15 +35,17 @@ defmodule Moon.Components.Select do
     select = ~F"""
     <Surface.Components.Form.Select
       class={
-        "text-trunks-100 pr-3.5 rounded-md bg-no-repeat bg-goku-100 hover:bg-goku-120
+        "text-trunks-100 pr-3.5 rounded bg-no-repeat bg-goku-100 hover:bg-goku-120
                hover:cursor-pointer focus:cursor-pointer border border-solid
-               border-beerus-100 focus:text-bulma-100 disabled:cursor-not-allowed focus:border-piccolo-120 focus:outline-none #{@class}",
-        rounded: @rounded
+               border-beerus-100 focus:text-bulma-100 disabled:cursor-not-allowed focus:border-piccolo-120 focus:outline-none",
+        rounded: @rounded,
+        "#{@class}": true
       }
       field={String.to_atom("#{@field}")}
       options={options_with_selected}
       opts={[prompt: @prompt]}
     />
+    <ErrorTag field={@field} />
     """
 
     ~F"""

diff --git a/lib/moon/components/text_input.ex b/lib/moon/components/text_input.ex
@@ -3,6 +3,7 @@ defmodule Moon.Components.TextInput do
 
   use Moon.StatelessComponent
   alias Moon.Components.Label
+  alias Moon.Components.ErrorTag
 
   prop field, :any
   prop label, :string
@@ -30,8 +31,8 @@ defmodule Moon.Components.TextInput do
   prop disabled, :boolean
   prop required, :boolean
   prop class, :string
-  prop on_focus, :event
-  prop on_blur, :event
+  prop focus, :event
+  prop blur, :event
   prop without_design, :boolean
   prop background_color, :string, values: Moon.colors(), default: "goku-100"
   prop size, :string, values: ["medium", "large"], default: "large"
@@ -68,17 +69,18 @@ defmodule Moon.Components.TextInput do
           "#{@class}": true,
           "bg-#{@background_color}": true
         }
-        field={String.to_atom("#{@field}")}
+        field={@field && String.to_atom("#{@field}")}
         opts={
           placeholder: @placeholder,
           disabled: @disabled,
           required: @required,
           type: @type
         }
         value={@value}
-        focus={@on_focus}
-        blur={@on_blur}
+        focus={@focus}
+        blur={@blur}
       />
+      <ErrorTag field={@field} />
     </div>
     """
 

diff --git a/lib/moon_web/pages/example_pages/shared/top_menu/search.ex b/lib/moon_web/pages/example_pages/shared/top_menu/search.ex
@@ -28,7 +28,7 @@ defmodule MoonWeb.Pages.ExamplePages.Shared.TopMenu.Search do
           placeholder="Search for dashboard, segments and more"
           field={:search_text}
           value={@search_map.search_text}
-          on_focus="activate_search"
+          focus="activate_search"
           class="bg-goku-100 h-10 border-transparent"
         >
           <:left_icon><IconZoom /></:left_icon>

diff --git a/lib/moon_web/pages/tutorials/add_data_using_form.ex b/lib/moon_web/pages/tutorials/add_data_using_form.ex
@@ -84,12 +84,28 @@ defmodule MoonWeb.Pages.Tutorials.AddDataUsingForm do
       <ExampleAndCode id="add_data_using_form_1">
         <:example>
           <ToastStack id="toast-stack-messages" />
+
           <Form for={@user_changeset} change="update_user" submit="save_user" autocomplete="off">
             <TopToDown>
-              <TextInput label="Name" field="name" />
-              <TextInput label="Email" field="email" />
-              <Select label="Gender" field="gender" options={@gender_options} prompt="Please select gender" />
-              <FileInput conf={@uploads.file} label="Upload your ID" placeholder="Choose a document..." />
+              <TextInput
+                label="Name"
+                field="name"
+              />
+              <TextInput
+                label="Email"
+                field="email"
+              />
+              <Select
+                label="Gender"
+                field="gender"
+                options={@gender_options}
+                prompt="Please select gender"
+              />
+              <FileInput
+                conf={@uploads.file}
+                label="Upload your ID"
+                placeholder="Choose a document..."
+              />
               <Button variant="fill" type="submit" full_width>Save</Button>
               <Button variant="outline" on_click="clear_form">Cancel</Button>
             </TopToDown>

diff --git a/lib/moon_web/pages/tutorials/add_data_using_form/user.ex b/lib/moon_web/pages/tutorials/add_data_using_form/user.ex
@@ -10,10 +10,10 @@ defmodule MoonWeb.Pages.Tutorials.AddDataUsingForm.User do
   @optional_fields ~w(document_filename)a
 
   schema "users" do
-    field(:name)
-    field(:email)
-    field(:gender)
-    field(:document_filename)
+    field(:name, :string)
+    field(:email, :string)
+    field(:gender, :string)
+    field(:document_filename, :string)
   end
 
   def changeset(user = %User{}, params \\ %{}) do