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

feat: update select component to use open-ended structures (for real this time)

Browse Source 
A previous commit incorrectly called out the select component, except it really updated the radio component.
This commit is contained in:
alphafetus committed 2025-09-25 10:38:42 -04:00
1 parent 96ebfab414
commit 1adeb5e07f
2 files changed
+36 -23
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/select.rs
+22 -3
View File
@@ -1,4 +1,8 @@
use std::collections::HashMap;
use leptos::ev::{Event, Targeted};
use leptos::prelude::*; use leptos::prelude::*;
use leptos::web_sys::HtmlSelectElement;
use crate::components::ValueType;
/// A custom-styled select input. /// A custom-styled select input.
/// ///
@@ -8,9 +12,26 @@ use leptos::prelude::*;
pub fn Select( pub fn Select(
#[prop(default = vec!["Test Value".into()])] value_list: Vec<String>, #[prop(default = vec!["Test Value".into()])] value_list: Vec<String>,
#[prop(default = RwSignal::new("".into()))] value: RwSignal<String>, #[prop(default = RwSignal::new("".into()))] value: RwSignal<String>,
#[prop(into)] data_member: String,
#[prop()] data_map: RwSignal<HashMap<String, ValueType>>,
#[prop(optional, into)] label: String, #[prop(optional, into)] label: String,
#[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>, #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
) -> impl IntoView { ) -> impl IntoView {
let on_change = {
let data_member = data_member.clone();
move |e: Targeted<Event, HtmlSelectElement>| {
let target_value = e.target().value();
data_map.update(|map| {
if let Some(val) = map.get_mut(&data_member) {
*val = ValueType::String(Some(target_value));
} else {
map.insert(data_member.clone(), ValueType::String(Some(target_value)));
}
});
}
};
view! { view! {
<div class="flex flex-1"> <div class="flex flex-1">
<label class="flex flex-col flex-1"> <label class="flex flex-col flex-1">
@@ -20,9 +41,7 @@ pub fn Select(
transition-border duration-150 transition-border duration-150
border-red-700 bg-transparent border-red-700 bg-transparent
disabled:border-gray-600 disabled:pointer-events-none disabled:bg-gray-600/33" disabled:border-gray-600 disabled:pointer-events-none disabled:bg-gray-600/33"
on:change:target=move |e| { on:change:target=on_change
value.set(e.target().value());
}
disabled = disabled > disabled = disabled >
// This closure handles the display of the options. // This closure handles the display of the options.
{move || { {move || {
src/pages/home_page.rs
+14 -20
View File
@@ -8,7 +8,7 @@ use serde_dynamo::{from_item, to_item};
use crate::app::Unauthenticated; use crate::app::Unauthenticated;
use crate::common::{ExpandableInfo, StudentInfo, UserClaims}; use crate::common::{ExpandableInfo, StudentInfo, UserClaims};
use crate::components::{ActionButton, Loading, OutlinedTextField, Panel, RadioList, Row}; use crate::components::{ActionButton, Loading, OutlinedTextField, Panel, RadioList, Row, Select};
use leptos::leptos_dom::logging::console_log; use leptos::leptos_dom::logging::console_log;
use leptos::prelude::*; use leptos::prelude::*;
use leptos_oidc::{Algorithm, AuthLoaded, AuthSignal, Authenticated}; use leptos_oidc::{Algorithm, AuthLoaded, AuthSignal, Authenticated};
@@ -185,7 +185,6 @@ pub fn HomePage() -> impl IntoView {
disabled=elements_disabled disabled=elements_disabled
data_member = "first_name" data_member = "first_name"
data_map = expandable_react.data data_map = expandable_react.data
value=reactive_info.first_name
/> />
<OutlinedTextField <OutlinedTextField
label="Last Name:" label="Last Name:"
@@ -193,7 +192,6 @@ pub fn HomePage() -> impl IntoView {
disabled=elements_disabled disabled=elements_disabled
data_member = "last_name" data_member = "last_name"
data_map = expandable_react.data data_map = expandable_react.data
value=reactive_info.last_name
/> />
</Row> </Row>
<Row> <Row>
@@ -203,7 +201,6 @@ pub fn HomePage() -> impl IntoView {
disabled=elements_disabled disabled=elements_disabled
data_member = "contact_email" data_member = "contact_email"
data_map = expandable_react.data data_map = expandable_react.data
value=reactive_info.contact_email
/> />
</Row> </Row>
<Row> <Row>
@@ -213,7 +210,6 @@ pub fn HomePage() -> impl IntoView {
disabled=elements_disabled disabled=elements_disabled
data_member = "phone_number" data_member = "phone_number"
data_map = expandable_react.data data_map = expandable_react.data
value=reactive_info.phone_number
/> />
</Row> </Row>
<Row> <Row>
@@ -223,7 +219,6 @@ pub fn HomePage() -> impl IntoView {
disabled=elements_disabled disabled=elements_disabled
data_member = "address" data_member = "address"
data_map = expandable_react.data data_map = expandable_react.data
value=reactive_info.address
/> />
</Row> </Row>
<Row> <Row>
@@ -234,7 +229,6 @@ pub fn HomePage() -> impl IntoView {
data_member = "math_sat" data_member = "math_sat"
data_map = expandable_react.data data_map = expandable_react.data
input_type = "number" input_type = "number"
value=reactive_info.math_sat
/> />
</Row> </Row>
<Row> <Row>
@@ -242,7 +236,6 @@ pub fn HomePage() -> impl IntoView {
// Radio { data_member, label, items } // Radio { data_member, label, items }
<RadioList <RadioList
label="Town:" label="Town:"
// selected=reactive_info.town
items=vec!["Southbury", "Middlebury"] items=vec!["Southbury", "Middlebury"]
.into_iter() .into_iter()
.map(|s| s.into()) .map(|s| s.into())
@@ -252,18 +245,19 @@ pub fn HomePage() -> impl IntoView {
data_map = expandable_react.data data_map = expandable_react.data
/> />
</Row> </Row>
// <Row> <Row>
// Select { data_member, label, items } // Select { data_member, label, items }
// <Select <Select
// label="Gender:" label="Gender:"
// value_list=vec!["Male", "Female", "Prefer not to answer"] value_list=vec!["Male", "Female", "Prefer not to answer"]
// .into_iter() .into_iter()
// .map(|s| s.into()) .map(|s| s.into())
// .collect() .collect()
// value=reactive_info.gender disabled=elements_disabled
// disabled=elements_disabled data_member="gender"
// /> data_map=expandable_react.data
// </Row> />
</Row>
<Row> <Row>
<ActionButton <ActionButton
on:click=move |_| { on:click=move |_| {