Split input into tabs

assets/tailwind.css

@@ -3472,6 +3472,10 @@ details.collapse summary::-webkit-details-marker {
   justify-content: flex-start;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -3496,6 +3500,11 @@ details.collapse summary::-webkit-details-marker {
   gap: 1.25rem;
 }
 
+.gap-x-3 {
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+}
+
 .gap-y-5 {
   row-gap: 1.25rem;
 }

src/components/news/create.rs

@@ -2,39 +2,89 @@ use std::collections::HashMap;
 
 use dioxus::prelude::*;
 
+#[derive(PartialEq)]
+enum Steps {
+    Message,
+    Targets,
+    Verify,
+    Done,
+}
+
 #[component]
 pub fn NewsCreate() -> Element {
-    let groups = use_context::<crate::Groups>();
+    let step = use_signal(|| Steps::Message);
-    let hours = use_context::<crate::Hours>();
 
     rsx! {
         div {
-            class: "w-full max-w-2xl space-y-3",
+            class: "w-full max-w-2xl space-y-3 flex flex-col",
             h1 { class: "text-xl font-bold text-primary", "Nieuw bericht" }
-            form {
+            ul {
-                class: "flex flex-col gap-y-5",
+                class: "steps pb-10 mx-auto",
-                label {
+                li { class: "step step-primary", "Inhoud" },
-                    class: "form-control w-full",
+                li {
-                    div {
+                    class: "step",
-                        class: "label",
+                    class: if let Steps::Targets | Steps::Done | Steps::Verify = *step.read() { { "step-primary" } },
-                        span { class: "label-text", "Titel" }
+                    "Naar"
-                    },
-                    input {
-                        r#type: "text",
-                        class: "input input-bordered w-full",
-                    }
                 }
-                label {
+                li {
-                    class: "form-control w-full",
+                    class: "step",
-                    div {
+                    class: if let Steps::Verify | Steps::Done = *step.read() { { "step-primary" } },
-                        class: "label",
+                    "Controleren"
-                        span { class: "label-text", "Bericht" }
+                }
-                    },
+                li {
-                    textarea {
+                    class: "step",
-                        class: "textarea textarea-bordered w-full",
+                    class: if let Steps::Done = *step.read() { { "step-primary" } },
-                    }
+                    "Klaar"
+                }
+            }
+            div {
+                class: "flex flex-col gap-y-5",
+                match *step.read() {
+                    Steps::Message => rsx! { Message { step: step } },
+                    Steps::Targets => rsx! { TargetSelect { step: step } },
+                    Steps::Verify => rsx! { Message { step: step } },
+                    Steps::Done => rsx! { Message { step: step } },
+                }
+            }
+        }
+    }
+}
+
+#[component]
+fn Message(step: Signal<Steps>) -> Element {
+    rsx! {
+        form {
+            class: "flex flex-col w-full gap-y-5",
+            label {
+                class: "form-control w-full",
+                div {
+                    class: "label",
+                    span { class: "label-text", "Titel" }
                 },
-                TargetSelect { }
+                input {
+                    r#type: "text",
+                    class: "input input-bordered w-full",
+                }
+            }
+            label {
+                class: "form-control w-full",
+                div {
+                    class: "label",
+                    span { class: "label-text", "Bericht" }
+                },
+                textarea {
+                    class: "textarea textarea-bordered w-full",
+                }
+            },
+            div {
+                class: "w-full flex gap-x-3 justify-end",
+                button {
+                    class: "btn btn-primary",
+                    onclick: move |_| {
+                        step.set(Steps::Targets)
+                    },
+                    "Volgende",
+                }
             }
         }
     }
@@ -74,7 +124,7 @@ impl TargetKind {
 }
 
 #[component]
-fn TargetSelect() -> Element {
+fn TargetSelect(step: Signal<Steps>) -> Element {
     let mut targets: Signal<HashMap<u32, Target>> = use_signal(|| {
         HashMap::from([(
             0,
@@ -108,7 +158,7 @@ fn TargetSelect() -> Element {
                 TargetEntry { key: "{id}", id, targets }
             }
             button {
-                class: "btn btn-primary btn-outline btn-sm mt-3 mr-auto",
+                class: "btn btn-primary btn-sm mt-3 mr-auto",
                 r#type: "button",
                 onclick: move |_| {
                     let id = target_id();
@@ -123,13 +173,29 @@ fn TargetSelect() -> Element {
                 "Conditie toevoegen",
             }
         }
+        div {
+            class: "w-full flex gap-x-3 justify-end",
+            button {
+                class: "btn",
+                onclick: move |_| {
+                    step.set(Steps::Message)
+                },
+                "Terug",
+            }
+            button {
+                class: "btn btn-primary",
+                onclick: move |_| {
+                    step.set(Steps::Verify)
+                },
+                "Volgende",
+            }
+        }
     }
 }
 
 #[component]
 fn TargetEntry(mut targets: Signal<HashMap<u32, Target>>, id: u32) -> Element {
     let kind = use_memo(move || targets.read().get(&id).unwrap().kind);
-    let value = use_memo(move || targets.read().get(&id).unwrap().value.clone());
 
     tracing::info!("Comonent rendered!");
 
@@ -164,6 +230,7 @@ fn TargetValueInput(
     id: u32,
 ) -> Element {
     let groups = use_context::<crate::Groups>();
+    let value = use_memo(move || targets.read().get(&id).unwrap().value.clone());
 
     rsx! {
         match target_kind() {
@@ -185,6 +252,9 @@ fn TargetValueInput(
                 rsx! {
                     select {
                         class: "select select-bordered join-item w-1/2",
+                        oninput: move |event| {
+                            targets.write().get_mut(&id).unwrap().value = event.value();
+                        },
                         option { disabled: true, selected: true, "Selecteer een dag" }
                         option {
                             value: "friday",
@@ -236,11 +306,47 @@ fn TargetValueInput(
                     }
                 }
             },
+            TargetKind::Hour => {
+                rsx! {
+                    select {
+                        class: "select select-bordered join-item w-1/2",
+                        option { disabled: true, selected: true, "Selecteer een uur" }
+                        option {
+                            value: "a",
+                            "A",
+                        }
+                        option {
+                            value: "b",
+                            "B",
+                        }
+                        option {
+                            value: "c",
+                            "C",
+                        }
+                        option {
+                            value: "d",
+                            "D",
+                        }
+                        option {
+                            value: "e",
+                            "E",
+                        }
+                        option {
+                            value: "z",
+                            "Z",
+                        }
+                    }
+                }
+            },
             TargetKind::Member | TargetKind::Account => {
                 rsx! {
-                  input {
+                    input {
-                      class: "input input-bordered join-item w-1/2",
+                        class: "input input-bordered join-item w-1/2",
-                  }
+                        value: "{value}",
+                        oninput: move |event| {
+                            targets.write().get_mut(&id).unwrap().value = event.value();
+                        },
+                    }
                 }
             },
             _ => rsx! {