app: Allow to add a member to existing households

app/src/sidebar.rs

@@ -1,9 +1,15 @@
 use gloo_storage::{LocalStorage, Storage};
 use uuid::Uuid;
+use wasm_bindgen::JsCast;
+use web_sys::HtmlInputElement;
 use yew::prelude::*;
 use yew_router::prelude::*;
 
-use crate::{api, bootstrap::ConfirmDangerModal, RegaladeGlobalState, Route};
+use crate::{
+    api,
+    bootstrap::{bs, ConfirmDangerModal, FormModal},
+    do_add_user_to_household, do_resolve_user, RegaladeGlobalState, Route,
+};
 
 #[derive(PartialEq)]
 struct MenuEntry {
@@ -38,6 +44,79 @@ async fn do_leave(token: String, household: Uuid) -> anyhow::Result<()> {
     Ok(())
 }
 
+#[derive(PartialEq, Properties)]
+struct AddMemberProps {
+    token: String,
+    household: Uuid,
+}
+
+#[function_component]
+fn AddMemberModal(props: &AddMemberProps) -> Html {
+    let error = use_state(|| None::<String>);
+    let err = error.clone();
+    let token = props.token.clone();
+    let household = props.household;
+    let add_member = Callback::from(move |_| {
+        let document = gloo_utils::document();
+
+        let name: HtmlInputElement = document
+            .get_element_by_id("addMemberName")
+            .unwrap()
+            .dyn_into()
+            .expect("addMemberName is not an input element");
+        let name = name.value();
+
+        let err = err.clone();
+        let token = token.clone();
+
+        wasm_bindgen_futures::spawn_local(async move {
+            match do_resolve_user(token.clone(), name.clone()).await {
+                Ok(Some(uid)) => match do_add_user_to_household(token, household, uid).await {
+                    Err(e) => {
+                        err.set(Some(format!("Could not add user: {e:?}")));
+                    }
+                    Ok(_) => {
+                        err.set(None);
+
+                        let modal = bs::Modal::get_instance("#addMember");
+                        modal.hide();
+                    }
+                },
+                Ok(None) => {
+                    err.set(Some(format!("User '{name}' does not exist")));
+                }
+                Err(e) => {
+                    err.set(Some(format!("Could not resolve user '{name}': {e:?}")));
+                }
+            }
+        })
+    });
+
+    html! {
+        <FormModal
+            id="addMember"
+            centered={true}
+            submit_label="Add"
+            title="Add a member"
+            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="addMemberName"
+                    class={classes!("form-control")}
+                    placeholder="Member Name"
+                />
+                <label for="addMemberName">{"Member name"}</label>
+            </div>
+        </FormModal>
+    }
+}
+
 #[function_component]
 fn Sidebar(props: &SidebarProps) -> Html {
     let global_state = use_state(RegaladeGlobalState::get);
@@ -161,6 +240,10 @@ fn Sidebar(props: &SidebarProps) -> Html {
                             >
                                 {format!("Are you sure you want to leave the household '{}' ?", global_state.household.name)}
                             </ConfirmDangerModal>
+                            <AddMemberModal
+                                token={global_state.token.token.clone()}
+                                household={global_state.household.id}
+                            />
                             <ul class="dropdown-menu">
                                 <li>
                                     <a
@@ -182,6 +265,16 @@ fn Sidebar(props: &SidebarProps) -> Html {
                                         {"Leave Household"}
                                     </a>
                                 </li>
+                                <li>
+                                    <a
+                                        class="dropdown-item"
+                                        href="#"
+                                        data-bs-toggle="modal"
+                                        data-bs-target="#addMember"
+                                    >
+                                        {"Add Member"}
+                                    </a>
+                                </li>
                                 <hr />
                                 <li>
                                     <Link<Route>