xeovalyte/wrbapp
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Split input into tabs

Browse Source
This commit is contained in:
xeovalyte 2024-12-01 21:35:02 +01:00
parent c28bd137bd
commit 64e04063a7
Signed by: xeovalyte
SSH Key Fingerprint: SHA256:kSQDrQDmKzljJzfGYcd3m9RqHi4h8rSwkZ3sQ9kBURo
2 changed files with 146 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
assets/tailwind.css
View File

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

168
src/components/news/create.rs
View File

@ -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 hours = use_context::<crate::Hours>();
let step = use_signal(|| Steps::Message);
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 {
class: "flex flex-col gap-y-5",
label {
class: "form-control w-full",
div {
class: "label",
span { class: "label-text", "Titel" }
},
input {
r#type: "text",
class: "input input-bordered w-full",
}
ul {
class: "steps pb-10 mx-auto",
li { class: "step step-primary", "Inhoud" },
li {
class: "step",
class: if let Steps::Targets | Steps::Done | Steps::Verify = *step.read() { { "step-primary" } },
"Naar"
}
label {
class: "form-control w-full",
div {
class: "label",
span { class: "label-text", "Bericht" }
},
textarea {
class: "textarea textarea-bordered w-full",
}
li {
class: "step",
class: if let Steps::Verify | Steps::Done = *step.read() { { "step-primary" } },
"Controleren"
}
li {
class: "step",
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 {
class: "input input-bordered join-item w-1/2",
}
input {
class: "input input-bordered join-item w-1/2",
value: "{value}",
oninput: move |event| {
targets.write().get_mut(&id).unwrap().value = event.value();
},
}
}
},
_ => rsx! {