examples: make crm use router
This commit is contained in:
1 parent
bec2f4129b
commit
ea7dfd8be4
1 file changed
+23
-37
+23
-37
@@ -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"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
)
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
))
|
))
|
||||||
|
|||||||
Reference in new issue
Block a user