dioxus/examples/crm.rs

107 lines
4.4 KiB
Rust
Raw Normal View History

2021-09-24 05:24:03 +00:00
/*
Tiny CRM: A port of the Yew CRM example to Dioxus.
*/
2022-01-25 00:52:12 +00:00
use dioxus::prelude::*;
use dioxus_router::{Link, Route, Router};
2021-09-24 05:24:03 +00:00
fn main() {
dioxus_desktop::launch(app);
2021-09-24 05:24:03 +00:00
}
#[derive(Clone, Debug, Default)]
pub struct Client {
pub first_name: String,
pub last_name: String,
pub description: String,
}
fn app(cx: Scope) -> Element {
let clients = use_ref(&cx, || vec![] as Vec<Client>);
2022-03-05 20:59:35 +00:00
let firstname = use_state(&cx, String::new);
let lastname = use_state(&cx, String::new);
let description = use_state(&cx, String::new);
2021-09-24 05:24:03 +00:00
cx.render(rsx!(
2022-01-03 06:20:05 +00:00
body {
margin_left: "35%",
link {
rel: "stylesheet",
href: "https://unpkg.com/purecss@2.0.6/build/pure-min.css",
integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5",
crossorigin: "anonymous",
}
h1 {"Dioxus CRM Example"}
2022-03-05 19:36:25 +00:00
Router {
Route { to: "/",
div { class: "crm",
h2 { margin_bottom: "10px", "List of clients" }
div { class: "clients", margin_left: "10px",
clients.read().iter().map(|client| rsx!(
div { class: "client", style: "margin-bottom: 50px",
p { "First Name: {client.first_name}" }
p { "Last Name: {client.last_name}" }
p {"Description: {client.description}"}
})
)
}
2022-03-05 19:36:25 +00:00
Link { to: "/new", class: "pure-button pure-button-primary", "Add New" }
Link { to: "/new", class: "pure-button", "Settings" }
2021-09-24 05:24:03 +00:00
}
2022-03-05 19:36:25 +00:00
}
Route { to: "/new",
div { class: "crm",
h2 { margin_bottom: "10px", "Add new client" }
form { class: "pure-form",
input {
class: "new-client firstname",
placeholder: "First name",
value: "{firstname}",
2022-03-05 20:59:35 +00:00
oninput: move |e| firstname.set(e.value.clone())
}
input {
class: "new-client lastname",
placeholder: "Last name",
value: "{lastname}",
2022-03-05 20:59:35 +00:00
oninput: move |e| lastname.set(e.value.clone())
}
textarea {
class: "new-client description",
placeholder: "Description",
value: "{description}",
2022-03-05 20:59:35 +00:00
oninput: move |e| description.set(e.value.clone())
}
}
button {
class: "pure-button pure-button-primary",
onclick: move |_| {
clients.write().push(Client {
2022-03-07 01:37:57 +00:00
description: description.to_string(),
first_name: firstname.to_string(),
last_name: lastname.to_string(),
});
2022-03-05 20:59:35 +00:00
description.set(String::new());
firstname.set(String::new());
lastname.set(String::new());
},
"Add New"
}
2022-03-05 19:36:25 +00:00
Link { to: "/", class: "pure-button", "Go Back" }
2021-09-24 05:24:03 +00:00
}
2022-03-05 19:36:25 +00:00
}
Route { to: "/settings",
div {
h2 { margin_bottom: "10px", "Settings" }
button {
background: "rgb(202, 60, 60)",
class: "pure-button pure-button-primary",
onclick: move |_| clients.write().clear(),
"Remove all clients"
}
2022-03-05 19:36:25 +00:00
Link { to: "/", class: "pure-button pure-button-primary", "Go Back" }
2021-09-24 05:24:03 +00:00
}
2022-03-05 19:36:25 +00:00
}
}
2021-09-24 05:24:03 +00:00
}
2021-11-07 03:11:17 +00:00
))
}