dioxus/examples/crm.rs

199 lines
5.3 KiB
Rust
Raw Normal View History

2022-12-16 10:55:20 +00:00
//! Tiny CRM: A port of the Yew CRM example to Dioxus.
#![allow(non_snake_case)]
2022-01-25 00:52:12 +00:00
use dioxus::prelude::*;
2022-12-16 10:55:20 +00:00
use dioxus_router::prelude::*;
2021-09-24 05:24:03 +00:00
fn main() {
2022-12-16 10:55:20 +00:00
dioxus_desktop::launch(App);
2021-09-24 05:24:03 +00:00
}
2023-06-02 17:33:47 +00:00
#[derive(Routable, Clone)]
#[rustfmt::skip]
enum Route {
#[route("/")]
ClientList {},
#[route("/new")]
ClientAdd {},
#[route("/settings")]
Settings {},
}
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,
}
2023-06-02 17:33:47 +00:00
type ClientContext = Vec<Client>;
2022-12-16 10:55:20 +00:00
fn App(cx: Scope) -> Element {
2023-06-02 17:33:47 +00:00
use_shared_state_provider::<ClientContext>(cx, Default::default);
2022-12-16 10:55:20 +00:00
render! {
link {
rel: "stylesheet",
href: "https://unpkg.com/purecss@2.0.6/build/pure-min.css",
integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5",
crossorigin: "anonymous",
}
style { "
.red {{
background-color: rgb(202, 60, 60) !important;
}}
" }
h1 { "Dioxus CRM Example" }
2022-12-16 10:55:20 +00:00
2023-07-26 01:14:48 +00:00
Router::<Route> {}
2022-12-16 10:55:20 +00:00
}
}
2023-06-02 17:33:47 +00:00
#[inline_props]
2022-12-16 10:55:20 +00:00
fn ClientList(cx: Scope) -> Element {
2023-06-02 17:33:47 +00:00
let clients = use_shared_state::<ClientContext>(cx).unwrap();
2022-12-16 10:55:20 +00:00
cx.render(rsx! {
h2 { "List of Clients" }
Link {
2023-07-24 18:57:56 +00:00
to: Route::ClientAdd {},
2022-12-16 10:55:20 +00:00
class: "pure-button pure-button-primary",
"Add Client"
}
Link {
2023-07-24 18:57:56 +00:00
to: Route::Settings {},
2022-12-16 10:55:20 +00:00
class: "pure-button",
"Settings"
}
2023-06-02 17:33:47 +00:00
clients.read().iter().map(|client| rsx! {
2022-12-16 10:55:20 +00:00
div {
class: "client",
style: "margin-bottom: 50px",
p { "Name: {client.first_name} {client.last_name}" }
p { "Description: {client.description}" }
}
2022-12-16 10:55:20 +00:00
})
})
}
2023-06-02 17:33:47 +00:00
#[inline_props]
2022-12-16 10:55:20 +00:00
fn ClientAdd(cx: Scope) -> Element {
2023-06-02 17:33:47 +00:00
let clients = use_shared_state::<ClientContext>(cx).unwrap();
2023-04-12 18:19:01 +00:00
let first_name = use_state(cx, String::new);
let last_name = use_state(cx, String::new);
let description = use_state(cx, String::new);
2022-12-16 10:55:20 +00:00
2023-06-02 17:33:47 +00:00
let navigator = use_navigator(cx);
2022-12-16 10:55:20 +00:00
cx.render(rsx! {
h2 { "Add new Client" }
form {
class: "pure-form pure-form-aligned",
onsubmit: move |_| {
2023-06-02 17:33:47 +00:00
let mut clients = clients.write();
2022-12-16 10:55:20 +00:00
clients.push(Client {
first_name: first_name.to_string(),
last_name: last_name.to_string(),
description: description.to_string(),
});
2023-06-02 17:33:47 +00:00
navigator.push(Route::ClientList {});
2022-12-16 10:55:20 +00:00
},
fieldset {
div {
class: "pure-control-group",
label {
"for": "first_name",
"First Name"
}
input {
id: "first_name",
"type": "text",
placeholder: "First Name…",
required: "",
value: "{first_name}",
oninput: move |e| first_name.set(e.value.clone())
2021-09-24 05:24:03 +00:00
}
2022-03-05 19:36:25 +00:00
}
2022-12-16 10:55:20 +00:00
div {
class: "pure-control-group",
label {
"for": "last_name",
"Last Name"
}
input {
id: "last_name",
"type": "text",
placeholder: "Last Name…",
required: "",
value: "{last_name}",
oninput: move |e| last_name.set(e.value.clone())
2021-09-24 05:24:03 +00:00
}
2022-03-05 19:36:25 +00:00
}
2022-12-16 10:55:20 +00:00
div {
class: "pure-control-group",
label {
"for": "description",
"Description"
}
textarea {
id: "description",
placeholder: "Description…",
value: "{description}",
oninput: move |e| description.set(e.value.clone())
}
}
div {
class: "pure-controls",
button {
"type": "submit",
class: "pure-button pure-button-primary",
"Save"
}
Link {
2023-07-24 18:57:56 +00:00
to: Route::ClientList {},
2022-12-16 10:55:20 +00:00
class: "pure-button pure-button-primary red",
"Cancel"
2021-09-24 05:24:03 +00:00
}
2022-03-05 19:36:25 +00:00
}
}
2022-12-16 10:55:20 +00:00
}
})
}
2023-06-02 17:33:47 +00:00
#[inline_props]
2022-12-16 10:55:20 +00:00
fn Settings(cx: Scope) -> Element {
2023-06-02 17:33:47 +00:00
let clients = use_shared_state::<ClientContext>(cx).unwrap();
2022-12-16 10:55:20 +00:00
cx.render(rsx! {
h2 { "Settings" }
button {
class: "pure-button pure-button-primary red",
onclick: move |_| {
2023-06-02 17:33:47 +00:00
let mut clients = clients.write();
2022-12-16 10:55:20 +00:00
clients.clear();
},
"Remove all Clients"
}
Link {
2023-07-24 18:57:56 +00:00
to: Route::ClientList {},
2022-12-16 10:55:20 +00:00
class: "pure-button",
"Go back"
2021-09-24 05:24:03 +00:00
}
2022-12-16 10:55:20 +00:00
})
}