examples: make crm use router

This commit is contained in:
Jonathan Kelley committed 2022-03-05 14:36:25 -05:00
1 parent bec2f4129b
commit ea7dfd8be4
1 file changed
+23 -37
+23 -37
View File
@@ -6,11 +6,6 @@ use dioxus::prelude::*;
fn main() { fn main() {
dioxus::desktop::launch(app); dioxus::desktop::launch(app);
} }
enum Scene {
ClientsList,
NewClientForm,
Settings,
}
#[derive(Clone, Debug, Default)] #[derive(Clone, Debug, Default)]
pub struct Client { pub struct Client {
@@ -21,10 +16,9 @@ pub struct Client {
fn app(cx: Scope) -> Element { fn app(cx: Scope) -> Element {
let clients = use_ref(&cx, || vec![] as Vec<Client>); let clients = use_ref(&cx, || vec![] as Vec<Client>);
let scene = use_state(&cx, || Scene::ClientsList); let (firstname, set_firstname) = use_state(&cx, String::new);
let firstname = use_state(&cx, String::new); let (lastname, set_lastname) = use_state(&cx, String::new);
let lastname = use_state(&cx, String::new); let (description, set_description) = use_state(&cx, String::new);
let description = use_state(&cx, String::new);
cx.render(rsx!( cx.render(rsx!(
body { body {
@@ -35,11 +29,9 @@ fn app(cx: Scope) -> Element {
integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5", integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5",
crossorigin: "anonymous", crossorigin: "anonymous",
} }
h1 {"Dioxus CRM Example"} h1 {"Dioxus CRM Example"}
Router {
match scene.get() { Route { to: "/",
Scene::ClientsList => rsx!(
div { class: "crm", div { class: "crm",
h2 { margin_bottom: "10px", "List of clients" } h2 { margin_bottom: "10px", "List of clients" }
div { class: "clients", margin_left: "10px", div { class: "clients", margin_left: "10px",
@@ -51,11 +43,11 @@ fn app(cx: Scope) -> Element {
}) })
) )
} }
button { class: "pure-button pure-button-primary", onclick: move |_| scene.set(Scene::NewClientForm), "Add New" } Link { to: "/new", class: "pure-button pure-button-primary", "Add New" }
button { class: "pure-button", onclick: move |_| scene.set(Scene::Settings), "Settings" } Link { to: "/new", class: "pure-button", "Settings" }
} }
), }
Scene::NewClientForm => rsx!( Route { to: "/new",
div { class: "crm", div { class: "crm",
h2 { margin_bottom: "10px", "Add new client" } h2 { margin_bottom: "10px", "Add new client" }
form { class: "pure-form", form { class: "pure-form",
@@ -63,41 +55,39 @@ fn app(cx: Scope) -> Element {
class: "new-client firstname", class: "new-client firstname",
placeholder: "First name", placeholder: "First name",
value: "{firstname}", value: "{firstname}",
oninput: move |e| firstname.set(e.value.clone()) oninput: move |e| set_firstname(e.value.clone())
} }
input { input {
class: "new-client lastname", class: "new-client lastname",
placeholder: "Last name", placeholder: "Last name",
value: "{lastname}", value: "{lastname}",
oninput: move |e| lastname.set(e.value.clone()) oninput: move |e| set_lastname(e.value.clone())
} }
textarea { textarea {
class: "new-client description", class: "new-client description",
placeholder: "Description", placeholder: "Description",
value: "{description}", value: "{description}",
oninput: move |e| description.set(e.value.clone()) oninput: move |e| set_description(e.value.clone())
} }
} }
button { button {
class: "pure-button pure-button-primary", class: "pure-button pure-button-primary",
onclick: move |_| { onclick: move |_| {
clients.write().push(Client { clients.write().push(Client {
description: (**description).clone(), description: (*description).clone(),
first_name: (**firstname).clone(), first_name: (*firstname).clone(),
last_name: (**lastname).clone(), last_name: (*lastname).clone(),
}); });
description.set(String::new()); set_description(String::new());
firstname.set(String::new()); set_firstname(String::new());
lastname.set(String::new()); set_lastname(String::new());
}, },
"Add New" "Add New"
} }
button { class: "pure-button", onclick: move |_| scene.set(Scene::ClientsList), Link { to: "/", class: "pure-button", "Go Back" }
"Go Back"
}
} }
), }
Scene::Settings => rsx!( Route { to: "/settings",
div { div {
h2 { margin_bottom: "10px", "Settings" } h2 { margin_bottom: "10px", "Settings" }
button { button {
@@ -106,13 +96,9 @@ fn app(cx: Scope) -> Element {
onclick: move |_| clients.write().clear(), onclick: move |_| clients.write().clear(),
"Remove all clients" "Remove all clients"
} }
button { Link { to: "/", class: "pure-button pure-button-primary", "Go Back" }
class: "pure-button pure-button-primary",
onclick: move |_| scene.set(Scene::ClientsList),
"Go Back"
}
} }
) }
} }
} }
)) ))