Added number textfield

src/components/mod.rs

@@ -14,4 +14,5 @@ pub mod nav_bar;
 pub mod new_widget;
 pub mod project_card;
 pub mod textfield;
-pub mod single_media_picker;
+pub mod single_media_picker;
+pub mod number_textfield;

src/components/number_textfield.rs

@@ -0,0 +1,49 @@
+
+use wasm_bindgen::{JsCast, UnwrapThrowExt};
+use web_sys::{HtmlInputElement};
+use yew::prelude::*;
+use std::{str::FromStr, num::ParseFloatError};
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct NumberTextFieldProps {
+    pub label: String,
+    pub value: UseStateHandle<f64>,
+    #[prop_or_default]
+    pub required: bool,
+    pub onchange: Option<Callback<f64>>,
+}
+
+
+#[function_component(NumberTextField)]
+pub fn number_textfield(props: &NumberTextFieldProps) -> Html {
+    let on_input_changed = {
+        let handle = props.value.clone();
+        let onchange = props.onchange.clone();
+        Callback::from(move |e: InputEvent| {
+                let value = match get_number_value_from_input_event(e) {
+                    Ok(float) => float,
+                    Err(error) => {
+                        log::error!("Error ocurred attempting to parse float on input type number. This only happens in firefox browsers. {error}");
+                        0.0
+                    }};
+                match onchange.clone() {
+                    Some(onchange) => onchange.emit(value),
+                    None => {}
+                };
+                handle.set(value);
+            })
+    };
+    html! {
+        <div class={"textfield-container"}>
+            <div class={if props.required {"textfield-label-required"} else {"textfield-label"}}>{props.label.clone()}</div>
+            <input class={"textfield"} type={"number"} step={"any"} oninput={on_input_changed} value={(*props.value).clone().to_string()} pattern={r"\d*"}/>
+        </div>
+    }
+}
+
+pub fn get_number_value_from_input_event(e: InputEvent) -> Result<f64, ParseFloatError> {
+    let event: Event = e.dyn_into().unwrap_throw();
+    let event_target = event.target().unwrap_throw();
+    let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
+    f64::from_str(&target.value())
+}

src/pages/admin/fields/unit.rs

@@ -3,7 +3,7 @@ use uuid::Uuid;
 use yew::prelude::*;
 use yew_router::prelude::use_navigator;
 
-use crate::pages::admin::edit::EditType;
+use crate::{pages::admin::edit::EditType, components::number_textfield::NumberTextField};
 
 #[derive(Properties, PartialEq, Clone)]
 pub struct UnitFieldsProps {
@@ -17,7 +17,9 @@ pub fn unit_fields(props: &UnitFieldsProps) -> Html {
     let navigator = use_navigator().unwrap();
     let user_typed = use_state(|| false);
 
+    // Fields
+    let price_usd = use_state(|| 0.0);
     html! {
-
+        <NumberTextField label={String::from("Precio en USD")} required={true} value={price_usd.clone()}/>
     }
 }