2021-09-24 05:24:03 +00:00
|
|
|
/*
|
|
|
|
Tiny CRM: A port of the Yew CRM example to Dioxus.
|
|
|
|
*/
|
|
|
|
|
|
|
|
use dioxus_core as dioxus;
|
|
|
|
use dioxus_core::prelude::*;
|
2021-09-25 01:46:23 +00:00
|
|
|
use dioxus_core_macro::*;
|
2021-09-24 05:24:03 +00:00
|
|
|
use dioxus_hooks::*;
|
|
|
|
use dioxus_html as dioxus_elements;
|
|
|
|
fn main() {
|
|
|
|
// Setup logging
|
|
|
|
wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
|
|
|
|
console_error_panic_hook::set_once();
|
|
|
|
|
2021-09-24 05:26:16 +00:00
|
|
|
dioxus_web::launch(App, |c| c)
|
2021-09-24 05:24:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
enum Scene {
|
|
|
|
ClientsList,
|
|
|
|
NewClientForm,
|
|
|
|
Settings,
|
|
|
|
}
|
|
|
|
|
|
|
|
#[derive(Clone, Debug, Default)]
|
|
|
|
pub struct Client {
|
|
|
|
pub first_name: String,
|
|
|
|
pub last_name: String,
|
|
|
|
pub description: String,
|
|
|
|
}
|
|
|
|
|
|
|
|
static App: FC<()> = |cx, _| {
|
|
|
|
let scene = use_state(cx, || Scene::ClientsList);
|
|
|
|
let clients = use_ref(cx, || vec![] as Vec<Client>);
|
|
|
|
|
|
|
|
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:26:16 +00:00
|
|
|
let scene = match *scene {
|
2021-09-24 05:24:03 +00:00
|
|
|
Scene::ClientsList => {
|
|
|
|
rsx!(cx, div { class: "crm"
|
|
|
|
h2 { "List of clients" margin_bottom: "10px" }
|
|
|
|
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}"}
|
|
|
|
})
|
|
|
|
)}
|
|
|
|
}
|
|
|
|
button { class: "pure-button pure-button-primary" onclick: move |_| scene.set(Scene::NewClientForm), "Add New" }
|
|
|
|
button { class: "pure-button" onclick: move |_| scene.set(Scene::Settings), "Settings" }
|
|
|
|
})
|
|
|
|
}
|
|
|
|
Scene::NewClientForm => {
|
|
|
|
let add_new = move |_| {
|
|
|
|
clients.write().push(Client {
|
|
|
|
description: (*description).clone(),
|
|
|
|
first_name: (*firstname).clone(),
|
|
|
|
last_name: (*lastname).clone(),
|
|
|
|
});
|
|
|
|
description.set(String::new());
|
|
|
|
firstname.set(String::new());
|
|
|
|
lastname.set(String::new());
|
|
|
|
};
|
|
|
|
rsx!(cx, div { class: "crm"
|
|
|
|
h2 {"Add new client" margin_bottom: "10px" }
|
|
|
|
form { class: "pure-form"
|
|
|
|
input { class: "new-client firstname" placeholder: "First name" value: "{firstname}"
|
2021-09-25 00:11:30 +00:00
|
|
|
oninput: move |evt| firstname.set(evt.value())
|
2021-09-24 05:24:03 +00:00
|
|
|
}
|
|
|
|
input { class: "new-client lastname" placeholder: "Last name" value: "{lastname}"
|
2021-09-25 00:11:30 +00:00
|
|
|
oninput: move |evt| lastname.set(evt.value())
|
2021-09-24 05:24:03 +00:00
|
|
|
}
|
|
|
|
textarea { class: "new-client description" placeholder: "Description" value: "{description}"
|
2021-09-25 00:11:30 +00:00
|
|
|
oninput: move |evt| description.set(evt.value())
|
2021-09-24 05:24:03 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
button { class: "pure-button pure-button-primary", onclick: {add_new}, "Add New" }
|
|
|
|
button { class: "pure-button", onclick: move |_| scene.set(Scene::ClientsList), "Go Back" }
|
|
|
|
})
|
|
|
|
}
|
|
|
|
Scene::Settings => {
|
|
|
|
rsx!(cx, div {
|
2021-09-25 00:11:30 +00:00
|
|
|
h2 { "Settings" margin_bottom: "10px" }
|
2021-09-24 05:24:03 +00:00
|
|
|
button {
|
|
|
|
background: "rgb(202, 60, 60)"
|
|
|
|
class: "pure-button pure-button-primary"
|
|
|
|
onclick: move |_| clients.write().clear(),
|
|
|
|
"Remove all clients"
|
|
|
|
}
|
|
|
|
button {
|
|
|
|
class: "pure-button pure-button-primary"
|
|
|
|
onclick: move |_| scene.set(Scene::ClientsList),
|
|
|
|
"Go Back"
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
2021-09-24 05:26:16 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
rsx!(cx, body {
|
|
|
|
link {
|
|
|
|
rel: "stylesheet"
|
|
|
|
href: "https://unpkg.com/purecss@2.0.6/build/pure-min.css"
|
|
|
|
integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
|
|
|
|
crossorigin: "anonymous"
|
|
|
|
}
|
|
|
|
margin_left: "35%"
|
|
|
|
h1 {"Dioxus CRM Example"}
|
|
|
|
{scene}
|
|
|
|
})
|
2021-09-24 05:24:03 +00:00
|
|
|
};
|