Viewing ticket by ID

This is now possible by going to /tickets/{id}

frontend/src/pages/ticket.rs

@@ -1,9 +1,10 @@
 use gloo_net::http::Request;
 use serde::{Deserialize, Serialize};
+use serde_json::json;
 use wasm_bindgen_futures::spawn_local;
 use yew::prelude::*;
 
-#[derive(Serialize, Deserialize, Clone, Debug)]
+#[derive(Serialize, Deserialize, Clone, Debug, PartialEq)]
 pub struct TicketCreateScheme {
     pub category: String,
     pub betreff: String,
@@ -11,8 +12,31 @@ pub struct TicketCreateScheme {
     pub room: i16,
 }
 
-#[component(Ticket)]
-pub fn ticket_component() -> Html {
+#[derive(Serialize, Deserialize, Clone, Debug, PartialEq)]
+pub struct Ticket {
+    pub id: i32,
+    pub category: String,
+    pub betreff: String,
+    pub description: String,
+    pub room: i16,
+    pub status: String,
+    pub date: chrono::NaiveDateTime,
+    pub user_id: i16,
+}
+
+#[derive(Properties, PartialEq)]
+pub struct TicketProps {
+    pub id: i32,
+}
+
+#[derive(Deserialize, Debug)]
+pub struct ApiError {
+    message: String,
+    status: String,
+}
+
+#[component(SubmitTicket)]
+pub fn submit_ticket_component() -> Html {
     let category = use_state(|| "".to_string());
     let betreff = use_state(|| "".to_string());
     let description = use_state(|| "".to_string());
@@ -118,3 +142,72 @@ pub fn ticket_component() -> Html {
         </form>
     }
 }
+
+#[component(ShowTicketByID)]
+pub fn show_ticket_by_id_component(props: &TicketProps) -> Html {
+    let ticket = use_state(|| None::<Ticket>);
+    let error = use_state(|| None::<String>);
+    let loading = use_state(|| false);
+    let id = props.id;
+
+    {
+        let ticket = ticket.clone();
+        let error = error.clone();
+        let loading = loading.clone();
+
+        use_effect_with(id, move |id_ref| {
+            loading.set(true);
+            let ticket = ticket.clone();
+            let error = error.clone();
+            let id = *id_ref;
+            spawn_local(async move {
+                let url = format!("http://localhost:8001/api/tickets/{}", id);
+                match Request::get(&url).send().await {
+                    Ok(response) => {
+                        let status = response.status();
+                        if status == 200 {
+                            match response.json::<Ticket>().await {
+                                Ok(t) => ticket.set(Some(t)),
+                                Err(err) => error.set(Some(format!("Parse error: {}", err))),
+                            }
+                        } else {
+                            match response.json::<ApiError>().await {
+                                Ok(ae) => error.set(Some(ae.message)),
+                                Err(_) => {
+                                    if let Ok(text) = response.text().await {
+                                        error.set(Some(text));
+                                    } else {
+                                        error.set(Some(format!("Server error: {}", 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 if let Some(t) = &*ticket {
+        html! {
+            <div>
+                <h1>{ format!("Ticket #{}", t.id) }</h1>
+                <p><strong>{ "Kategorie: " }</strong>{ &t.category }</p>
+                <p><strong>{ "Betreff: " }</strong>{ &t.betreff }</p>
+                <p><strong>{ "Beschreibung: " }</strong>{ &t.description }</p>
+                <p><strong>{ "Raum: " }</strong>{ t.room }</p>
+                <p><strong>{ "Datum: " }</strong>{ &t.date }</p>
+                <p><strong>{ "Status: "}</strong>{ &t.status }</p>
+            </div>
+        }
+    } else {
+        html! { <p>{ "No ticket found." }</p> }
+    }
+}