Replies: 4 comments
-
Continuing to experiment, I discovered a few things:
I'm operating under the assumption at this point that, for full stack at least, you can't really do #[component]
fn Library() -> Element {
let object_types = use_resource(|| async move { get_object_types().await });
let submitted_values = use_signal(|| HashMap::new());
use_effect(move || println!("Submitted values = {:?}", submitted_values));
match &*object_types.read_unchecked() {
Some(Ok(list)) => {
rsx! {
div {
class: "flex bg-gray-50 h-16 p-4",
justify_content: "center",
h1 {
"Library",
}
}
div {
class: "flex flex-1 bg-gray-50 overflow-y-auto paragraph px-4",
div {
class: "grid grid-flow-col auto-cols-max",
for object_type in list {
button {
class: "btn btn-lg bg-white",
height: "8rem",
width: "8rem",
margin: "10px",
"{ object_type.name() }",
}
}
button {
class: "btn btn-lg bg-white",
height: "8rem",
width: "8rem",
margin: "10px",
onclick: move |_| async move { let _ = eval("object_type_dialog.showModal()").await; },
PlusIcon { }
}
ObjectTypeDialog { submitted_values: submitted_values }
}
}
}
}
Some(Err(error)) => {
rsx! { "an error occurred while fetching object types: {error}" }
}
None => {
rsx! { "loading object types" }
}
}
}
#[component]
fn ObjectTypeDialog(submitted_values: Signal<HashMap<String, FormValue>>) -> Element {
// Get DataTypes as string representation
let datatypes = DataType::iter()
.map(|d| format!("{:?}", d))
.collect::<Vec<String>>();
// Count of number of attribute rows
let mut count = use_signal(|| 1);
let mut values = use_signal(|| HashMap::new());
use_effect(move || println!("values changed to {:?}", values));
rsx! {
dialog {
class: "modal",
id: "object_type_dialog",
div {
class: "modal-box w-11/12 max-w-5xl",
form {
class: "pure-form pure-form-aligned",
oninput: move |ev| {
println!("input event: {:?}", ev);
values.set(ev.values());
},
onsubmit: move |ev| {
println!("submit event: {:?}", ev);
submitted_values.set(ev.values());
},
input {
class: "grow input input-bordered input-primary",
name: "name",
r#type: "text",
placeholder: "Name",
margin: "4px",
onmounted: move |e| async move {
_ = e.set_focus(true).await;
},
}
div {
for index in 0..*count.read() {
AttributeRow {
datatypes: datatypes.clone(),
index: index,
}
}
}
div {
button {
class: "btn bg-white",
margin: "4px",
onclick: move |_| {
*count.write() += 1;
},
PlusIcon { },
}
}
div {
class: "modal-action",
button {
class: "btn",
onclick: move |_| async move { let _ = eval("object_type_dialog.close()").await; },
r#type: "submit",
margin: "4px",
"Ok"
},
button {
class: "btn",
margin: "4px",
"Cancel"
}
}
}
}
}
}
}
#[component]
fn AttributeRow(datatypes: Vec<String>, index: usize) -> Element {
rsx! {
div {
display: "flex",
input {
class: "grow input input-bordered input-primary",
name: format!("attribute-name{}", index),
r#type: "text",
placeholder: "Attribute Name",
margin: "4px",
}
select {
class: "select select-bordered w-full max-w-xs",
name: format!("datatype{}", index),
margin: "4px",
option {
disabled: true,
selected: true,
"Attribute Data Type",
}
for datatype in datatypes {
option {
"{ datatype }",
}
}
}
div {
class: "form-control",
margin: "4px",
label {
class: "label cursor-pointer",
span {
class: "label-text",
"id",
}
input {
name: format!("is-id{}", index),
r#type: "checkbox",
class: "checkbox",
}
}
}
}
}
} And here's the output I get when I run this with INFO logging (TRACE gives me too much noise from surrealdb):
Clearly, I'm not understanding what's going on with the signalling, so, again, any help or guidance someone could provide would be greatly appreciated. Thanks again, Jack |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
Hrm, that doesn't seem to work for me. I replaced all my printlns with My log level's definitely set to INFO, I get INFO logs (see above) for other things, so I'm not sure what's going on. Is it because this is all happening in a modal dialog? |
Beta Was this translation helpful? Give feedback.
-
So, after pounding my head against this for days now, contending with, basically, no docs, the examples in the latest tagged versions not compiling, not even being able to compile the latest version of dioxus-cll, I think I'm gonna give it a rest. This seems like a really great project, and I was really looking forward to test-driving it, but it feels like I should maybe circle back when it's at 1.0 or so. Disappointing, but 🤷 |
Beta Was this translation helpful? Give feedback.
-
I'm playing around with dioxus using fullstack, and so far, I think it's amazing! However, I've run into a roadblock.
My app pops up a dialog box to accept input for an "object type", which involves a name, and a series of attributes for the type. The form allows you to add rows for additional attributes, so in the form there'll be, basically, a name field and N attributes each consisting of a name field, a datatype enum, and a bool checkbox.
Here's what it ends up looking like:
Here's the code to generate it:
However, when I submit the form using the "Ok" button, nothing happens - my println doesn't get printed, and it seems like nothing really happens. In the browser console, all I get is some log lines like this:
I'm using dioxus 0.5, along with Tailwind CSS.
I was trying to follow the
form.rs
example in the dioxus repo. Any ideas? I'm pretty sure it's something I'm missing or doing wrong - I'm not really a front-end developer.Anyway, whatever help y'all can provide, I'd really appreciate it!
-Jack
Beta Was this translation helpful? Give feedback.
All reactions