feat: implement basic selectable nav list
This commit is contained in:
alphafetus committed
1 parent
2069beba8a
commit
aa912673c0
10 files changed
+285
-19
No files matched your search
+4
-3
@@ -1,4 +1,4 @@
|
||||
use crate::pages::{ProviderPortal, ScholarshipInfoPage, ProviderContactPage, LoanerShell, LoanerFallback, LoanerBorrowForm, LoanerReturnForm, AuthCallbackPage, ApplicantsPageFallback, AdminShell, AdminTesting, AdminFallback};
|
||||
use crate::pages::{ProviderPortal, ScholarshipInfoPage, ProviderContactPage, LoanerShell, LoanerFallback, LoanerBorrowForm, LoanerReturnForm, AuthCallbackPage, ApplicantsPageFallback, AdminShell, AdminHomePage, AdminProviderPage, AdminScholarshipPage};
|
||||
use leptos::prelude::*;
|
||||
use leptos_meta::{MetaTags, Stylesheet, Title, provide_meta_context};
|
||||
use leptos_oidc::AuthSignal;
|
||||
@@ -106,8 +106,9 @@ fn LoanerRoutes() -> impl MatchNestedRoutes + Clone {
|
||||
fn AdminRoutes() -> impl MatchNestedRoutes + Clone {
|
||||
view! {
|
||||
<ParentRoute path=path!("admin") view=AdminShell>
|
||||
<Route path=path!("home") view=AdminFallback />
|
||||
<Route path=path!("testing") view=AdminTesting />
|
||||
<Route path=path!("home") view=AdminHomePage />
|
||||
<Route path=path!("providers") view=AdminProviderPage />
|
||||
<Route path=path!("scholarships") view=AdminScholarshipPage />
|
||||
</ParentRoute>
|
||||
}
|
||||
.into_inner()
|
||||
|
||||
+10
-1
@@ -1,5 +1,14 @@
|
||||
#[derive(Debug, Clone)]
|
||||
pub struct TabInfo {
|
||||
pub name: String,
|
||||
pub text: String,
|
||||
pub path: String,
|
||||
}
|
||||
|
||||
impl TabInfo {
|
||||
pub fn new(text: impl Into<String>, path: impl Into<String>) -> Self {
|
||||
Self {
|
||||
text: text.into(),
|
||||
path: path.into(),
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
mod utils;
|
||||
mod checkbox;
|
||||
mod chips;
|
||||
mod select_nav_list;
|
||||
|
||||
pub use checkbox::*;
|
||||
pub use chips::*;
|
||||
pub use chips::*;
|
||||
pub use select_nav_list::*;
|
||||
@@ -0,0 +1,154 @@
|
||||
use leptos::logging::log;
|
||||
use leptos::prelude::*;
|
||||
use leptos_router::components::A;
|
||||
use crate::components::utils;
|
||||
|
||||
#[derive(Debug, Clone)]
|
||||
pub struct NavListInfo {
|
||||
pub text: String,
|
||||
pub id: String,
|
||||
pub slug: String,
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn NavListItem(
|
||||
#[prop(into)] name: Signal<String>,
|
||||
#[prop(into)] value: Signal<String>,
|
||||
#[prop(into)] text: Signal<String>,
|
||||
#[prop(into)] slug: Signal<String>,
|
||||
#[prop(into)] selected: Signal<bool>,
|
||||
#[prop(into)] on_change: Callback<()>,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div
|
||||
class="flex flex-row gap-2 p-1 rounded-lg"
|
||||
class=(["bg-yellow-100"], move || selected.get())
|
||||
>
|
||||
<NavListCheckbox
|
||||
name=name
|
||||
value=value
|
||||
on_change=move || on_change.run(())
|
||||
selected=selected
|
||||
/>
|
||||
<A href=move || slug.get() {..} class="flex items-center underline hover:text-blue-400">
|
||||
{text}
|
||||
</A>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn NavListCheckbox(
|
||||
#[prop(into)] selected: Signal<bool>,
|
||||
#[prop(into)] on_change: Callback<()>,
|
||||
#[prop(into)] name: Signal<String>,
|
||||
#[prop(into)] value: Signal<String>,
|
||||
) -> impl IntoView {
|
||||
let id = Memo::new(move |_| utils::create_unique_id(&name.get(), &value.get()));
|
||||
|
||||
view! {
|
||||
<label for=id class="flex items-center">
|
||||
<input
|
||||
class="hidden relative peer shrink-0"
|
||||
type="checkbox"
|
||||
name=name
|
||||
id=id
|
||||
prop:checked=selected
|
||||
on:change=move |_| on_change.run(())
|
||||
/>
|
||||
<div class="relative inline-block h-5 w-5 m-2 rounded-sm border border-gray-300 bg-white
|
||||
transition-bg duration-150 peer-checked:bg-red-700 peer-checked:border-red-700
|
||||
[&>span]:opacity-0 peer-checked:[&>span]:opacity-100
|
||||
peer-disabled:bg-gray-600/33 peer-disabled:border-gray-600
|
||||
peer-disabled:peer-checked:bg-gray-600">
|
||||
// This span is the check icon. It is centered within the div and has a border on the bottom
|
||||
// and right sides, which is then rotated to appear like a checkmark.
|
||||
<span class="absolute left-1/2 top-1/2 block h-3 w-1.5 -translate-x-1/2 -translate-y-1/2
|
||||
rotate-45 transform border-b-3 border-r-3
|
||||
border-white transition-opacity duration-150"></span>
|
||||
</div>
|
||||
</label>
|
||||
}
|
||||
}
|
||||
|
||||
/// # Selectable Nav-List Component
|
||||
///
|
||||
/// This component takes a `Vec<NavListInfo>` to show a list. The list contains links that append
|
||||
/// the `NavListItem::slug` to the current path, and each item is selectable. The list of selected
|
||||
/// items is usable in this component's parent.
|
||||
#[component]
|
||||
pub fn SelectableNavList(
|
||||
#[prop(into)] selected: RwSignal<Vec<String>>,
|
||||
#[prop(into)] items: Signal<Vec<NavListInfo>>,
|
||||
#[prop(into)] name: Signal<String>,
|
||||
) -> impl IntoView {
|
||||
let all_selected = RwSignal::new(false);
|
||||
let all_selected_change = move || {
|
||||
if all_selected.get() {
|
||||
log!("Unchecking all values.");
|
||||
all_selected.set(false);
|
||||
selected.set(Vec::new());
|
||||
} else {
|
||||
log!("Checking all values.");
|
||||
all_selected.set(true);
|
||||
selected.set(
|
||||
items
|
||||
.get()
|
||||
.iter()
|
||||
.map(|info| info.id.clone())
|
||||
.collect::<Vec<String>>()
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
view! {
|
||||
<div class="flex flex-1 flex-col m-3">
|
||||
// Header block - contains evenly spaced headers and the "select all" checkbox.
|
||||
// Include a checkbox here that's got the same style as the items. This maintains spacing.
|
||||
// All headers *must* be evenly spaced, otherwise the list starts getting confusing.
|
||||
<div class="flex flex-row bg-red-800 rounded-lg p-1">
|
||||
<NavListCheckbox
|
||||
selected=all_selected
|
||||
name=name
|
||||
value="select-all"
|
||||
on_change=all_selected_change
|
||||
/>
|
||||
</div>
|
||||
// Items block - contains constructed items. These are selectable.
|
||||
<For
|
||||
each=move || items.get()
|
||||
key=|item| item.id.clone()
|
||||
children=move |entry| {
|
||||
let id = Signal::derive(move || entry.id.clone());
|
||||
let text = Signal::derive(move || entry.text.clone());
|
||||
let selected_sig = Signal::derive(move || selected.get().contains(&id.get()));
|
||||
let on_change = move || {
|
||||
selected
|
||||
.update(|list| {
|
||||
let id = id.get();
|
||||
if list.contains(&id) {
|
||||
log!("Found value {}, removing.", id);
|
||||
list.retain(|s| s != &id);
|
||||
} else {
|
||||
log!("Adding value {} to the list.", id);
|
||||
list.push(id);
|
||||
}
|
||||
});
|
||||
all_selected.set(false);
|
||||
};
|
||||
|
||||
view! {
|
||||
<NavListItem
|
||||
name=name
|
||||
text=text
|
||||
value=id.clone()
|
||||
slug=entry.slug
|
||||
selected=selected_sig
|
||||
on_change=on_change
|
||||
/>
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -5,7 +5,7 @@ use crate::common::TabInfo;
|
||||
|
||||
#[component]
|
||||
fn SidebarTab(
|
||||
#[prop(into)] name: Signal<String>,
|
||||
#[prop(into)] text: Signal<String>,
|
||||
#[prop(into)] path: Signal<String>
|
||||
) -> impl IntoView {
|
||||
let location = use_location();
|
||||
@@ -24,12 +24,55 @@ fn SidebarTab(
|
||||
class=(["bg-transparent", "text-white"], move || !selected.get())
|
||||
class=(["bg-white", "text-black"], move || selected.get())
|
||||
>
|
||||
{name}
|
||||
{text}
|
||||
</div>
|
||||
</A>
|
||||
}
|
||||
}
|
||||
|
||||
/// # Tab Sidebar Component
|
||||
///
|
||||
/// This component creates a list of tabs that correspond to the given `Vec<TabInfo>`.
|
||||
/// There are a few things to note:
|
||||
///
|
||||
/// - This component defines an [`Outlet`], meaning that it is designed to display the route
|
||||
/// information on its own. If you intend to use this on a page, the page should not also contain
|
||||
/// an `Outlet` component unless it needs to render its own nested children.
|
||||
/// - The "selected" appearance for the individual tabs work best when their paths are at the same
|
||||
/// depth. For example:
|
||||
/// ```
|
||||
/// let good_list = vec! [
|
||||
/// TabInfo {
|
||||
/// ...,
|
||||
/// path: "/default/path"
|
||||
/// },
|
||||
/// TabInfo {
|
||||
/// ...,
|
||||
/// path: "/good/path"
|
||||
/// }
|
||||
/// ];
|
||||
///
|
||||
/// let bad_list = vec! [
|
||||
/// TabInfo {
|
||||
/// ...,
|
||||
/// path: "/default/path"
|
||||
/// },
|
||||
/// TabInfo {
|
||||
/// ...,
|
||||
/// path: "/bad/path/here"
|
||||
/// }
|
||||
/// ]
|
||||
/// ```
|
||||
///
|
||||
/// Example usage in a view (assuming the good list from above):
|
||||
/// ```
|
||||
/// view! {
|
||||
/// <TabSidebarList
|
||||
/// tabs=good_list
|
||||
/// />
|
||||
/// // Remember, no Outlets!
|
||||
/// }
|
||||
/// ```
|
||||
#[component]
|
||||
pub fn TabSidebarList(
|
||||
#[prop(into)] tabs: Signal<Vec<TabInfo>>,
|
||||
@@ -41,10 +84,10 @@ pub fn TabSidebarList(
|
||||
<nav class="flex flex-col bg-red-900 w-64 h-full overflow-scroll">
|
||||
<For
|
||||
each=move || tabs.get()
|
||||
key=|info| info.name.clone()
|
||||
let(TabInfo { name, path })
|
||||
key=|info| info.text.clone()
|
||||
let(TabInfo { text, path })
|
||||
>
|
||||
<SidebarTab name=name path=path />
|
||||
<SidebarTab text=text path=path />
|
||||
</For>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
use leptos::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn AdminHomePage() -> impl IntoView {
|
||||
view! {
|
||||
<div class="flex flex-1 flex-col gap-4 items-center m-4">
|
||||
<div class="font-bold text-3xl">"Admin Home Page"</div>
|
||||
<div class="text-lg">"This is just a placeholder for now."</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -1,2 +1,8 @@
|
||||
mod shell;
|
||||
pub use shell::*;
|
||||
pub use shell::*;
|
||||
mod home_page;
|
||||
pub use home_page::*;
|
||||
mod provider_page;
|
||||
pub use provider_page::*;
|
||||
mod scholarship_page;
|
||||
pub use scholarship_page::*;
|
||||
@@ -0,0 +1,30 @@
|
||||
use leptos::prelude::*;
|
||||
use crate::components::{NavListInfo, SelectableNavList};
|
||||
|
||||
#[component]
|
||||
pub fn AdminProviderPage() -> impl IntoView {
|
||||
let selected_items = RwSignal::new(Vec::new());
|
||||
let provider_list = RwSignal::new(vec![
|
||||
NavListInfo {
|
||||
text: "Testing 1".to_string(),
|
||||
id: "1".to_string(),
|
||||
slug: "1".to_string(),
|
||||
},
|
||||
NavListInfo {
|
||||
text: "Testing 2".to_string(),
|
||||
id: "2".to_string(),
|
||||
slug: "2".to_string(),
|
||||
}
|
||||
]);
|
||||
|
||||
view! {
|
||||
<div class="flex flex-1 flex-col gap-4 items-stretch mt-4">
|
||||
<div class="font-bold text-3xl self-center">"Provider View"</div>
|
||||
<SelectableNavList
|
||||
selected=selected_items
|
||||
name="providers-nav-list"
|
||||
items=provider_list
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
use leptos::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn AdminScholarshipPage() -> impl IntoView {
|
||||
view! {
|
||||
<div class="flex flex-1 flex-col gap-4">
|
||||
<div class="font-bold text-3xl">
|
||||
"Scholarships View"
|
||||
</div>
|
||||
<div>
|
||||
"This is a placeholder for now. It will show a list of all scholarships."
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -15,14 +15,9 @@ pub fn AdminShell() -> impl IntoView {
|
||||
<Banner title="R15 Scholarships Admin" logo="/PHS_Stacked_Acronym.png" />
|
||||
// We'll put the tabs here.
|
||||
<TabSidebarList tabs=vec![
|
||||
TabInfo {
|
||||
name: "Home".to_string(),
|
||||
path: "/admin/home".to_string(),
|
||||
},
|
||||
TabInfo {
|
||||
name: "Test".to_string(),
|
||||
path: "/admin/testing".to_string(),
|
||||
},
|
||||
TabInfo::new("Home", "/admin/home"),
|
||||
TabInfo::new("Providers", "/admin/providers"),
|
||||
TabInfo::new("Scholarships", "/admin/scholarships"),
|
||||
] />
|
||||
</AdminLoginContext>
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user