Refactor all components to use expandable data #10
No files matched your search
+36
-9
@@ -1,4 +1,6 @@
|
|||||||
|
use std::collections::HashMap;
|
||||||
use leptos::prelude::*;
|
use leptos::prelude::*;
|
||||||
|
use crate::components::ValueType;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn Radio(
|
pub fn Radio(
|
||||||
@@ -42,7 +44,9 @@ pub fn Radio(
|
|||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn RadioList(
|
pub fn RadioList(
|
||||||
#[prop(default = RwSignal::new(String::new()))] selected: RwSignal<String>,
|
// #[prop(default = RwSignal::new(String::new()))] selected: RwSignal<ValueType>,
|
||||||
|
#[prop(into)] data_member: String,
|
||||||
|
#[prop()] data_map: RwSignal<HashMap<String, ValueType>>,
|
||||||
#[prop()] items: Vec<String>,
|
#[prop()] items: Vec<String>,
|
||||||
#[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
|
#[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
|
||||||
#[prop(optional, into)] label: String,
|
#[prop(optional, into)] label: String,
|
||||||
@@ -53,20 +57,43 @@ pub fn RadioList(
|
|||||||
{items
|
{items
|
||||||
.into_iter()
|
.into_iter()
|
||||||
.map(|item| {
|
.map(|item| {
|
||||||
let is_checked = {
|
let checked_signal = Signal::derive({
|
||||||
let item_name = item.clone();
|
let item_name = item.clone();
|
||||||
move || { selected.get() == item_name }
|
let data_member = data_member.clone();
|
||||||
|
move || {
|
||||||
|
// Check if the value is contained in the data map's fields
|
||||||
|
let map = data_map.get();
|
||||||
|
let value = map.get(&data_member);
|
||||||
|
let mut result = false;
|
||||||
|
if let Some(val) = value {
|
||||||
|
if val.is_string() {
|
||||||
|
result = val.as_string().unwrap().unwrap() == item_name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
result
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let on_change = {
|
||||||
|
let item_name = item.clone();
|
||||||
|
let data_member = data_member.clone();
|
||||||
|
move || {
|
||||||
|
// Update the hash map
|
||||||
|
data_map.update(|map| {
|
||||||
|
if let Some(val) = map.get_mut(&data_member) {
|
||||||
|
*val = ValueType::String(Some(item_name.clone()));
|
||||||
|
} else {
|
||||||
|
map.insert(data_member.clone(), ValueType::String(Some(item_name.clone())));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
let checked_signal = Signal::derive(is_checked);
|
|
||||||
// Check if this checkbox should be selected
|
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<Radio
|
<Radio
|
||||||
checked=checked_signal
|
checked=checked_signal
|
||||||
on_change={
|
on_change=on_change
|
||||||
let item_name = item.clone();
|
|
||||||
move || selected.set(item_name.clone())
|
|
||||||
}
|
|
||||||
// The actual selected values are tracked by this element, not by the checkboxes themselves.
|
// The actual selected values are tracked by this element, not by the checkboxes themselves.
|
||||||
value=item.clone()
|
value=item.clone()
|
||||||
disabled=disabled
|
disabled=disabled
|
||||||
|
|||||||
+13
-11
@@ -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, Row};
|
use crate::components::{ActionButton, Loading, OutlinedTextField, Panel, RadioList, Row};
|
||||||
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};
|
||||||
@@ -237,19 +237,21 @@ pub fn HomePage() -> impl IntoView {
|
|||||||
value=reactive_info.math_sat
|
value=reactive_info.math_sat
|
||||||
/>
|
/>
|
||||||
</Row>
|
</Row>
|
||||||
// <Row>
|
<Row>
|
||||||
// Each RadioList could be simplified into an enum:
|
// Each RadioList could be simplified into an enum:
|
||||||
// Radio { data_member, label, items }
|
// Radio { data_member, label, items }
|
||||||
// <RadioList
|
<RadioList
|
||||||
// label="Town:"
|
label="Town:"
|
||||||
// selected=reactive_info.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())
|
||||||
// .collect()
|
.collect()
|
||||||
// disabled=elements_disabled
|
disabled=elements_disabled
|
||||||
// />
|
data_member="town"
|
||||||
// </Row>
|
data_map = expandable_react.data
|
||||||
|
/>
|
||||||
|
</Row>
|
||||||
// <Row>
|
// <Row>
|
||||||
// Select { data_member, label, items }
|
// Select { data_member, label, items }
|
||||||
// <Select
|
// <Select
|
||||||
|
|||||||
Reference in new issue
Block a user