Fixed component rerender

This commit is contained in:
xeovalyte 2024-11-29 11:02:06 +01:00
parent 1674243652
commit c28bd137bd
Signed by: xeovalyte
SSH Key Fingerprint: SHA256:kSQDrQDmKzljJzfGYcd3m9RqHi4h8rSwkZ3sQ9kBURo
2 changed files with 117 additions and 28 deletions

View File

@ -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;
}

View File

@ -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 {
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"),
}
}
}
#[derive(Eq, PartialEq)]
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 { value: "all", selected: kind() == TargetKind::All, "Iedereen" }
option { value: "group", selected: kind() == TargetKind::Group, "Groep" }
option { value: "day", selected: kind() == TargetKind::Day, "Dag" }
option { value: "hour", selected: kind() == TargetKind::Hour, "Uur" }
option { value: "hourgroup", selected: kind() == TargetKind::Hourgroup, "Lesgroep" }
option { value: "member", selected: kind() == TargetKind::Member, "Lid" }
option { value: "account", selected: kind() == TargetKind::Account, "Account" }
option { disabled: true, selected: true, "Selecteer een type" },
option { value: "all", "Iedereen" }
option { value: "group", "Groep" }
option { value: "day", "Dag" }
option { value: "hour", "Uur" }
option { value: "hourgroup", "Lesgroep" }
option { value: "member", "Lid" }
option { value: "account", "Account" }
}
match kind() {
_ => rsx! {
div { class: "input input-bordered w-full join-item" }
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-1/2 join-item" }
}
}
}