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 />
-            <components::participant::Modal />
-            <main>
-                <Routes>
-                    <Route path="/" view=pages::index::HomePage />
-                    <Route path="/add-participant" view=pages::add_participant::AddParticipant />
-                    <Route path="/add-time" view=pages::add_time::AddTime />
-                    <Route path="/groups" view=pages::groups::Groups />
-                </Routes>
-            </main>
+            <Toaster
+                position=ToasterPosition::BottomCenter
+            >
+                <components::header::Header />
+                <components::participant::Modal />
+                <main>
+                    <Routes>
+                        <Route path="/" view=pages::index::HomePage />
+                        <Route path="/add-participant" view=pages::add_participant::AddParticipant />
+                        <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,15 +49,60 @@ async fn add_participant(name: String, group: String) -> Result<(), ServerFnErro
 /// Renders the home page of your application.
 #[component]
 pub fn AddParticipant() -> impl IntoView {
-    let form_submit = create_server_action::<AddParticipant>();
+    let toasts_context = expect_context::<Toasts>();
+
+    let name = create_rw_signal("".to_string());
+    let group = create_rw_signal("A1".to_string());
+
+    let name_input_ref: NodeRef<html::Input> = create_node_ref();
+
+    let form_submit_action = create_action(|input: &(String, String)| {
+        let input = input.to_owned();
+
+        async move { add_participant(input.0, input.1).await }
+    });
+
+    let form_submit = move |ev: ev::SubmitEvent| {
+        ev.prevent_default();
+
+        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();
+    };
 
     view! {
         <h2>"Deelnemer toevoegen"</h2>
-        <ActionForm action=form_submit>
+        <form on:submit=form_submit>
             <label>Naam</label>
-            <input type="text" name="name" autocomplete="off" />
+            <input
+                type="text"
+                autocomplete="off"
+                node_ref=name_input_ref
+                on:input=move |ev| {
+                    name.set(event_target_value(&ev));
+                }
+                prop:value=name
+            />
             <label>Groep</label>
-            <select name="group" autocomplete="off">
+            <select on:change=move |ev| {
+                let new_value = event_target_value(&ev);
+                group.set(new_value);
+            } autocomplete="off">
                 <option value="A1">A1</option>
                 <option value="A2">A2</option>
                 <option value="A3">A3</option>
@@ -94,6 +139,6 @@ pub fn AddParticipant() -> impl IntoView {
                 <option value="Z6">Z6</option>
             </select>
             <input type="submit" value="Deelnemer toevoegen" />
-        </ActionForm>
+        </form>
     }
 }

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,