From 8074e0a61d3bca159064e5ebda56b16f01267881 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Fri, 5 May 2023 20:24:08 -0500 Subject: [PATCH] Get labels in breadcrumb from meta-data labels, not path components --- src/App.tsx | 16 ++++++++++++++-- src/QContext.tsx | 6 +++++- src/qqq/components/horseshoe/Breadcrumbs.tsx | 18 ++++++++++++++---- src/qqq/components/horseshoe/NavBar.tsx | 17 +++++++++++++++-- 4 files changed, 48 insertions(+), 9 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 98321cd..28fb06c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -31,7 +31,7 @@ import CssBaseline from "@mui/material/CssBaseline"; import Icon from "@mui/material/Icon"; import {ThemeProvider} from "@mui/material/styles"; import {LicenseInfo} from "@mui/x-license-pro"; -import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react"; +import React, {JSXElementConstructor, Key, ReactElement, useContext, useEffect, useState,} from "react"; import {useCookies} from "react-cookie"; import {Navigate, Route, Routes, useLocation,} from "react-router-dom"; import {Md5} from "ts-md5/dist/md5"; @@ -146,6 +146,7 @@ export default function App() const [needToLoadRoutes, setNeedToLoadRoutes] = useState(true); const [sideNavRoutes, setSideNavRoutes] = useState([]); const [appRoutes, setAppRoutes] = useState(null as any); + const [pathToLabelMap, setPathToLabelMap] = useState({} as {[path: string]: string}); //////////////////////////////////////////// // load qqq meta data to make more routes // @@ -456,6 +457,14 @@ export default function App() }); } + const pathToLabelMap: {[path: string]: string} = {} + for(let i =0; i setPageHeader(header), - setAccentColor: (accentColor: string) => setAccentColor(accentColor) + setAccentColor: (accentColor: string) => setAccentColor(accentColor), + pathToLabelMap: pathToLabelMap, + branding: branding }}> @@ -568,6 +579,7 @@ export default function App() logo={branding.logo} appName={branding.appName} routes={sideNavRoutes} + pathToLabelMap={pathToLabelMap} onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave} /> diff --git a/src/QContext.tsx b/src/QContext.tsx index aaf83b2..a4dbdbf 100644 --- a/src/QContext.tsx +++ b/src/QContext.tsx @@ -19,6 +19,7 @@ * along with this program. If not, see . */ +import {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData"; import {createContext} from "react"; @@ -28,11 +29,14 @@ interface QContext setPageHeader?: (header: string | JSX.Element) => void; accentColor: string; setAccentColor?: (header: string) => void; + pathToLabelMap?: {[path: string]: string}; + branding?: QBrandingMetaData; } const defaultState = { pageHeader: "", - accentColor: "#0062FF" + accentColor: "#0062FF", + pathToLabelMap: {}, }; const QContext = createContext(defaultState); diff --git a/src/qqq/components/horseshoe/Breadcrumbs.tsx b/src/qqq/components/horseshoe/Breadcrumbs.tsx index 16afa88..b4fc4ec 100644 --- a/src/qqq/components/horseshoe/Breadcrumbs.tsx +++ b/src/qqq/components/horseshoe/Breadcrumbs.tsx @@ -60,9 +60,19 @@ export const routeToLabel = (route: string): string => function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element { const routes: string[] | any = route.slice(0, -1); - const {pageHeader, setPageHeader} = useContext(QContext); + const {pageHeader, pathToLabelMap, branding} = useContext(QContext); - let pageTitle = "ColdTrack Live"; + const fullPathToLabel = (fullPath: string, route: string): string => + { + if(pathToLabelMap && pathToLabelMap[fullPath]) + { + return pathToLabelMap[fullPath]; + } + + return (routeToLabel(route)); + } + + let pageTitle = branding?.appName ?? ""; const fullRoutes: string[] = []; let accumulatedPath = ""; for (let i = 0; i < routes.length; i++) @@ -74,7 +84,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element accumulatedPath = `${accumulatedPath}/${routes[i]}`; fullRoutes.push(accumulatedPath); - pageTitle = `${routeToLabel(routes[i])} | ${pageTitle}`; + pageTitle = `${fullPathToLabel(accumulatedPath, routes[i])} | ${pageTitle}`; } document.title = `${ucFirst(title)} | ${pageTitle}`; @@ -110,7 +120,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element opacity={light ? 0.8 : 0.5} sx={{lineHeight: 0}} > - {routeToLabel(fullRoute.replace(/.*\//, ""))} + {fullPathToLabel(fullRoute, fullRoute.replace(/.*\//, ""))} ))} diff --git a/src/qqq/components/horseshoe/NavBar.tsx b/src/qqq/components/horseshoe/NavBar.tsx index 6d77082..647351a 100644 --- a/src/qqq/components/horseshoe/NavBar.tsx +++ b/src/qqq/components/horseshoe/NavBar.tsx @@ -30,8 +30,9 @@ import ListItemIcon from "@mui/material/ListItemIcon"; import Menu from "@mui/material/Menu"; import TextField from "@mui/material/TextField"; import Toolbar from "@mui/material/Toolbar"; -import React, {useEffect, useState} from "react"; +import React, {useContext, useEffect, useState} from "react"; import {useLocation, useNavigate} from "react-router-dom"; +import QContext from "QContext"; import QBreadcrumbs, {routeToLabel} from "qqq/components/horseshoe/Breadcrumbs"; import {navbar, navbarContainer, navbarIconButton, navbarRow,} from "qqq/components/horseshoe/Styles"; import {setTransparentNavbar, useMaterialUIController,} from "qqq/context"; @@ -60,6 +61,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element const [openMenu, setOpenMenu] = useState(false); const [history, setHistory] = useState([] as HistoryEntry[]); const [autocompleteValue, setAutocompleteValue] = useState(null); + const fullPath = useLocation().pathname; const route = useLocation().pathname.split("/").slice(1); const navigate = useNavigate(); @@ -206,7 +208,18 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element }, }); - const breadcrumbTitle = routeToLabel(route[route.length - 1]); + const {pathToLabelMap} = useContext(QContext); + const fullPathToLabel = (fullPath: string, route: string): string => + { + if(pathToLabelMap && pathToLabelMap[fullPath]) + { + return pathToLabelMap[fullPath]; + } + + return (routeToLabel(route)); + } + + const breadcrumbTitle = fullPathToLabel(fullPath, route[route.length - 1]); return (