From 647e7d88a6c108f8e5ba7aa4ceab961767814349 Mon Sep 17 00:00:00 2001 From: meraghon Date: Sun, 23 Nov 2025 15:09:36 -0500 Subject: [PATCH 01/21] Framework for Dashboard Button --- src/components/dashboard_button.rs | 5 +++++ src/components/mod.rs | 7 ++++--- 2 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 src/components/dashboard_button.rs diff --git a/src/components/dashboard_button.rs b/src/components/dashboard_button.rs new file mode 100644 index 0000000..47fe320 --- /dev/null +++ b/src/components/dashboard_button.rs @@ -0,0 +1,5 @@ +use leptos::prelude::*; +#[component] +pub fn DashboardButton() -> impl IntoView { + view! {} +} diff --git a/src/components/mod.rs b/src/components/mod.rs index 2616640..283bd63 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -1,5 +1,7 @@ mod action_button; mod checkbox; +mod chips; +mod dashboard_button; mod loading; mod multi_entry; mod panel; @@ -7,9 +9,8 @@ mod radio; mod row; mod select; mod text_field; -mod chips; pub use self::{ - action_button::*, checkbox::*, loading::*, multi_entry::*, panel::*, radio::*, row::*, - select::*, text_field::*, chips::* + action_button::*, checkbox::*, chips::*, loading::*, multi_entry::*, panel::*, radio::*, + row::*, select::*, text_field::*, }; From 587b5ff48c71f4533a3430e30534fe53adc89ecc Mon Sep 17 00:00:00 2001 From: meraghon Date: Sun, 23 Nov 2025 16:46:03 -0500 Subject: [PATCH 02/21] Functional dashboard button --- public/square-user.svg | 4 ++++ src/app.rs | 3 ++- src/components/dashboard_button.rs | 32 ++++++++++++++++++++++++++++-- src/components/mod.rs | 2 +- src/pages/mod.rs | 3 ++- src/pages/test_page.rs | 15 ++++++++++++++ 6 files changed, 54 insertions(+), 5 deletions(-) create mode 100644 public/square-user.svg create mode 100644 src/pages/test_page.rs diff --git a/public/square-user.svg b/public/square-user.svg new file mode 100644 index 0000000..92f1016 --- /dev/null +++ b/public/square-user.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app.rs b/src/app.rs index e854ce4..1c7065b 100644 --- a/src/app.rs +++ b/src/app.rs @@ -7,7 +7,7 @@ use leptos_router::{ }; use url::Url; -use crate::pages::{AboutPage, HomePage, UnauthenticatedPage}; +use crate::pages::{AboutPage, HomePage, TestPage, UnauthenticatedPage}; pub fn shell(options: LeptosOptions) -> impl IntoView { view! { @@ -67,6 +67,7 @@ pub fn App() -> impl IntoView { + diff --git a/src/components/dashboard_button.rs b/src/components/dashboard_button.rs index 47fe320..7bfec75 100644 --- a/src/components/dashboard_button.rs +++ b/src/components/dashboard_button.rs @@ -1,5 +1,33 @@ use leptos::prelude::*; +use leptos_router::hooks::use_navigate; #[component] -pub fn DashboardButton() -> impl IntoView { - view! {} +pub fn DashboardButton( + #[prop(into)] title: String, + #[prop(into, optional)] description: Option, + #[prop(into, optional)] icon: Option, + #[prop(into)] path: String, +) -> impl IntoView { + let navigate = use_navigate(); + + let on_click = move |_| navigate(&path, Default::default()); + + view! { + + } } diff --git a/src/components/mod.rs b/src/components/mod.rs index 283bd63..9c0e005 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -1,7 +1,7 @@ mod action_button; mod checkbox; mod chips; -mod dashboard_button; +pub(crate) mod dashboard_button; mod loading; mod multi_entry; mod panel; diff --git a/src/pages/mod.rs b/src/pages/mod.rs index 5752a59..87d6b16 100644 --- a/src/pages/mod.rs +++ b/src/pages/mod.rs @@ -1,5 +1,6 @@ mod about_page; mod home_page; +mod test_page; mod unauthenticated_page; -pub use self::{about_page::*, home_page::*, unauthenticated_page::*}; +pub use self::{about_page::*, home_page::*, test_page::*, unauthenticated_page::*}; diff --git a/src/pages/test_page.rs b/src/pages/test_page.rs new file mode 100644 index 0000000..0541233 --- /dev/null +++ b/src/pages/test_page.rs @@ -0,0 +1,15 @@ +use crate::components::dashboard_button::DashboardButton; +use leptos::prelude::*; +#[component] +pub fn TestPage() -> impl IntoView { + view! { +
+ +
+ } +} From f4aef563d0641ca63849dfc355b7167a39345cef Mon Sep 17 00:00:00 2001 From: meraghon Date: Sun, 23 Nov 2025 17:04:50 -0500 Subject: [PATCH 03/21] Fixed import --- src/components/dashboard_button.rs | 16 ++++++++-------- src/components/mod.rs | 6 +++--- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/dashboard_button.rs b/src/components/dashboard_button.rs index 7bfec75..a8d558c 100644 --- a/src/components/dashboard_button.rs +++ b/src/components/dashboard_button.rs @@ -14,18 +14,18 @@ pub fn DashboardButton( view! { diff --git a/src/components/mod.rs b/src/components/mod.rs index 9c0e005..bc406c8 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -1,7 +1,7 @@ mod action_button; mod checkbox; mod chips; -pub(crate) mod dashboard_button; +mod dashboard_button; mod loading; mod multi_entry; mod panel; @@ -11,6 +11,6 @@ mod select; mod text_field; pub use self::{ - action_button::*, checkbox::*, chips::*, loading::*, multi_entry::*, panel::*, radio::*, - row::*, select::*, text_field::*, + action_button::*, checkbox::*, chips::*, dashboard_button::*, loading::*, multi_entry::*, + panel::*, radio::*, row::*, select::*, text_field::*, }; From 0e2b2bc1cbb2752541e68ca7de967f07563bd1e1 Mon Sep 17 00:00:00 2001 From: meraghon Date: Sun, 23 Nov 2025 17:04:56 -0500 Subject: [PATCH 04/21] Fixed import --- src/pages/test_page.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/test_page.rs b/src/pages/test_page.rs index 0541233..fb3db15 100644 --- a/src/pages/test_page.rs +++ b/src/pages/test_page.rs @@ -1,9 +1,9 @@ -use crate::components::dashboard_button::DashboardButton; +use crate::components::DashboardButton; use leptos::prelude::*; #[component] pub fn TestPage() -> impl IntoView { view! { -
+
Date: Sun, 23 Nov 2025 17:10:26 -0500 Subject: [PATCH 05/21] fix: create unique IDs for checkbox and radio lists --- src/components/checkbox.rs | 10 ++++++++-- src/components/chips.rs | 6 ++---- src/components/mod.rs | 1 + src/components/radio.rs | 12 +++++++++--- src/components/utils.rs | 8 ++++++++ src/pages/home_page.rs | 13 +++++++++++++ 6 files changed, 41 insertions(+), 9 deletions(-) create mode 100644 src/components/utils.rs diff --git a/src/components/checkbox.rs b/src/components/checkbox.rs index a245834..f4af14c 100644 --- a/src/components/checkbox.rs +++ b/src/components/checkbox.rs @@ -1,16 +1,20 @@ use crate::common::ValueType; use leptos::prelude::*; use std::collections::HashMap; +use crate::components::utils::create_unique_id; #[component] pub fn Checkbox( #[prop()] checked: Signal, #[prop(into)] on_change: Callback<(), ()>, #[prop(into)] value: String, + #[prop(into)] name: String, #[prop(default = RwSignal::new(false))] disabled: RwSignal, ) -> impl IntoView { + let id = create_unique_id(&name, &value); + view! { -
From 0379ef3fb341fddc1c52845f5122ca9628bc8130 Mon Sep 17 00:00:00 2001 From: meraghon Date: Fri, 5 Dec 2025 08:22:30 -0500 Subject: [PATCH 10/21] Added comments --- src/components/dashboard_button.rs | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/dashboard_button.rs b/src/components/dashboard_button.rs index e6cb4cb..9310b33 100644 --- a/src/components/dashboard_button.rs +++ b/src/components/dashboard_button.rs @@ -1,11 +1,11 @@ use leptos::prelude::*; use leptos_router::hooks::use_navigate; -/// #Dashboard Button Component +/// # Dashboard Button Component /// /// This component displays a large panel-like button that redirects a user to a specified page. /// It's best used on a user dashboard, where multiple instances of the button are present. -/// It has a title, description, and icon +/// It has a title, a description, and icon /// /// Example usage: /// ``` @@ -20,10 +20,18 @@ use leptos_router::hooks::use_navigate; /// ``` #[component] pub fn DashboardButton( - #[prop(into)] title: String, - #[prop(into)] description: String, - #[prop(into)] icon: String, - #[prop(into)] path: String, + /// The main label displayed on the button. + #[prop(into)] + title: String, + /// A brief explanatory text that describes the destination page. + #[prop(into)] + description: String, + /// The file path or URL of the icon displayed at the top of the button. + #[prop(into)] + icon: String, + /// The route that the user is navigated to when clicking the button. + #[prop(into)] + path: String, ) -> impl IntoView { let navigate = use_navigate(); From 8ccdee381fc99c553c42e0439bbdc8cc2c295391 Mon Sep 17 00:00:00 2001 From: meraghon Date: Fri, 5 Dec 2025 09:46:19 -0500 Subject: [PATCH 11/21] Basic banner component --- src/components/banner.rs | 48 ++++++++++++++++++++++++++++++++++++++++ src/components/mod.rs | 5 +++-- 2 files changed, 51 insertions(+), 2 deletions(-) create mode 100644 src/components/banner.rs diff --git a/src/components/banner.rs b/src/components/banner.rs new file mode 100644 index 0000000..e4f0e2f --- /dev/null +++ b/src/components/banner.rs @@ -0,0 +1,48 @@ +use leptos::prelude::*; +use leptos_router::hooks::use_navigate; + +/// # Banner Component +/// +/// This component displays a red banner at the top of the page with a title and a logo. +/// Clicking the logo will redirect a user to specified page, preferably a home page. +/// +/// Example usage: +/// ``` +/// +/// ``` +#[component] +pub fn Banner( + /// The title of the banner. + #[prop(into)] + title: String, + /// The file path or URL of a logo displayed at the top left of the banner. + #[prop(into)] + logo: String, + /// The route that the navigates user to a page (home page). + #[prop(into)] + path: String, +) -> impl IntoView { + let navigate = use_navigate(); + + let on_click = move |_| navigate(&path, Default::default()); + + view! { +
+
+
+
+ icon +
+
+

{title.clone()}

+
+
+
+
+ + } +} diff --git a/src/components/mod.rs b/src/components/mod.rs index f0297f7..a66f141 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -1,4 +1,5 @@ mod action_button; +mod banner; mod checkbox; mod chips; mod dashboard_button; @@ -12,6 +13,6 @@ mod text_field; mod utils; pub use self::{ - action_button::*, checkbox::*, chips::*, dashboard_button::*, loading::*, multi_entry::*, - panel::*, radio::*, row::*, select::*, text_field::*, + action_button::*, banner::*, checkbox::*, chips::*, dashboard_button::*, loading::*, + multi_entry::*, panel::*, radio::*, row::*, select::*, text_field::*, }; From 3e2f6e2feecab226db23317aa28205b2fa5338c0 Mon Sep 17 00:00:00 2001 From: meraghon Date: Fri, 5 Dec 2025 09:46:43 -0500 Subject: [PATCH 12/21] Recolored background of dashboard button --- src/components/dashboard_button.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/dashboard_button.rs b/src/components/dashboard_button.rs index 9310b33..f471e33 100644 --- a/src/components/dashboard_button.rs +++ b/src/components/dashboard_button.rs @@ -40,7 +40,7 @@ pub fn DashboardButton( view! {