From 97a9754bcf559e3282e078b3b9f00938f93ff5ec Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Tue, 5 Jul 2022 15:35:37 -0500 Subject: [PATCH] Update to get back processes in metaData; add actions menu to entity-list; fix routing directly to entity lists --- src/App.tsx | 60 ++--------- src/qqq/pages/entity-list/index.tsx | 159 +++++++++++++++++++--------- src/qqq/qqqRoutes.tsx | 5 +- src/routes.tsx | 4 +- 4 files changed, 121 insertions(+), 107 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 35f3b35..f275007 100644 --- 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() { ); + const entityListElement = ; const entityCreateElement = ; const entityViewElement = ; const entityEditElement = ; + const processRunElement = ; - return direction === "rtl" ? ( - - - - {layout === "dashboard" && ( - <> - - - {configsButton} - - )} - {layout === "vr" && } - - } /> - ; - ; - ; - {getRoutes(routes)} - - - - ) : ( + return ( {layout === "dashboard" && ( @@ -216,9 +170,11 @@ export default function App() { {layout === "vr" && } } /> + ; ; ; ; + ; {getRoutes(routes)} diff --git a/src/qqq/pages/entity-list/index.tsx b/src/qqq/pages/entity-list/index.tsx index ce0e474..f7fa054 100644 --- 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) => , - }); - } 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) => , + }); + } 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 = ( - Status: Paid - Status: Refunded - Status: Canceled + {tableProcesses.map((process) => ( + + {process.label} + + ))} + + ); + + const renderFiltersMenu = ( + + Status: Paid + Status: Refunded + Status: Canceled - + Remove Filter @@ -122,15 +159,32 @@ function EntityList({ table }: Props): JSX.Element { - - new {table.label} + + new {tableName} - - filters  - keyboard_arrow_down - - {renderMenu} + {tableProcesses.length > 0 && ( + + actions  + keyboard_arrow_down + + )} + {renderActionsMenu} + + + filters  + keyboard_arrow_down + + {renderFiltersMenu} + description @@ -148,4 +202,9 @@ function EntityList({ table }: Props): JSX.Element { ); } +// Declaring default props for DefaultCell +EntityList.defaultProps = { + table: null, +}; + export default EntityList; diff --git a/src/qqq/qqqRoutes.tsx b/src/qqq/qqqRoutes.tsx index 2d1bd0b..b8d6f77 100644 --- 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, diff --git a/src/routes.tsx b/src/routes.tsx index 995088d..c6d4480 100644 --- 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,