diff --git a/src/App.tsx b/src/App.tsx index a611734..59ee713 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -33,7 +33,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"; @@ -149,6 +149,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 // @@ -467,6 +468,14 @@ export default function App() }); } + const pathToLabelMap: {[path: string]: string} = {} + for(let i =0; i setAccentColor(accentColor), setTableMetaData: (tableMetaData: QTableMetaData) => setTableMetaData(tableMetaData), setTableProcesses: (tableProcesses: QProcessMetaData[]) => setTableProcesses(tableProcesses), - setDotMenuOpen: (dotMenuOpent: boolean) => setDotMenuOpen(dotMenuOpent) + setDotMenuOpen: (dotMenuOpent: boolean) => setDotMenuOpen(dotMenuOpent), + pathToLabelMap: pathToLabelMap, + branding: branding }}> @@ -590,6 +601,7 @@ export default function App() appName={branding.appName} branding={branding} routes={sideNavRoutes} + pathToLabelMap={pathToLabelMap} onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave} /> diff --git a/src/QContext.tsx b/src/QContext.tsx index ed205b4..98274d1 100644 --- a/src/QContext.tsx +++ b/src/QContext.tsx @@ -20,6 +20,7 @@ */ import {QAppMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppMetaData"; +import {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData"; import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance"; import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData"; import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData"; @@ -33,19 +34,22 @@ interface QContext accentColor: string; setAccentColor?: (header: string) => void; dotMenuOpen: boolean; + setDotMenuOpen?: (dotMenuOpen: boolean) => void; qInstance?: QInstance; appMetaData?: QAppMetaData; tableMetaData?: QTableMetaData; setTableMetaData?: (tableMetaData: QTableMetaData) => void; tableProcesses?: QProcessMetaData[]; setTableProcesses?: (tableProcesses: QProcessMetaData[]) => void; - setDotMenuOpen?: (dotMenuOpen: boolean) => void; + pathToLabelMap?: {[path: string]: string}; + branding?: QBrandingMetaData; } const defaultState = { pageHeader: "", accentColor: "#0062FF", - dotMenuOpen: false + dotMenuOpen: false, + 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 bdfc7bd..304d287 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(); @@ -210,7 +212,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 (