feat(form): Provide basic form framework

1 files changed, 26 insertions, 30 deletions

diff --git a/src/components/buy.rs b/src/components/buy.rs
index 86e9952..0c294ee 100644
--- a/src/components/buy.rs
+++ b/src/components/buy.rs
@@ -1,38 +1,34 @@
-use leptos::{
-    IntoView, component,
-    html::Input,
-    prelude::{ClassAttribute, ElementChild, Get, NodeRef, OnAttribute, Set, signal},
-    view,
-    web_sys::SubmitEvent,
-};
+use leptos::{IntoView, component, view};
+use log::info;
 
-use crate::components::{input_placeholder::InputPlaceholder, site_header::SiteHeader};
+use crate::components::{form::Form, input_placeholder::InputPlaceholder, site_header::SiteHeader};
 
 #[component]
 pub fn Buy() -> impl IntoView {
-    let (product_barcode, set_product_barcode) = signal(String::new());
-
-    let input_element: NodeRef<Input> = NodeRef::new();
-
-    let on_submit = move |ev: SubmitEvent| {
-        // stop the page from reloading!
-        ev.prevent_default();
-
-        let value = input_element
-            .get()
-            // event handlers can only fire after the view
-            // is mounted to the DOM, so the `NodeRef` will be `Some`
-            .expect("<input> to exist")
-            .value();
-        set_product_barcode.set(value);
-    };
-
     view! {
         <SiteHeader logo=icondata_io::IoPricetag back_location="/" name="Buy" />
-        <form class="flex flex-col contents-start m-2 g-2" on:submit=on_submit>
-            <InputPlaceholder input_type="number" label="Product Barcode" node_ref=input_element />
-            <input type="submit" value="Submit" />
-        </form>
-        <p>"Name is: " {product_barcode}</p>
+
+        {Form! {
+            on_submit = |Inputs {product_barcode, amount}| {
+                info!("Got product barcode: {product_barcode} with amount: {amount}");
+            }
+
+            <Input
+                name=product_barcode,
+                signal_name_get=product_barcode_get,
+                signal_name_set=product_barcode_set,
+                rust_type=u32,
+                html_type="number",
+                label="Product Barcode"
+            />
+            <Input
+                name=amount,
+                signal_name_get=amount_get,
+                signal_name_set=amount_set,
+                rust_type=u16,
+                html_type="number",
+                label="Amount"
+            />
+        }}
     }
 }