Recipe edit, we can now delete groups, steps and ingredients

frontend/Cargo.toml

@@ -17,6 +17,8 @@ ron = "0.8"
 serde = { version = "1.0", features = ["derive"] }
 thiserror = "2"
 
+futures = "0.3"
+
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
 web-sys = { version = "0.3", features = [
@@ -32,6 +34,7 @@ web-sys = { version = "0.3", features = [
     "HtmlInputElement",
     "HtmlTextAreaElement",
     "HtmlSelectElement",
+    "HtmlDialogElement",
 ] }
 
 gloo = "0.11"

frontend/src/handles.rs

@@ -1,12 +1,14 @@
 use gloo::{console::log, events::EventListener, net::http::Request, utils::document};
 use wasm_bindgen::prelude::*;
 use wasm_bindgen_futures::spawn_local;
-use web_sys::{Element, Event, HtmlInputElement, HtmlSelectElement, HtmlTextAreaElement};
+use web_sys::{
+    Element, Event, HtmlDialogElement, HtmlInputElement, HtmlSelectElement, HtmlTextAreaElement,
+};
 
 use common::ron_api::{self, Ingredient};
 
 use crate::{
-    request,
+    modal_dialog, request,
     toast::{self, Level},
     utils::{by_id, select, select_and_clone, SelectExt},
 };
@@ -169,7 +171,7 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
             .set_attribute("id", &format!("group-{}", group.id))
             .unwrap();
 
-        let groups_container = document().get_element_by_id("groups-container").unwrap();
+        let groups_container: Element = by_id("groups-container");
         groups_container.append_child(&group_element).unwrap();
 
         // Group name.
@@ -209,13 +211,19 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
         .forget();
 
         // Delete button.
-        // TODO: add a user confirmation.
+        let group_element_cloned = group_element.clone();
         let delete_button: HtmlInputElement = group_element.select(".input-group-delete");
         EventListener::new(&delete_button, "click", move |_event| {
+            let name = group_element_cloned
+                .select::<HtmlInputElement>(".input-group-name")
+                .value();
             spawn_local(async move {
-                let body = ron_api::RemoveRecipeGroup { group_id };
-                let _ = request::delete::<(), _>("recipe/remove_group", body).await;
-                by_id::<Element>(&format!("group-{}", group_id)).remove();
+                if modal_dialog::show(&format!("Are you sure to delete the group '{}'", name)).await
+                {
+                    let body = ron_api::RemoveRecipeGroup { group_id };
+                    let _ = request::delete::<(), _>("recipe/remove_group", body).await;
+                    by_id::<Element>(&format!("group-{}", group_id)).remove();
+                }
             });
         })
         .forget();
@@ -228,7 +236,7 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
                 let response: ron_api::AddRecipeStepResult =
                     request::post("recipe/add_step", body).await.unwrap();
                 create_step_element(
-                    &by_id::<Element>(&format!("group-{}", group_id)),
+                    &select::<Element>(&format!("#group-{} .steps", group_id)),
                     &ron_api::Step {
                         id: response.step_id,
                         action: "".to_string(),
@@ -268,6 +276,25 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
         })
         .forget();
 
+        // Delete button.
+        let step_element_cloned = step_element.clone();
+        let delete_button: HtmlInputElement = step_element.select(".input-step-delete");
+        EventListener::new(&delete_button, "click", move |_event| {
+            let action = step_element_cloned
+                .select::<HtmlTextAreaElement>(".text-area-step-action")
+                .value();
+            spawn_local(async move {
+                if modal_dialog::show(&format!("Are you sure to delete the step '{}'", action))
+                    .await
+                {
+                    let body = ron_api::RemoveRecipeStep { step_id };
+                    let _ = request::delete::<(), _>("recipe/remove_step", body).await;
+                    by_id::<Element>(&format!("step-{}", step_id)).remove();
+                }
+            });
+        })
+        .forget();
+
         // Add ingredient button.
         let add_ingredient_button: HtmlInputElement = step_element.select(".input-add-ingredient");
         EventListener::new(&add_ingredient_button, "click", move |_event| {
@@ -276,7 +303,7 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
                 let response: ron_api::AddRecipeIngredientResult =
                     request::post("recipe/add_ingredient", body).await.unwrap();
                 create_ingredient_element(
-                    &by_id::<Element>(&format!("step-{}", step_id)),
+                    &select::<Element>(&format!("#step-{} .ingredients", step_id)),
                     &ron_api::Ingredient {
                         id: response.ingredient_id,
                         name: "".to_string(),
@@ -384,6 +411,25 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
         })
         .forget();
 
+        // Delete button.
+        let ingredient_element_cloned = ingredient_element.clone();
+        let delete_button: HtmlInputElement = ingredient_element.select(".input-ingredient-delete");
+        EventListener::new(&delete_button, "click", move |_event| {
+            let name = ingredient_element_cloned
+                .select::<HtmlInputElement>(".input-ingredient-name")
+                .value();
+            spawn_local(async move {
+                if modal_dialog::show(&format!("Are you sure to delete the ingredient '{}'", name))
+                    .await
+                {
+                    let body = ron_api::RemoveRecipeIngredient { ingredient_id };
+                    let _ = request::delete::<(), _>("recipe/remove_ingredient", body).await;
+                    by_id::<Element>(&format!("ingredient-{}", ingredient_id)).remove();
+                }
+            });
+        })
+        .forget();
+
         ingredient_element
     }
 
@@ -399,10 +445,13 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
                 let group_element = create_group_element(&group);
 
                 for step in group.steps {
-                    let step_element = create_step_element(&group_element, &step);
+                    let step_element = create_step_element(&group_element.select(".steps"), &step);
 
                     for ingredient in step.ingredients {
-                        create_ingredient_element(&step_element, &ingredient);
+                        create_ingredient_element(
+                            &step_element.select(".ingredients"),
+                            &ingredient,
+                        );
                     }
                 }
             }

frontend/src/lib.rs

@@ -1,4 +1,6 @@
 mod handles;
+mod modal_dialog;
+mod on_click;
 mod request;
 mod toast;
 mod utils;

frontend/src/modal_dialog.rs

@@ -0,0 +1,30 @@
+use futures::{future::FutureExt, pin_mut, select};
+use web_sys::{Element, HtmlDialogElement};
+
+use crate::utils::{by_id, SelectExt};
+
+use crate::on_click;
+
+pub async fn show(message: &str) -> bool {
+    let dialog: HtmlDialogElement = by_id("modal-dialog");
+    let input_ok: Element = dialog.select(".ok");
+    let input_cancel: Element = dialog.select(".cancel");
+
+    dialog.select::<Element>(".content").set_inner_html(message);
+
+    dialog.show_modal().unwrap();
+
+    let click_ok = on_click::OnClick::new(&input_ok).fuse();
+    let click_cancel = on_click::OnClick::new(&input_cancel).fuse();
+
+    pin_mut!(click_ok, click_cancel);
+
+    let result = select! {
+        () = click_ok => true,
+        () = click_cancel => false,
+    };
+
+    dialog.close();
+
+    result
+}

frontend/src/on_click.rs

@@ -0,0 +1,51 @@
+use futures::channel::mpsc;
+use futures::stream::Stream;
+use gloo::{console::log, events::EventListener, net::http::Request, utils::document};
+use std::{
+    future::Future,
+    pin::Pin,
+    task::{Context, Poll},
+};
+use wasm_bindgen::prelude::*;
+use web_sys::EventTarget;
+
+// From: https://docs.rs/gloo-events/latest/gloo_events/struct.EventListener.html
+
+pub struct OnClick {
+    receiver: mpsc::UnboundedReceiver<()>,
+    // Automatically removed from the DOM on drop.
+    listener: EventListener,
+}
+
+impl OnClick {
+    pub fn new(target: &EventTarget) -> Self {
+        let (sender, receiver) = mpsc::unbounded();
+
+        // Attach an event listener.
+        let listener = EventListener::new(target, "click", move |_event| {
+            sender.unbounded_send(()).unwrap_throw();
+        });
+
+        Self { receiver, listener }
+    }
+}
+
+// Multiple clicks.
+impl Stream for OnClick {
+    type Item = ();
+
+    fn poll_next(mut self: Pin<&mut Self>, cx: &mut Context) -> Poll<Option<Self::Item>> {
+        Pin::new(&mut self.receiver).poll_next(cx)
+    }
+}
+
+// Just one click.
+impl Future for OnClick {
+    type Output = ();
+
+    fn poll(mut self: Pin<&mut Self>, cx: &mut Context<'_>) -> Poll<Self::Output> {
+        Pin::new(&mut self.receiver)
+            .poll_next(cx)
+            .map(Option::unwrap)
+    }
+}