app,server: Allow to edit recipe ingredients
This commit is contained in:
traxys
parent
47b547caf4
commit
6004520fb9
6 changed files with 307 additions and 35 deletions
|
|
@ -10,8 +10,14 @@ pub mod bs {
|
|||
#[wasm_bindgen(static_method_of = Modal, js_name = "getInstance")]
|
||||
pub fn get_instance(selector: &str) -> Modal;
|
||||
|
||||
#[wasm_bindgen(static_method_of = Modal, js_name = "getOrCreateInstance")]
|
||||
pub fn get_or_create_instance(selector: &str) -> Modal;
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn hide(this: &Modal);
|
||||
|
||||
#[wasm_bindgen(method)]
|
||||
pub fn show(this: &Modal);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -86,14 +92,14 @@ pub fn ConfirmDangerModal(
|
|||
<TitledModal {id} {fade} {centered} {title}>
|
||||
<ModalBody>
|
||||
{ for children.iter() }
|
||||
</ModalBody>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<button type="button" class={classes!("btn", "btn-secondary")} data-bs-dismiss="modal">
|
||||
{"Cancel"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={classes!("btn", "btn-danger")}
|
||||
<button
|
||||
type="button"
|
||||
class={classes!("btn", "btn-danger")}
|
||||
data-bs-dismiss="modal"
|
||||
onclick={Callback::from(move |_| on_confirm.emit(()))}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
use api::{RecipeInfo, RecipeRenameRequest};
|
||||
use api::{RecipeInfo, RecipeIngredientEditRequest, RecipeRenameRequest};
|
||||
use itertools::Itertools;
|
||||
use uuid::Uuid;
|
||||
use wasm_bindgen::JsCast;
|
||||
use web_sys::HtmlInputElement;
|
||||
|
|
@ -10,7 +11,7 @@ use yew_router::prelude::*;
|
|||
|
||||
use crate::{
|
||||
api,
|
||||
bootstrap::{FormModal, ModalToggleButton, bs},
|
||||
bootstrap::{bs, ConfirmDangerModal, FormModal, ModalToggleButton},
|
||||
RegaladeGlobalState, Route,
|
||||
};
|
||||
|
||||
|
|
@ -45,7 +46,7 @@ fn RecipeListInner(props: &RecipeListProps) -> HtmlResult {
|
|||
Ok(l) => html! {
|
||||
<div class="container text-center">
|
||||
<div class="row row-cols-2 row-cols-sm-2 row-cols-md-4 g-2 mb-2">
|
||||
{for l.recipes.iter().map(|(id, name)| html!{
|
||||
{for l.recipes.iter().sorted_by_key(|(_, name)| name).map(|(id, name)| html!{
|
||||
<div class="col" key={*id}>
|
||||
<div class="p-3 border rounded border-light-subtle h-100">
|
||||
<Link<Route>
|
||||
|
|
@ -191,7 +192,7 @@ fn EditName(props: &EditNameProps) -> Html {
|
|||
|
||||
err.set(None);
|
||||
update.emit(());
|
||||
},
|
||||
}
|
||||
Err(e) => {
|
||||
err.set(Some(format!("Could not edit name: {e}")));
|
||||
}
|
||||
|
|
@ -230,6 +231,146 @@ fn EditName(props: &EditNameProps) -> Html {
|
|||
</>}
|
||||
}
|
||||
|
||||
#[derive(Clone, PartialEq, Properties)]
|
||||
struct EditIngredientProps {
|
||||
token: String,
|
||||
household: Uuid,
|
||||
recipe: i64,
|
||||
ingredient: i64,
|
||||
amount: f64,
|
||||
update: Callback<()>,
|
||||
}
|
||||
|
||||
async fn do_edit_ingredient_recipe(
|
||||
token: String,
|
||||
household: Uuid,
|
||||
recipe: i64,
|
||||
ingredient: i64,
|
||||
amount: f64,
|
||||
) -> anyhow::Result<()> {
|
||||
let rsp = gloo_net::http::Request::patch(api!(
|
||||
"household/{household}/recipe/{recipe}/ingredients/{ingredient}"
|
||||
))
|
||||
.json(&RecipeIngredientEditRequest { amount })?
|
||||
.header("Authorization", &format!("Bearer {token}"))
|
||||
.send()
|
||||
.await?;
|
||||
|
||||
if !rsp.ok() {
|
||||
let body = rsp.text().await.unwrap_or_default();
|
||||
anyhow::bail!("Could not get recipes (code={}): {body}", rsp.status());
|
||||
}
|
||||
|
||||
Ok(())
|
||||
}
|
||||
|
||||
#[function_component]
|
||||
fn EditIngredient(props: &EditIngredientProps) -> Html {
|
||||
let amount = use_state(|| props.amount);
|
||||
|
||||
let am = amount.clone();
|
||||
let onchange = Callback::from(move |e: Event| {
|
||||
let Some(target) = e.target() else {
|
||||
return;
|
||||
};
|
||||
|
||||
let Ok(target) = target.dyn_into::<HtmlInputElement>() else {
|
||||
return;
|
||||
};
|
||||
|
||||
am.set(target.value().parse().unwrap());
|
||||
});
|
||||
|
||||
let error = use_state(|| None::<String>);
|
||||
|
||||
let modal_id = format!("rcpEditIg{}", props.ingredient);
|
||||
|
||||
let am = amount.clone();
|
||||
let err = error.clone();
|
||||
let token = props.token.clone();
|
||||
let household = props.household;
|
||||
let recipe = props.recipe;
|
||||
let ingredient = props.ingredient;
|
||||
let update = props.update.clone();
|
||||
let mid = modal_id.clone();
|
||||
let on_submit = Callback::from(move |_| {
|
||||
let future = do_edit_ingredient_recipe(token.clone(), household, recipe, ingredient, *am);
|
||||
|
||||
let err = err.clone();
|
||||
let update = update.clone();
|
||||
let modal_selector = format!("#{mid}");
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match future.await {
|
||||
Ok(_) => {
|
||||
let modal = bs::Modal::get_instance(&modal_selector);
|
||||
modal.hide();
|
||||
|
||||
err.set(None);
|
||||
update.emit(());
|
||||
}
|
||||
Err(e) => {
|
||||
err.set(Some(format!("Could not edit ingredient: {e}")));
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
let input_id = format!("{modal_id}Inp");
|
||||
|
||||
html! {<>
|
||||
<FormModal
|
||||
id={modal_id.clone()}
|
||||
fade=true
|
||||
centered=true
|
||||
submit_label="Edit"
|
||||
title="Edit Ingredient"
|
||||
{on_submit}
|
||||
>
|
||||
if let Some(e) = &*error {
|
||||
<div class={classes!("alert", "alert-danger")} role="alert">
|
||||
{e}
|
||||
</div>
|
||||
}
|
||||
<div class="form-floating">
|
||||
<input
|
||||
class="form-control"
|
||||
id={input_id.clone()}
|
||||
placeholder="Ingredient Amount"
|
||||
value={amount.to_string()}
|
||||
type="number"
|
||||
step="any"
|
||||
{onchange}
|
||||
/>
|
||||
<label for={input_id}>{"Ingredient Amount"}</label>
|
||||
</div>
|
||||
</FormModal>
|
||||
<ModalToggleButton {modal_id}>
|
||||
<i class="bi-pencil-fill" />
|
||||
</ModalToggleButton>
|
||||
</>}
|
||||
}
|
||||
|
||||
async fn do_delete_ig(
|
||||
token: String,
|
||||
household: Uuid,
|
||||
recipe: i64,
|
||||
ingredient: i64,
|
||||
) -> anyhow::Result<()> {
|
||||
let rsp = gloo_net::http::Request::delete(api!(
|
||||
"household/{household}/recipe/{recipe}/ingredients/{ingredient}"
|
||||
))
|
||||
.header("Authorization", &format!("Bearer {token}"))
|
||||
.send()
|
||||
.await?;
|
||||
|
||||
if !rsp.ok() {
|
||||
let body = rsp.text().await.unwrap_or_default();
|
||||
anyhow::bail!("Could not get recipes (code={}): {body}", rsp.status());
|
||||
}
|
||||
|
||||
Ok(())
|
||||
}
|
||||
|
||||
#[function_component]
|
||||
fn RecipeViewerInner(props: &RecipeViewerInnerProps) -> HtmlResult {
|
||||
let recipe_render = use_state(|| 0u64);
|
||||
|
|
@ -242,25 +383,85 @@ fn RecipeViewerInner(props: &RecipeViewerInnerProps) -> HtmlResult {
|
|||
recipe_render.set((*recipe_render).wrapping_add(1));
|
||||
});
|
||||
|
||||
let error = use_state(|| None::<String>);
|
||||
|
||||
let mk_del_ig = |&id| {
|
||||
let update = update.clone();
|
||||
let token = props.token.clone();
|
||||
let household = props.household;
|
||||
let recipe = props.id;
|
||||
let err = error.clone();
|
||||
Callback::from(move |_| {
|
||||
let update = update.clone();
|
||||
let future = do_delete_ig(token.clone(), household, recipe, id);
|
||||
let err = err.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match future.await {
|
||||
Err(e) => {
|
||||
err.set(Some(format!("Could not delete ingredient: {e}")));
|
||||
}
|
||||
Ok(_) => {
|
||||
update.emit(());
|
||||
err.set(None);
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
Ok(match &*recipe {
|
||||
Ok(r) => html! {<>
|
||||
<h1>{&r.name}</h1>
|
||||
if let Some(e) = &*error {
|
||||
<div class={classes!("alert", "alert-danger")} role="alert">
|
||||
{e}
|
||||
</div>
|
||||
}
|
||||
<EditName
|
||||
token={props.token.clone()}
|
||||
id={props.id}
|
||||
household={props.household}
|
||||
name={r.name.clone()}
|
||||
{update}
|
||||
update={update.clone()}
|
||||
/>
|
||||
<hr />
|
||||
<div class="text-start">
|
||||
<h2>{"Ingredients"}</h2>
|
||||
<ul class="list-group">
|
||||
{for r.ingredients.iter().map(|(id, info, amount)| html!{
|
||||
<li key={*id} class="list-group-item">
|
||||
{for r.ingredients.iter().map(|(id, info, amount)| {
|
||||
let delete_modal_id = format!("rcpRmIg{id}");
|
||||
html!{
|
||||
<li
|
||||
key={*id}
|
||||
class="list-group-item d-flex justify-content-between align-items-center"
|
||||
>
|
||||
{format!("{amount}{} {}", info.unit.as_deref().unwrap_or(""), info.name)}
|
||||
<div>
|
||||
<ConfirmDangerModal
|
||||
id={delete_modal_id.clone()}
|
||||
title="Remove ingredient"
|
||||
centered=true
|
||||
on_confirm={mk_del_ig(id)}
|
||||
>
|
||||
{format!("Are you sure you to delete '{}'", info.name)}
|
||||
</ConfirmDangerModal>
|
||||
<ModalToggleButton
|
||||
modal_id={delete_modal_id}
|
||||
classes={classes!("btn", "btn-danger", "me-1")}
|
||||
>
|
||||
<i class="bi-trash3" />
|
||||
</ModalToggleButton>
|
||||
<EditIngredient
|
||||
token={props.token.clone()}
|
||||
recipe={props.id}
|
||||
ingredient={*id}
|
||||
household={props.household}
|
||||
amount={*amount}
|
||||
update={update.clone()}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
})}
|
||||
}})}
|
||||
</ul>
|
||||
</div>
|
||||
<hr />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue