diff --git a/src/App.tsx b/src/App.tsx index b654dd8..24d6474 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,17 @@ /** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= + ========================================================= + * 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) + * 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 + 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. -*/ + * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + */ import React, { useState, @@ -19,7 +19,6 @@ import React, { JSXElementConstructor, Key, ReactElement, - useReducer, } from "react"; // react-router components @@ -45,9 +44,6 @@ import theme from "assets/theme"; // Material Dashboard 2 PRO React TS Dark Mode themes import themeDark from "assets/theme-dark"; -// 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"; @@ -59,6 +55,72 @@ 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"; +import MDAvatar from "./components/MDAvatar"; +import profilePicture from "./assets/images/team-3.jpg"; +import ProfileOverview from "./layouts/pages/profile/profile-overview"; +import Settings from "./layouts/pages/account/settings"; +import SignInBasic from "./layouts/authentication/sign-in/basic"; +import Analytics from "./layouts/dashboards/analytics"; +import Sales from "./layouts/dashboards/sales"; +import QClient from "./qqq/utils/QClient"; + +/////////////////////////////////////////////////////////////////////////////////////////////// +// define the parts of the nav that are static - before the qqq tables etc get dynamic added // +/////////////////////////////////////////////////////////////////////////////////////////////// +function getStaticRoutes() +{ + return [ + { + type: "collapse", + name: "Brooklyn Alice", + key: "brooklyn-alice", + icon: , + collapse: [ + { + name: "My Profile", + key: "my-profile", + route: "/pages/profile/profile-overview", + component: , + }, + { + name: "Settings", + key: "profile-settings", + route: "/pages/account/settings", + component: , + }, + { + name: "Logout", + key: "logout", + route: "/authentication/sign-in/basic", + component: , + }, + ], + }, + { type: "divider", key: "divider-0" }, + { + type: "collapse", + name: "Dashboards", + key: "dashboards", + icon: dashboard, + collapse: [ + { + name: "Analytics", + key: "analytics", + route: "/dashboards/analytics", + component: , + }, + { + name: "Sales", + key: "sales", + route: "/dashboards/sales", + component: , + }, + ], + }, + { type: "divider", key: "divider-1" }, + { type: "title", title: "Tables", key: "title-docs" }, + ]; +} export default function App() { @@ -76,6 +138,60 @@ export default function App() const [onMouseEnter, setOnMouseEnter] = useState(false); const { pathname } = useLocation(); + const [needToLoadRoutes, setNeedToLoadRoutes] = useState(true); + const [routes, setRoutes] = useState(getStaticRoutes()); + + //////////////////////////////////////////// + // load qqq meta data to make more routes // + //////////////////////////////////////////// + useEffect(() => + { + if (!needToLoadRoutes) + { + return; + } + setNeedToLoadRoutes(false); + + (async () => + { + const metaData = await QClient.loadMetaData(); + + // get the keys sorted + const keys = [...metaData.tables.keys()].sort((a, b): number => + { + const labelA = metaData.tables.get(a).label; + const labelB = metaData.tables.get(b).label; + return (labelA.localeCompare(labelB)); + }); + const tableList = [] as any[]; + keys.forEach((key) => + { + const table = metaData.tables.get(key); + if (!table.isHidden) + { + tableList.push({ + name: `${table.label}`, + key: table.name, + route: `/${table.name}`, + component: , + }); + } + }); + + const tables = { + type: "collapse", + name: "Tables", + key: "tables", + icon: dashboard, + collapse: tableList, + }; + + const newDynamicRoutes = getStaticRoutes(); + newDynamicRoutes.push(tables); + setRoutes(newDynamicRoutes); + })(); + }, [needToLoadRoutes]); + // Open sidenav when mouse enter on mini sidenav const handleOnMouseEnter = () => { diff --git a/src/qqq/qqqRoutes.tsx b/src/qqq/qqqRoutes.tsx deleted file mode 100644 index 19feabd..0000000 --- a/src/qqq/qqqRoutes.tsx +++ /dev/null @@ -1,140 +0,0 @@ -/** - ========================================================= - * 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. - */ - -/** - All of the routes for the Material Dashboard 2 PRO React are added here, - You can add a new route, customize the routes and delete the routes here. - - Once you add a new route on this file it will be visible automatically on - the Sidenav. - - For adding a new route you can follow the existing routes in the routes array. - 1. The `type` key with the `collapse` value is used for a route. - 2. The `type` key with the `title` value is used for a title inside the Sidenav. - 3. The `type` key with the `divider` value is used for a divider between Sidenav items. - 4. The `name` key is used for the name of the route on the Sidenav. - 5. The `key` key is used for the key of the route (It will help you with the key prop inside a loop). - 6. The `icon` key is used for the icon of the route on the Sidenav, you have to add a node. - 7. The `collapse` key is used for making a collapsible item on the Sidenav that contains other routes - inside (nested routes), you need to pass the nested routes inside an array as a value for the `collapse` key. - 8. The `route` key is used to store the route location which is used for the react router. - 9. The `href` key is used to store the external links location. - 10. The `title` key is only for the item with the type of `title` and its used for the title text on the Sidenav. - 10. The `component` key is used to store the component of its route. - */ - -// Material Dashboard 2 PRO React layouts -import Analytics from "layouts/dashboards/analytics"; -import Sales from "layouts/dashboards/sales"; -import ProfileOverview from "layouts/pages/profile/profile-overview"; -import Settings from "layouts/pages/account/settings"; -import SignInBasic from "layouts/authentication/sign-in/basic"; - -// Material Dashboard 2 PRO React TS components -import MDAvatar from "components/MDAvatar"; - -// @mui icons -import Icon from "@mui/material/Icon"; - -// Images -import profilePicture from "assets/images/team-3.jpg"; - -// QQQ -import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController"; -import EntityList from "./pages/entity-list"; - -const qqqRoutes = [ - { - type: "collapse", - name: "Brooklyn Alice", - key: "brooklyn-alice", - icon: , - collapse: [ - { - name: "My Profile", - key: "my-profile", - route: "/pages/profile/profile-overview", - component: , - }, - { - name: "Settings", - key: "profile-settings", - route: "/pages/account/settings", - component: , - }, - { - name: "Logout", - key: "logout", - route: "/authentication/sign-in/basic", - component: , - }, - ], - }, - { type: "divider", key: "divider-0" }, - { - type: "collapse", - name: "Dashboards", - key: "dashboards", - icon: dashboard, - collapse: [ - { - name: "Analytics", - key: "analytics", - route: "/dashboards/analytics", - component: , - }, - { - name: "Sales", - key: "sales", - route: "/dashboards/sales", - component: , - }, - ], - }, - { type: "divider", key: "divider-1" }, - { type: "title", title: "Tables", key: "title-docs" }, -]; - -const qController = new QController(""); - -(async () => -{ - const metaData = await qController.loadMetaData(); - - // get the keys sorted - const keys = [...metaData.tables.keys()].sort(); - const tableList = [] as any[]; - keys.forEach((key) => - { - const table = metaData.tables.get(key); - tableList.push({ - name: `${table.label}`, - key: table.name, - route: `/${table.name}`, - component: , - }); - }); - - const tables = { - type: "collapse", - name: "Tables", - key: "tables", - icon: dashboard, - collapse: tableList, - }; - qqqRoutes.push(tables); -})(); - -export default qqqRoutes;