input with error (#1399)

levkk · web-flow · commit 0a01cc2ad48a · 2024-04-09T13:34:10.000-07:00
diff --git a/pgml-dashboard/src/components/inputs/text/input/input.scss b/pgml-dashboard/src/components/inputs/text/input/input.scss
@@ -1,7 +1,13 @@
 div[data-controller="inputs-text-input"] {
+    --bs-danger: #{$peach-shade-100};
+
     span.material-symbols-outlined {
         margin-left: -40px;
         color: #{$slate-shade-100};
+
+        &.is-invalid {
+            color: var(--bs-danger);
+        }
     }
 
     input.form-control {
@@ -12,4 +18,10 @@ div[data-controller="inputs-text-input"] {
     label.form-label {
         font-weight: #{$font-weight-normal};
     }
+
+    p {
+        small {
+            color: var(--bs-danger);
+        }
+    }
 }
diff --git a/pgml-dashboard/src/components/inputs/text/input/mod.rs b/pgml-dashboard/src/components/inputs/text/input/mod.rs
@@ -16,6 +16,7 @@ pub struct Input {
     autocomplete: bool,
     value: String,
     required: bool,
+    error: Option<String>,
 }
 
 impl Input {
@@ -38,6 +39,7 @@ impl Input {
             autocomplete: false,
             value: "".to_string(),
             required: false,
+            error: None,
         }
     }
 
@@ -90,6 +92,11 @@ impl Input {
         self.required = true;
         self
     }
+
+    pub fn error(mut self, error: Option<impl ToString>) -> Self {
+        self.error = error.map(|e| e.to_string());
+        self
+    }
 }
 
 component!(Input);
diff --git a/pgml-dashboard/src/components/inputs/text/input/template.html b/pgml-dashboard/src/components/inputs/text/input/template.html
@@ -1,3 +1,9 @@
+<% let (input_classes, icon_classes) = if error.is_some() {
+  ("form-control is-invalid", "material-symbols-outlined is-invalid")
+} else {
+  ("form-control", "material-symbols-outlined")
+};
+%>
 <div data-controller="inputs-text-input">
   <% if let Some(label) = label { %>
     <label class="form-label" for="<%= id %>"><%+ label %></label>
@@ -8,7 +14,7 @@
       id="<%= id %>"
       type="<%= type_ %>"
       name="<%= name %>"
-      class="form-control"
+      class="<%= input_classes %>"
       placeholder="<%= placeholder %>"
       data-action="<%= input_actions %>"
       autocomplete="<%= autocomplete %>"
@@ -20,10 +26,15 @@
 
     <% if let Some(icon) = icon { %>
       <span
-        class="material-symbols-outlined"
+        class="<%= icon_classes %>"
         data-action="<%= icon_actions %>">
         <%= icon %>
       </span>
     <% } %>
   </div>
+  <% if let Some(error) = error { %>
+  <p class="mt-1 mb-0">
+    <small><%= error %></small>
+  </p>
+  <% } %>
 </div>
diff --git a/pgml-dashboard/src/components/pages/demo/template.html b/pgml-dashboard/src/components/pages/demo/template.html
@@ -58,6 +58,16 @@
       .type_("text") %>
   </div>
 
+  <div class="py-5">
+    <%+ Input::new()
+      .label("What is your name?".into())
+      .icon("person")
+      .placeholder("Enter your name")
+      .name("name")
+      .type_("text")
+      .error(Some("Your name is not valid.")) %>
+  </div>
+
   <div class="py-5">
     <%+ Search::new(SearchOptions {
       name: "Model search".into(),

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@ pub struct Input {`
`16`	`16`	`autocomplete: bool,`
`17`	`17`	`value: String,`
`18`	`18`	`required: bool,`
	`19`	`+ error: Option<String>,`
`19`	`20`	`}`
`20`	`21`
`21`	`22`	`impl Input {`
`@@ -38,6 +39,7 @@ impl Input {`
`38`	`39`	`autocomplete: false,`
`39`	`40`	`value: "".to_string(),`
`40`	`41`	`required: false,`
	`42`	`+ error: None,`
`41`	`43`	`}`
`42`	`44`	`}`
`43`	`45`
`@@ -90,6 +92,11 @@ impl Input {`
`90`	`92`	`self.required = true;`
`91`	`93`	`self`
`92`	`94`	`}`
	`95`	`+`
	`96`	`+ pub fn error(mut self, error: Option<impl ToString>) -> Self {`
	`97`	`+ self.error = error.map(\|e\| e.to_string());`
	`98`	`+ self`
	`99`	`+ }`
`93`	`100`	`}`
`94`	`101`
`95`	`102`	`component!(Input);`