gburri/recipes
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Greg Burri 2024-12-28 22:52:07 +01:00
parent d4962c98ff
commit 5ce3391466
11 changed files with 183 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

71
frontend/src/handles.rs
View file

@ -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,
);
}
}
}