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

feat: add validation in checkbox list

Browse Source
This commit is contained in:
alphafetus committed 2026-01-01 04:02:36 -05:00
1 parent 94c2930d2a
commit f863b4db18
3 files changed
+146 -84
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/checkbox.rs
+105 -46
View File
@@ -2,16 +2,17 @@ use crate::common::ValueType;
use crate::components::utils::create_unique_id;
use leptos::prelude::*;
use std::collections::HashMap;
use crate::components::{FormValidationRegistry, InputState, ValidationState};
#[component]
pub fn Checkbox(
#[prop()] checked: Signal<bool>,
#[prop(into)] on_change: Callback<(), ()>,
#[prop(into)] value: String,
#[prop(into)] value: Signal<String>,
#[prop(into)] name: String,
#[prop(into)] disabled: Signal<bool>,
) -> impl IntoView {
let id = create_unique_id(&name, &value);
let id = create_unique_id(&name, &value.get_untracked());
view! {
<label for=id class="flex items-center">
@@ -42,11 +43,23 @@ pub fn Checkbox(
rotate-45 transform border-b-3 border-r-3
border-white transition-opacity duration-150"></span>
</div>
<span>{value.clone()}</span>
<span>{value}</span>
</label>
}
}
fn value_type_to_vec(value_type: &ValueType) -> Vec<String> {
let ValueType::List(Some(list)) = value_type else {
return Vec::new();
};
list.iter().map(|val| {
val.as_string()
.unwrap_or_default()
.unwrap_or_default()
}).collect::<Vec<String>>()
}
#[component]
pub fn CheckboxList(
#[prop(optional)] selected: RwSignal<Vec<String>>,
@@ -55,71 +68,117 @@ pub fn CheckboxList(
#[prop()] items: Vec<String>,
#[prop(optional, into)] disabled: Signal<bool>,
#[prop(optional, into)] label: String,
#[prop(optional, into)] required: Signal<bool>
) -> impl IntoView {
//#region Central List Logic
// Get default values from the data map. This will only run once, when the input is created
// and mounted to the DOM.
let temp_map = data_map.get_untracked();
let origin_value_type = temp_map.get(&data_member)
.unwrap_or(&ValueType::List(None));
let origin_list = value_type_to_vec(origin_value_type);
// "Raw" selected values - just strings, no ValueTyping
let selected_list = RwSignal::new(origin_list);
Effect::new({
let data_member = data_member.clone();
move || {
// Convert selected strings into ValueTypes
let typed_list = selected_list.with(|list|
list.iter().cloned().map(|val|
ValueType::String(Some(val))
).collect::<Vec<ValueType>>()
);
// Update the map
data_map.update(|map| {
map.insert(data_member.clone(), ValueType::List(Some(typed_list)));
});
}
});
//#endregion
//#region Form Validation
let validation_context = use_context::<FormValidationRegistry>()
.expect("FormValidationRegistry was not found");
let error = Signal::derive(move || {
if required.get() && selected_list.get().len() <= 0 {
ValidationState::Invalid("This field is required.".to_string())
} else {
ValidationState::Valid
}
});
let dirty = RwSignal::new(false);
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()
));
validation_context.validators.update(|list| list.push(validator.clone()));
//#endregion
//#region Render Logic
view! {
<div class="flex flex-col">
<div class="m-1.5 mt-0 mb-0">
<span class="font-bold">{label}</span>
{items
.into_iter()
.map(|item| {
let checked_signal = Signal::derive({
let item_name = item.clone();
let data_member = data_member.clone();
move || {
data_map.get() // HashMap
.get(&data_member) // Option<ValueType>
.unwrap_or(&ValueType::List(None)) // ValueType
.as_list() // Result<Option<Vec<ValueType>>, ValueType>
.unwrap_or(Some(vec!())) // Option<Vec<ValueType>>
.unwrap_or(vec!()) // Vec<ValueType>
.contains(&ValueType::String(Some(item_name.clone()))) // bool
}
let item = Signal::derive({
let cloned = item.clone();
move || cloned.clone()
});
let on_change = {
let item_name = item.clone();
let data_member = data_member.clone();
move || {
let result = ValueType::String(Some(item_name.clone()));
data_map.update(|map| {
// Attempt to get the value type from the hash map.
match map.get_mut(&data_member) {
Some(value_type) => {
// Attempt to get the value as a list.
match value_type.as_list().unwrap_or(None) {
Some(mut list) => {
// Attempt to find the selected value in the selected list.
// If it's present, remove it, or vice versa.
match list.iter().position(|val| *val == result) {
Some(index) => { list.remove(index); },
None => { list.push(result); }
};
// Update the existing value_type entry in the hash map.
*value_type = ValueType::List(Some(list));
},
// Insert a new value_type entry.
None => { *value_type = ValueType::List(Some(vec![result])); }
};
},
// Insert a new value_type entry.
None => { map.insert(data_member.clone(), ValueType::List(Some(vec![result]))); }
};
let checked = Signal::derive(move || {
selected_list.get().contains(&item.get())
});
let on_change = move || {
// Update the data list by checking if the value is present in it. If so,
// remove it. If not, add it.
selected_list.update(|list| {
let item = item.get();
if list.contains(&item) {
list.retain(|val| *val != item);
} else {
list.push(item);
}
});
dirty.set(true);
};
view! {
<Checkbox
checked=checked_signal
checked=checked
on_change=on_change
// The actual selected values are tracked by this element, not by the checkboxes themselves.
value=item.clone()
value=item
name=data_member.clone()
disabled=disabled
/>
}
})
.collect::<Vec<_>>()}
.collect_view()}
</div>
<Show when=move || show_errors.get()>
<div class="text-red-600 text-sm mr-1.5 ml-1.5">
{move || {
match error.get() {
ValidationState::Invalid(msg) => msg,
_ => "There is no error - should not see this message.".to_string()
}
}}
</div>
</Show>
</div>
}
//#endregion
}
src/pages/home_page.rs
+1 -1
View File
@@ -1,7 +1,6 @@
// Server dependencies
#[cfg(feature = "ssr")]
use aws_sdk_dynamodb::{Client, error::ProvideErrorMetadata, types::AttributeValue};
#[cfg(feature = "ssr")]
use serde_dynamo::{from_item, to_item};
#[cfg(feature = "ssr")]
@@ -310,6 +309,7 @@ pub fn HomePage() -> impl IntoView {
disabled=elements_disabled
data_member="favorite_candies"
data_map=form_data
required=true
/>
</Row>
<Row>
src/pages/scholarship_info.rs
+40 -37
View File
@@ -1,3 +1,4 @@
use std::collections::HashMap;
use leptos::either::Either;
use leptos::html::Dialog;
use leptos::logging::log;
@@ -5,9 +6,8 @@ use leptos::prelude::*;
use leptos_oidc::{AuthLoaded, Authenticated};
use leptos_router::hooks::{use_navigate, use_params};
use crate::common::{ExpandableInfo, ScholarshipFormParams, SubmitStatus, ValueType};
use crate::components::{ActionButton, Banner, ChipsList, Loading, OutlinedTextField, Panel, RadioList, Row, TextFieldType};
use crate::components::{ActionButton, Banner, ChipsList, Loading, OutlinedTextField, Panel, RadioList, Row, TextFieldType, ValidatedForm};
use super::UnauthenticatedPage;
use traits::{AsReactive, ReactiveCapture};
use crate::common::ComparisonData;
use crate::pages::utils::get_user_claims;
use super::api::{get_comparison_info, get_provider_scholarships, get_scholarship_info, CreateScholarshipInfo, CreateTestComparisons, RegisterScholarship, DeleteProviderScholarship};
@@ -357,14 +357,14 @@ fn ScholarshipForm(
_ => false
}
});
let result_msg = Signal::derive(move || {
match submit_status.get() {
SubmitStatus::Idle => "".into(),
SubmitStatus::Sending => "Sending submission...".into(),
SubmitStatus::Success => "Success".into(),
SubmitStatus::Error(msg) => format!("Error: {}", msg),
}
});
// let result_msg = Signal::derive(move || {
// match submit_status.get() {
// SubmitStatus::Idle => "".into(),
// SubmitStatus::Sending => "Sending submission...".into(),
// SubmitStatus::Success => "Success".into(),
// SubmitStatus::Error(msg) => format!("Error: {}", msg),
// }
// });
let submit_action = ServerAction::<CreateScholarshipInfo>::new();
@@ -407,6 +407,14 @@ fn ScholarshipForm(
}
);
let form_data = RwSignal::new(HashMap::new());
Effect::new(move || {
if let Some(Ok(scholarship)) = scholarship_info.get() {
form_data.set(scholarship.data);
}
});
let comparison_ids = Memo::new(move |_| {
comparison_list.get().map(|list| list.iter()
.map(|comp| comp.clone().id)
@@ -425,6 +433,16 @@ fn ScholarshipForm(
// fafsa_required, award_to, transcript_required, recipient_selection, essay_requirement (and prompt)
// award_night_remarks
let on_submit = move |_| {
let mut info = ExpandableInfo::new(scholarship_id.get().unwrap_or_default());
info.data = form_data.get();
log!("Map values: {:?}", info.data);
submit_action.dispatch(CreateScholarshipInfo {
info
});
};
view! {
<Panel>
<Show
@@ -432,13 +450,12 @@ fn ScholarshipForm(
fallback=|| view! { <p>"Choose a scholarship from the right, or create a new one."</p> }
>
<Suspense fallback=Loading>
<ValidatedForm on_submit=Callback::new(on_submit)>
{move || {
scholarship_info.get()
.map(|res_scholarship| {
match res_scholarship {
Ok(scholarship) => {
let reactive_info = scholarship.as_reactive();
Either::Left(view! {
<Row>
<h1 class="text-3xl font-bold">
@@ -451,7 +468,7 @@ fn ScholarshipForm(
placeholder="Example Scholarship Name"
disabled=elements_disabled
data_member="name"
data_map=reactive_info.data
data_map=form_data
/>
</Row>
<Row>
@@ -460,7 +477,7 @@ fn ScholarshipForm(
placeholder="Enter an amount..."
disabled=elements_disabled
data_member="amount_per_award"
data_map=reactive_info.data
data_map=form_data
input_type=TextFieldType::Number
/>
</Row>
@@ -470,7 +487,7 @@ fn ScholarshipForm(
placeholder="Enter an amount..."
disabled=elements_disabled
data_member="num_awards"
data_map=reactive_info.data
data_map=form_data
input_type=TextFieldType::Number
/>
</Row>
@@ -480,14 +497,14 @@ fn ScholarshipForm(
placeholder="Enter an amount..."
disabled=elements_disabled
data_member="total_awards"
data_map=reactive_info.data
data_map=form_data
input_type=TextFieldType::Number
/>
</Row>
<Row>
<RadioList
data_member="fafsa_required"
data_map=reactive_info.data
data_map=form_data
items=vec!["Yes".to_string(), "No".to_string()]
disabled=elements_disabled
label="Do you require student financial information?"
@@ -496,7 +513,7 @@ fn ScholarshipForm(
<Row>
<RadioList
data_member="transcript_required"
data_map=reactive_info.data
data_map=form_data
items=vec!["Yes".to_string(), "No".to_string()]
disabled=elements_disabled
label="Do you require a student transcript?"
@@ -505,7 +522,7 @@ fn ScholarshipForm(
<Row>
<RadioList
data_member="award_to"
data_map=reactive_info.data
data_map=form_data
items=vec!["School".to_string(), "Student".to_string()]
disabled=elements_disabled
label="Will the award be made to the school or the student?"
@@ -514,7 +531,7 @@ fn ScholarshipForm(
<Row>
<RadioList
data_member="essay_required"
data_map=reactive_info.data
data_map=form_data
items=vec!["Yes".to_string(), "No".to_string()]
disabled=elements_disabled
label="Do you require a student essay?"
@@ -523,7 +540,7 @@ fn ScholarshipForm(
<Row>
<RadioList
data_member="essay_prompt"
data_map=reactive_info.data
data_map=form_data
items=vec!["Test 1", "Test 2", "Test 3"].iter().map(|s| s.to_string()).collect()
disabled=elements_disabled
label="If so, select a prompt from the list below."
@@ -533,26 +550,11 @@ fn ScholarshipForm(
<ChipsList
label="Scholarship Requirements"
data_member="requirements"
data_map=reactive_info.data
data_map=form_data
values=comparison_ids
displayed_text=comparison_text
/>
</Row>
<Row>
<ActionButton
disabled=elements_disabled
on:click=move |_| {
let captured = reactive_info.capture();
log!("Map values: {:?}", captured);
submit_action.dispatch(CreateScholarshipInfo {
info: captured.clone()
});
}
>"Submit"</ActionButton>
</Row>
<Row>
<p>{result_msg}</p>
</Row>
})
}
Err(err) => {
@@ -563,6 +565,7 @@ fn ScholarshipForm(
}
}).collect_view()
}}
</ValidatedForm>
</Suspense>
</Show>
</Panel>