app: Allow to rename household

app/src/sidebar.rs

@@ -1,3 +1,4 @@
+use api::RenameHouseholdRequest;
 use gloo_storage::{LocalStorage, Storage};
 use uuid::Uuid;
 use wasm_bindgen::JsCast;
@@ -8,7 +9,7 @@ use yew_router::prelude::*;
 use crate::{
     api,
     bootstrap::{bs, ConfirmDangerModal, FormModal},
-    do_add_user_to_household, do_resolve_user, RegaladeGlobalState, Route,
+    do_add_user_to_household, do_resolve_user, HouseholdInfo, RegaladeGlobalState, Route,
 };
 
 #[derive(PartialEq)]
@@ -117,6 +118,105 @@ fn AddMemberModal(props: &AddMemberProps) -> Html {
     }
 }
 
+async fn do_rename_household(token: String, household: Uuid, name: String) -> anyhow::Result<()> {
+    let rsp = gloo_net::http::Request::patch(api!("household/{household}"))
+        .header("Authorization", &format!("Bearer {token}"))
+        .json(&RenameHouseholdRequest { name: name.clone() })?
+        .send()
+        .await?;
+
+    if !rsp.ok() {
+        let body = rsp.body();
+        match body {
+            None => anyhow::bail!("Could not leave: {rsp:?}"),
+            Some(s) => anyhow::bail!("Could not leave: {}", s.to_string()),
+        }
+    }
+
+    LocalStorage::set(
+        "household",
+        HouseholdInfo {
+            id: household,
+            name,
+        },
+    )
+    .expect("Could not set household info");
+
+    Ok(())
+}
+
+#[derive(Properties, PartialEq)]
+struct RenameHouseholdProps {
+    token: String,
+    household: Uuid,
+    name: String,
+    on_rename: Callback<()>,
+}
+
+#[function_component]
+fn RenameHouseholdModal(props: &RenameHouseholdProps) -> Html {
+    let error = use_state(|| None::<String>);
+    let err = error.clone();
+    let token = props.token.clone();
+    let household = props.household;
+    let on_rename = props.on_rename.clone();
+    let add_member = Callback::from(move |_| {
+        let document = gloo_utils::document();
+
+        let name: HtmlInputElement = document
+            .get_element_by_id("householdRename")
+            .unwrap()
+            .dyn_into()
+            .expect("householdRename is not an input element");
+        let name = name.value();
+
+        let err = err.clone();
+        let token = token.clone();
+        let on_rename = on_rename.clone();
+
+        wasm_bindgen_futures::spawn_local(async move {
+            match do_rename_household(token, household, name).await {
+                Ok(_) => {
+                    err.set(None);
+
+                    on_rename.emit(());
+
+                    let modal = bs::Modal::get_instance("#renameHousehold");
+                    modal.hide();
+                }
+                Err(e) => {
+                    err.set(Some(format!("Could not rename household: {e:?}")));
+                }
+            }
+        })
+    });
+
+    html! {
+        <FormModal
+            id="renameHousehold"
+            centered={true}
+            submit_label="Rename"
+            title="Rename houshold"
+            on_submit={add_member}
+        >
+            if let Some(err) = &*error {
+                <div class={classes!("alert", "alert-danger")} role="alert">
+                    {err}
+                </div>
+            }
+            <div class="form-floating">
+                <input
+                    id="householdRename"
+                    class={classes!("form-control")}
+                    placeholder="New household name"
+                    value={props.name.clone()}
+                />
+                <label for="householdRename">{"New household name"}</label>
+            </div>
+        </FormModal>
+    }
+}
+
 #[function_component]
 fn Sidebar(props: &SidebarProps) -> Html {
     let global_state = use_state(RegaladeGlobalState::get);
@@ -147,6 +247,11 @@ fn Sidebar(props: &SidebarProps) -> Html {
         navigator.push(&Route::HouseholdSelect);
     });
 
+    let gs = global_state.clone();
+    let on_rename = Callback::from(move |_| {
+        gs.set(RegaladeGlobalState::get());
+    });
+
     html! {
         <div class="container-fluid">
             <div class={classes!("row", "flex-nowrap")}>
@@ -244,6 +349,12 @@ fn Sidebar(props: &SidebarProps) -> Html {
                                 token={global_state.token.token.clone()}
                                 household={global_state.household.id}
                             />
+                            <RenameHouseholdModal
+                                token={global_state.token.token.clone()}
+                                household={global_state.household.id}
+                                name={global_state.household.name.clone()}
+                                {on_rename}
+                            />
                             <ul class="dropdown-menu">
                                 <li>
                                     <a
@@ -275,6 +386,16 @@ fn Sidebar(props: &SidebarProps) -> Html {
                                         {"Add Member"}
                                     </a>
                                 </li>
+                                <li>
+                                    <a
+                                        class="dropdown-item"
+                                        href="#"
+                                        data-bs-toggle="modal"
+                                        data-bs-target="#renameHousehold"
+                                    >
+                                        {"Rename household"}
+                                    </a>
+                                </li>
                                 <hr />
                                 <li>
                                     <Link<Route>