diff --git a/.cargo/config.toml b/.cargo/config.toml index cbb22e8..72c3818 100644 --- a/.cargo/config.toml +++ b/.cargo/config.toml @@ -6,3 +6,6 @@ rustflags = [ [target.wasm32-unknown-unknown] rustflags = ["--cfg=web_sys_unstable_apis"] + +[target.'cfg(target_os = "windows")'] +rustflags = ["--cfg=web_sys_unstable_apis"] diff --git a/src/app.rs b/src/app.rs index 1a00648..fcd99b6 100644 --- a/src/app.rs +++ b/src/app.rs @@ -1,4 +1,4 @@ -use crate::pages::{AboutPage, HomePage, LoanerPage, ProviderPortal, ComparisonTestPage, ScholarshipInfoPage, TestPage, ProviderContactPage}; +use crate::pages::{AboutPage, HomePage, ProviderPortal, ComparisonTestPage, ScholarshipInfoPage, TestPage, ProviderContactPage, LoanerShell, LoanerFallback, LoanerBorrowForm, LoanerReturnForm}; use leptos::prelude::*; use leptos_meta::{MetaTags, Stylesheet, Title, provide_meta_context}; use leptos_oidc::{Auth, AuthParameters, AuthSignal, Challenge}; @@ -108,9 +108,10 @@ pub fn AppWithRoutes() -> impl IntoView { - - - + + + + diff --git a/src/common/animations.rs b/src/common/animations.rs new file mode 100644 index 0000000..53ba72e --- /dev/null +++ b/src/common/animations.rs @@ -0,0 +1,14 @@ +use leptos_animate::animations::classes::{In, Out}; + +pub fn pop_in_out() -> (In, Out) { + ( + In::default() + .source("opacity-0 -translate-y-2 scale-90") + .active("transition-all duration-150 transform-gpu") + .target("opacity-100 translate-y-0 scale-100"), + Out::default() + .source("opacity-100 translate-y-0 scale-100") + .active("transition-all duration-150 transform-gpu") + .target("opacity-0 -translate-y-2 scale-90"), + ) +} diff --git a/src/common/mod.rs b/src/common/mod.rs index a34a9ec..5f68c9d 100644 --- a/src/common/mod.rs +++ b/src/common/mod.rs @@ -5,5 +5,6 @@ mod form_schema; mod user; mod value_type; mod submit_status; +pub mod animations; pub use self::{comparison::*, expandable_info::*, form_schema::*, user::*, value_type::*, form_params::*, submit_status::*}; diff --git a/src/pages/loaner_page.rs b/src/pages/loaner_page.rs index 1349628..f165956 100644 --- a/src/pages/loaner_page.rs +++ b/src/pages/loaner_page.rs @@ -19,6 +19,13 @@ use leptos_router::hooks::{use_navigate, use_params}; use leptos_router::params::Params; use serde::{Deserialize, Serialize}; use std::collections::HashMap; +use leptos_router::components::Outlet; +use leptos_animate::animate; +use crate::common::animations::pop_in_out; +// Loaner page creates a single page that contains the borrowing/returning buttons +// and a panel for a form. At first, it will show a fallback view. At the borrowing +// path it will show the borrow form, and at the returning path it will show the +// return form. #[derive(Params, PartialEq)] struct LoanerParams { @@ -191,7 +198,7 @@ async fn create_borrow_entry(input: ExpandableInfo) -> Result<(), ServerFnError> /// create a true admin page for this, simply to be able to survey and override/remove information /// from the lists. #[component] -pub fn LoanerPage() -> impl IntoView { +pub fn LoanerShell() -> impl IntoView { // Check URL params. Depending on what string is visible here, we'll display a different form. let params = use_params::(); let form_passed = move || { @@ -203,16 +210,9 @@ pub fn LoanerPage() -> impl IntoView { .unwrap_or_default() }; - let form_view = move || match form_passed().as_str() { - "borrowing" => EitherOf3::A(LoanerBorrowForm), - "returning" => EitherOf3::B(LoanerReturnForm), - _ => EitherOf3::C("Choose something from the left.".into_view()), - }; - // We'll create the page here - the sidebar contains all the buttons, while the form // container either shows forms or shows placeholder text. view! { - impl IntoView { />
- {form_view} + + +
- + } +} + +#[component] +pub fn LoanerFallback() -> impl IntoView { + view! { +
+
+ "Chromebook Loaner Form" +
+
+ "Select an option from the left to begin." +
+
} } #[component] pub fn LoanerBorrowForm() -> impl IntoView { + let navigate = use_navigate(); + // Register server actions. let create_entry_action = ServerAction::::new(); @@ -259,7 +279,7 @@ pub fn LoanerBorrowForm() -> impl IntoView { } }); }; - + //#region Toast Logic let mut toast_context = expect_context::(); Effect::new(move || { @@ -268,14 +288,17 @@ pub fn LoanerBorrowForm() -> impl IntoView { toast_context.toast( Toast::new() .id(uuid::Uuid::new_v4().to_string()) - .msg("From the form!") + .header("Borrower Added!") + .msg("You can take your loaner now.") ); + navigate("/loaners", Default::default()); } }); //#endregion view! { - impl IntoView { #[component] pub fn LoanerReturnForm() -> impl IntoView { let navigate = use_navigate(); - + // Register server actions let check_in_action = ServerAction::::new(); @@ -368,12 +391,19 @@ pub fn LoanerReturnForm() -> impl IntoView { // Create an effect to run after check-in - refreshes the list with another scan request. // This could be beneficial if we ever decided to make multiple loaner kiosks (think SAT days) + let mut toasts = expect_context::(); Effect::new(move || { if let Some(Ok(_)) = check_in_action.value().get() { // Return to the main page. if let Some(dialog) = dialog_ref.get() { dialog.close(); } + toasts.toast( + Toast::new() + .id(uuid::Uuid::new_v4()) + .header("Check in successful!") + .msg("Don't forget to take your collateral.") + ); navigate("/loaners", Default::default()); check_in_action.clear(); } @@ -399,6 +429,7 @@ pub fn LoanerReturnForm() -> impl IntoView { view! {

"Confirmation"

@@ -414,12 +445,16 @@ pub fn LoanerReturnForm() -> impl IntoView { "Close" "Check In" -
-

"Student List"

-

"Please select your name from the list."

-
- -
+ +
+
+

"Student List"

+

"Please select your name from the list."

+
+ {move || { match return_list_resource.get() { Some(loaner_list) => { @@ -461,7 +496,7 @@ pub fn LoanerReturnForm() -> impl IntoView { None => Either::Right("No loaners found.".into_view()) } }} -
- + +
} }