1 files changed, 78 insertions, 0 deletions
diff --git a/src/pages/units.rs b/src/pages/units.rs
new file mode 100644
index 0000000..a5d8655
--- /dev/null
+++ b/src/pages/units.rs
@@ -0,0 +1,78 @@
+use leptos::{
+    IntoView, component,
+    prelude::{ClassAttribute, CollectView, ElementChild},
+    view,
+};
+use rocie_client::models::{Unit, UnitPropertyId};
+
+use crate::{
+    api::{unit_properties_wrapped, units_by_property_id_wrapped},
+    components::{
+        async_fetch::{AsyncFetch, AsyncResource},
+        catch_errors::CatchErrors,
+        login_wall::LoginWall,
+        site_header::SiteHeader,
+    },
+};
+
+#[component]
+pub(crate) fn Units() -> impl IntoView {
+    view! {
+        <CatchErrors>
+            <LoginWall back=move || "/units".to_owned()>
+                <SiteHeader logo=icondata_io::IoArrowBack back_location="/" name="Units" />
+
+                <ul class="flex flex-col gap-2 p-2 m-2">
+                    {
+                        AsyncFetch! {
+                            @map_error_in_producer
+                    fetcher = unit_properties_wrapped(),
+                    producer = |unit_properties| {
+                        unit_properties.into_iter().map(|unit_property| {
+                            let resource = AsyncResource!{
+                                (
+                                    unit_property_name: String = unit_property.name.clone(),
+                                    unit_property_id: UnitPropertyId = unit_property.id
+                                ) -> Result<(Vec<Unit>, String), leptos::error::Error> {
+                                    Ok(
+                                        (
+                                            units_by_property_id_wrapped(unit_property_id).await?,
+                                            unit_property_name
+                                        )
+                                    )
+                                }
+                            };
+
+                            AsyncFetch! {
+                                @map_error_in_producer
+                                from_resource = resource,
+                                producer = |(units, unit_property_name)| {
+                                    let units = units.into_iter().map(|unit| view!{
+                                        <li>
+                                            {format!("{} ({})", unit.full_name_singular, unit.short_name)}
+                                        </li>
+                                    }).collect::<Vec<_>>();
+
+
+                                    view! {
+                                        <li>
+                                            <div class="bg-gray-200 p-1 rounded-lg">
+                                                <p class="font-bold">{unit_property_name}</p>
+
+                                                <ul class="ml-4">
+                                                    {units}
+                                                </ul>
+                                            </div>
+                                        </li>
+                                    }
+                                }
+                            }
+                        }).collect_view()
+                    },
+                        }
+                    }
+                </ul>
+            </LoginWall>
+        </CatchErrors>
+    }
+}