QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-17 21:00:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
darin.kelkhoff
2023-02-03 19:12:54 -06:00
parent 83cc240724
commit 570bf05053
9 changed files with 62 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -6,7 +6,7 @@
"@auth0/auth0-react": "1.10.2", "@auth0/auth0-react": "1.10.2",
"@emotion/react": "11.7.1", "@emotion/react": "11.7.1",
"@emotion/styled": "11.6.0", "@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/icons-material": "5.4.1",
"@mui/material": "5.11.1", "@mui/material": "5.11.1",
"@mui/styles": "5.11.1", "@mui/styles": "5.11.1",

12
public/index.html
View File

@ -21,15 +21,9 @@ Coded by www.creative-tim.com
<meta name="theme-color" content="#04aaef" /> <meta name="theme-color" content="#04aaef" />
<link id="appleIcon" rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/" /> <link id="appleIcon" rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Nutrifresh One</title> <title>QQQ Material Dashboard</title>
<link <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
rel="stylesheet" <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" />
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> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

4
public/manifest.json
View File

@ -1,6 +1,6 @@
{ {
"short_name": "Material Dashboard", "short_name": "QQQ Material Dashboard",
"name": "Material Dashboard 2 PRO React TS", "name": "QQQ Material Dashboard",
"icons": [ "icons": [
{ {
"src": "favicon.png", "src": "favicon.png",

2
src/App.tsx
View File

@ -532,7 +532,7 @@ export default function App()
color={sidenavColor} color={sidenavColor}
icon={branding.icon} icon={branding.icon}
logo={branding.logo} logo={branding.logo}
companyName={branding.companyName} appName={branding.appName}
routes={sideNavRoutes} routes={sideNavRoutes}
onMouseEnter={handleOnMouseEnter} onMouseEnter={handleOnMouseEnter}
onMouseLeave={handleOnMouseLeave} onMouseLeave={handleOnMouseLeave}

56
src/qqq/components/horseshoe/Footer.tsx
View File

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

14
src/qqq/components/horseshoe/sidenav/SideNav.tsx
View File

@ -41,7 +41,7 @@ interface Props
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
icon?: string; icon?: string;
logo?: string; logo?: string;
companyName?: string; appName?: string;
routes: { routes: {
[key: string]: [key: string]:
| ReactNode | ReactNode
@ -64,7 +64,7 @@ interface Props
[key: string]: any; [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 [openCollapse, setOpenCollapse] = useState<boolean | string>(false);
const [openNestedCollapse, setOpenNestedCollapse] = 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> </MDTypography>
</Box> </Box>
<Box component={NavLink} to="/" display="flex" alignItems="center"> <Box component={NavLink} to="/" display="flex" alignItems="center">
{!miniSidenav && logo && <Box component="img" src={logo} alt="Logo" width="100%" />} {!miniSidenav && logo && <Box component="img" src={logo} alt={appName} title={appName} width="100%" />}
{miniSidenav && icon && <Box component="img" src={icon} alt="Icon" width="160%" />} {miniSidenav && icon && <Box component="img" src={icon} alt={appName} title={appName} width="160%" />}
{!miniSidenav && companyName && <Box width={!companyName && "100%"} sx={(theme: any) => sidenavLogoLabel(theme, {miniSidenav})}> {!miniSidenav && !logo && appName && <Box width={appName && "100%"} sx={(theme: any) => sidenavLogoLabel(theme, {miniSidenav})}>
<MDTypography component="h6" variant="button" fontWeight="medium" color={textColor}> <MDTypography component="h6" variant="button" fontWeight="medium" color={textColor}>
{companyName} {appName}
</MDTypography> </MDTypography>
</Box> </Box>
} }
@ -352,7 +352,7 @@ Sidenav.defaultProps = {
color: "info", color: "info",
icon: "", icon: "",
logo: "", logo: "",
companyName: "", appName: "",
}; };
export default Sidenav; export default Sidenav;

14
src/qqq/layouts/BaseLayout.tsx
View File

@ -19,11 +19,13 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * 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 Box from "@mui/material/Box";
import {ReactNode, useEffect, useState} from "react"; import {ReactNode, useEffect, useState} from "react";
import Footer from "qqq/components/horseshoe/Footer"; import Footer from "qqq/components/horseshoe/Footer";
import NavBar from "qqq/components/horseshoe/NavBar"; import NavBar from "qqq/components/horseshoe/NavBar";
import DashboardLayout from "qqq/layouts/DashboardLayout"; import DashboardLayout from "qqq/layouts/DashboardLayout";
import Client from "qqq/utils/qqq/Client";
interface Props interface Props
{ {
@ -45,6 +47,16 @@ export const breakpoints = {
function BaseLayout({stickyNavbar, children}: Props): JSX.Element function BaseLayout({stickyNavbar, children}: Props): JSX.Element
{ {
const [tabsOrientation, setTabsOrientation] = useState<"horizontal" | "vertical">("horizontal"); 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(() => useEffect(() =>
{ {
@ -72,7 +84,7 @@ function BaseLayout({stickyNavbar, children}: Props): JSX.Element
<DashboardLayout> <DashboardLayout>
<NavBar /> <NavBar />
<Box mt={stickyNavbar ? 3 : 6}>{children}</Box> <Box mt={stickyNavbar ? 3 : 6}>{children}</Box>
<Footer /> <Footer company={{href: metaData?.branding?.companyUrl, name: metaData?.branding?.companyName}} />
</DashboardLayout> </DashboardLayout>
); );
} }

15
src/qqq/pages/records/query/RecordQuery.tsx
View File

@ -50,10 +50,8 @@ import React, {useContext, useEffect, useReducer, useRef, useState} from "react"
import {useLocation, useNavigate, useSearchParams} from "react-router-dom"; import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
import QContext from "QContext"; import QContext from "QContext";
import {QActionsMenuButton, QCreateNewButton} from "qqq/components/buttons/DefaultButtons"; 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 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 ProcessRun from "qqq/pages/processes/ProcessRun";
import DataGridUtils from "qqq/utils/DataGridUtils"; import DataGridUtils from "qqq/utils/DataGridUtils";
import Client from "qqq/utils/qqq/Client"; import Client from "qqq/utils/qqq/Client";
@ -1121,17 +1119,16 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
if(tableMetaData && !tableMetaData.readPermission) if(tableMetaData && !tableMetaData.readPermission)
{ {
return ( return (
<DashboardLayout> <BaseLayout>
<NavBar />
<Alert severity="error"> <Alert severity="error">
You do not have permission to view {tableMetaData?.label} records You do not have permission to view {tableMetaData?.label} records
</Alert> </Alert>
</DashboardLayout> </BaseLayout>
); );
} }
return ( return (
<DashboardLayout> <BaseLayout>
{/* {/*
// see above code that would use this // see above code that would use this
<iframe id="exportIFrame" name="exportIFrame"> <iframe id="exportIFrame" name="exportIFrame">
@ -1140,7 +1137,6 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
</form> </form>
</iframe> </iframe>
*/} */}
<NavBar />
<Box my={3}> <Box my={3}>
{alertContent ? ( {alertContent ? (
<Box mb={3}> <Box mb={3}>
@ -1228,8 +1224,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
</Modal> </Modal>
} }
<Footer /> </BaseLayout>
</DashboardLayout>
); );
} }

1
src/setupProxy.js
View File

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