Refactor all components to use expandable data #10
No files matched your search
@@ -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 || {
|
||||
|
||||
+14
-20
@@ -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>
|
||||
// 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>
|
||||
<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()
|
||||
disabled=elements_disabled
|
||||
data_member="gender"
|
||||
data_map=expandable_react.data
|
||||
/>
|
||||
</Row>
|
||||
<Row>
|
||||
<ActionButton
|
||||
on:click=move |_| {
|
||||
|
||||
Reference in new issue
Block a user