Move more into branding; proxy /images to backend (e.g., more overlays)

2025-07-17 21:00:45 +00:00 · 2023-02-03 19:12:54 -06:00
parent 83cc240724
commit 570bf05053
9 changed files with 62 additions and 58 deletions
--- a/package.json
+++ b/package.json
@ -6,7 +6,7 @@
      "@auth0/auth0-react": "1.10.2",
      "@emotion/react": "11.7.1",
      "@emotion/styled": "11.6.0",
-      "@kingsrook/qqq-frontend-core": "1.0.48",
+      "@kingsrook/qqq-frontend-core": "1.0.49",
      "@mui/icons-material": "5.4.1",
      "@mui/material": "5.11.1",
      "@mui/styles": "5.11.1",
--- a/public/index.html
+++ b/public/index.html
@ -21,15 +21,9 @@ Coded by www.creative-tim.com
    <meta name="theme-color" content="#04aaef" />
    <link id="appleIcon" rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>Nutrifresh One</title>
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
-      rel="stylesheet"
-    />
+    <title>QQQ Material Dashboard</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -1,6 +1,6 @@
 {
-  "short_name": "Material Dashboard",
-  "name": "Material Dashboard 2 PRO React TS",
+  "short_name": "QQQ Material Dashboard",
+  "name": "QQQ Material Dashboard",
  "icons": [
    {
      "src": "favicon.png",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -532,7 +532,7 @@ export default function App()
                  color={sidenavColor}
                  icon={branding.icon}
                  logo={branding.logo}
-                  companyName={branding.companyName}
+                  appName={branding.appName}
                  routes={sideNavRoutes}
                  onMouseEnter={handleOnMouseEnter}
                  onMouseLeave={handleOnMouseLeave}
--- a/src/qqq/components/horseshoe/Footer.tsx
+++ b/src/qqq/components/horseshoe/Footer.tsx
@ -40,6 +40,11 @@ interface Props
   [key: string]: any;
 }

+Footer.defaultProps = {
+   company: {href: "", name: ""},
+   links: [],
+};
+
 function Footer({company, links}: Props): JSX.Element
 {
   const {href, name} = company;
@ -67,27 +72,30 @@ function Footer({company, links}: Props): JSX.Element
            position: "fixed", bottom: "0px", zIndex: -1, marginBottom: "10px",
         }}
      >
-         <Box
-            display="flex"
-            justifyContent="center"
-            alignItems="center"
-            flexWrap="wrap"
-            color="text"
-            fontSize={size.sm}
-            px={1.5}
-         >
-            &copy;
-            {" "}
-            {new Date().getFullYear()}
-            ,
-            <Link href={href} target="_blank">
-               <MDTypography variant="button" fontWeight="medium">
-                  &nbsp;
-                  {name}
-                  &nbsp;
-               </MDTypography>
-            </Link>
-         </Box>
+         {
+            href && name &&
+            <Box
+               display="flex"
+               justifyContent="center"
+               alignItems="center"
+               flexWrap="wrap"
+               color="text"
+               fontSize={size.sm}
+               px={1.5}
+            >
+               &copy;
+               {" "}
+               {new Date().getFullYear()}
+               ,
+               <Link href={href} target="_blank">
+                  <MDTypography variant="button" fontWeight="medium">
+                     &nbsp;
+                     {name}
+                     &nbsp;
+                  </MDTypography>
+               </Link>
+            </Box>
+         }
         <Box
            component="ul"
            sx={({breakpoints}) => ({
@ -111,10 +119,4 @@ function Footer({company, links}: Props): JSX.Element
   );
 }

-// Declaring default props for Footer
-Footer.defaultProps = {
-   company: {href: "https://www.nutrifreshservices.com/", name: "Nutrifresh Services"},
-   links: [],
-};
-
 export default Footer;
--- a/src/qqq/components/horseshoe/sidenav/SideNav.tsx
+++ b/src/qqq/components/horseshoe/sidenav/SideNav.tsx
@ -41,7 +41,7 @@ interface Props
   color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
   icon?: string;
   logo?: string;
-   companyName?: string;
+   appName?: string;
   routes: {
      [key: string]:
         | ReactNode
@ -64,7 +64,7 @@ interface Props
   [key: string]: any;
 }

-function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.Element
+function Sidenav({color, icon, logo, appName, routes, ...rest}: Props): JSX.Element
 {
   const [openCollapse, setOpenCollapse] = useState<boolean | string>(false);
   const [openNestedCollapse, setOpenNestedCollapse] = useState<boolean | string>(false);
@ -319,11 +319,11 @@ function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.
               </MDTypography>
            </Box>
            <Box component={NavLink} to="/" display="flex" alignItems="center">
-               {!miniSidenav && logo && <Box component="img" src={logo} alt="Logo" width="100%" />}
-               {miniSidenav && icon && <Box component="img" src={icon} alt="Icon" width="160%" />}
-               {!miniSidenav && companyName && <Box width={!companyName && "100%"} sx={(theme: any) => sidenavLogoLabel(theme, {miniSidenav})}>
+               {!miniSidenav && logo && <Box component="img" src={logo} alt={appName} title={appName} width="100%" />}
+               {miniSidenav && icon && <Box component="img" src={icon} alt={appName} title={appName} width="160%" />}
+               {!miniSidenav && !logo && appName && <Box width={appName && "100%"} sx={(theme: any) => sidenavLogoLabel(theme, {miniSidenav})}>
                  <MDTypography component="h6" variant="button" fontWeight="medium" color={textColor}>
-                     {companyName}
+                     {appName}
                  </MDTypography>
               </Box>
               }
@ -352,7 +352,7 @@ Sidenav.defaultProps = {
   color: "info",
   icon: "",
   logo: "",
-   companyName: "",
+   appName: "",
 };

 export default Sidenav;
--- a/src/qqq/layouts/BaseLayout.tsx
+++ b/src/qqq/layouts/BaseLayout.tsx
@ -19,11 +19,13 @@
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import Box from "@mui/material/Box";
 import {ReactNode, useEffect, useState} from "react";
 import Footer from "qqq/components/horseshoe/Footer";
 import NavBar from "qqq/components/horseshoe/NavBar";
 import DashboardLayout from "qqq/layouts/DashboardLayout";
+import Client from "qqq/utils/qqq/Client";

 interface Props
 {
@ -45,6 +47,16 @@ export const breakpoints = {
 function BaseLayout({stickyNavbar, children}: Props): JSX.Element
 {
   const [tabsOrientation, setTabsOrientation] = useState<"horizontal" | "vertical">("horizontal");
+   const [metaData, setMetaData] = useState(null as QInstance);
+
+   useEffect(() =>
+   {
+      (async () =>
+      {
+         const metaData = await Client.getInstance().loadMetaData();
+         setMetaData(metaData);
+      })();
+   }, []);

   useEffect(() =>
   {
@ -72,7 +84,7 @@ function BaseLayout({stickyNavbar, children}: Props): JSX.Element
      <DashboardLayout>
         <NavBar />
         <Box mt={stickyNavbar ? 3 : 6}>{children}</Box>
-         <Footer />
+         <Footer company={{href: metaData?.branding?.companyUrl, name: metaData?.branding?.companyName}} />
      </DashboardLayout>
   );
 }
--- a/src/qqq/pages/records/query/RecordQuery.tsx
+++ b/src/qqq/pages/records/query/RecordQuery.tsx
@ -50,10 +50,8 @@ import React, {useContext, useEffect, useReducer, useRef, useState} from "react"
 import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
 import QContext from "QContext";
 import {QActionsMenuButton, QCreateNewButton} from "qqq/components/buttons/DefaultButtons";
-import Footer from "qqq/components/horseshoe/Footer";
-import NavBar from "qqq/components/horseshoe/NavBar";
 import SavedFilters from "qqq/components/misc/SavedFilters";
-import DashboardLayout from "qqq/layouts/DashboardLayout";
+import BaseLayout from "qqq/layouts/BaseLayout";
 import ProcessRun from "qqq/pages/processes/ProcessRun";
 import DataGridUtils from "qqq/utils/DataGridUtils";
 import Client from "qqq/utils/qqq/Client";
@ -1121,17 +1119,16 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
   if(tableMetaData && !tableMetaData.readPermission)
   {
      return (
-         <DashboardLayout>
-            <NavBar />
+         <BaseLayout>
            <Alert severity="error">
               You do not have permission to view {tableMetaData?.label} records
            </Alert>
-         </DashboardLayout>
+         </BaseLayout>
      );
   }

   return (
-      <DashboardLayout>
+      <BaseLayout>
         {/*
         // see above code that would use this
         <iframe id="exportIFrame" name="exportIFrame">
@ -1140,7 +1137,6 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
            </form>
         </iframe>
         */}
-         <NavBar />
         <Box my={3}>
            {alertContent ? (
               <Box mb={3}>
@ -1228,8 +1224,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
            </Modal>
         }

-         <Footer />
-      </DashboardLayout>
+      </BaseLayout>
   );
 }

--- a/src/setupProxy.js
+++ b/src/setupProxy.js
@ -51,4 +51,5 @@ module.exports = function (app)
   app.use("/serverInfo", getRequestHandler());
   app.use("/processes", getRequestHandler());
   app.use("/reports", getRequestHandler());
+   app.use("/images", getRequestHandler());
 };