mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 21:00:45 +00:00
183 lines
5.5 KiB
TypeScript
183 lines
5.5 KiB
TypeScript
/**
|
|
=========================================================
|
|
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
=========================================================
|
|
|
|
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
|
|
Coded by www.creative-tim.com
|
|
|
|
=========================================================
|
|
|
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
*/
|
|
|
|
import React, { useState, useEffect, JSXElementConstructor, Key, ReactElement } from "react";
|
|
|
|
// react-router components
|
|
import { Routes, Route, Navigate, useLocation } from "react-router-dom";
|
|
|
|
// @mui material components
|
|
import { ThemeProvider } from "@mui/material/styles";
|
|
import CssBaseline from "@mui/material/CssBaseline";
|
|
import Icon from "@mui/material/Icon";
|
|
|
|
// Material Dashboard 2 PRO React TS components
|
|
import MDBox from "components/MDBox";
|
|
|
|
// Material Dashboard 2 PRO React TS exampless
|
|
import Sidenav from "examples/Sidenav";
|
|
import Configurator from "examples/Configurator";
|
|
|
|
// Material Dashboard 2 PRO React TS themes
|
|
import theme from "assets/theme";
|
|
|
|
// Material Dashboard 2 PRO React TS Dark Mode themes
|
|
import themeDark from "assets/theme-dark";
|
|
|
|
// RTL plugins
|
|
import rtlPlugin from "stylis-plugin-rtl";
|
|
import createCache from "@emotion/cache";
|
|
|
|
// Material Dashboard 2 PRO React TS routes
|
|
import routes from "qqq/qqqRoutes";
|
|
|
|
// Material Dashboard 2 PRO React TS contexts
|
|
import { useMaterialUIController, setMiniSidenav, setOpenConfigurator } from "context";
|
|
|
|
// Images
|
|
import brandWhite from "assets/images/logo-ct.png";
|
|
import brandDark from "assets/images/logo-ct-dark.png";
|
|
import EntityCreate from "./qqq/pages/entity-create";
|
|
import EntityList from "./qqq/pages/entity-list";
|
|
import EntityView from "./qqq/pages/entity-view";
|
|
import EntityEdit from "./qqq/pages/entity-edit";
|
|
import ProcessRun from "./qqq/pages/process-run";
|
|
|
|
export default function App() {
|
|
const [controller, dispatch] = useMaterialUIController();
|
|
const {
|
|
miniSidenav,
|
|
direction,
|
|
layout,
|
|
openConfigurator,
|
|
sidenavColor,
|
|
transparentSidenav,
|
|
whiteSidenav,
|
|
darkMode,
|
|
} = controller;
|
|
const [onMouseEnter, setOnMouseEnter] = useState(false);
|
|
const { pathname } = useLocation();
|
|
|
|
// Open sidenav when mouse enter on mini sidenav
|
|
const handleOnMouseEnter = () => {
|
|
if (miniSidenav && !onMouseEnter) {
|
|
setMiniSidenav(dispatch, false);
|
|
setOnMouseEnter(true);
|
|
}
|
|
};
|
|
|
|
// Close sidenav when mouse leave mini sidenav
|
|
const handleOnMouseLeave = () => {
|
|
if (onMouseEnter) {
|
|
setMiniSidenav(dispatch, true);
|
|
setOnMouseEnter(false);
|
|
}
|
|
};
|
|
|
|
// Change the openConfigurator state
|
|
const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
|
|
|
|
// Setting the dir attribute for the body element
|
|
useEffect(() => {
|
|
document.body.setAttribute("dir", direction);
|
|
}, [direction]);
|
|
|
|
// Setting page scroll to 0 when changing the route
|
|
useEffect(() => {
|
|
document.documentElement.scrollTop = 0;
|
|
document.scrollingElement.scrollTop = 0;
|
|
}, [pathname]);
|
|
|
|
const getRoutes = (allRoutes: any[]): any =>
|
|
allRoutes.map(
|
|
(route: {
|
|
collapse: any;
|
|
route: string;
|
|
component: ReactElement<any, string | JSXElementConstructor<any>>;
|
|
key: Key;
|
|
}) => {
|
|
if (route.collapse) {
|
|
return getRoutes(route.collapse);
|
|
}
|
|
|
|
if (route.route) {
|
|
return <Route path={route.route} element={route.component} key={route.key} />;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
);
|
|
|
|
const configsButton = (
|
|
<MDBox
|
|
display="flex"
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
width="3.25rem"
|
|
height="3.25rem"
|
|
bgColor="white"
|
|
shadow="sm"
|
|
borderRadius="50%"
|
|
position="fixed"
|
|
right="2rem"
|
|
bottom="2rem"
|
|
zIndex={99}
|
|
color="dark"
|
|
sx={{ cursor: "pointer" }}
|
|
onClick={handleConfiguratorOpen}
|
|
>
|
|
<Icon fontSize="small" color="inherit">
|
|
settings
|
|
</Icon>
|
|
</MDBox>
|
|
);
|
|
|
|
const entityListElement = <EntityList />;
|
|
const entityCreateElement = <EntityCreate />;
|
|
const entityViewElement = <EntityView />;
|
|
const entityEditElement = <EntityEdit />;
|
|
const processRunElement = <ProcessRun />;
|
|
|
|
return (
|
|
<ThemeProvider theme={darkMode ? themeDark : theme}>
|
|
<CssBaseline />
|
|
{layout === "dashboard" && (
|
|
<>
|
|
<Sidenav
|
|
color={sidenavColor}
|
|
brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
|
|
brandName="Material Dashboard PRO"
|
|
routes={routes}
|
|
onMouseEnter={handleOnMouseEnter}
|
|
onMouseLeave={handleOnMouseLeave}
|
|
/>
|
|
<Configurator />
|
|
{configsButton}
|
|
</>
|
|
)}
|
|
{layout === "vr" && <Configurator />}
|
|
<Routes>
|
|
<Route path="*" element={<Navigate to="/dashboards/analytics" />} />
|
|
<Route path="/:tableName/list" element={entityListElement} key="entity-list" />;
|
|
<Route path="/:tableName/create" element={entityCreateElement} key="entity-create" />;
|
|
<Route path="/:tableName/view/:id" element={entityViewElement} key="entity-view" />;
|
|
<Route path="/:tableName/edit/:id" element={entityEditElement} key="entity-edit" />;
|
|
<Route path="/processes/:processName" element={processRunElement} key="process-run" />;
|
|
{getRoutes(routes)}
|
|
</Routes>
|
|
</ThemeProvider>
|
|
);
|
|
}
|