Skip to content

Commit

Permalink
feat: breadcrumbs for easy navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShubhranshuSanjeev
ShubhranshuSanjeev committed Nov 12, 2024
1 parent 04c564f commit aca3740
Show file tree
Hide file tree
Showing 11 changed files with 600 additions and 301 deletions.
231 changes: 2 additions & 229 deletions crates/frontend/src/app.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,8 @@ use leptos_meta::*;
use leptos_router::*;
use serde_json::json;

use crate::hoc::layout::Layout;
use crate::pages::config_version::ConfigVersion;
use crate::pages::config_version_list::ConfigVersionList;
use crate::pages::dimensions::Dimensions;
use crate::pages::experiment_list::ExperimentList;
use crate::pages::function::{
function_create::CreateFunctionView, function_list::FunctionList, FunctionPage,
};
use crate::pages::new_custom_types::NewCustomTypes;
use crate::pages::new_experiment::NewExperiment;
use crate::pages::update_custom_types::UpdateCustomTypes;
use crate::pages::{
context_override::ContextOverride, custom_types::TypesPage,
default_config::DefaultConfig, experiment::ExperimentPage, home::Home,
};
use crate::providers::alert_provider::AlertProvider;
use crate::routes::AppRoutes;
use crate::types::Envs;

#[component]
Expand Down Expand Up @@ -95,220 +81,7 @@ pub fn app(app_envs: Envs) -> impl IntoView {
<body class="m-0 min-h-screen bg-gray-50 font-mono">
<AlertProvider>
<Routes base=service_prefix.to_string()>
<Route
ssr=SsrMode::Async
path="/admin/:tenant/dimensions"
view=move || {
view! {
<Layout>
<Dimensions />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/dimensions/new"
view=move || {
view! {
<Layout>
<Dimensions />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/function"
view=move || {
view! {
<Layout>
<FunctionList />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/function/create"
view=move || {
view! {
<Layout>
<CreateFunctionView />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/function/:function_name"
view=move || {
view! {
<Layout>
<FunctionPage />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/experiments"
view=move || {
view! {
<Layout>
<ExperimentList />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/experiments/new"
view=move || {
view! {
<Layout>
<NewExperiment />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/experiments/:id"
view=move || {
view! {
<Layout>
<ExperimentPage />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/default-config"
view=move || {
view! {
<Layout>
<DefaultConfig />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/default-config/new"
view=move || {
view! {
<Layout>
<DefaultConfig />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/overrides"
view=move || {
view! {
<Layout>
<ContextOverride />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/resolve"
view=move || {
view! {
<Layout>
<Home />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/types"
view=move || {
view! {
<Layout>
<TypesPage />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/types/new"
view=move || {
view! {
<Layout>
<NewCustomTypes />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/types/:type_name/update"
view=move || {
view! {
<Layout>
<UpdateCustomTypes />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/config/versions"
view=move || {
view! {
<Layout>
<ConfigVersionList />
</Layout>
}
}
/>

<Route
ssr=SsrMode::Async
path="/admin/:tenant/config/versions/:version"
view=move || {
view! {
<Layout>
<ConfigVersion />
</Layout>
}
}
/>

// <Route
// path="/*any"
// view=move || {
// view! {
// <Layout>
// <NotFound/>
// </Layout>
// }
// }
// />
<AppRoutes/>
</Routes>
</AlertProvider>
</body>
Expand Down
1 change: 1 addition & 0 deletions crates/frontend/src/hoc.rs
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
pub mod layout;
pub mod nav_breadcrums;
121 changes: 55 additions & 66 deletions crates/frontend/src/hoc/layout.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ use std::ops::Deref;

use crate::{
components::{side_nav::SideNav, toast::Toast},
hoc::nav_breadcrums::{BreadcrumbCtx, Breadcrumbs},
providers::alert_provider::AlertQueue,
utils::{use_tenants, use_url_base},
};
Expand All @@ -20,84 +21,28 @@ impl AsRef<str> for PageHeading {
}

#[component]
pub fn Layout(children: Children) -> impl IntoView {
let route_ctx = use_route();
pub fn Layout() -> impl IntoView {
let params_map = use_params_map();
let tenant = Signal::derive(move || match params_map.get().get("tenant") {
Some(tenant) => tenant.clone(),
None => String::from("no-tenant"),
});
let breadcrumbs = create_rw_signal(BreadcrumbCtx {
current_path: String::new(),
params: ParamsMap::new()
});
provide_context(breadcrumbs);
provide_context(tenant);

view! {
<div class="relative p-4 flex min-h-screen bg-surface">
<SideNav />

<section class="relative w-full h-full ml-[366px] overflow-y-auto px-4">
<header class="flex justify-between border-b-2 pb-3 pt-3">
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-2">
<li class="inline-flex items-center">
<A
href="#"
class="inline-flex items-center text font-medium text-blue-600"
>
<i class="ri-test-tube-fill text-blue mr-1"></i>
Experiments
</A>
</li>
<li aria-current="page">
<div class="flex items-center">
<i class="ri-arrow-right-s-line"></i>
<span class="ms-1 text-lg font-medium text-gray-500 md:ms-2">
New
</span>
</div>
</li>
</ol>
</nav>
<select
value=tenant.get()
on:change=move |event: Event| {
let base = use_url_base();
let resolved_path = route_ctx.path().replace(&base, "");
let original_path = route_ctx.original_path().replace(&base, "");
let redirect_url = std::iter::zip(
original_path.split('/'),
resolved_path.split('/'),
)
.map(|(o_token, r_token)| match o_token {
":tenant" => event_target_value(&event),
_ => r_token.to_string(),
})
.collect::<Vec<String>>()
.join("/");
let navigate = use_navigate();
navigate(redirect_url.as_str(), Default::default())
}

class="select w-full max-w-xs bg-surface-2 py-1 h-[2.25rem] min-h-[2.25rem]"
>

{move || {
let tenants = use_tenants();
if tenants.is_empty() {
return view! {
<option disabled=true>{"Loading tenants..."}</option>
}
.into_view();
}
tenants
.iter()
.map(|t| {
view! { <option selected=t == &tenant.get()>{t}</option> }
})
.collect_view()
}}

</select>
</header>
<main class="py-8 min-h-[calc(100vh-16px-12px-12px-16px-36px)]">{children()}</main>
<Header tenant />
<main class="py-8 min-h-[calc(100vh-16px-12px-12px-16px-36px)]">
<Outlet />
</main>
</section>

{move || {
Expand All @@ -112,3 +57,47 @@ pub fn Layout(children: Children) -> impl IntoView {
</div>
}
}

#[component]
fn header(tenant: Signal<String>) -> impl IntoView {
view! {
<header class="flex justify-between border-b-2 pb-3 pt-3">
<Breadcrumbs />
<select
value=tenant.get()
on:change=move |event: Event| {
let service_prefix = use_url_base();
let current_tenant = tenant.get();
let selected_tenant = event_target_value(&event);
let current_base = format!("admin/{current_tenant}");
let new_base = format!("admin/{selected_tenant}");
let current_pathname = use_location()
.pathname
.get()
.replace(&service_prefix, "");
let redirect_url = current_pathname.replace(&current_base, &new_base);
let navigate = use_navigate();
navigate(redirect_url.as_str(), Default::default())
}

class="select w-full max-w-xs bg-surface-2 py-1 h-[2.25rem] min-h-[2.25rem]"
>

{move || {
let tenants = use_tenants();
if tenants.is_empty() {
return view! { <option disabled=true>{"Loading tenants..."}</option> }
.into_view();
}
tenants
.iter()
.map(|t| {
view! { <option selected=t == &tenant.get()>{t}</option> }
})
.collect_view()
}}

</select>
</header>
}
}
Loading

0 comments on commit aca3740

Please sign in to comment.