Update to get back processes in metaData; add actions menu to entity-list; fix routing directly to entity lists

2025-07-17 21:00:45 +00:00 · 2022-07-05 15:35:37 -05:00
parent e834c60bda
commit 97a9754bcf
4 changed files with 121 additions and 107 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -13,14 +13,7 @@ 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,
-  useMemo,
-  JSXElementConstructor,
-  Key,
-  ReactElement,
-} from "react";
+import React, { useState, useEffect, JSXElementConstructor, Key, ReactElement } from "react";

 // react-router components
 import { Routes, Route, Navigate, useLocation } from "react-router-dom";
@ -39,15 +32,12 @@ import Configurator from "examples/Configurator";

 // Material Dashboard 2 PRO React TS themes
 import theme from "assets/theme";
-import themeRTL from "assets/theme/theme-rtl";

 // Material Dashboard 2 PRO React TS Dark Mode themes
 import themeDark from "assets/theme-dark";
-import themeDarkRTL from "assets/theme-dark/theme-rtl";

 // RTL plugins
 import rtlPlugin from "stylis-plugin-rtl";
-import { CacheProvider } from "@emotion/react";
 import createCache from "@emotion/cache";

 // Material Dashboard 2 PRO React TS routes
@ -60,8 +50,10 @@ import { useMaterialUIController, setMiniSidenav, setOpenConfigurator } from "co
 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();
@ -76,20 +68,8 @@ export default function App() {
    darkMode,
  } = controller;
  const [onMouseEnter, setOnMouseEnter] = useState(false);
-  const [rtlCache, setRtlCache] = useState(null);
  const { pathname } = useLocation();

-  // Cache for the rtl
-  useMemo(() => {
-    const pluginRtl: any = rtlPlugin;
-    const cacheRtl = createCache({
-      key: "rtl",
-      stylisPlugins: [pluginRtl],
-    });
-
-    setRtlCache(cacheRtl);
-  }, []);
-
  // Open sidenav when mouse enter on mini sidenav
  const handleOnMouseEnter = () => {
    if (miniSidenav && !onMouseEnter) {
@ -164,39 +144,13 @@ export default function App() {
    </MDBox>
  );

+  const entityListElement = <EntityList />;
  const entityCreateElement = <EntityCreate />;
  const entityViewElement = <EntityView />;
  const entityEditElement = <EntityEdit />;
+  const processRunElement = <ProcessRun />;

-  return direction === "rtl" ? (
-    <CacheProvider value={rtlCache}>
-      <ThemeProvider theme={darkMode ? themeDarkRTL : themeRTL}>
-        <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/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" />;
-          {getRoutes(routes)}
-        </Routes>
-      </ThemeProvider>
-    </CacheProvider>
-  ) : (
+  return (
    <ThemeProvider theme={darkMode ? themeDark : theme}>
      <CssBaseline />
      {layout === "dashboard" && (
@ -216,9 +170,11 @@ export default function App() {
      {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>
--- a/src/qqq/pages/entity-list/index.tsx
+++ b/src/qqq/pages/entity-list/index.tsx
@ -34,18 +34,20 @@ import DashboardNavbar from "examples/Navbars/DashboardNavbar";
 import DataTable from "examples/Tables/DataTable";

 // Data
+import { QProcessMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
 import Link from "@mui/material/Link";
 import { QTableMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import { useParams } from "react-router-dom";
 import IdCell from "./components/IdCell";
 import Footer from "../../components/Footer";
+import EntityForm from "../../components/EntityForm";

 const qController = new QController("");
-console.log(qController);

 // Declaring props types for DefaultCell
 interface Props {
-  table: QTableMetaData;
+  table?: QTableMetaData;
 }

 let dataTableData = {
@ -54,62 +56,97 @@ let dataTableData = {
 };

 function EntityList({ table }: Props): JSX.Element {
-  const [menu, setMenu] = useState(null);
+  const tableNameParam = useParams().tableName;
+  const tableName = table === null ? tableNameParam : table.name;
+  const [filtersMenu, setFiltersMenu] = useState(null);
+  const [actionsMenu, setActionsMenu] = useState(null);
  const [tableState, setTableState] = useState("");
+  const [tableProcesses, setTableProcesses] = useState([] as QProcessMetaData[]);
  console.log(tableState);

-  const newEntity = (event: any) => setMenu(event.currentTarget);
-  const openMenu = (event: any) => setMenu(event.currentTarget);
-  const closeMenu = () => setMenu(null);
+  const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget);
+  const closeActionsMenu = () => setActionsMenu(null);
+  const openFiltersMenu = (event: any) => setFiltersMenu(event.currentTarget);
+  const closeFiltersMenu = () => setFiltersMenu(null);

-  const createPath = `/${table.name}/create`;
+  const createPath = `/${tableName}/create`;

-  (async () => {
-    const tableMetaData = await qController.loadTableMetaData(table.name);
-    const results = await qController.query(table.name, 250);
-    dataTableData = {
-      columns: [],
-      rows: [],
-    };
+  if (tableState === "") {
+    (async () => {
+      const tableMetaData = await qController.loadTableMetaData(tableName);
+      const metaData = await qController.loadMetaData();
+      const results = await qController.query(tableName, 250);
+      dataTableData = {
+        columns: [],
+        rows: [],
+      };

-    const sortedKeys = [...tableMetaData.fields.keys()].sort();
-    sortedKeys.forEach((key) => {
-      const field = tableMetaData.fields.get(key);
-      if (key === tableMetaData.primaryKeyField) {
-        dataTableData.columns.splice(0, 0, {
-          Header: field.label,
-          accessor: key,
-          Cell: ({ value }: any) => <IdCell id={value} />,
-        });
-      } else {
-        dataTableData.columns.push({
-          Header: field.label,
-          accessor: key,
-        });
-      }
-    });
+      const sortedKeys = [...tableMetaData.fields.keys()].sort();
+      sortedKeys.forEach((key) => {
+        const field = tableMetaData.fields.get(key);
+        if (key === tableMetaData.primaryKeyField) {
+          dataTableData.columns.splice(0, 0, {
+            Header: field.label,
+            accessor: key,
+            Cell: ({ value }: any) => <IdCell id={value} />,
+          });
+        } else {
+          dataTableData.columns.push({
+            Header: field.label,
+            accessor: key,
+          });
+        }
+      });

-    results.forEach((record) => {
-      dataTableData.rows.push(Object.fromEntries(record.values.entries()));
-    });
+      results.forEach((record) => {
+        dataTableData.rows.push(Object.fromEntries(record.values.entries()));
+      });

-    setTableState(table.name);
-  })();
+      const matchingProcesses: QProcessMetaData[] = [];
+      const processKeys = [...metaData.processes.keys()];
+      processKeys.forEach((key) => {
+        const process = metaData.processes.get(key);
+        if (process.tableName === tableName) {
+          matchingProcesses.push(process);
+        }
+      });
+      setTableProcesses(matchingProcesses);

-  const renderMenu = (
+      setTableState(tableName);
+    })();
+  }
+
+  const renderActionsMenu = (
    <Menu
-      anchorEl={menu}
+      anchorEl={actionsMenu}
      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
      transformOrigin={{ vertical: "top", horizontal: "left" }}
-      open={Boolean(menu)}
-      onClose={closeMenu}
+      open={Boolean(actionsMenu)}
+      onClose={closeActionsMenu}
      keepMounted
    >
-      <MenuItem onClick={closeMenu}>Status: Paid</MenuItem>
-      <MenuItem onClick={closeMenu}>Status: Refunded</MenuItem>
-      <MenuItem onClick={closeMenu}>Status: Canceled</MenuItem>
+      {tableProcesses.map((process) => (
+        <MenuItem key={process.name}>
+          <Link href={`/processes/${process.name}`}>{process.label}</Link>
+        </MenuItem>
+      ))}
+    </Menu>
+  );
+
+  const renderFiltersMenu = (
+    <Menu
+      anchorEl={filtersMenu}
+      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+      transformOrigin={{ vertical: "top", horizontal: "left" }}
+      open={Boolean(filtersMenu)}
+      onClose={closeFiltersMenu}
+      keepMounted
+    >
+      <MenuItem onClick={closeFiltersMenu}>Status: Paid</MenuItem>
+      <MenuItem onClick={closeFiltersMenu}>Status: Refunded</MenuItem>
+      <MenuItem onClick={closeFiltersMenu}>Status: Canceled</MenuItem>
      <Divider sx={{ margin: "0.5rem 0" }} />
-      <MenuItem onClick={closeMenu}>
+      <MenuItem onClick={closeFiltersMenu}>
        <MDTypography variant="button" color="error" fontWeight="regular">
          Remove Filter
        </MDTypography>
@ -122,15 +159,32 @@ function EntityList({ table }: Props): JSX.Element {
      <DashboardNavbar />
      <MDBox my={3}>
        <MDBox display="flex" justifyContent="space-between" alignItems="flex-start" mb={2}>
-          <MDButton variant="gradient" color="info" onClick={newEntity}>
-            <Link href={createPath}>new {table.label}</Link>
+          <MDButton variant="gradient" color="info">
+            <Link href={createPath}>new {tableName}</Link>
          </MDButton>
          <MDBox display="flex">
-            <MDButton variant={menu ? "contained" : "outlined"} color="dark" onClick={openMenu}>
-              filters&nbsp;
-              <Icon>keyboard_arrow_down</Icon>
-            </MDButton>
-            {renderMenu}
+            {tableProcesses.length > 0 && (
+              <MDButton
+                variant={actionsMenu ? "contained" : "outlined"}
+                color="dark"
+                onClick={openActionsMenu}
+              >
+                actions&nbsp;
+                <Icon>keyboard_arrow_down</Icon>
+              </MDButton>
+            )}
+            {renderActionsMenu}
+            <MDBox ml={1}>
+              <MDButton
+                variant={filtersMenu ? "contained" : "outlined"}
+                color="dark"
+                onClick={openFiltersMenu}
+              >
+                filters&nbsp;
+                <Icon>keyboard_arrow_down</Icon>
+              </MDButton>
+              {renderFiltersMenu}
+            </MDBox>
            <MDBox ml={1}>
              <MDButton variant="outlined" color="dark">
                <Icon>description</Icon>
@ -148,4 +202,9 @@ function EntityList({ table }: Props): JSX.Element {
  );
 }

+// Declaring default props for DefaultCell
+EntityList.defaultProps = {
+  table: null,
+};
+
 export default EntityList;
--- a/src/qqq/qqqRoutes.tsx
+++ b/src/qqq/qqqRoutes.tsx
@ -391,13 +391,12 @@ console.log(qController);

 (async () => {
  const metaData = await qController.loadMetaData();
-  console.log(`metaData: ${metaData}`);

  // get the keys sorted
-  const keys = [...metaData.keys()].sort();
+  const keys = [...metaData.tables.keys()].sort();
  const tableList = [] as any[];
  keys.forEach((key) => {
-    const table = metaData.get(key);
+    const table = metaData.tables.get(key);
    tableList.push({
      name: table.label,
      key: table.name,
--- a/src/routes.tsx
+++ b/src/routes.tsx
@ -554,8 +554,8 @@ console.log(qController);
    console.log(`metaData: ${metaData}`);

    const tableList = [] as any[];
-    metaData.forEach((value, key) => {
-      const table = metaData.get(key);
+    metaData.tables.forEach((value, key) => {
+      const table = metaData.tables.get(key);
      console.log(`TABLE: ${table}`);
      tableList.push({
        name: table.label,