Added toast notifications

application/Cargo.toml

@@ -30,9 +30,10 @@ uuid = "1.8.0"
 leptos-use = "0.10.6"
 strsim = "0.11.1"
 web-sys = { version = "0.3.69", features = ["Document", "Window", "Element", "ScrollIntoViewOptions", "ScrollLogicalPosition", "ScrollBehavior" ] }
+leptos_toaster = { version = "0.1.7", optional = true, features = [ "builtin_toast" ] }
 
 [features]
-hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate", "leptos_toaster/hydrate"]
 ssr = [
     "dep:surrealdb",
     "dep:axum",
@@ -45,6 +46,7 @@ ssr = [
     "leptos_meta/ssr",
     "leptos_router/ssr",
     "dep:tracing",
+    "leptos_toaster/ssr"
 ]
 
 # Defines a size-optimized profile for the WASM bundle in release mode

application/src/app.rs

@@ -7,6 +7,7 @@ use leptos_router::*;
 use crate::components;
 use crate::pages;
 use crate::util;
+use leptos_toaster::{Toaster, ToasterPosition};
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -38,16 +39,20 @@ pub fn App() -> impl IntoView {
             }
             .into_view()
         }>
-            <components::header::Header />
+            <Toaster
-            <components::participant::Modal />
+                position=ToasterPosition::BottomCenter
-            <main>
+            >
-                <Routes>
+                <components::header::Header />
-                    <Route path="/" view=pages::index::HomePage />
+                <components::participant::Modal />
-                    <Route path="/add-participant" view=pages::add_participant::AddParticipant />
+                <main>
-                    <Route path="/add-time" view=pages::add_time::AddTime />
+                    <Routes>
-                    <Route path="/groups" view=pages::groups::Groups />
+                        <Route path="/" view=pages::index::HomePage />
-                </Routes>
+                        <Route path="/add-participant" view=pages::add_participant::AddParticipant />
-            </main>
+                        <Route path="/add-time" view=pages::add_time::AddTime />
+                        <Route path="/groups" view=pages::groups::Groups />
+                    </Routes>
+                </main>
+            </Toaster>
         </Router>
     }
 }

application/src/components/participant.rs

@@ -1,5 +1,6 @@
 use crate::util::surrealdb::{client::Time, schemas};
 use leptos::*;
+use leptos_toaster::{Toast, ToastId, ToastVariant, Toasts};
 
 cfg_if::cfg_if! {
     if #[cfg(feature = "ssr")] {
@@ -53,6 +54,7 @@ async fn modify_participant(
 pub fn Modal() -> impl IntoView {
     let participant_id = use_context::<RwSignal<Option<String>>>().unwrap();
     let participants = use_context::<schemas::ParticipantsContext>().unwrap();
+    let toasts_context = expect_context::<Toasts>();
 
     let time_lifesaver = create_rw_signal(Time {
         minutes: 0,
@@ -131,6 +133,20 @@ pub fn Modal() -> impl IntoView {
 
         modify_participant_action.dispatch((p, participant().unwrap().get().id));
 
+        let toast_id = ToastId::new();
+
+        toasts_context.toast(
+            view! {
+                <Toast
+                    toast_id
+                    variant=ToastVariant::Success
+                    title=view! { "Successfully modified participant" }.into_view()
+                />
+            },
+            Some(toast_id),
+            None,
+        );
+
         participant_id.set(None);
     };
 

application/src/pages/add_participant.rs

@@ -1,5 +1,5 @@
 use leptos::*;
-use leptos_router::ActionForm;
+use leptos_toaster::{Toast, ToastId, ToastVariant, Toasts};
 
 cfg_if::cfg_if! {
     if #[cfg(feature = "ssr")] {
@@ -49,6 +49,8 @@ async fn add_participant(name: String, group: String) -> Result<(), ServerFnErro
 /// Renders the home page of your application.
 #[component]
 pub fn AddParticipant() -> impl IntoView {
+    let toasts_context = expect_context::<Toasts>();
+
     let name = create_rw_signal("".to_string());
     let group = create_rw_signal("A1".to_string());
 
@@ -65,6 +67,20 @@ pub fn AddParticipant() -> impl IntoView {
 
         form_submit_action.dispatch((name.get(), group.get()));
 
+        let toast_id = ToastId::new();
+
+        toasts_context.toast(
+            view! {
+                <Toast
+                    toast_id
+                    variant=ToastVariant::Success
+                    title=view! { "Successfully added participant" }.into_view()
+                />
+            },
+            Some(toast_id),
+            None,
+        );
+
         name.set("".to_string());
         let _ = name_input_ref.get().unwrap().focus();
     };

application/src/pages/add_time.rs

@@ -1,5 +1,6 @@
 use crate::util::surrealdb::{client::sort_participants, client::Time, schemas};
 use leptos::{ev::keydown, *};
+use leptos_toaster::{Toast, ToastId, ToastVariant, Toasts};
 use leptos_use::*;
 use web_sys::ScrollIntoViewOptions;
 
@@ -56,6 +57,7 @@ async fn add_time(
 #[component]
 pub fn AddTime() -> impl IntoView {
     let participants = use_context::<schemas::ParticipantsContext>().unwrap();
+    let toasts_context = expect_context::<Toasts>();
 
     let container_ref: NodeRef<html::Ul> = create_node_ref();
     let name_input_ref: NodeRef<html::Input> = create_node_ref();
@@ -87,6 +89,20 @@ pub fn AddTime() -> impl IntoView {
             time.get().as_milliseconds(),
         ));
 
+        let toast_id = ToastId::new();
+
+        toasts_context.toast(
+            view! {
+                <Toast
+                    toast_id
+                    variant=ToastVariant::Success
+                    title=view! { "Successfully added time" }.into_view()
+                />
+            },
+            Some(toast_id),
+            None,
+        );
+
         name.set("".to_string());
         time.set(Time {
             minutes: 0,