r15-software-dev/scholarships-rs
1
0 Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 20 Wiki Activity

Make number-type inputs properly optional #60

Merged
BobdaFett merged 3 commits from fix/optional-number-inputs into main 2026-02-11 17:18:09 +00:00
Conversation 0 Commits 3 Files Changed 9
+89 -79
3 changed files with 89 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e1de6064d9 - Show all commits

No files matched your search

src/common/value_type.rs
+1 -1
View File
@@ -13,7 +13,7 @@ use std::fmt::Display;
pub enum ValueType {
/// Indicates a `String` value.
String(Option<String>),
/// Indicates an `i32` value.
/// Indicates an `i32` value. /// Indicates an `f32` value.
Number(Option<String>),
/// Indicates a `Vec<T>`, where `T` can be any other `ValueType`.
List(Option<Vec<ValueType>>),
src/components/text_field.rs
+36 -30
View File
@@ -2,6 +2,7 @@ use crate::common::ValueType;
use leptos::prelude::*;
use std::collections::HashMap;
use leptos::html::Input;
use leptos::logging::debug_log;
use crate::components::{use_validation_context, InputState};
use crate::components::validated_form::ValidationState;
@@ -66,7 +67,7 @@ fn validate_number(input: &str) -> ValidationState {
#[component]
pub fn OutlinedTextField(
#[prop(optional, into)] placeholder: String,
#[prop(into)] data_member: String, // should this be an RwSignal??
#[prop(into)] data_member: String,
#[prop()] data_map: RwSignal<HashMap<String, ValueType>>,
#[prop(optional, into)] input_type: Signal<TextFieldType>,
#[prop(optional, into)] disabled: Signal<bool>,
@@ -75,30 +76,28 @@ pub fn OutlinedTextField(
#[prop(optional, into)] required: Signal<bool>
) -> impl IntoView {
let input_ref = NodeRef::<Input>::new();
let data_member = StoredValue::new(data_member);
// Register this input's validation signal.
let validator_context = use_validation_context()
.expect("FormValidSignal was not found");
let raw_value = Signal::derive({
let data_member = data_member.clone();
move ||
data_map
.get()
.get(&data_member)
.unwrap_or(&ValueType::String(None))
.to_string()
});
let display_value = RwSignal::new(
data_map.get_untracked()
.get(&data_member.get_value())
.map(|v| v.to_string())
.unwrap_or_default()
);
let dirty = RwSignal::new(false);
let error = Signal::derive(move ||
validate(required.get(), &raw_value.get(), &input_type.get())
validate(required.get(), &display_value.get(), &input_type.get())
);
let show_errors = Signal::derive(move || {
dirty.get() && matches!(error.get(), ValidationState::Invalid(_))
});
let validator = RwSignal::new(InputState::new(data_member.clone(), error.clone(), dirty.clone()));
let validator = RwSignal::new(InputState::new(data_member.get_value(), error.clone(), dirty.clone()));
validator_context.validators.update(|list| list.push(validator));
@@ -108,35 +107,42 @@ pub fn OutlinedTextField(
});
});
let str_type = Signal::derive(move || match input_type.get_untracked() {
TextFieldType::Number => "number",
_ => "text" // This is fine even for emails, as we're doing our own validation.
});
let on_blur = move |_| {
// Check validity of input's current value. The value will be updated by on_input,
// and it should be a raw input (not parsed into a ValueType).
dirty.set(true);
};
// Syncs data from the map into the display_value, only when the map is actually changed.
Effect::new(move || {
let new_value = data_map.get()
.get(&data_member.get_value())
.map(|v| v.to_string())
.unwrap_or_default();
if new_value != display_value.get_untracked() {
debug_log!("Found value from map: {}", new_value);
display_value.set(new_value);
}
});
// This function parses the input into the correct type. It only accepts numbers or strings as
// valid types, and parses them accordingly.
let on_input = {
let data_member = data_member.clone();
move |e| {
let to_parse = event_target_value(&e);
let on_input = move |e| {
let to_parse = event_target_value(&e);
debug_log!("Setting value to display_value: {}", to_parse);
display_value.set(to_parse.clone());
// Push the new value to the data map. This happens regardless of whether the value parses
// or not.
data_map.update(|map| {
let into_map = match input_type.get() {
TextFieldType::Number => ValueType::Number(Some(to_parse)),
_ => ValueType::String(Some(to_parse))
};
// Edit the data map. Note that this should be uncoupled in the future - we don't want
// to update the map inside the component definition, but inside the page/form that
// created this input.
data_map.update(|map| {
map.insert(data_member.clone(), into_map);
});
}
map.insert(data_member.get_value(), into_map);
});
};
view! {
@@ -149,11 +155,11 @@ pub fn OutlinedTextField(
transition-all duration-150
border-red-700 bg-transparent
disabled:border-gray-600 disabled:pointer-events-none disabled:bg-gray-600/33"
r#type=str_type
r#type="text"
disabled=disabled
placeholder=placeholder
prop:name=name
prop:value=raw_value
prop:value=display_value
on:input=on_input
on:blur=on_blur
/>
src/pages/student/academics_page.rs
+52 -48
View File
@@ -7,53 +7,57 @@ pub fn StudentAcademicsPage() -> impl IntoView {
let controller = use_student_form("academics");
view! {
<Show when=move || controller.data_resource.get().is_some() fallback=Loading>
<div class="flex flex-1" />
<div class="flex flex-col flex-2 mt-6">
<ValidatedForm title="Academic Information" on_submit=controller.submit_action>
<OutlinedTextField
label="Unweighted GPA:"
data_map=controller.data_map
data_member="unweighted_gpa"
placeholder="4.0"
required=true
input_type=TextFieldType::Number
/>
<OutlinedTextField
label="Weighted GPA:"
data_map=controller.data_map
data_member="weighted_gpa"
placeholder="4.5"
required=true
input_type=TextFieldType::Number
/>
<OutlinedTextField
label="Highest SAT Score:"
data_map=controller.data_map
data_member="sat_score"
placeholder="1600"
required=false
input_type=TextFieldType::Number
/>
<OutlinedTextField
label="Highest ACT Score:"
data_map=controller.data_map
data_member="act_score"
placeholder="36"
required=false
input_type=TextFieldType::Number
/>
<OutlinedTextField
label="Academic Honors:"
data_map=controller.data_map
data_member="academic_honors"
placeholder="TBD"
required=false
input_type=TextFieldType::Text
/>
</ValidatedForm>
</div>
<div class="flex flex-1" />
</Show>
<Suspense fallback=Loading>
{move || controller.data_resource.get().map(|_|
view! {
<div class="flex flex-1" />
<div class="flex flex-col flex-2 mt-6">
<ValidatedForm title="Academic Information" on_submit=controller.submit_action>
<OutlinedTextField
label="Unweighted GPA:"
data_map=controller.data_map
data_member="unweighted_gpa"
placeholder="4.0"
required=true
input_type=TextFieldType::Number
/>
<OutlinedTextField
label="Weighted GPA:"
data_map=controller.data_map
data_member="weighted_gpa"
placeholder="4.5"
required=true
input_type=TextFieldType::Number
/>
<OutlinedTextField
label="Highest SAT Score:"
data_map=controller.data_map
data_member="sat_score"
placeholder="1600"
required=false
input_type=TextFieldType::Number
/>
<OutlinedTextField
label="Highest ACT Score:"
data_map=controller.data_map
data_member="act_score"
placeholder="36"
required=false
input_type=TextFieldType::Number
/>
<OutlinedTextField
label="Academic Honors:"
data_map=controller.data_map
data_member="academic_honors"
placeholder="TBD"
required=false
input_type=TextFieldType::Text
/>
</ValidatedForm>
</div>
<div class="flex flex-1" />
}).collect_view()
}
</Suspense>
}
}