feat: add toasts and reactive feedback to forms on submission

Users were not able to tell that they had submitted before this.

src/components/validated_form.rs

@@ -111,6 +111,8 @@ pub fn ValidatedForm(
     #[prop(into)] title: Signal<String>,
     /// The description for the included header.
     #[prop(optional, into)] description: Signal<String>,
+    /// A `Signal` that determines when the submit button should be disabled.
+    #[prop(optional, into)] disabled: Signal<bool>,
 ) -> impl IntoView {
     let validators = RwSignal::new(vec![]);
 
@@ -154,6 +156,7 @@ pub fn ValidatedForm(
             <Header title=title description=description />
             {children()}
             <ActionButton
+                disabled=disabled
                 on:click=move |_| {
                     log!("{:?}", can_submit.get());
                 }

src/pages/student/academics_page.rs

@@ -4,7 +4,7 @@ use leptos::prelude::*;
 
 #[component]
 pub fn StudentAcademicsPage() -> impl IntoView {
-    let controller = use_student_form("academics");
+    let controller = use_student_form("academics", true);
 
     view! {
         <Suspense fallback=Loading>
@@ -20,9 +20,11 @@ pub fn StudentAcademicsPage() -> impl IntoView {
                                     title="Academic Information"
                                     description="This information will allow you to be eligible for any scholarships that have specific academic/grade requirements."
                                     on_submit=controller.submit_action
+                                    disabled=controller.submit_pending
                                 >
                                     <OutlinedTextField
                                         label="Unweighted GPA:"
+                                        disabled=controller.submit_pending
                                         data_map=controller.data_map
                                         data_member="unweighted_gpa"
                                         placeholder="4.0"
@@ -31,6 +33,7 @@ pub fn StudentAcademicsPage() -> impl IntoView {
                                     />
                                     <OutlinedTextField
                                         label="Weighted GPA:"
+                                        disabled=controller.submit_pending
                                         data_map=controller.data_map
                                         data_member="weighted_gpa"
                                         placeholder="4.5"
@@ -39,6 +42,7 @@ pub fn StudentAcademicsPage() -> impl IntoView {
                                     />
                                     <OutlinedTextField
                                         label="Highest SAT Score:"
+                                        disabled=controller.submit_pending
                                         data_map=controller.data_map
                                         data_member="sat_score"
                                         placeholder="1600"
@@ -47,6 +51,7 @@ pub fn StudentAcademicsPage() -> impl IntoView {
                                     />
                                     <OutlinedTextField
                                         label="Highest ACT Score:"
+                                        disabled=controller.submit_pending
                                         data_map=controller.data_map
                                         data_member="act_score"
                                         placeholder="36"
@@ -55,6 +60,7 @@ pub fn StudentAcademicsPage() -> impl IntoView {
                                     />
                                     <OutlinedTextField
                                         label="Academic Honors:"
+                                        disabled=controller.submit_pending
                                         data_map=controller.data_map
                                         data_member="academic_honors"
                                         placeholder="High Honors, etc."

src/pages/student/athletics_page.rs

@@ -5,7 +5,7 @@ use leptos::prelude::*;
 
 #[component]
 pub fn StudentAthleticsPage() -> impl IntoView {
-    let controller = use_student_form("athletics");
+    let controller = use_student_form("athletics", true);
 
     view! {
         <Show when=move || controller.data_resource.get().is_some() fallback=Loading>
@@ -15,6 +15,7 @@ pub fn StudentAthleticsPage() -> impl IntoView {
                     title="Athletics Information"
                     description="This information will allow you to be eligible for any scholarships that have specific sports requirements."
                     on_submit=controller.submit_action
+                    disabled=controller.submit_pending
                 >
                     <MultiEntry
                         label="Athletics Activities:"

src/pages/student/demographics_page.rs

@@ -9,7 +9,7 @@ pub fn StudentDemographicsPage() -> impl IntoView {
     // I'm going to test out creating this form without using a panel - we'll just use the page as
     // it is with a specially spaced invisible div instead of a shaded container.
 
-    let controller = use_student_form("demographics");
+    let controller = use_student_form("demographics", true);
 
     view! {
         <Show when=move || controller.data_resource.get().is_some() fallback=Loading>
@@ -19,9 +19,11 @@ pub fn StudentDemographicsPage() -> impl IntoView {
                     title="Student Demographic Form"
                     description="Here you'll set up some basic information about yourself."
                     on_submit=controller.submit_action
+                    disabled=controller.submit_pending
                 >
                     <OutlinedTextField
                         label="First Name:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="first_name"
                         placeholder="John"
@@ -30,6 +32,7 @@ pub fn StudentDemographicsPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="Last Name:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="last_name"
                         placeholder="Smith"
@@ -38,6 +41,7 @@ pub fn StudentDemographicsPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="Date of Birth:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="dob"
                         placeholder="MM/DD/YYYY"
@@ -46,6 +50,7 @@ pub fn StudentDemographicsPage() -> impl IntoView {
                     />
                     <Select
                         label="Gender:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="gender"
                         required=true
@@ -57,6 +62,7 @@ pub fn StudentDemographicsPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="Student ID Number:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="id_number"
                         placeholder="Your 7 digit number..."
@@ -65,6 +71,7 @@ pub fn StudentDemographicsPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="Preferred Email:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="email"
                         placeholder="me@example.com"
@@ -73,6 +80,7 @@ pub fn StudentDemographicsPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="Preferred Phone Number:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="phone_number"
                         placeholder="000-000-0000"
@@ -81,6 +89,7 @@ pub fn StudentDemographicsPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="Street Address:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="street_address"
                         placeholder="234 Judd Rd"
@@ -89,6 +98,7 @@ pub fn StudentDemographicsPage() -> impl IntoView {
                     />
                     <Select
                         label="Town:"
+                        disabled=controller.submit_pending
                         value_list=vec!["Southbury".to_string(), "Middlebury".to_string()]
                         data_map=controller.data_map
                         data_member="town"

src/pages/student/extracurriculars_page.rs

@@ -5,7 +5,7 @@ use crate::pages::student::form_setup::use_student_form;
 
 #[component]
 pub fn StudentExtracurricularsPage() -> impl IntoView {
-    let controller = use_student_form("demographics");
+    let controller = use_student_form("demographics", true);
 
     view! {
         <Show when=move || controller.data_resource.get().is_some() fallback=Loading>
@@ -15,10 +15,12 @@ pub fn StudentExtracurricularsPage() -> impl IntoView {
                     title="Extracurricular Information"
                     description="This information will allow you to be eligible for any scholarships that have specific extracurricular requirements."
                     on_submit=controller.submit_action
+                    disabled=controller.submit_pending
                 >
                     // Inputs here.
                     <OutlinedTextField
                         label="Total number of service hours:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="service_hours"
                         placeholder="Any number..."

src/pages/student/family_info_page.rs

@@ -4,7 +4,7 @@ use crate::pages::student::form_setup::use_student_form;
 
 #[component]
 pub fn StudentFamilyPage() -> impl IntoView {
-    let controller = use_student_form("family");
+    let controller = use_student_form("family", true);
     
     view! {
         <Show when=move || controller.data_resource.get().is_some() fallback=Loading>
@@ -14,10 +14,12 @@ pub fn StudentFamilyPage() -> impl IntoView {
                     title="Family Information"
                     description="General family information. You must fill out information about at least one parent."
                     on_submit=controller.submit_action
+                    disabled=controller.submit_pending
                 >
                     // Inputs here.
                     <OutlinedTextField
                         label="Total number of children in family:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="num_children"
                         placeholder="Any number..."
@@ -26,6 +28,7 @@ pub fn StudentFamilyPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="Total number of children currently attending college:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="num_children_college"
                         placeholder="Any number..."
@@ -34,6 +37,7 @@ pub fn StudentFamilyPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="Parent/Guardian 1 Name:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="parent_one_name"
                         placeholder="John Smith"
@@ -43,6 +47,7 @@ pub fn StudentFamilyPage() -> impl IntoView {
                     // TODO Could this be a select dropdown?
                     <OutlinedTextField
                         label="Parent/Guardian 1 Relationship:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="parent_one_relationship"
                         placeholder="Mother/Father"
@@ -52,6 +57,7 @@ pub fn StudentFamilyPage() -> impl IntoView {
                     // TODO Get a better example
                     <OutlinedTextField
                         label="Parent/Guardian 1 Occupation:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="parent_one_occupation"
                         placeholder="Milkman"
@@ -60,6 +66,7 @@ pub fn StudentFamilyPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="Parent/Guardian 1 Employer:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="parent_one_employer"
                         placeholder="Example Employer"
@@ -69,6 +76,7 @@ pub fn StudentFamilyPage() -> impl IntoView {
 
                     <OutlinedTextField
                         label="Parent/Guardian 2 Name:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="parent_two_name"
                         placeholder="John Smith"
@@ -77,6 +85,7 @@ pub fn StudentFamilyPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="Parent/Guardian 2 Relationship:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="parent_two_relationship"
                         placeholder="Mother/Father"
@@ -85,6 +94,7 @@ pub fn StudentFamilyPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="Parent/Guardian 2 Occupation:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="parent_two_occupation"
                         placeholder="Milkman"
@@ -93,6 +103,7 @@ pub fn StudentFamilyPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="Parent/Guardian 2 Employer:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="parent_two_employer"
                         placeholder="Example Employer"

src/pages/student/form_setup.rs

@@ -1,6 +1,8 @@
 use std::collections::HashMap;
 use leptos::prelude::*;
+use uuid::Uuid;
 use crate::common::ValueType;
+use crate::components::{Toast, ToastContext};
 use crate::pages::api::students::{get_student_data, PutStudentData};
 use crate::utils::get_user_claims;
 
@@ -9,11 +11,13 @@ pub struct StudentFormInfo {
     pub user_id: Memo<Option<String>>,
     pub submit_action: Callback<()>,
     pub refresh_trigger: Trigger,
-    pub data_resource: Resource<Result<HashMap<String, ValueType>, ServerFnError>>
+    pub data_resource: Resource<Result<HashMap<String, ValueType>, ServerFnError>>,
+    pub submit_pending: Memo<bool>,
 }
 
 pub fn use_student_form(
-    form_type: impl Into<Signal<String>>
+    form_type: impl Into<Signal<String>>,
+    enable_toasts: bool,
 ) -> StudentFormInfo {
     let form_type = form_type.into();
     
@@ -53,11 +57,39 @@ pub fn use_student_form(
         });
     };
     
+    if enable_toasts {
+        let mut toasts = expect_context::<ToastContext>();
+        Effect::watch(
+            move || submit_action.value().get(),
+            move |value, _, _| {
+                let Some(result) = value else {
+                    return;
+                };
+
+                let toast = match result {
+                    Ok(_) => Toast::new()
+                        .id(Uuid::new_v4())
+                        .header("Submission Successful")
+                        .msg("You may continue editing or fill out another form."),
+                    Err(e) => Toast::new()
+                        .id(Uuid::new_v4())
+                        .header("Submission Failed")
+                        .msg(e.to_string())
+                };
+
+                toasts.toast(toast);
+                untrack(move || submit_action.clear());
+            },
+            false
+        );
+    }
+
     StudentFormInfo {
         data_map,
         refresh_trigger,
         data_resource,
         user_id,
         submit_action: on_submit.into(),
+        submit_pending: submit_action.pending()
     }
 }

src/pages/student/specific_requirements_page.rs

@@ -4,7 +4,7 @@ use leptos::prelude::*;
 
 #[component]
 pub fn StudentSpecificRequirementsPage() -> impl IntoView {
-    let controller = use_student_form("specifics");
+    let controller = use_student_form("specifics", true);
 
     view! {
         <Suspense fallback=Loading>
@@ -20,9 +20,11 @@ pub fn StudentSpecificRequirementsPage() -> impl IntoView {
                                     title="Scholarship-Specific Eligibility Requirements"
                                     description="These questions are specific to some scholarships. Indicate yes or no for each question."
                                     on_submit=controller.submit_action
+                                    disabled=controller.submit_pending
                                 >
                                     <RadioList
                                         label="Have you attended BAS?"
+                                        disabled=controller.submit_pending
                                         data_map=controller.data_map
                                         data_member="attend_bas"
                                         items=vec!["Yes".to_string(), "No".to_string()]
@@ -30,6 +32,7 @@ pub fn StudentSpecificRequirementsPage() -> impl IntoView {
                                     />
                                     <RadioList
                                         label="Are you a member of Midd-South Catholic Church?"
+                                        disabled=controller.submit_pending
                                         data_map=controller.data_map
                                         data_member="middsouth_church"
                                         items=vec!["Yes".to_string(), "No".to_string()]
@@ -37,6 +40,7 @@ pub fn StudentSpecificRequirementsPage() -> impl IntoView {
                                     />
                                     <RadioList
                                         label="Do you have a family member that is or has served in the US military? (Note: you may be asked for proof of service)"
+                                        disabled=controller.submit_pending
                                         data_map=controller.data_map
                                         data_member="family_military_service"
                                         items=vec!["Yes".to_string(), "No".to_string()]
@@ -44,6 +48,7 @@ pub fn StudentSpecificRequirementsPage() -> impl IntoView {
                                     />
                                     <RadioList
                                         label="Have you participated in Pomperaug Youth Baseball?"
+                                        disabled=controller.submit_pending
                                         data_map=controller.data_map
                                         data_member="youth_baseball"
                                         items=vec!["Yes".to_string(), "No".to_string()]
@@ -51,6 +56,7 @@ pub fn StudentSpecificRequirementsPage() -> impl IntoView {
                                     />
                                     <RadioList
                                         label="Have you participated in the Panthers Aquatic Club?"
+                                        disabled=controller.submit_pending
                                         data_map=controller.data_map
                                         data_member="aquatic_club"
                                         items=vec!["Yes".to_string(), "No".to_string()]
@@ -58,6 +64,7 @@ pub fn StudentSpecificRequirementsPage() -> impl IntoView {
                                     />
                                     <RadioList
                                         label="Are at least one of your parents a member of the Region 15 PEA?"
+                                        disabled=controller.submit_pending
                                         data_map=controller.data_map
                                         data_member="pea_member"
                                         items=vec!["Yes".to_string(), "No".to_string()]
@@ -65,6 +72,7 @@ pub fn StudentSpecificRequirementsPage() -> impl IntoView {
                                     />
                                     <RadioList
                                         label="Have you participated in the PHS Music Program (Band, Chorus, etc)?"
+                                        disabled=controller.submit_pending
                                         data_map=controller.data_map
                                         data_member="music_program"
                                         items=vec!["Yes".to_string(), "No".to_string()]

src/pages/student/university_page.rs

@@ -4,7 +4,7 @@ use crate::pages::student::form_setup::use_student_form;
 
 #[component]
 pub fn StudentUniversityPage() -> impl IntoView {
-    let controller = use_student_form("university");
+    let controller = use_student_form("university", true);
     
     // college name, state, city, zip
     // major, study field, intended career, college_acceptance
@@ -17,10 +17,12 @@ pub fn StudentUniversityPage() -> impl IntoView {
                     title="University Information"
                     description="Here you may fill out general information about the university you plan to attend."
                     on_submit=controller.submit_action
+                    disabled=controller.submit_pending
                 >
                     // Inputs here.
                     <OutlinedTextField
                         label="University Name:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="college_name"
                         placeholder="University of Example"
@@ -29,6 +31,7 @@ pub fn StudentUniversityPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="University Street Address:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="college_city"
                         placeholder="123 Example Rd"
@@ -37,6 +40,7 @@ pub fn StudentUniversityPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="University State:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="college_state"
                         placeholder="CT, AZ, etc."
@@ -45,6 +49,7 @@ pub fn StudentUniversityPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="University ZIP:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="college_zip"
                         placeholder="12345"
@@ -53,6 +58,7 @@ pub fn StudentUniversityPage() -> impl IntoView {
                     />
                     <Select
                         label="Have you been sent an acceptance to the university?"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="college_acceptance"
                         required=true
@@ -60,6 +66,7 @@ pub fn StudentUniversityPage() -> impl IntoView {
                     />
                     <Select
                         label="Intended Major/Field of Study:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="major"
                         required=true
@@ -95,6 +102,7 @@ pub fn StudentUniversityPage() -> impl IntoView {
                     />
                     <OutlinedTextField
                         label="Intended Career:"
+                        disabled=controller.submit_pending
                         data_map=controller.data_map
                         data_member="intended_career"
                         placeholder="Engineer, Artist, etc."

src/pages/student/work_experience_page.rs

@@ -5,7 +5,7 @@ use leptos::prelude::*;
 
 #[component]
 pub fn StudentWorkExperiencePage() -> impl IntoView {
-    let controller = use_student_form("workexp");
+    let controller = use_student_form("workexp", true);
 
     view! {
         <Show when=move || controller.data_resource.get().is_some() fallback=Loading>
@@ -15,6 +15,7 @@ pub fn StudentWorkExperiencePage() -> impl IntoView {
                     title="Student Work Experience"
                     description="Here you may add information about your past/current workplace."
                     on_submit=controller.submit_action
+                    disabled=controller.submit_pending
                 >
                     <MultiEntry
                         label="Work Experience:"