feat: implement basic selectable nav list

src/app.rs

@@ -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()

src/common/tab_info.rs

@@ -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(),
+        }
+    }
+}

src/components/lists/multi/mod.rs

@@ -1,6 +1,8 @@
 mod utils;
 mod checkbox;
 mod chips;
+mod select_nav_list;
 
 pub use checkbox::*;
 pub use chips::*;
+pub use select_nav_list::*;

src/components/lists/multi/select_nav_list.rs

@@ -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>
+    }
+}

src/components/tabs/sidebar.rs

@@ -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>
 

src/pages/admin/home_page.rs

@@ -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>
+    }
+}

src/pages/admin/mod.rs

@@ -1,2 +1,8 @@
 mod 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::*;

src/pages/admin/provider_page.rs

@@ -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>
+    }
+}

src/pages/admin/scholarship_page.rs

@@ -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>
+    }
+}

src/pages/admin/shell.rs

@@ -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>
     }