feat: implement into for all applicable props

src/common/student_info.rs

@@ -6,4 +6,5 @@ pub struct StudentInfo {
     pub first_name: String,
     pub last_name: String,
     pub math_sat_score: i32,
+    pub student_email: String,
 }

src/components/mod.rs

@@ -4,5 +4,16 @@ mod multi_entry;
 mod text_field;
 mod select;
 mod checkboxes;
+mod panel;
+mod row;
 
-pub use self::{action_button::*, loading::*, multi_entry::*, text_field::*, select::*, checkboxes::*};
+pub use self::{
+    action_button::*,
+    loading::*,
+    multi_entry::*,
+    text_field::*,
+    select::*,
+    checkboxes::*,
+    panel::*,
+    row::*
+};

src/components/panel.rs

@@ -0,0 +1,37 @@
+use leptos::prelude::*;
+
+/// A panel for use in visual separation of a group of components. A `Panel` arranges
+/// a series of elements within a shaded rectangle using the flexbox column layout.
+/// 
+/// It takes a series of children. Usually these would be in the form of a `Row` element,
+/// which will arrange its own children in a row within the panel, however it can be any
+/// HTML element.
+/// 
+/// Example:
+/// ```
+/// view! {
+///     <Panel>
+///         <Row>
+///             <OutlinedTextField
+///                 // ...
+///             />
+///             <CheckboxList
+///                 // ...
+///             />
+///         </Row>
+///     </Panel>
+/// }
+/// ```
+#[component]
+pub fn Panel(
+    children: Children
+) -> impl IntoView {
+    view! {
+        <div
+            class="flex flex-col gap-2 p-2 m-4 flex-1
+                border-1 border-gray-600/10
+                rounded-md shadow-[0_0_6px_rgba(0,0,0,0.50)]">
+            {children()}
+        </div>
+    }
+}

src/components/row.rs

@@ -0,0 +1,12 @@
+use leptos::prelude::*;
+
+#[component]
+pub fn Row(
+    children: Children
+) -> impl IntoView {
+    view! {
+        <div class="flex flex-row gap-2 flex-1">
+            {children()}
+        </div>
+    }
+}

src/components/select.rs

@@ -1,4 +1,4 @@
-use leptos::prelude::*;
+use leptos::prelude::*;
 
 /// A custom-styled select input.
 ///

src/components/text_field.rs

@@ -3,12 +3,12 @@ use leptos::prelude::*;
 
 #[component]
 pub fn OutlinedTextField<T>(
-    #[prop(default = String::from(""))] placeholder: String,
+    #[prop(default = T::default(), into)] placeholder: T,
     #[prop(default = RwSignal::new(T::default()))] value: RwSignal<T>,
     #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
-    #[prop(default = String::from(""))] name: String,
+    #[prop(default = String::from(""), into)] name: String,
-    #[prop(default = String::from(""))] label: String,
+    #[prop(default = String::from(""), into)] label: String,
-    #[prop(default = String::from(""))] input_type: String,
+    #[prop(default = String::from(""), into)] input_type: String,
 ) -> impl IntoView
 where
     T: Default + 'static + FromStr + ToString + PartialEq + Send + Sync + Clone
@@ -22,16 +22,17 @@ where
     };
 
     view! (
-        <div>
+        <div class="flex flex-1">
-            <label>
+            <label class="flex flex-col flex-1">
-                { label }
+                <span class="block ml-1.5 mb-0">{label}</span>
                 <input
-                    class="border-2 m-1.5 p-1.5 rounded-md bg-transparent mt-6 relative transition-all duration-150
+                    class="border-2 m-1.5 p-1.5 mt-0 rounded-md bg-transparent relative flex-1
+                        transition-all duration-150
                         border-red-700 bg-transparent
                         disabled:border-gray-600 disabled:pointer-events-none disabled:bg-gray-600/33"
                     r#type={input_type}
                     disabled={disabled}
-                    placeholder={placeholder}
+                    placeholder={placeholder.to_string()}
                     prop:name=name
                     prop:value={move || value.get().to_string()}  // Sets the initial value.
                     on:input=on_input  // Sets the value on each input.

src/pages/home_page.rs

@@ -2,7 +2,7 @@
 use aws_sdk_dynamodb::{error::ProvideErrorMetadata, types::AttributeValue, Client};
 use crate::app::Unauthenticated;
 use crate::common::{StudentInfo, StudentInfoReactive, UserClaims};
-use crate::components::{ActionButton, Loading, OutlinedTextField, Select, CheckboxList};
+use crate::components::{ActionButton, Loading, OutlinedTextField, Select, CheckboxList, Panel, Row};
 use leptos::leptos_dom::logging::console_log;
 use leptos::prelude::*;
 use leptos_oidc::{Algorithm, AuthLoaded, AuthSignal, Authenticated};
@@ -42,12 +42,19 @@ pub async fn get_submission(id: String) -> Result<StudentInfo, ServerFnError> {
                 .map(|n| n.parse::<i32>().unwrap_or(0))
                 .unwrap_or_default();
 
+            let student_email = item
+                .get("studentEmail")
+                .and_then(|attr| attr.as_s().ok())
+                .map(|s| s.to_owned())
+                .unwrap_or_default();
+
             console_log(format!("Got values from API: {} {}", first_name, last_name).as_str());
 
             Ok(StudentInfo {
                 first_name,
                 last_name,
                 math_sat_score,
+                student_email,
             })
         }
         Err(err) => {
@@ -130,14 +137,16 @@ pub fn HomePage() -> impl IntoView {
                 console_log(e.to_string().as_str());
                 StudentInfo {
                     first_name: String::from("Error"),
-                    last_name: String::from(""),
+                    last_name: String::new(),
                     math_sat_score: 0,
+                    student_email: String::new()
                 }
             }),
             None => StudentInfo {
                 first_name: String::new(),
                 last_name: String::new(),
                 math_sat_score: 0,
+                student_email: String::new()
             },
         },
     );
@@ -158,31 +167,35 @@ pub fn HomePage() -> impl IntoView {
                             let elements_disabled = RwSignal::new(false);
 
                             view! {
+                                <div class="flex flex-row">
+                                <Panel>
+                                    <p>"Testing paragraph! This panel should be the same size as the other."</p>
+                                </Panel>
+                                <Panel>
+                                    <Row>
                                         <p>
                                             "Current user's reported full name from the API: "
                                             {reactive_info.first_name}" "{reactive_info.last_name}
                                         </p>
-
+                                    </Row>
-                                <form
+                                    <Row>
-                                    class="flex flex-col gap-4">
-                                    <div class="flex flex-row gap-2">
                                         <OutlinedTextField
-                                            label="First Name".into()
+                                            label="First Name:"
-                                            placeholder="John".into()
+                                            placeholder="John"
                                             disabled=elements_disabled
                                             value=reactive_info.first_name />
                                         <OutlinedTextField
-                                            label="Last Name".into()
+                                            label="Last Name:"
-                                            placeholder="Smith".into()
+                                            placeholder="Smith"
                                             disabled=elements_disabled
                                             value=reactive_info.last_name />
                                         <OutlinedTextField
-                                            label="Testing".into()
+                                            label="Contact Email"
-                                            placeholder="Test".into()
+                                            placeholder="temp@region15.org"
                                             disabled=elements_disabled
-                                            value=reactive_info.math_sat_score />
+                                            value=reactive_info.student_email />
-                                    </div>
+                                    </Row>
-                                    <div class="flex flex-row gap-2">
+                                    <Row>
                                         <Select
                                             value_list = vec!["Math".into(), "English".into(), "Science".into()]
                                             value = select_value
@@ -192,8 +205,8 @@ pub fn HomePage() -> impl IntoView {
                                             selected = chk_select
                                             items = vec!["Testing 1".into(), "Testing 2".into()]
                                             disabled=elements_disabled />
-                                    </div>
+                                    </Row>
-                                    <div>
+                                    <Row>
                                         <ActionButton
                                             on:click=move |_| {
                                                 console_log(format!("Found value {:?}", chk_select.get()).as_str());
@@ -205,8 +218,9 @@ pub fn HomePage() -> impl IntoView {
                                         >
                                             "Submit"
                                         </ActionButton>
+                                    </Row>
+                                </Panel>
                                 </div>
-                                </form>
                             }
                         })
                     }}

src/pages/provider_entry.rs

@@ -25,9 +25,9 @@ pub fn ProviderEntry() -> impl IntoView {
                 <h2>It would usually have a series of questions that we ask the providers</h2>
                 <div>
                     <OutlinedTextField
-                        placeholder = "Testing information...".into()
+                        placeholder = "Testing information..."
-                        name = "testing_input".into()
+                        name = "testing_input"
-                        label = "This is a testing question.".into()
+                        label = "This is a testing question."
                         value = RwSignal::new("".to_owned())
                     />
                 </div>