Refactor all components to use expandable data #10

Merged
BobdaFett merged 11 commits from feature/multi-entry-data into main 2025-09-26 16:13:29 +00:00
2 changed files with 35 additions and 22 deletions
Showing only changes of commit 1adeb5e07f - Show all commits

No files matched your search

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