diff --git a/assets/tailwind.css b/assets/tailwind.css index e7622de..4042b94 100644 --- a/assets/tailwind.css +++ b/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; } diff --git a/src/components/news/create.rs b/src/components/news/create.rs index b4c85b0..8737658 100644 --- a/src/components/news/create.rs +++ b/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 { - 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>, 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, + targets: Signal>, + id: u32, +) -> Element { + let groups = use_context::(); + + 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" } } } }