init

rewrite of cdb_ui in dioxus rust. goal is to integrate into a single rust codebase

src/page/item_detail.rs

@@ -0,0 +1,93 @@
+use dioxus::prelude::*;
+
+use crate::{page::supply::SupplyPageParam, Route, TransactionCard};
+
+#[component]
+pub fn ItemDetailPage(id: String) -> Element {
+    let id = use_signal(|| id.clone());
+    let item = crate::API.read().as_ref().unwrap().get_item(id()).unwrap();
+    let inventory_future = use_resource(move || async move {
+        let item = crate::API.read().as_ref().unwrap().get_item(id()).unwrap();
+        crate::api::API::get_inventory(item.uuid.clone(), None).await
+    });
+
+    rsx! {
+        div {
+            class: "flex flex-col h-screen",
+
+            header {
+                class: "p-4 bg-blue-500 text-white text-lg font-bold",
+                {item.name.as_str()}
+            }
+            div {
+                class: "p-6 flex flex-col space-y-4",
+                div {
+                    class: "flex items-start space-x-4",
+                    if let Some(image) = &item.image {
+                            img {
+                                src: crate::API.read().as_ref().unwrap().get_url_instance(image.to_string()),
+                                width: "192",
+                                class: "h-24 w-24"
+                            }
+                    },
+                    div {
+                        strong { "{item.name}" }
+                        if let Some(category) = &item.category {
+                            p { "{category}" }
+                        }
+                    }
+                }
+
+                div {
+                    class: "grid grid-cols-2 gap-4",
+                    {item.variants.iter().map(|(key, variant)| {
+                        rsx! {
+                            div {
+                                strong { {variant.name.as_str()} }
+                                // TODO : stats
+                            }
+                        }
+                    })}
+                }
+
+
+            }
+
+            div {
+                class: "flex-1 overflow-auto",
+                match &*inventory_future.read_unchecked() {
+                    Some(inventory) => {
+                        rsx! {
+                            for t in inventory {
+                                p {
+                                    key: {t.uuid.clone()},
+                                    TransactionCard { t: t.clone() }
+                                }
+                            }
+                        }
+                        },
+                    None => {
+                        rsx! { p { "Loading inventory..." } }
+                    }
+                }
+            }
+
+            button {
+                class: "fixed bottom-4 right-4 p-4 bg-green-500 text-white rounded-full shadow-lg",
+                onclick: move |_| {
+                    navigator().push(
+                        Route::SupplyPage {
+                            item: item.uuid.clone(),
+                            param: SupplyPageParam {
+                                onlyVariants: None,
+                                forcePrice: None,
+                                forceOrigin: None
+                             }
+                            }
+                        );
+                 },
+                "+"
+            }
+        }
+    }
+}