feat: create a from for subtasks

src/components/subtasks_form.rs

@@ -0,0 +1,158 @@
+use crate::models::subtask::NewSubtask;
+use crate::query::subtasks::use_subtasks_of_task_query;
+use crate::query::{QueryErrors, QueryKey, QueryValue};
+use crate::server::subtasks::{create_subtask, delete_subtask, edit_subtask};
+use dioxus::core_macro::{component, rsx};
+use dioxus::dioxus_core::Element;
+use dioxus::prelude::*;
+use dioxus_query::prelude::{use_query_client, QueryResult};
+
+#[component]
+pub(crate) fn SubtasksForm(task_id: i32) -> Element {
+    let query_client = use_query_client::<QueryValue, QueryErrors, QueryKey>();
+    let subtasks_query = use_subtasks_of_task_query(task_id);
+    
+    let mut new_title = use_signal(String::new);
+
+    rsx! {
+            form {
+                class: "flex flex-row items-center gap-3",
+                onsubmit: move |event| async move {
+                    let new_subtask = NewSubtask::new(
+                        task_id,
+                        event.values().get("title").unwrap().as_value(),
+                        false
+                    );
+                    let _ = create_subtask(new_subtask).await;
+                    query_client.invalidate_queries(&[QueryKey::SubtasksOfTaskId(task_id)]);
+                    new_title.set(String::new());
+                },
+                label {
+                    r#for: "input_new_title",
+                    class: "min-w-6 text-center",
+                    i {
+                        class: "fa-solid fa-list-check text-zinc-400/50"
+                    }
+                }
+                div {
+                    class: "grow grid grid-cols-6 gap-2",
+                    input {
+                        name: "title",
+                        required: true,
+                        value: new_title,
+                        r#type: "text",
+                        class: "grow py-2 px-3 col-span-5 bg-zinc-800/50 rounded-lg",
+                        id: "input_new_title",
+                        onchange: move |event| new_title.set(event.value())
+                    }
+                    button {
+                        r#type: "submit",
+                        class: "py-2 col-span-1 bg-zinc-800/50 rounded-lg",
+                        i {
+                            class: "fa-solid fa-plus"
+                        }
+                    }
+                }
+            }
+            match subtasks_query.result().value() {
+                QueryResult::Ok(QueryValue::Subtasks(subtasks))
+                | QueryResult::Loading(Some(QueryValue::Subtasks(subtasks))) => {
+                    rsx! {
+                        for subtask in subtasks.clone() {
+                            div {
+                                key: "{subtask.id()}",
+                                class: "flex flex-row items-center gap-3",
+                                i {
+                                    class: format!(
+                                        "{} min-w-6 text-center text-2xl text-zinc-400/50",
+                                        if subtask.is_completed() {
+                                            "fa solid fa-square-check"
+                                        } else {
+                                            "fa-regular fa-square"
+                                        }
+                                    ),
+                                    onclick: {
+                                        let subtask = subtask.clone();
+                                        move |_| {
+                                            let subtask = subtask.clone();
+                                            async move {
+                                                let new_subtask = NewSubtask::new(
+                                                    subtask.task_id(),
+                                                    subtask.title().to_owned(),
+                                                    !subtask.is_completed()
+                                                );
+                                                let _ = edit_subtask(
+                                                    subtask.id(),
+                                                    new_subtask
+                                                ).await;
+                                                query_client.invalidate_queries(&[
+                                                    QueryKey::SubtasksOfTaskId(task_id)
+                                                ]);
+                                            }
+                                        }
+                                    }
+                                }
+                                div {
+                                    class: "grow grid grid-cols-6 gap-2",
+                                    input {
+                                        r#type: "text",
+                                        class: "grow py-2 px-3 col-span-5 bg-zinc-800/50 rounded-lg",
+                                        id: "input_new_title",
+                                        initial_value: subtask.title(),
+                                        onchange: {
+                                            let subtask = subtask.clone();
+                                            move |event| {
+                                                let subtask = subtask.clone();
+                                                async move {
+                                                    let new_subtask = NewSubtask::new(
+                                                        subtask.task_id(),
+                                                        event.value(),
+                                                        subtask.is_completed()
+                                                    );
+                                                    let _ = edit_subtask(
+                                                        subtask.id(),
+                                                        new_subtask
+                                                    ).await;
+                                                    query_client.invalidate_queries(&[
+                                                        QueryKey::SubtasksOfTaskId(task_id)
+                                                    ]);
+                                                }
+                                            }
+                                        }
+                                    }
+                                    button {
+                                        r#type: "button",
+                                        class: "py-2 col-span-1 bg-zinc-800/50 rounded-lg",
+                                        onclick: {
+                                            let subtask = subtask.clone();
+                                            move |_| {
+                                                let subtask = subtask.clone();
+                                                async move {
+                                                    let _ = delete_subtask(subtask.id()).await;
+                                                    query_client.invalidate_queries(&[
+                                                        QueryKey::SubtasksOfTaskId(task_id)
+                                                    ]);
+                                                }
+                                            }
+                                        },
+                                        i {
+                                            class: "fa-solid fa-trash-can"
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                },
+                QueryResult::Loading(None) => rsx! {
+                    // TODO: Add a loading indicator.
+                },
+                QueryResult::Err(errors) => rsx! {
+                    div {
+                        "Errors occurred: {errors:?}"
+                    }
+                },
+                value => panic!("Unexpected query result: {value:?}")
+            }
+    }
+}