Fixed component rerender

assets/tailwind.css

@@ -3392,6 +3392,14 @@ details.collapse summary::-webkit-details-marker {
   min-height: 4rem;
 }
 
+.w-1\/2 {
+  width: 50%;
+}
+
+.w-1\/4 {
+  width: 25%;
+}
+
 .w-80 {
   width: 20rem;
 }

src/components/news/create.rs

@@ -1,4 +1,4 @@
-use std::{collections::HashMap, ops::DerefMut};
+use std::collections::HashMap;
 
 use dioxus::prelude::*;
 
@@ -52,21 +52,7 @@ enum TargetKind {
     Day,
 }
 
-impl std::fmt::Display for TargetKind {
+#[derive(Eq, PartialEq)]
-    fn fmt(&self, f: &mut std::fmt::Formatter) -> std::fmt::Result {
-        match self {
-            TargetKind::All => write!(f, "all"),
-            TargetKind::Group => write!(f, "group"),
-            TargetKind::Hourgroup => write!(f, "hourgroup"),
-            TargetKind::Hour => write!(f, "hour"),
-            TargetKind::Member => write!(f, "member"),
-            TargetKind::Account => write!(f, "account"),
-            TargetKind::Day => write!(f, "day"),
-            TargetKind::None => write!(f, "none"),
-        }
-    }
-}
-
 struct Target {
     kind: TargetKind,
     value: String,
@@ -106,6 +92,8 @@ fn TargetSelect() -> Element {
 
         filtered_targets.sort_unstable();
 
+        tracing::info!("targets updated");
+
         filtered_targets
     });
 
@@ -141,29 +129,122 @@ fn TargetSelect() -> Element {
 #[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!");
 
     rsx! {
         div {
             class: "join w-full mt-3",
             select {
-                class: "select select-bordered join-item w-full",
+                class: "select select-bordered join-item w-1/2",
                 oninput: move |event| {
                     let target_kind = TargetKind::from_string(&event.value());
                     targets.write().get_mut(&id).unwrap().kind = target_kind;
+                    targets.write().get_mut(&id).unwrap().value = String::new();
                 },
-                option { disabled: true, selected: true, value: "none",  "Selecteer een type" },
+                option { disabled: true, selected: true,  "Selecteer een type" },
-                option { value: "all", selected: kind() == TargetKind::All, "Iedereen" }
+                option { value: "all", "Iedereen" }
-                option { value: "group", selected: kind() == TargetKind::Group, "Groep" }
+                option { value: "group", "Groep" }
-                option { value: "day", selected: kind() == TargetKind::Day, "Dag" }
+                option { value: "day", "Dag" }
-                option { value: "hour", selected: kind() == TargetKind::Hour, "Uur" }
+                option { value: "hour", "Uur" }
-                option { value: "hourgroup", selected: kind() == TargetKind::Hourgroup, "Lesgroep" }
+                option { value: "hourgroup", "Lesgroep" }
-                option { value: "member", selected: kind() == TargetKind::Member, "Lid" }
+                option { value: "member", "Lid" }
-                option { value: "account", selected: kind() == TargetKind::Account, "Account" }
+                option { value: "account", "Account" }
             }
-            match kind() {
+            TargetValueInput { target_kind: kind, targets: targets, id: id }
+        }
+    }
+}
+
+#[component]
+fn TargetValueInput(
+    target_kind: Memo<TargetKind>,
+    targets: Signal<HashMap<u32, Target>>,
+    id: u32,
+) -> Element {
+    let groups = use_context::<crate::Groups>();
+
+    rsx! {
+        match target_kind() {
+            TargetKind::Group => {
+                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 groep" }
+                        for (group_id, group_name) in groups.0 {
+                            option { value: group_id, "{group_name}" }
+                        }
+                    }
+                }
+            },
+            TargetKind::Day => {
+                rsx! {
+                    select {
+                        class: "select select-bordered join-item w-1/2",
+                        option { disabled: true, selected: true, "Selecteer een dag" }
+                        option {
+                            value: "friday",
+                            "Vrijdag",
+                        }
+                        option {
+                            value: "saturday",
+                            "Zaterdag"
+                        }
+                    }
+                }
+            },
+            TargetKind::Hourgroup => {
+                rsx! {
+                    select {
+                        class: "select select-bordered join-item w-1/4",
+                        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",
+                        }
+                    }
+                    select {
+                        class: "select select-bordered join-item w-1/4",
+                        option { disabled: true, selected: true, "Selecteer een groep" }
+                        for i in 1..7 {
+                            option { "{i}" }
+                        }
+                    }
+                }
+            },
+            TargetKind::Member | TargetKind::Account => {
+                rsx! {
+                  input {
+                      class: "input input-bordered join-item w-1/2",
+                  }
+                }
+            },
             _ => rsx! {
-                    div { class: "input input-bordered w-full join-item" }
+                div { class: "input input-bordered w-1/2 join-item" }
-                }
             }
         }
     }