Shopping list items can now be checked/unchecked

frontend/src/home.rs

@@ -2,6 +2,7 @@ use std::str::FromStr;
 
 use chrono::Locale;
 use common::{ron_api, utils::substitute_with_names};
+use futures::TryFutureExt;
 use gloo::events::EventListener;
 use wasm_bindgen::prelude::*;
 use wasm_bindgen_futures::spawn_local;
@@ -33,10 +34,14 @@ pub fn setup_page(is_user_logged: bool) -> Result<(), JsValue> {
     spawn_local(async move {
         let item_template: Element = selector("#hidden-templates .shopping-item");
         let container: Element = by_id("shopping-list");
+        let container_checked: Element = by_id("shopping-list-checked");
         let date_format =
             selector::<Element>("#hidden-templates .calendar-date-format").inner_html();
         for item in shopping_list.get_items().await.unwrap() {
             let item_element = item_template.deep_clone();
+
+            // item_element.set_id(format!("shopping-item-{}", ));
+
             item_element
                 .selector::<Element>(".item-name")
                 .set_inner_html(&item.name);
@@ -62,7 +67,48 @@ pub fn setup_page(is_user_logged: bool) -> Result<(), JsValue> {
                     .unwrap();
             }
 
-            container.append_child(&item_element).unwrap();
+            EventListener::new(
+                &item_element.selector(".item-is-checked"),
+                "change",
+                move |event| {
+                    let input: HtmlInputElement = event.target().unwrap().dyn_into().unwrap();
+                    spawn_local(async move {
+                        shopping_list
+                            .set_item_checked(item.id, input.checked())
+                            .await
+                            .unwrap();
+                        let item_element = input.parent_element().unwrap();
+                        item_element.remove();
+                        // TODO: Find the correct place to insert the element.
+                        if input.checked() {
+                            by_id::<Element>("shopping-list-checked")
+                                .append_child(&item_element)
+                                .unwrap();
+                        } else {
+                            by_id::<Element>("shopping-list")
+                                .append_child(&item_element)
+                                .unwrap();
+                        }
+                    });
+                },
+            )
+            .forget();
+
+            EventListener::new(&item_element, "click", move |event| {
+                let target: Element = event.target().unwrap().dyn_into().unwrap();
+
+                // if target.class_name() == "item-is-checked"
+            })
+            .forget();
+
+            if item.is_checked {
+                item_element
+                    .selector::<HtmlInputElement>(".item-is-checked")
+                    .set_checked(true);
+                container_checked.append_child(&item_element).unwrap();
+            } else {
+                container.append_child(&item_element).unwrap();
+            }
         }
     });
 

frontend/src/shopping_list.rs

@@ -32,4 +32,20 @@ impl ShoppingList {
             Ok(request::get("shopping_list/get_list", ()).await?)
         }
     }
+
+    pub async fn set_item_checked(&self, item_id: i64, is_checked: bool) -> Result<()> {
+        if self.is_local {
+            todo!();
+        } else {
+            request::put(
+                "shopping_list/set_checked",
+                ron_api::Value {
+                    id: item_id,
+                    value: is_checked,
+                },
+            )
+            .await
+            .map_err(Error::from)
+        }
+    }
 }