app,server: Allow to edit steps

app/src/recipe.rs

@@ -1,11 +1,11 @@
 use api::{
-    AddRecipeIngredientRequest, IngredientInfo, RecipeInfo, RecipeIngredientEditRequest,
-    RecipeRenameRequest,
+    AddRecipeIngredientRequest, IngredientInfo, RecipeEditStepsRequest, RecipeInfo,
+    RecipeIngredientEditRequest, RecipeRenameRequest,
 };
 use itertools::Itertools;
 use uuid::Uuid;
 use wasm_bindgen::JsCast;
-use web_sys::HtmlInputElement;
+use web_sys::{HtmlInputElement, HtmlTextAreaElement};
 use yew::{
     prelude::*,
     suspense::{use_future, use_future_with_deps},
@@ -519,6 +519,110 @@ async fn do_delete_ig(
     Ok(())
 }
 
+async fn do_edit_steps(
+    token: String,
+    household: Uuid,
+    recipe: i64,
+    steps: String,
+) -> anyhow::Result<()> {
+    let rsp = gloo_net::http::Request::patch(api!("household/{household}/recipe/{recipe}/steps"))
+        .json(&RecipeEditStepsRequest { steps })?
+        .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(())
+}
+
+#[derive(Properties, PartialEq, Clone)]
+struct EditStepsProps {
+    token: String,
+    household: Uuid,
+    recipe: i64,
+    steps: String,
+    update: Callback<()>,
+}
+
+#[function_component]
+fn EditSteps(props: &EditStepsProps) -> Html {
+    let steps = use_state(|| props.steps.clone());
+
+    let error = use_state(|| None::<String>);
+
+    let onchange = {
+        let steps = steps.clone();
+        Callback::from(move |e: Event| {
+            let Some(target) = e.target() else {
+                return;
+            };
+
+            let Ok(target) = target.dyn_into::<HtmlTextAreaElement>() else {
+                return;
+            };
+
+            steps.set(target.value());
+        })
+    };
+    let on_submit = {
+        let steps = steps.clone();
+        let token = props.token.clone();
+        let household = props.household;
+        let recipe = props.recipe;
+        let error = error.clone();
+        let update = props.update.clone();
+        Callback::from(move |_| {
+            let token = token.clone();
+            let steps = steps.clone();
+            let error = error.clone();
+            let update = update.clone();
+
+            wasm_bindgen_futures::spawn_local(async move {
+                match do_edit_steps(token.clone(), household, recipe, (*steps).clone()).await {
+                    Ok(_) => {
+                        let modal = bs::Modal::get_instance("#rcpEditSteps");
+                        modal.hide();
+                        error.set(None);
+                        update.emit(());
+                    }
+                    Err(e) => {
+                        error.set(Some(format!("Could not edit steps: {e}")));
+                    }
+                }
+            });
+        })
+    };
+
+    html! {<>
+        <ModalToggleButton modal_id="rcpEditSteps" classes={classes!("btn", "btn-secondary", "mb-2")}>
+            {"Edit Steps"}
+        </ModalToggleButton>
+        <FormModal
+            id="rcpEditSteps"
+            fade=true
+            centered=true
+            submit_label="Edit"
+            title="Edit steps"
+            {on_submit}
+        >
+            if let Some(e) = &*error {
+                <div class={classes!("alert", "alert-danger")} role="alert">
+                    {e}
+                </div>
+            }
+            <textarea
+                class="form-control"
+                value={(*steps).clone()}
+                {onchange}
+            />
+        </FormModal>
+    </>}
+}
+
 #[function_component]
 fn RecipeViewerInner(props: &RecipeViewerInnerProps) -> HtmlResult {
     let recipe_render = use_state(|| 0u64);
@@ -626,6 +730,13 @@ fn RecipeViewerInner(props: &RecipeViewerInnerProps) -> HtmlResult {
                         <li class="list-group-item">{text}</li>
                     })}
                 </ul>
+                <EditSteps
+                    token={props.token.clone()}
+                    household={props.household}
+                    recipe={props.id}
+                    steps={r.steps.clone()}
+                    update={update}
+                />
             </div>
         </>},
         Err(e) => html! {