View every ticket now on /tickets

frontend/src/pages/ticket.rs

@@ -211,3 +211,58 @@ pub fn show_ticket_by_id_component(props: &TicketProps) -> Html {
         html! { <p>{ "No ticket found." }</p> }
     }
 }
+
+#[component(AllTickets)]
+pub fn all_tickets_component() -> Html {
+    let tickets = use_state(|| Vec::<Ticket>::new());
+    let error = use_state(|| None::<String>);
+    let loading = use_state(|| false);
+
+    {
+        let tickets = tickets.clone();
+        let error = error.clone();
+        let loading = loading.clone();
+
+        use_effect_with((), move |_| {
+            loading.set(true);
+            spawn_local(async move {
+                let url = format!("http://localhost:8001/api/tickets");
+                match Request::get(&url).send().await {
+                    Ok(response) if response.status() == 200 => {
+                        match response.json::<Vec<Ticket>>().await {
+                            Ok(t) => tickets.set(t),
+                            Err(e) => error.set(Some(format!("parse error: {}", e))),
+                        }
+                    }
+                    Ok(response) => {
+                        if let Ok(text) = response.text().await {
+                            error.set(Some(text));
+                        } else {
+                            error.set(Some(format!("status {}", response.status())));
+                        }
+                    }
+                    Err(err) => error.set(Some(format!("Network error: {}", err))),
+                }
+                loading.set(false);
+            });
+            || ()
+        });
+    }
+
+    if *loading {
+        html! {<p>{ "Loading" }</p>}
+    } else if let Some(e) = &*error {
+        html! { <p>{ format!("Error: {}", e) }</p> }
+    } else {
+        html! {
+            <ul>
+            { for tickets.iter().map(|t| html! {
+                    <li key={t.id.to_string()}>
+                        <h3>{ format!("{} - #{}", t.betreff, t.id) }</h3>
+                        <p>{ &t.description }</p>
+                    </li>
+                })}
+            </ul>
+        }
+    }
+}