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

QQQ-32 udpating styles on query; record list & view sections; record labels; apps in nav; updated breadcrumb; updated navigation

Browse Source
This commit is contained in:
darin.kelkhoff
2022-08-09 15:57:10 -05:00
parent 7cb3c5ee88
commit 74717a092a
38 changed files with 4156 additions and 967 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2175
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -13,7 +13,7 @@
"@fullcalendar/interaction": "5.10.0", "@fullcalendar/interaction": "5.10.0",
"@fullcalendar/react": "5.10.0", "@fullcalendar/react": "5.10.0",
"@fullcalendar/timegrid": "5.10.0", "@fullcalendar/timegrid": "5.10.0",
"@kingsrook/qqq-frontend-core": "1.0.7", "@kingsrook/qqq-frontend-core": "file:.yalc/@kingsrook/qqq-frontend-core",
"@mui/icons-material": "5.4.1", "@mui/icons-material": "5.4.1",
"@mui/material": "5.4.1", "@mui/material": "5.4.1",
"@mui/styled-engine": "5.4.1", "@mui/styled-engine": "5.4.1",
@ -31,6 +31,7 @@
"@types/react-dom": "17.0.11", "@types/react-dom": "17.0.11",
"chart.js": "3.4.1", "chart.js": "3.4.1",
"chroma-js": "2.4.2", "chroma-js": "2.4.2",
"datejs": "1.0.0-rc3",
"dropzone": "5.9.2", "dropzone": "5.9.2",
"flatpickr": "4.6.9", "flatpickr": "4.6.9",
"form-data": "4.0.0", "form-data": "4.0.0",

264
src/App.tsx
View File

@ -1,14 +1,10 @@
import React, { import React, {
useState, JSXElementConstructor, Key, ReactElement, useEffect, useState,
useEffect,
JSXElementConstructor,
Key,
ReactElement,
} from "react"; } from "react";
// react-router components // react-router components
import { import {
Routes, Route, Navigate, useLocation, Navigate, Route, Routes, useLocation,
} from "react-router-dom"; } from "react-router-dom";
import {useAuth0} from "@auth0/auth0-react"; import {useAuth0} from "@auth0/auth0-react";
@ -33,23 +29,28 @@ import theme from "assets/theme";
import themeDark from "assets/theme-dark"; import themeDark from "assets/theme-dark";
// Material Dashboard 2 PRO React TS contexts // Material Dashboard 2 PRO React TS contexts
import {useMaterialUIController, setMiniSidenav, setOpenConfigurator} from "context"; import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "context";
// Images // Images
import nfLogo from "assets/images/nutrifresh_one_icon_white.png"; import nfLogo from "assets/images/nutrifresh_one_icon_white.png";
import {Md5} from "ts-md5/dist/md5"; import {Md5} from "ts-md5/dist/md5";
import {useCookies} from "react-cookie"; import {useCookies} from "react-cookie";
import {QAppMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppMetaData";
import EntityCreate from "./qqq/pages/entity-create"; import EntityCreate from "./qqq/pages/entity-create";
import EntityList from "./qqq/pages/entity-list"; import EntityList from "./qqq/pages/entity-list";
import EntityView from "./qqq/pages/entity-view"; import EntityView from "./qqq/pages/entity-view";
import EntityEdit from "./qqq/pages/entity-edit"; import EntityEdit from "./qqq/pages/entity-edit";
import ProcessRun from "./qqq/pages/process-run"; import ProcessRun from "./qqq/pages/process-run";
import AppHome from "qqq/pages/app-home";
import MDAvatar from "./components/MDAvatar"; import MDAvatar from "./components/MDAvatar";
import ProfileOverview from "./layouts/pages/profile/profile-overview"; import ProfileOverview from "./layouts/pages/profile/profile-overview";
import Settings from "./layouts/pages/account/settings"; import Settings from "./layouts/pages/account/settings";
import Analytics from "./layouts/dashboards/analytics"; import Analytics from "./layouts/dashboards/analytics";
import Sales from "./layouts/dashboards/sales"; import Sales from "./layouts/dashboards/sales";
import QClient from "./qqq/utils/QClient"; import QClient from "./qqq/utils/QClient";
import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType";
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import QProcessUtils from "qqq/utils/QProcessUtils";
/////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////
// define the parts of the nav that are static - before the qqq tables etc get dynamic added // // define the parts of the nav that are static - before the qqq tables etc get dynamic added //
@ -79,7 +80,6 @@ function getStaticRoutes()
], ],
}, },
{type: "divider", key: "divider-1"}, {type: "divider", key: "divider-1"},
{type: "title", title: "Tables", key: "title-docs"},
]; ];
} }
@ -134,7 +134,10 @@ export default function App()
const {pathname} = useLocation(); const {pathname} = useLocation();
const [needToLoadRoutes, setNeedToLoadRoutes] = useState(true); const [needToLoadRoutes, setNeedToLoadRoutes] = useState(true);
const [routes, setRoutes] = useState(getStaticRoutes()); const [sideNavRoutes, setSideNavRoutes] = useState(getStaticRoutes());
const [appRoutes, setAppRoutes] = useState(null as any);
const dynamicAppChildElement = <AppHome />;
//////////////////////////////////////////// ////////////////////////////////////////////
// load qqq meta data to make more routes // // load qqq meta data to make more routes //
@ -149,32 +152,149 @@ export default function App()
(async () => (async () =>
{ {
function addAppToSideNavList(app: QAppMetaData, appList: any[], parentPath: string, depth: number)
{
const path = `${parentPath}/${app.name}`;
if (app.type !== QAppNodeType.APP)
{
return;
}
if (app.type === QAppNodeType.APP && depth <= 2)
{
const childList: any[] = [];
app.children.forEach((child: QAppMetaData) =>
{
addAppToSideNavList(child, childList, path, depth + 1);
});
if (childList.length === 0)
{
if (depth === 0)
{
/////////////////////////////////////////////////////
// at level 0, the entry must always be a collapse //
/////////////////////////////////////////////////////
appList.push({
type: "collapse",
name: app.label,
key: app.name,
route: path,
icon: <Icon fontSize="medium">{app.iconName}</Icon>,
noCollapse: true,
component: <AppHome />,
});
}
else
{
appList.push({
name: app.label,
key: app.name,
route: path,
icon: <Icon fontSize="medium">{app.iconName}</Icon>,
component: <AppHome />,
});
}
}
else
{
appList.push({
type: "collapse",
name: app.label,
key: app.name,
dropdown: true,
icon: <Icon fontSize="medium">{app.iconName}</Icon>,
collapse: childList,
});
}
}
}
function addAppToAppRoutesList(metaData: QInstance, app: QAppMetaData, routeList: any[], parentPath: string, depth: number)
{
const path = `${parentPath}/${app.name}`;
if (app.type === QAppNodeType.APP)
{
app.children.forEach((child: QAppMetaData) =>
{
addAppToAppRoutesList(metaData, child, routeList, path, depth + 1);
});
routeList.push({
name: `${app.label}`,
key: app.name,
route: path,
component: <AppHome app={app} />,
});
}
else if (app.type === QAppNodeType.TABLE)
{
const table = metaData.tables.get(app.name);
routeList.push({
name: `${app.label}`,
key: app.name,
route: path,
component: <EntityList table={table} />,
});
routeList.push({
name: `${app.label} Create`,
key: `${app.name}.create`,
route: `${path}/create`,
component: <EntityCreate table={table} />,
});
routeList.push({
name: `${app.label} View`,
key: `${app.name}.view`,
route: `${path}/:id`,
component: <EntityView table={table} />,
});
routeList.push({
name: `${app.label}`,
key: `${app.name}.edit`,
route: `${path}/:id/edit`,
component: <EntityEdit table={table} />,
});
const processesForTable = QProcessUtils.getProcessesForTable(metaData, table.name, true);
processesForTable.forEach((process) =>
{
////////////////////////////////////////////////////////////////////////////////////////////////////
// special provision for the standard bulk processes - strip the table name from the process name //
// todo - this var isn't used - is this needed?
////////////////////////////////////////////////////////////////////////////////////////////////////
let processName = process.name;
if (processName.startsWith(`${process.tableName}.`))
{
processName = processName.replace(`${process.tableName}.`, "");
}
routeList.push({
name: process.label,
key: process.name,
route: `${path}/${process.name}`,
component: <ProcessRun process={process} />,
});
});
}
else if (app.type === QAppNodeType.PROCESS)
{
const process = metaData.processes.get(app.name);
routeList.push({
name: `${app.label}`,
key: app.name,
route: path,
component: <ProcessRun process={process} />,
});
}
}
try try
{ {
const metaData = await QClient.getInstance().loadMetaData(); const metaData = await QClient.getInstance().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: <EntityList table={table} />,
});
}
});
let profileRoute = {}; let profileRoute = {};
const gravatarBase = "http://www.gravatar.com/avatar/"; const gravatarBase = "http://www.gravatar.com/avatar/";
const hash = Md5.hashStr(user.email); const hash = Md5.hashStr(user.email);
@ -200,19 +320,25 @@ export default function App()
], ],
}; };
const tables = { const sideNavAppList = [] as any[];
type: "collapse", const appRoutesList = [] as any[];
name: "Tables", for (let i = 0; i < metaData.appTree.length; i++)
key: "tables", {
icon: <Icon fontSize="medium">dashboard</Icon>, const app = metaData.appTree[i];
collapse: tableList, addAppToSideNavList(app, sideNavAppList, "", 0);
}; addAppToAppRoutesList(metaData, app, appRoutesList, "", 0);
}
const newDynamicRoutes = getStaticRoutes(); const newSideNavRoutes = getStaticRoutes();
// @ts-ignore // @ts-ignore
newDynamicRoutes.unshift(profileRoute); newSideNavRoutes.unshift(profileRoute);
newDynamicRoutes.push(tables); for (let i = 0; i < sideNavAppList.length; i++)
setRoutes(newDynamicRoutes); {
newSideNavRoutes.push(sideNavAppList[i]);
}
setSideNavRoutes(newSideNavRoutes);
setAppRoutes(appRoutesList);
} }
catch (e) catch (e)
{ {
@ -306,38 +432,28 @@ export default function App()
</MDBox> </MDBox>
); );
const entityListElement = <EntityList />;
const entityCreateElement = <EntityCreate />;
const entityViewElement = <EntityView />;
const entityEditElement = <EntityEdit />;
const processRunElement = <ProcessRun />;
return ( return (
<ThemeProvider theme={darkMode ? themeDark : theme}> appRoutes && (
<CssBaseline /> <ThemeProvider theme={darkMode ? themeDark : theme}>
{layout === "dashboard" && ( <CssBaseline />
<> {layout === "dashboard" && (
<Sidenav <>
color={sidenavColor} <Sidenav
brand={nfLogo} color={sidenavColor}
brandName="Nutrifresh One" brand={nfLogo}
routes={routes} brandName="Nutrifresh One"
onMouseEnter={handleOnMouseEnter} routes={sideNavRoutes}
onMouseLeave={handleOnMouseLeave} onMouseEnter={handleOnMouseEnter}
/> onMouseLeave={handleOnMouseLeave}
<Configurator /> />
{configsButton} <Configurator />
</> </>
)} )}
<Routes> <Routes>
<Route path="*" element={<Navigate to="/dashboards/analytics" />} /> {appRoutes && getRoutes(appRoutes)}
<Route path="/:tableName" element={entityListElement} key="entity-list" /> {sideNavRoutes && getRoutes(sideNavRoutes)}
<Route path="/:tableName/create" element={entityCreateElement} key="entity-create" /> </Routes>
<Route path="/processes/:processName" element={processRunElement} key="process-run" /> </ThemeProvider>
<Route path="/:tableName/:id" element={entityViewElement} key="entity-view" /> )
<Route path="/:tableName/:id/edit" element={entityEditElement} key="entity-edit" />
{getRoutes(routes)}
</Routes>
</ThemeProvider>
); );
} }

13
src/HandleAuthorizationError.tsx
View File

@ -1,13 +1,6 @@
import React, { import React, {useEffect} from "react";
useState,
useEffect,
JSXElementConstructor,
Key,
ReactElement,
} from "react";
import {SESSION_ID_COOKIE_NAME} from "App"; import {SESSION_ID_COOKIE_NAME} from "App";
import {useCookies} from "react-cookie"; import {useCookies} from "react-cookie";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
interface Props interface Props
{ {
@ -27,3 +20,7 @@ export default function HandleAuthorizationError({errorMessage}: Props)
<div>{errorMessage}</div> <div>{errorMessage}</div>
); );
} }
HandleAuthorizationError.defaultProps = {
errorMessage: "User authorization error.",
};

23
src/examples/Sidenav/index.tsx
View File

@ -53,16 +53,21 @@ interface Props {
brandName: string; brandName: string;
routes: { routes: {
[key: string]: [key: string]:
| ReactNode | ReactNode
| string | string
| { | {
[key: string]: [key: string]:
| ReactNode | ReactNode
| string | string
| { | {
[key: string]: ReactNode | string; [key: string]:
}[]; | ReactNode
| string
| {
[key: string]: ReactNode | string;
}[]; }[];
}[];
}[];
}[]; }[];
[key: string]: any; [key: string]: any;
} }

21
src/qqq/auth0/code-snippet.tsx
View File

@ -1,3 +1,24 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import React from "react"; import React from "react";
interface CodeSnippetProps interface CodeSnippetProps

21
src/qqq/auth0/loader.tsx
View File

@ -1,3 +1,24 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import React from "react"; import React from "react";
function Loader() : JSX.Element function Loader() : JSX.Element

21
src/qqq/auth0/profile.tsx
View File

@ -1,3 +1,24 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {useAuth0} from "@auth0/auth0-react"; import {useAuth0} from "@auth0/auth0-react";
import React from "react"; import React from "react";
import CodeSnippet from "./code-snippet"; import CodeSnippet from "./code-snippet";

21
src/qqq/auth0/protected-route.tsx
View File

@ -1,3 +1,24 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {withAuthenticationRequired} from "@auth0/auth0-react"; import {withAuthenticationRequired} from "@auth0/auth0-react";
import React from "react"; import React from "react";
import Loader from "./loader"; import Loader from "./loader";

35
src/qqq/components/BaseLayout/index.tsx
View File

@ -1,16 +1,22 @@
/** /*
========================================================= * QQQ - Low-code Application Framework for Engineers.
* Material Dashboard 2 PRO React TS - v1.0.0 * Copyright (C) 2021-2022. Kingsrook, LLC
========================================================= * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts * https://github.com/Kingsrook/
* Copyright 2022 Creative Tim (https://www.creative-tim.com) *
* This program is free software: you can redistribute it and/or modify
Coded by www.creative-tim.com * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
========================================================= * License, or (at your option) any later version.
*
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import {useState, useEffect, ReactNode} from "react"; import {useState, useEffect, ReactNode} from "react";
@ -22,7 +28,6 @@ import breakpoints from "assets/theme/base/breakpoints";
import DashboardLayout from "examples/LayoutContainers/DashboardLayout"; import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import Navbar from "qqq/components/Navbar"; import Navbar from "qqq/components/Navbar";
import Footer from "qqq/components/Footer"; import Footer from "qqq/components/Footer";
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
import MDBox from "../../../components/MDBox"; import MDBox from "../../../components/MDBox";
// Declaring props types for BaseLayout // Declaring props types for BaseLayout
@ -60,7 +65,7 @@ function BaseLayout({stickyNavbar, children}: Props): JSX.Element
return ( return (
<DashboardLayout> <DashboardLayout>
<Navbar /> <Navbar />
<MDBox mt={stickyNavbar ? 3 : 10}>{children}</MDBox> <MDBox mt={stickyNavbar ? 3 : 6}>{children}</MDBox>
<Footer /> <Footer />
</DashboardLayout> </DashboardLayout>
); );

21
src/qqq/components/Buttons/AuthenticationButton/index.tsx
View File

@ -1,3 +1,24 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {useAuth0} from "@auth0/auth0-react"; import {useAuth0} from "@auth0/auth0-react";
import React from "react"; import React from "react";
import {Button} from "@mui/material"; import {Button} from "@mui/material";

57
src/qqq/components/EntityForm/components/CustomerCell/index.tsx
View File

@ -1,57 +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.
*/
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import MDAvatar from "components/MDAvatar";
// Declaring props types for CustomerCell
interface Props {
image?: string;
name: string;
color?:
| "transparent"
| "primary"
| "secondary"
| "info"
| "success"
| "warning"
| "error"
| "light"
| "dark";
}
function CustomerCell({image, name, color}: Props): JSX.Element
{
return (
<MDBox display="flex" alignItems="center">
<MDBox mr={1}>
<MDAvatar bgColor={color} src={image} alt={name} size="xs" />
</MDBox>
<MDTypography variant="caption" fontWeight="medium" color="text" sx={{lineHeight: 0}}>
{name}
</MDTypography>
</MDBox>
);
}
// Declaring default props for CustomerCell
CustomerCell.defaultProps = {
image: "",
color: "dark",
};
export default CustomerCell;

45
src/qqq/components/EntityForm/components/DefaultCell/index.tsx
View File

@ -1,45 +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.
*/
// Material Dashboard 2 PRO React TS components
import MDTypography from "components/MDTypography";
// Declaring props types for DefaultCell
interface Props {
value: string;
suffix?: string | boolean;
}
function DefaultCell({value, suffix}: Props): JSX.Element
{
return (
<MDTypography variant="caption" fontWeight="medium" color="text">
{value}
{suffix && (
<MDTypography variant="caption" fontWeight="medium" color="secondary">
&nbsp;&nbsp;
{suffix}
</MDTypography>
)}
</MDTypography>
);
}
// Declaring default props for DefaultCell
DefaultCell.defaultProps = {
suffix: "",
};
export default DefaultCell;

54
src/qqq/components/EntityForm/components/IdCell/index.tsx
View File

@ -1,54 +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.
*/
// @mui material components
import Checkbox from "@mui/material/Checkbox";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import Link from "@mui/material/Link";
// Declaring props types for IdCell
interface Props {
id: string;
checked?: boolean;
}
function IdCell({id, checked}: Props): JSX.Element
{
const pathParts = window.location.pathname.split("/");
const tableName = pathParts[1];
const href = `/${tableName}/${id}`;
const link = <Link href={href}>{id}</Link>;
return (
<MDBox display="flex" alignItems="center">
<Checkbox defaultChecked={checked} />
<MDBox ml={1}>
<MDTypography variant="caption" fontWeight="medium" color="text">
{link}
</MDTypography>
</MDBox>
</MDBox>
);
}
// Declaring default props for IdCell
IdCell.defaultProps = {
checked: false,
};
export default IdCell;

57
src/qqq/components/EntityForm/components/StatusCell/index.tsx
View File

@ -1,57 +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.
*/
// @mui material components
import Icon from "@mui/material/Icon";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import MDButton from "components/MDButton";
// Declaring props types for StatusCell
interface Props {
icon: string;
color:
| "primary"
| "secondary"
| "info"
| "success"
| "warning"
| "error"
| "dark"
| "light"
| "white"
| "default";
status: string;
}
function StatusCell({icon, color, status}: Props): JSX.Element
{
return (
<MDBox display="flex" alignItems="center">
<MDBox mr={1}>
<MDButton variant="outlined" color={color} size="small" iconOnly circular>
<Icon sx={{fontWeight: "bold"}}>{icon}</Icon>
</MDButton>
</MDBox>
<MDTypography variant="caption" fontWeight="medium" color="text" sx={{lineHeight: 0}}>
{status}
</MDTypography>
</MDBox>
);
}
export default StatusCell;

193
src/qqq/components/EntityForm/data/selectData.ts
View File

@ -1,193 +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.
*/
const selectData = {
gender: ["Male", "Female"],
birthDate: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
],
days: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
],
years: [
"1900",
"1901",
"1902",
"1903",
"1904",
"1905",
"1906",
"1907",
"1908",
"1909",
"1910",
"1911",
"1912",
"1913",
"1914",
"1915",
"1915",
"1915",
"1916",
"1917",
"1918",
"1919",
"1920",
"1921",
"1922",
"1923",
"1924",
"1925",
"1926",
"1927",
"1928",
"1929",
"1930",
"1931",
"1932",
"1933",
"1934",
"1935",
"1936",
"1937",
"1938",
"1939",
"1940",
"1941",
"1942",
"1943",
"1944",
"1945",
"1946",
"1947",
"1948",
"1949",
"1950",
"1951",
"1952",
"1953",
"1954",
"1955",
"1956",
"1957",
"1958",
"1959",
"1960",
"1961",
"1962",
"1963",
"1964",
"1965",
"1966",
"1967",
"1968",
"1969",
"1970",
"1971",
"1972",
"1973",
"1974",
"1975",
"1976",
"1977",
"1978",
"1979",
"1980",
"1981",
"1982",
"1983",
"1984",
"1985",
"1986",
"1987",
"1988",
"1989",
"1990",
"1991",
"1992",
"1993",
"1994",
"1995",
"1996",
"1997",
"1998",
"1999",
"2000",
"2001",
"2002",
"2003",
"2004",
"2005",
"2006",
"2007",
"2008",
"2009",
"2010",
"2011",
"2012",
"2013",
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
],
skills: ["react", "vue", "angular", "svelte", "javascript"],
};
export default selectData;

284
src/qqq/components/EntityForm/index.tsx
View File

@ -1,13 +1,14 @@
// react components // react components
import {useParams, useSearchParams} from "react-router-dom"; import {useParams, useNavigate, useLocation} from "react-router-dom";
import React, {useReducer, useState} from "react"; import React, {useReducer, useState} from "react";
// misc components // misc components
import * as Yup from "yup"; import * as Yup from "yup";
import {Form, Formik} from "formik"; import {
Form, Formik, useFormik, useFormikContext,
} from "formik";
// qqq components // qqq components
import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils"; import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
import QDynamicForm from "qqq/components/QDynamicForm"; import QDynamicForm from "qqq/components/QDynamicForm";
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData"; import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
@ -20,45 +21,61 @@ import {Alert} from "@mui/material";
// Material Dashboard 2 PRO React TS components // Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox"; import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography"; import MDTypography from "components/MDTypography";
import MDButton from "../../../components/MDButton";
import QClient from "qqq/utils/QClient"; import QClient from "qqq/utils/QClient";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QCancelButton, QSaveButton} from "qqq/components/QButtons";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import Avatar from "@mui/material/Avatar";
import Icon from "@mui/material/Icon";
import QRecordSidebar from "qqq/components/QRecordSidebar";
import QTableUtils from "qqq/utils/QTableUtils";
// Declaring props types for EntityForm
interface Props interface Props
{ {
id?: string; id?: string;
table?: QTableMetaData;
} }
function EntityForm({id}: Props): JSX.Element function EntityForm({table, id}: Props): JSX.Element
{ {
const qController = QClient.getInstance(); const qController = QClient.getInstance();
const {tableName} = useParams(); const tableNameParam = useParams().tableName;
const tableName = table === null ? tableNameParam : table.name;
const [validations, setValidations] = useState({}); const [validations, setValidations] = useState({});
const [initialValues, setInitialValues] = useState({} as { [key: string]: string }); const [initialValues, setInitialValues] = useState({} as { [key: string]: string });
const [formFields, setFormFields] = useState({}); const [formFields, setFormFields] = useState(null as Map<string, any>);
const [t1sectionName, setT1SectionName] = useState(null as string);
const [alertContent, setAlertContent] = useState(""); const [alertContent, setAlertContent] = useState("");
const [asyncLoadInited, setAsyncLoadInited] = useState(false); const [asyncLoadInited, setAsyncLoadInited] = useState(false);
const [formValues, setFormValues] = useState({} as { [key: string]: string }); const [formValues, setFormValues] = useState({} as { [key: string]: string });
const [tableMetaData, setTableMetaData] = useState(null); const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
const [record, setRecord] = useState(null as QRecord);
const [tableSections, setTableSections] = useState(null as any);
const [, forceUpdate] = useReducer((x) => x + 1, 0); const [, forceUpdate] = useReducer((x) => x + 1, 0);
function getDynamicStepContent(formData: any): JSX.Element const navigate = useNavigate();
const location = useLocation();
function getFormSection(values: any, touched: any, formFields: any, errors: any): JSX.Element
{ {
const { const formData: any = {};
formFields, formData.values = values;
values, formData.touched = touched;
errors, formData.errors = errors;
touched, formData.formFields = {};
} = formData; console.log(formFields);
for (let i = 0; i < formFields.length; i++)
{
formData.formFields[formFields[i].name] = formFields[i];
}
if (!Object.keys(formFields).length) if (!Object.keys(formFields).length)
{ {
return <div>Loading...</div>; return <div>Loading...</div>;
} }
return <QDynamicForm formData={formData} primaryKeyId={tableMetaData.primaryKeyField} />; return <QDynamicForm formData={formData} primaryKeyId={tableMetaData.primaryKeyField} />;
} }
@ -70,20 +87,27 @@ function EntityForm({id}: Props): JSX.Element
const tableMetaData = await qController.loadTableMetaData(tableName); const tableMetaData = await qController.loadTableMetaData(tableName);
setTableMetaData(tableMetaData); setTableMetaData(tableMetaData);
/////////////////////////////////////////////////
// define the sections, e.g., for the left-bar //
/////////////////////////////////////////////////
const tableSections = QTableUtils.getSectionsForRecordSidebar(tableMetaData);
setTableSections(tableSections);
const fieldArray = [] as QFieldMetaData[]; const fieldArray = [] as QFieldMetaData[];
const sortedKeys = [...tableMetaData.fields.keys()].sort(); const sortedKeys = [...tableMetaData.fields.keys()].sort();
sortedKeys.forEach((key) => sortedKeys.forEach((key) =>
{ {
const fieldMetaData = tableMetaData.fields.get(key); const fieldMetaData = tableMetaData.fields.get(key);
if (fieldMetaData.isEditable) fieldArray.push(fieldMetaData);
{
fieldArray.push(fieldMetaData);
}
}); });
/////////////////////////////////////////////////////////////////////////////////
// if doing an edit, fetch the record and pre-populate the form values from it //
/////////////////////////////////////////////////////////////////////////////////
if (id !== null) if (id !== null)
{ {
const record = await qController.get(tableName, id); const record = await qController.get(tableName, id);
setRecord(record);
tableMetaData.fields.forEach((fieldMetaData, key) => tableMetaData.fields.forEach((fieldMetaData, key) =>
{ {
@ -92,20 +116,79 @@ function EntityForm({id}: Props): JSX.Element
setFormValues(formValues); setFormValues(formValues);
} }
setInitialValues(initialValues);
/////////////////////////////////////////////////////////
// get formField and formValidation objects for Formik //
/////////////////////////////////////////////////////////
const { const {
dynamicFormFields, dynamicFormFields,
formValidations, formValidations,
} = DynamicFormUtils.getFormData(fieldArray); } = DynamicFormUtils.getFormData(fieldArray);
setInitialValues(initialValues);
setFormFields(dynamicFormFields); /////////////////////////////////////
setValidations(Yup.object() // group the formFields by section //
.shape(formValidations)); /////////////////////////////////////
const dynamicFormFieldsBySection = new Map<string, any>();
let t1sectionName;
for (let i = 0; i < tableSections.length; i++)
{
const section = tableSections[i];
const sectionDynamicFormFields: any[] = [];
for (let j = 0; j < section.fieldNames.length; j++)
{
const fieldName = section.fieldNames[j];
const field = tableMetaData.fields.get(fieldName);
if (id !== null || field.isEditable)
{
sectionDynamicFormFields.push(dynamicFormFields[fieldName]);
}
}
if (sectionDynamicFormFields.length === 0)
{
////////////////////////////////////////////////////////////////////////////////////////////////
// in case there are no active fields in this section, remove it from the tableSections array //
////////////////////////////////////////////////////////////////////////////////////////////////
tableSections.splice(i, 1);
i--;
}
else
{
dynamicFormFieldsBySection.set(section.name, sectionDynamicFormFields);
}
//////////////////////////////////////
// capture the tier1 section's name //
//////////////////////////////////////
if (section.tier === "T1")
{
t1sectionName = section.name;
}
}
setT1SectionName(t1sectionName);
setFormFields(dynamicFormFieldsBySection);
setValidations(Yup.object().shape(formValidations));
forceUpdate(); forceUpdate();
})(); })();
} }
const handleCancelClicked = () =>
{
if (id !== null)
{
const path = `${location.pathname.replace(/\/edit$/, "")}`;
navigate(path, {replace: true});
}
else
{
const path = `${location.pathname.replace(/\/create$/, "")}`;
navigate(path, {replace: true});
}
};
const handleSubmit = async (values: any, actions: any) => const handleSubmit = async (values: any, actions: any) =>
{ {
actions.setSubmitting(true); actions.setSubmitting(true);
@ -117,9 +200,8 @@ function EntityForm({id}: Props): JSX.Element
.update(tableName, id, values) .update(tableName, id, values)
.then((record) => .then((record) =>
{ {
window.location.href = `/${tableName}/${record.values.get( const path = `${location.pathname.replace(/\/edit$/, "")}?updateSuccess=true`;
tableMetaData.primaryKeyField, navigate(path);
)}?updateSuccess=true`;
}) })
.catch((error) => .catch((error) =>
{ {
@ -132,9 +214,8 @@ function EntityForm({id}: Props): JSX.Element
.create(tableName, values) .create(tableName, values)
.then((record) => .then((record) =>
{ {
window.location.href = `/${tableName}/${record.values.get( const path = `${location.pathname.replace(/create$/, record.values.get(tableMetaData.primaryKeyField))}?createSuccess=true`;
tableMetaData.primaryKeyField, navigate(path);
)}?createSuccess=true`;
}) })
.catch((error) => .catch((error) =>
{ {
@ -144,8 +225,20 @@ function EntityForm({id}: Props): JSX.Element
})(); })();
}; };
const formTitle = id != null ? `Edit ${tableMetaData?.label} (${id})` : `Create New ${tableMetaData?.label}`; let formTitle = "";
const formId = id != null ? `edit-${tableMetaData?.label}-form` : `create-${tableMetaData?.label}-form`; if (tableMetaData)
{
if (id == null)
{
formTitle = `Create new ${tableMetaData?.label}`;
}
else if (record != null)
{
formTitle = `Edit ${tableMetaData?.label}: ${record?.recordLabel}`;
}
}
const formId = id != null ? `edit-${tableMetaData?.name}-form` : `create-${tableMetaData?.name}-form`;
return ( return (
<MDBox mb={3}> <MDBox mb={3}>
@ -155,62 +248,91 @@ function EntityForm({id}: Props): JSX.Element
<MDBox mb={3}> <MDBox mb={3}>
<Alert severity="error">{alertContent}</Alert> <Alert severity="error">{alertContent}</Alert>
</MDBox> </MDBox>
) : ( ) : ("")}
"" </Grid>
)} </Grid>
<Card id="edit-form-container" sx={{overflow: "visible"}}> <Grid container spacing={3}>
<MDBox p={3}> <Grid item xs={12} lg={3}>
<MDTypography variant="h5">{formTitle}</MDTypography> <QRecordSidebar tableSections={tableSections} />
</MDBox> </Grid>
<MDBox pb={3} px={3}> <Grid item xs={12} lg={9}>
<Grid key="fields-grid" container spacing={3}>
<Formik <Formik
initialValues={initialValues} initialValues={initialValues}
validationSchema={validations} validationSchema={validations}
onSubmit={handleSubmit} onSubmit={handleSubmit}
> >
{({ {({
values, values,
errors, errors,
touched, touched,
isSubmitting, isSubmitting,
}) => ( }) => (
<Form id={formId} autoComplete="off"> <Form id={formId} autoComplete="off">
<MDBox p={3} width="100%">
{/*************************************************************************** <MDBox pb={3} pt={0}>
** step content - e.g., the appropriate form or other screen for the step ** <Card id={`${t1sectionName}`} sx={{overflow: "visible"}}>
***************************************************************************/} <MDBox display="flex" p={3} pb={1}>
{getDynamicStepContent({ <MDBox mr={1.5}>
values, <Avatar sx={{bgcolor: "rgb(26, 115, 232)"}}>
touched, <Icon>
formFields, {tableMetaData?.iconName}
errors, </Icon>
})} </Avatar>
<Grid key="buttonGrid" container spacing={3}>
<MDBox mt={5} ml="auto">
<MDButton type="submit" variant="gradient" color="dark" size="small">
save
{" "}
{tableMetaData?.label}
</MDButton>
</MDBox>
</Grid>
</MDBox> </MDBox>
</Form> <MDBox display="flex" alignItems="center">
)} <MDTypography variant="h5">{formTitle}</MDTypography>
</Formik> </MDBox>
</Grid> </MDBox>
</MDBox> {
</Card> t1sectionName && formFields ? (
<MDBox pb={3} px={3}>
<MDBox p={3} width="100%">
{getFormSection(values, touched, formFields.get(t1sectionName), errors)}
</MDBox>
</MDBox>
) : null
}
</Card>
</MDBox>
{tableSections && formFields ? tableSections.map((section: any) => (section.name !== t1sectionName
? (
<MDBox key={`edit-card-${section.name}`} pb={3}>
<Card id={section.name} sx={{overflow: "visible"}}>
<MDTypography variant="h5" p={3} pb={1}>
{section.label}
</MDTypography>
<MDBox pb={3} px={3}>
<MDBox p={3} width="100%">
{
getFormSection(values, touched, formFields.get(section.name), errors)
}
</MDBox>
</MDBox>
</Card>
</MDBox>
) : null)) : null}
<MDBox component="div" p={3}>
<Grid container justifyContent="flex-end" spacing={3}>
<QCancelButton onClickHandler={handleCancelClicked} />
<QSaveButton />
</Grid>
</MDBox>
</Form>
)}
</Formik>
</Grid> </Grid>
</Grid> </Grid>
</MDBox> </MDBox>
); );
} }
// Declaring default props for DefaultCell
EntityForm.defaultProps = { EntityForm.defaultProps = {
id: null, id: null,
table: null,
}; };
export default EntityForm; export default EntityForm;

37
src/qqq/components/Footer/index.tsx
View File

@ -1,17 +1,23 @@
/** /*
========================================================= * QQQ - Low-code Application Framework for Engineers.
* Material Dashboard 2 PRO React TS - v1.0.0 * Copyright (C) 2021-2022. Kingsrook, LLC
========================================================= * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts * https://github.com/Kingsrook/
* Copyright 2022 Creative Tim (https://www.creative-tim.com) *
* This program is free software: you can redistribute it and/or modify
Coded by www.creative-tim.com * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
========================================================= * License, or (at your option) any later version.
*
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. * This program is distributed in the hope that it will be useful,
*/ * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// @mui material components // @mui material components
import Link from "@mui/material/Link"; import Link from "@mui/material/Link";
@ -60,6 +66,9 @@ function Footer({company, links}: Props): JSX.Element
justifyContent="space-between" justifyContent="space-between"
alignItems="center" alignItems="center"
px={1.5} px={1.5}
style={{
position: "fixed", bottom: "0px", zIndex: -1, marginBottom: "10px",
}}
> >
<MDBox <MDBox
display="flex" display="flex"

33
src/qqq/components/Navbar/index.tsx
View File

@ -1,7 +1,28 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {useState, useEffect} from "react"; import {useState, useEffect} from "react";
// react-router components // react-router components
import {useLocation, Link} from "react-router-dom"; import {useLocation} from "react-router-dom";
// @material-ui core components // @material-ui core components
import AppBar from "@mui/material/AppBar"; import AppBar from "@mui/material/AppBar";
@ -16,7 +37,6 @@ import MDInput from "components/MDInput";
import MDBadge from "components/MDBadge"; import MDBadge from "components/MDBadge";
// Material Dashboard 2 PRO React TS examples components // Material Dashboard 2 PRO React TS examples components
import Breadcrumbs from "examples/Breadcrumbs";
import NotificationItem from "examples/Items/NotificationItem"; import NotificationItem from "examples/Items/NotificationItem";
// Custom styles for Navbar // Custom styles for Navbar
@ -38,6 +58,7 @@ import {
} from "context"; } from "context";
// qqq // qqq
import QBreadcrumbs from "qqq/components/QBreadcrumbs";
// Declaring prop types for Navbar // Declaring prop types for Navbar
interface Props interface Props
@ -106,9 +127,11 @@ function Navbar({absolute, light, isMini}: Props): JSX.Element
onClose={handleCloseMenu} onClose={handleCloseMenu}
sx={{mt: 2}} sx={{mt: 2}}
> >
<NotificationItem icon={<Icon>email</Icon>} title="Check new messages" /> <NotificationItem icon={<Icon>email</Icon>} title="0 messages available" />
{/*
<NotificationItem icon={<Icon>podcasts</Icon>} title="Manage Podcast sessions" /> <NotificationItem icon={<Icon>podcasts</Icon>} title="Manage Podcast sessions" />
<NotificationItem icon={<Icon>shopping_cart</Icon>} title="Payment successfully completed" /> <NotificationItem icon={<Icon>shopping_cart</Icon>} title="Payment successfully completed" />
*/}
</Menu> </Menu>
); );
@ -145,7 +168,7 @@ function Navbar({absolute, light, isMini}: Props): JSX.Element
> >
<Toolbar sx={navbarContainer}> <Toolbar sx={navbarContainer}>
<MDBox color="inherit" mb={{xs: 1, md: 0}} sx={(theme) => navbarRow(theme, {isMini})}> <MDBox color="inherit" mb={{xs: 1, md: 0}} sx={(theme) => navbarRow(theme, {isMini})}>
<Breadcrumbs icon="home" title={breadcrumbTitle} route={route} light={light} /> <QBreadcrumbs icon="home" title={breadcrumbTitle} route={route} light={light} />
<IconButton sx={navbarDesktopMenu} onClick={handleMiniSidenav} size="small" disableRipple> <IconButton sx={navbarDesktopMenu} onClick={handleMiniSidenav} size="small" disableRipple>
<Icon fontSize="medium" sx={iconsStyle}> <Icon fontSize="medium" sx={iconsStyle}>
{miniSidenav ? "menu_open" : "menu"} {miniSidenav ? "menu_open" : "menu"}
@ -184,7 +207,7 @@ function Navbar({absolute, light, isMini}: Props): JSX.Element
sx={navbarIconButton} sx={navbarIconButton}
onClick={handleOpenMenu} onClick={handleOpenMenu}
> >
<MDBadge badgeContent={9} color="error" size="xs" circular> <MDBadge badgeContent={0} color="error" size="xs" circular>
<Icon sx={iconsStyle}>notifications</Icon> <Icon sx={iconsStyle}>notifications</Icon>
</MDBadge> </MDBadge>
</IconButton> </IconButton>

32
src/qqq/components/Navbar/styles.ts
View File

@ -1,16 +1,22 @@
/** /*
========================================================= * QQQ - Low-code Application Framework for Engineers.
* Material Dashboard 2 PRO React TS - v1.0.0 * Copyright (C) 2021-2022. Kingsrook, LLC
========================================================= * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts * https://github.com/Kingsrook/
* Copyright 2022 Creative Tim (https://www.creative-tim.com) *
* This program is free software: you can redistribute it and/or modify
Coded by www.creative-tim.com * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
========================================================= * License, or (at your option) any later version.
*
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
// @mui material components // @mui material components

105
src/qqq/components/ProcessLinkCard/index.tsx Normal file
View File

@ -0,0 +1,105 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {ReactNode} from "react";
// @mui material components
import Card from "@mui/material/Card";
import Divider from "@mui/material/Divider";
import Icon from "@mui/material/Icon";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
interface Props {
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
title: string;
percentage?: {
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white";
amount: string | number;
label: string;
};
icon: ReactNode;
[key: string]: any;
}
function ProcessLinkCard({
color, title, percentage, icon,
}: Props): JSX.Element
{
return (
<Card>
<MDBox display="flex" justifyContent="space-between" pt={1} px={2}>
<MDBox
variant="gradient"
bgColor={color}
color={color === "light" ? "dark" : "white"}
coloredShadow={color}
borderRadius="xl"
display="flex"
justifyContent="center"
alignItems="center"
width="4rem"
height="4rem"
mt={-3}
>
<Icon fontSize="medium" color="inherit">
{icon}
</Icon>
</MDBox>
<MDBox textAlign="right" lineHeight={1.25}>
<MDTypography variant="button" fontWeight="bold" color="text">
{title}
</MDTypography>
</MDBox>
</MDBox>
<Divider />
<MDBox pb={2} px={2}>
<MDTypography component="p" variant="button" color="text" display="flex">
<MDTypography
component="span"
variant="button"
fontWeight="bold"
color={percentage.color}
>
{percentage.amount}
</MDTypography>
Click here to run the process called
{" "}
{title}
.
{percentage.label}
</MDTypography>
</MDBox>
</Card>
);
}
ProcessLinkCard.defaultProps = {
color: "info",
percentage: {
color: "success",
text: "",
label: "",
},
};
export default ProcessLinkCard;

133
src/qqq/components/QBreadcrumbs/index.tsx Normal file
View File

@ -0,0 +1,133 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {ReactNode} from "react";
import {Link} from "react-router-dom";
import {Breadcrumbs as MuiBreadcrumbs} from "@mui/material";
import Icon from "@mui/material/Icon";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
interface Props {
icon: ReactNode;
title: string;
route: string | string[];
light?: boolean;
[key: string]: any;
}
const ucFirst = (input: string): string =>
{
if (!input)
{
return (input);
}
return (input.substring(0, 1).toUpperCase() + input.substring(1));
};
const routeToLabel = (route: string): string =>
{
const label = ucFirst(route.replace(".", " ").replace("-", " ").replace("_", " ").replace(/([A-Z])/g, " $1"));
return (label);
};
function QBreadcrumbs({
icon, title, route, light,
}: Props): JSX.Element
{
const routes: string[] | any = route.slice(0, -1);
let pageTitle = "Nutrifresh One";
const fullRoutes: string[] = [];
let accumulatedPath = "";
for (let i = 0; i < routes.length; i++)
{
accumulatedPath = `${accumulatedPath}/${routes[i]}`;
fullRoutes.push(accumulatedPath);
pageTitle = `${routeToLabel(routes[i])} | ${pageTitle}`;
}
document.title = `${ucFirst(title)} | ${pageTitle}`;
return (
<MDBox mr={{xs: 0, xl: 8}}>
<MuiBreadcrumbs
sx={{
"& .MuiBreadcrumbs-separator": {
color: ({palette: {white, grey}}) => (light ? white.main : grey[600]),
},
}}
>
<Link to="/">
<MDTypography
component="span"
variant="body2"
color={light ? "white" : "dark"}
opacity={light ? 0.8 : 0.5}
sx={{lineHeight: 0}}
>
<Icon>{icon}</Icon>
</MDTypography>
</Link>
{fullRoutes.map((fullRoute: string) => (
<Link to={fullRoute} key={fullRoute}>
<MDTypography
component="span"
variant="button"
fontWeight="regular"
textTransform="capitalize"
color={light ? "white" : "dark"}
opacity={light ? 0.8 : 0.5}
sx={{lineHeight: 0}}
>
{routeToLabel(fullRoute.replace(/.*\//, ""))}
</MDTypography>
</Link>
))}
<MDTypography
variant="button"
fontWeight="regular"
textTransform="capitalize"
color={light ? "white" : "dark"}
sx={{lineHeight: 0}}
>
{routeToLabel(title)}
</MDTypography>
</MuiBreadcrumbs>
<MDTypography
fontWeight="bold"
textTransform="capitalize"
variant="h6"
color={light ? "white" : "dark"}
noWrap
>
{routeToLabel(title)}
</MDTypography>
</MDBox>
);
}
QBreadcrumbs.defaultProps = {
light: false,
};
export default QBreadcrumbs;

126
src/qqq/components/QButtons/index.tsx Normal file
View File

@ -0,0 +1,126 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import MDBox from "components/MDBox";
import {Link} from "react-router-dom";
import MDButton from "components/MDButton";
import Icon from "@mui/material/Icon";
import React from "react";
// eslint-disable import/prefer-default-export
const standardWidth = "150px";
export function QCreateNewButton(): JSX.Element
{
return (
<MDBox ml={3} mr={2} width={standardWidth}>
<Link to="create">
<MDButton variant="gradient" color="info" fullWidth startIcon={<Icon>add</Icon>}>
Create New
</MDButton>
</Link>
</MDBox>
);
}
export function QSaveButton(): JSX.Element
{
return (
<MDBox ml={3} width={standardWidth}>
<MDButton type="submit" variant="gradient" color="info" size="small" fullWidth startIcon={<Icon>save</Icon>}>
Save
</MDButton>
</MDBox>
);
}
interface QDeleteButtonProps
{
onClickHandler: any
}
export function QDeleteButton({onClickHandler}: QDeleteButtonProps): JSX.Element
{
return (
<MDBox ml={3} mr={3}>
<MDBox width={standardWidth}>
<MDButton variant="gradient" color="primary" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>delete</Icon>}>
Delete
</MDButton>
</MDBox>
</MDBox>
);
}
export function QEditButton(): JSX.Element
{
return (
<MDBox>
<Link to="edit">
<MDBox width={standardWidth}>
<MDButton variant="gradient" color="dark" size="small" fullWidth startIcon={<Icon>edit</Icon>}>
Edit
</MDButton>
</MDBox>
</Link>
</MDBox>
);
}
interface QActionsMenuButtonProps
{
isOpen: boolean;
onClickHandler: any;
}
export function QActionsMenuButton({isOpen, onClickHandler}: QActionsMenuButtonProps): JSX.Element
{
return (
<MDBox width={standardWidth}>
<MDButton
variant={isOpen ? "contained" : "outlined"}
color="dark"
onClick={onClickHandler}
fullWidth
>
actions&nbsp;
<Icon>keyboard_arrow_down</Icon>
</MDButton>
</MDBox>
);
}
interface QCancelButtonProps
{
onClickHandler: any;
}
export function QCancelButton({onClickHandler}: QCancelButtonProps): JSX.Element
{
return (
<MDBox ml="auto" width={standardWidth}>
<MDButton type="button" variant="outlined" color="dark" size="small" fullWidth startIcon={<Icon>cancel</Icon>} onClick={onClickHandler}>
Cancel
</MDButton>
</MDBox>
);
}

7
src/qqq/components/QDynamicForm/index.tsx
View File

@ -77,10 +77,6 @@ function QDynamicForm(props: Props): JSX.Element
&& Object.keys(formFields).map((fieldName: any) => && Object.keys(formFields).map((fieldName: any) =>
{ {
const field = formFields[fieldName]; const field = formFields[fieldName];
if (primaryKeyId && fieldName === primaryKeyId)
{
return null;
}
if (values[fieldName] === undefined) if (values[fieldName] === undefined)
{ {
values[fieldName] = ""; values[fieldName] = "";
@ -109,17 +105,18 @@ function QDynamicForm(props: Props): JSX.Element
// todo? inputProps={{ autoComplete: "" }} // todo? inputProps={{ autoComplete: "" }}
// todo? placeholder={password.placeholder} // todo? placeholder={password.placeholder}
// todo? success={!errors[fieldName] && touched[fieldName]}
return ( return (
<Grid item xs={12} sm={6} key={fieldName}> <Grid item xs={12} sm={6} key={fieldName}>
<QDynamicFormField <QDynamicFormField
type={field.type} type={field.type}
label={field.label} label={field.label}
isEditable={field.isEditable}
name={fieldName} name={fieldName}
value={values[fieldName]} value={values[fieldName]}
error={errors[fieldName] && touched[fieldName]} error={errors[fieldName] && touched[fieldName]}
bulkEditMode={bulkEditMode} bulkEditMode={bulkEditMode}
bulkEditSwitchChangeHandler={bulkEditSwitchChanged} bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
success={!errors[fieldName] && touched[fieldName]}
/> />
</Grid> </Grid>
); );

1
src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts
View File

@ -83,6 +83,7 @@ class DynamicFormUtils
name: field.name, name: field.name,
label: label, label: label,
isRequired: field.isRequired, isRequired: field.isRequired,
isEditable: field.isEditable,
type: fieldType, type: fieldType,
// todo invalidMsg: "Zipcode is not valid (e.g. 70000).", // todo invalidMsg: "Zipcode is not valid (e.g. 70000).",
}); });

18
src/qqq/components/QDynamicFormField/index.tsx
View File

@ -36,24 +36,33 @@ interface Props
{ {
label: string; label: string;
name: string; name: string;
type: string;
isEditable?: boolean;
[key: string]: any; [key: string]: any;
bulkEditMode?: boolean; bulkEditMode?: boolean;
bulkEditSwitchChangeHandler?: any bulkEditSwitchChangeHandler?: any
} }
function QDynamicFormField({ function QDynamicFormField({
label, name, bulkEditMode, bulkEditSwitchChangeHandler, ...rest label, name, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, ...rest
}: Props): JSX.Element }: Props): JSX.Element
{ {
const [switchChecked, setSwitchChecked] = useState(false); const [switchChecked, setSwitchChecked] = useState(false);
const [isDisabled, setIsDisabled] = useState(bulkEditMode); const [isDisabled, setIsDisabled] = useState(!isEditable || bulkEditMode);
const inputLabelProps = {};
if (type.toLowerCase().match("(date|time)"))
{
// @ts-ignore
inputLabelProps.shrink = true;
}
const field = () => ( const field = () => (
<> <>
<Field {...rest} name={name} as={MDInput} variant="standard" label={label} fullWidth disabled={isDisabled} /> <Field {...rest} name={name} type={type} as={MDInput} variant="standard" label={label} InputLabelProps={inputLabelProps} fullWidth disabled={isDisabled} />
<MDBox mt={0.75}> <MDBox mt={0.75}>
<MDTypography component="div" variant="caption" color="error" fontWeight="regular"> <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
{!isDisabled && <ErrorMessage name={name} />} {!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={name} /></div>}
</MDTypography> </MDTypography>
</MDBox> </MDBox>
</> </>
@ -100,6 +109,7 @@ function QDynamicFormField({
QDynamicFormField.defaultProps = { QDynamicFormField.defaultProps = {
bulkEditMode: false, bulkEditMode: false,
isEditable: true,
bulkEditSwitchChangeHandler: () => bulkEditSwitchChangeHandler: () =>
{}, {},
}; };

84
src/qqq/components/QRecordSidebar/index.tsx Normal file
View File

@ -0,0 +1,84 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import React, {ReactNode} from "react";
import {Link} from "react-router-dom";
import {Breadcrumbs as MuiBreadcrumbs} from "@mui/material";
import Icon from "@mui/material/Icon";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import Card from "@mui/material/Card";
import {Theme} from "@mui/material/styles";
interface Props {
tableSections: any;
light?: boolean;
}
function QRecordSidebar({tableSections, light}: Props): JSX.Element
{
return (
<Card sx={{borderRadius: ({borders: {borderRadius}}) => borderRadius.lg, position: "sticky", top: "1%"}}>
<MDBox component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
{
tableSections ? tableSections.map(({icon, label, name}: any, key: number) => (
<MDBox key={`section-${name}`} component="li" pt={key === 0 ? 0 : 1}>
<MDTypography
component="a"
href={`#${name}`}
variant="button"
fontWeight="regular"
sx={({
borders: {borderRadius}, functions: {pxToRem}, palette: {light}, transitions,
}: Theme) => ({
display: "flex",
alignItems: "center",
borderRadius: borderRadius.md,
padding: `${pxToRem(10)} ${pxToRem(16)}`,
transition: transitions.create("background-color", {
easing: transitions.easing.easeInOut,
duration: transitions.duration.shorter,
}),
"&:hover": {
backgroundColor: light.main,
},
})}
>
<MDBox mr={1.5} lineHeight={1} color="black">
<Icon fontSize="small">{icon}</Icon>
</MDBox>
{label}
</MDTypography>
</MDBox>
)) : null
}
</MDBox>
</Card>
);
}
QRecordSidebar.defaultProps = {
light: false,
};
export default QRecordSidebar;

264
src/qqq/pages/app-home/index.tsx Normal file
View File

@ -0,0 +1,264 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import React, {useEffect, useState} from "react";
import {Link, useLocation} from "react-router-dom";
// Material Dashboard 2 PRO React TS examples components
import QClient from "qqq/utils/QClient";
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import {QAppMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppMetaData";
import BaseLayout from "qqq/components/BaseLayout";
import MDBox from "components/MDBox";
import Grid from "@mui/material/Grid";
import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCard";
import {Icon} from "@mui/material";
import MDTypography from "components/MDTypography";
import Card from "@mui/material/Card";
import ComplexStatisticsCard from "examples/Cards/StatisticsCards/ComplexStatisticsCard";
import ReportsLineChart from "examples/Charts/LineCharts/ReportsLineChart";
import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart";
import MDBadgeDot from "components/MDBadgeDot";
import ReportsBarChart from "examples/Charts/BarCharts/ReportsBarChart";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType";
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import DefaultInfoCard from "examples/Cards/InfoCards/DefaultInfoCard";
import ProcessLinkCard from "qqq/components/ProcessLinkCard";
const qController = QClient.getInstance();
interface Props
{
app?: QAppMetaData;
}
function AppHome({app}: Props): JSX.Element
{
const [qInstance, setQInstance] = useState(null as QInstance);
const [tables, setTables] = useState([] as QTableMetaData[]);
const [processes, setProcesses] = useState([] as QProcessMetaData[]);
const [childApps, setChildApps] = useState([] as QAppMetaData[]);
const location = useLocation();
useEffect(() =>
{
(async () =>
{
const newQInstance = await qController.loadMetaData();
setQInstance(newQInstance);
})();
}, []);
useEffect(() =>
{
if (!qInstance)
{
return;
}
const newTables: QTableMetaData[] = [];
const newProcesses: QProcessMetaData[] = [];
const newChildApps: QAppMetaData[] = [];
app.children.forEach((child) =>
{
switch (child.type)
{
// todo - filter out hidden
case QAppNodeType.TABLE:
newTables.push(qInstance.tables.get(child.name));
break;
case QAppNodeType.PROCESS:
newProcesses.push(qInstance.processes.get(child.name));
break;
case QAppNodeType.APP:
newChildApps.push(qInstance.apps.get(child.name));
break;
default:
console.log(`Unexpected child type: ${child.type}`);
}
});
setTables(newTables);
setProcesses(newProcesses);
setChildApps(newChildApps);
}, [qInstance, location]);
const reportsBarChartData = {
labels: ["M", "T", "W", "T", "F", "S", "S"],
datasets: {label: "Sales", data: [50, 20, 10, 22, 50, 10, 40]},
};
interface Types {
labels: string[];
datasets: {
label: string;
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
data: number[];
}[];
}
const demoLineChartData: Types = {
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [
{
label: "Facebook Ads",
color: "info",
data: [50, 100, 200, 190, 400, 350, 500, 450, 700],
},
{
label: "Google Ads",
color: "dark",
data: [10, 30, 40, 120, 150, 220, 280, 250, 280],
},
],
};
return (
<BaseLayout>
<MDBox mt={4}>
<Grid container spacing={3}>
<Grid item xs={6} lg={6}>
<Grid container spacing={3}>
<Grid item xs={6} lg={6}>
<MDBox mb={3}>
<MDBox mb={3}>
<ReportsBarChart
color="info"
title="Packages Shipped"
description="Total outbound shipments"
date="Updated at 7:04 a.m. ET"
chart={reportsBarChartData}
/>
</MDBox>
</MDBox>
</Grid>
<Grid item xs={6} lg={6}>
<DefaultLineChart
title="Revenue"
description={(
<MDBox display="flex" justifyContent="space-between">
<MDBox display="flex" ml={-1}>
<MDBadgeDot color="info" size="sm" badgeContent="UPS" />
<MDBadgeDot color="dark" size="sm" badgeContent="FedEx" />
</MDBox>
<MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
</MDBox>
)}
chart={demoLineChartData}
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={6} lg={6}>
{
tables.length ? (
<MDBox mb={3}>
<Card id="basic-info" sx={{overflow: "visible"}}>
<MDBox p={3}>
<MDTypography variant="h5">Tables</MDTypography>
</MDBox>
<Grid container spacing={3} padding={3} paddingTop={0}>
{tables.map((table) => (
<Grid key={table.name} item xs={12} md={12} lg={6}>
<Link to={table.name}>
<MDBox mb={3}>
<MiniStatisticsCard
title={{fontWeight: "bold", text: table.label}}
count="17,013"
percentage={{color: "info", text: "total records"}}
icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
direction="right"
/>
</MDBox>
</Link>
</Grid>
))}
</Grid>
</Card>
</MDBox>
) : null
}
{
processes.length ? (
<MDBox mb={3}>
<Card id="basic-info" sx={{overflow: "visible"}}>
<MDBox p={3}>
<MDTypography variant="h5">Processes</MDTypography>
</MDBox>
<Grid container spacing={3} padding={3} paddingTop={3}>
{processes.map((process) => (
<Grid key={process.name} item xs={12} md={12} lg={6}>
<Link to={process.name}>
<ProcessLinkCard
icon={process.iconName || app.iconName}
title={process.label}
/>
</Link>
</Grid>
))}
</Grid>
</Card>
</MDBox>
) : null
}
{
childApps.length ? (
<MDBox mb={3}>
<Card id="basic-info" sx={{overflow: "visible"}}>
<Grid container spacing={3} padding={3} paddingTop={3}>
{childApps.map((childApp) => (
<Grid key={childApp.name} item xs={12} md={12} lg={6}>
<Link to={childApp.name}>
<DefaultInfoCard
icon={childApp.iconName || app.iconName}
title={childApp.label}
/>
</Link>
</Grid>
))}
</Grid>
</Card>
</MDBox>
) : null
}
</Grid>
</Grid>
</MDBox>
</BaseLayout>
);
}
AppHome.defaultProps = {
app: null,
};
export default AppHome;

47
src/qqq/pages/entity-create/index.tsx
View File

@ -1,16 +1,22 @@
/** /*
========================================================= * QQQ - Low-code Application Framework for Engineers.
* Material Dashboard 2 PRO React TS - v1.0.0 * Copyright (C) 2021-2022. Kingsrook, LLC
========================================================= * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts * https://github.com/Kingsrook/
* Copyright 2022 Creative Tim (https://www.creative-tim.com) *
* This program is free software: you can redistribute it and/or modify
Coded by www.creative-tim.com * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
========================================================= * License, or (at your option) any later version.
*
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
// @mui material components // @mui material components
@ -22,15 +28,22 @@ import MDBox from "components/MDBox";
// Settings page components // Settings page components
import EntityForm from "qqq/components/EntityForm"; import EntityForm from "qqq/components/EntityForm";
import BaseLayout from "qqq/components/BaseLayout"; import BaseLayout from "qqq/components/BaseLayout";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {useParams} from "react-router-dom";
function EntityCreate(): JSX.Element interface Props
{
table?: QTableMetaData;
}
function EntityCreate({table}: Props): JSX.Element
{ {
return ( return (
<BaseLayout> <BaseLayout>
<MDBox mt={4}> <MDBox mt={4}>
<Grid container spacing={3}> <Grid container spacing={3}>
<Grid item xs={12} lg={12}> <Grid item xs={12} lg={12}>
<EntityForm /> <EntityForm table={table} />
</Grid> </Grid>
</Grid> </Grid>
</MDBox> </MDBox>
@ -38,4 +51,8 @@ function EntityCreate(): JSX.Element
); );
} }
EntityCreate.defaultProps = {
table: null,
};
export default EntityCreate; export default EntityCreate;

47
src/qqq/pages/entity-edit/index.tsx
View File

@ -1,16 +1,22 @@
/** /*
========================================================= * QQQ - Low-code Application Framework for Engineers.
* Material Dashboard 2 PRO React TS - v1.0.0 * Copyright (C) 2021-2022. Kingsrook, LLC
========================================================= * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts * https://github.com/Kingsrook/
* Copyright 2022 Creative Tim (https://www.creative-tim.com) *
* This program is free software: you can redistribute it and/or modify
Coded by www.creative-tim.com * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
========================================================= * License, or (at your option) any later version.
*
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
// @mui material components // @mui material components
@ -23,8 +29,15 @@ import MDBox from "components/MDBox";
import BaseLayout from "qqq/components/BaseLayout"; import BaseLayout from "qqq/components/BaseLayout";
import {useParams} from "react-router-dom"; import {useParams} from "react-router-dom";
import EntityForm from "qqq/components/EntityForm"; import EntityForm from "qqq/components/EntityForm";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import EntityList from "qqq/pages/entity-list";
function EntityEdit(): JSX.Element interface Props
{
table?: QTableMetaData;
}
function EntityEdit({table}: Props): JSX.Element
{ {
const {id} = useParams(); const {id} = useParams();
@ -36,7 +49,7 @@ function EntityEdit(): JSX.Element
<MDBox mb={3}> <MDBox mb={3}>
<Grid container spacing={3}> <Grid container spacing={3}>
<Grid item xs={12}> <Grid item xs={12}>
<EntityForm id={id} /> <EntityForm table={table} id={id} />
</Grid> </Grid>
</Grid> </Grid>
</MDBox> </MDBox>
@ -47,4 +60,8 @@ function EntityEdit(): JSX.Element
); );
} }
EntityEdit.defaultProps = {
table: null,
};
export default EntityEdit; export default EntityEdit;

262
src/qqq/pages/entity-list/index.tsx
View File

@ -1,26 +1,39 @@
/** /*
========================================================= * QQQ - Low-code Application Framework for Engineers.
* Material Dashboard 2 PRO React TS - v1.0.0 * Copyright (C) 2021-2022. Kingsrook, LLC
========================================================= * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts * contact@kingsrook.com
* Copyright 2022 Creative Tim (https://www.creative-tim.com) * https://github.com/Kingsrook/
Coded by www.creative-tim.com *
========================================================= * This program is free software: you can redistribute it and/or modify
* The above copyright notice and this permission notice shall be included in all copies or * it under the terms of the GNU Affero General Public License as
* substantial portions of the Software. * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
/* eslint-disable react/no-unstable-nested-components */
import React, {useEffect, useReducer, useState} from "react"; import React, {
import {useParams, useSearchParams} from "react-router-dom"; SyntheticEvent,
useCallback,
useEffect, useReducer, useRef, useState,
} from "react";
import {
Link, useNavigate, useParams, useSearchParams,
} from "react-router-dom";
// @mui material components // @mui material components
import Card from "@mui/material/Card"; import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon"; import Icon from "@mui/material/Icon";
import Menu from "@mui/material/Menu"; import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem"; import MenuItem from "@mui/material/MenuItem";
import Link from "@mui/material/Link"; import {Alert, Pagination, TablePagination} from "@mui/material";
import {Alert, TablePagination} from "@mui/material";
import { import {
DataGridPro, DataGridPro,
GridCallbackDetails, GridCallbackDetails,
@ -40,6 +53,7 @@ import {
GridToolbarExportContainer, GridToolbarExportContainer,
GridToolbarFilterButton, GridToolbarFilterButton,
GridExportMenuItemProps, GridExportMenuItemProps,
MuiEvent,
} from "@mui/x-data-grid-pro"; } from "@mui/x-data-grid-pro";
// Material Dashboard 2 PRO React TS components // Material Dashboard 2 PRO React TS components
@ -64,11 +78,13 @@ import Footer from "../../components/Footer";
import QProcessUtils from "../../utils/QProcessUtils"; import QProcessUtils from "../../utils/QProcessUtils";
import "./styles.css"; import "./styles.css";
import {QActionsMenuButton, QCreateNewButton} from "qqq/components/QButtons";
import QValueUtils from "qqq/utils/QValueUtils";
import LinearProgress from "@mui/material/LinearProgress";
const COLUMN_VISIBILITY_LOCAL_STORAGE_KEY_ROOT = "qqq.columnVisibility"; const COLUMN_VISIBILITY_LOCAL_STORAGE_KEY_ROOT = "qqq.columnVisibility";
const COLUMN_SORT_LOCAL_STORAGE_KEY_ROOT = "qqq.columnSort"; const COLUMN_SORT_LOCAL_STORAGE_KEY_ROOT = "qqq.columnSort";
// Declaring props types for DefaultCell
interface Props interface Props
{ {
table?: QTableMetaData; table?: QTableMetaData;
@ -98,7 +114,6 @@ function EntityList({table}: Props): JSX.Element
defaultVisibility = JSON.parse(localStorage.getItem(columnVisibilityLocalStorageKey)); defaultVisibility = JSON.parse(localStorage.getItem(columnVisibilityLocalStorageKey));
} }
const [buttonText, setButtonText] = useState("");
const [tableState, setTableState] = useState(""); const [tableState, setTableState] = useState("");
const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData); const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
const [, setFiltersMenu] = useState(null); const [, setFiltersMenu] = useState(null);
@ -117,6 +132,9 @@ function EntityList({table}: Props): JSX.Element
const [tableLabel, setTableLabel] = useState(""); const [tableLabel, setTableLabel] = useState("");
const [columnSortModel, setColumnSortModel] = useState(defaultSort); const [columnSortModel, setColumnSortModel] = useState(defaultSort);
const [columnVisibilityModel, setColumnVisibilityModel] = useState(defaultVisibility); const [columnVisibilityModel, setColumnVisibilityModel] = useState(defaultVisibility);
const [gridMouseDownX, setGridMouseDownX] = useState(0);
const [gridMouseDownY, setGridMouseDownY] = useState(0);
const instance = useRef({timer: null});
const [, forceUpdate] = useReducer((x) => x + 1, 0); const [, forceUpdate] = useReducer((x) => x + 1, 0);
@ -192,14 +210,15 @@ function EntityList({table}: Props): JSX.Element
const updateTable = () => const updateTable = () =>
{ {
setRows([]);
(async () => (async () =>
{ {
const newTableMetaData = await qController.loadTableMetaData(tableName); const tableMetaData = await qController.loadTableMetaData(tableName);
setTableMetaData(newTableMetaData); setTableMetaData(tableMetaData);
if (columnSortModel.length === 0) if (columnSortModel.length === 0)
{ {
columnSortModel.push({ columnSortModel.push({
field: newTableMetaData.primaryKeyField, field: tableMetaData.primaryKeyField,
sort: "desc", sort: "desc",
}); });
setColumnSortModel(columnSortModel); setColumnSortModel(columnSortModel);
@ -209,8 +228,7 @@ function EntityList({table}: Props): JSX.Element
const count = await qController.count(tableName, qFilter); const count = await qController.count(tableName, qFilter);
setTotalRecords(count); setTotalRecords(count);
setButtonText(`new ${newTableMetaData.label}`); setTableLabel(tableMetaData.label);
setTableLabel(newTableMetaData.label);
const columns = [] as GridColDef[]; const columns = [] as GridColDef[];
@ -233,47 +251,65 @@ function EntityList({table}: Props): JSX.Element
throw error; throw error;
}); });
const fields = [...tableMetaData.fields.values()];
const rows = [] as any[]; const rows = [] as any[];
results.forEach((record) => results.forEach((record) =>
{ {
rows.push(Object.fromEntries(record.values.entries())); const row: any = {};
fields.forEach((field) =>
{
row[field.name] = QValueUtils.getDisplayValue(field, record);
});
rows.push(row);
}); });
const sortedKeys = [...newTableMetaData.fields.keys()].sort(); const sortedKeys = [...tableMetaData.fields.keys()].sort();
sortedKeys.forEach((key) => sortedKeys.forEach((key) =>
{ {
const field = newTableMetaData.fields.get(key); const field = tableMetaData.fields.get(key);
let columnType = "string"; let columnType = "string";
let columnWidth = 200;
switch (field.type) switch (field.type)
{ {
case QFieldType.DECIMAL: case QFieldType.DECIMAL:
case QFieldType.INTEGER: case QFieldType.INTEGER:
columnType = "number"; columnType = "number";
columnWidth = 100;
if (key === tableMetaData.primaryKeyField && field.label.length < 3)
{
columnWidth = 75;
}
break; break;
case QFieldType.DATE: case QFieldType.DATE:
columnType = "date"; columnType = "date";
columnWidth = 100;
break; break;
case QFieldType.DATE_TIME: case QFieldType.DATE_TIME:
columnType = "dateTime"; columnType = "dateTime";
columnWidth = 200;
break; break;
case QFieldType.BOOLEAN: case QFieldType.BOOLEAN:
columnType = "boolean"; columnType = "boolean";
columnWidth = 75;
break; break;
default: default:
// noop // noop - leave as string
} }
const column = { const column = {
field: field.name, field: field.name,
type: columnType, type: columnType,
headerName: field.label, headerName: field.label,
width: 200, width: columnWidth,
}; };
if (key === newTableMetaData.primaryKeyField) if (key === tableMetaData.primaryKeyField)
{ {
column.width = 75;
columns.splice(0, 0, column); columns.splice(0, 0, column);
} }
else else
@ -299,11 +335,49 @@ function EntityList({table}: Props): JSX.Element
setRowsPerPage(size); setRowsPerPage(size);
}; };
const handleRowClick = (params: GridRowParams) => const navigate = useNavigate();
const handleRowClick = (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) =>
{ {
document.location.href = `/${tableName}/${params.id}`; ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// strategy for when to trigger or not trigger a row click: //
// To avoid a drag-event that highlighted text in a cell: //
// - we capture the x & y upon mouse-down - then compare them in this method (which fires when the mouse is up) //
// if they are more than 5 pixels away from the mouse-down, then assume it's a drag, not a click. //
// - avoid clicking the row upon double-click, by setting a 500ms timer here - and in the onDoubleClick handler, //
// cancelling the timer. //
// - also avoid a click, then click-again-and-start-dragging, by always cancelling the timer in mouse-down. //
// All in, these seem to have good results - the only downside being the half-second delay... //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
navigate(`${params.id}`);
/*
const diff = Math.max(Math.abs(event.clientX - gridMouseDownX), Math.abs(event.clientY - gridMouseDownY));
if (diff < 5)
{
clearTimeout(instance.current.timer);
instance.current.timer = setTimeout(() =>
{
navigate(`${params.id}`);
}, 500);
}
else
{
console.log(`row-click mouse-up happened ${diff} x or y pixels away from the mouse-down - so not considering it a click.`);
}
*/
}; };
const handleGridMouseDown = useCallback((event: any) =>
{
setGridMouseDownX(event.clientX);
setGridMouseDownY(event.clientY);
clearTimeout(instance.current.timer);
}, []);
const handleGridDoubleClick = useCallback((event: any) =>
{
clearTimeout(instance.current.timer);
}, []);
const handleFilterChange = (filterModel: GridFilterModel) => const handleFilterChange = (filterModel: GridFilterModel) =>
{ {
setFilterModel(filterModel); setFilterModel(filterModel);
@ -377,6 +451,8 @@ function EntityList({table}: Props): JSX.Element
format: string; format: string;
} }
// todo - figure out what's up here...
// eslint-disable-next-line react/no-unstable-nested-components
function ExportMenuItem(props: QExportMenuItemProps) function ExportMenuItem(props: QExportMenuItemProps)
{ {
const {format, hideMenu} = props; const {format, hideMenu} = props;
@ -476,7 +552,7 @@ function EntityList({table}: Props): JSX.Element
const bulkLoadClicked = () => const bulkLoadClicked = () =>
{ {
document.location.href = `/processes/${tableName}.bulkInsert`; navigate(`${tableName}.bulkInsert`);
}; };
const bulkEditClicked = () => const bulkEditClicked = () =>
@ -486,7 +562,7 @@ function EntityList({table}: Props): JSX.Element
setAlertContent("No records were selected to Bulk Edit."); setAlertContent("No records were selected to Bulk Edit.");
return; return;
} }
document.location.href = `/processes/${tableName}.bulkEdit${getRecordsQueryString()}`; navigate(`${tableName}.bulkEdit${getRecordsQueryString()}`);
}; };
const bulkDeleteClicked = () => const bulkDeleteClicked = () =>
@ -496,12 +572,21 @@ function EntityList({table}: Props): JSX.Element
setAlertContent("No records were selected to Bulk Delete."); setAlertContent("No records were selected to Bulk Delete.");
return; return;
} }
document.location.href = `/processes/${tableName}.bulkDelete${getRecordsQueryString()}`; navigate(`${tableName}.bulkDelete${getRecordsQueryString()}`);
};
const processClicked = (process: QProcessMetaData) =>
{
// todo - let the process specify that it needs initial rows - err if none selected.
// alternatively, let a process itself have an initial screen to select rows...
navigate(`${process.name}${getRecordsQueryString()}`);
}; };
// @ts-ignore // @ts-ignore
const defaultLabelDisplayedRows = ({from, to, count}) => `${from.toLocaleString()}–${to.toLocaleString()} of ${count !== -1 ? count.toLocaleString() : `more than ${to.toLocaleString()}`}`; const defaultLabelDisplayedRows = ({from, to, count}) => `Showing ${from.toLocaleString()} to ${to.toLocaleString()} of ${count !== -1 ? `${count.toLocaleString()} records` : `more than ${to.toLocaleString()} records`}`;
// todo - figure out what's up here...
// eslint-disable-next-line react/no-unstable-nested-components
function CustomPagination() function CustomPagination()
{ {
return ( return (
@ -518,23 +603,28 @@ function EntityList({table}: Props): JSX.Element
); );
} }
// todo - figure out what's up here...
// eslint-disable-next-line react/no-unstable-nested-components
function Loading()
{
return (
<LinearProgress color="info" />
);
}
// todo - figure out what's up here...
// eslint-disable-next-line react/no-unstable-nested-components
function CustomToolbar() function CustomToolbar()
{ {
const [bulkActionsMenuAnchor, setBulkActionsMenuAnchor] = useState(null as HTMLElement); function gtcMouseDown(e: React.MouseEvent<HTMLDivElement>)
const bulkActionsMenuOpen = Boolean(bulkActionsMenuAnchor);
const openBulkActionsMenu = (event: React.MouseEvent<HTMLElement>) =>
{ {
setBulkActionsMenuAnchor(event.currentTarget); console.log(e.target);
}; }
const closeBulkActionsMenu = () =>
{
setBulkActionsMenuAnchor(null);
};
return ( return (
<GridToolbarContainer> <GridToolbarContainer
onMouseDown={(e) => gtcMouseDown(e)}
>
<div> <div>
<Button <Button
id="refresh-button" id="refresh-button"
@ -551,29 +641,6 @@ function EntityList({table}: Props): JSX.Element
<ExportMenuItem format="csv" /> <ExportMenuItem format="csv" />
<ExportMenuItem format="xlsx" /> <ExportMenuItem format="xlsx" />
</GridToolbarExportContainer> </GridToolbarExportContainer>
<div>
<Button
id="bulk-actions-button"
onClick={openBulkActionsMenu}
aria-controls={bulkActionsMenuOpen ? "basic-menu" : undefined}
aria-haspopup="true"
aria-expanded={bulkActionsMenuOpen ? "true" : undefined}
startIcon={<Icon>table_rows</Icon>}
>
Bulk Actions
</Button>
<Menu
id="bulk-actions-menu"
open={bulkActionsMenuOpen}
anchorEl={bulkActionsMenuAnchor}
onClose={closeBulkActionsMenu}
MenuListProps={{"aria-labelledby": "bulk-actions-button"}}
>
<MenuItem onClick={bulkLoadClicked}>Bulk Load</MenuItem>
<MenuItem onClick={bulkEditClicked}>Bulk Edit</MenuItem>
<MenuItem onClick={bulkDeleteClicked}>Bulk Delete</MenuItem>
</Menu>
</div>
<div> <div>
{ {
selectFullFilterState === "checked" && ( selectFullFilterState === "checked" && (
@ -621,29 +688,38 @@ function EntityList({table}: Props): JSX.Element
anchorEl={actionsMenu} anchorEl={actionsMenu}
anchorOrigin={{ anchorOrigin={{
vertical: "bottom", vertical: "bottom",
horizontal: "left", horizontal: "right",
}} }}
transformOrigin={{ transformOrigin={{
vertical: "top", vertical: "top",
horizontal: "left", horizontal: "right",
}} }}
open={Boolean(actionsMenu)} open={Boolean(actionsMenu)}
onClose={closeActionsMenu} onClose={closeActionsMenu}
keepMounted keepMounted
> >
<MenuItem onClick={bulkLoadClicked}>Bulk Load</MenuItem>
<MenuItem onClick={bulkEditClicked}>Bulk Edit</MenuItem>
<MenuItem onClick={bulkDeleteClicked}>Bulk Delete</MenuItem>
<MenuItem divider />
{tableProcesses.map((process) => ( {tableProcesses.map((process) => (
<MenuItem key={process.name}> <MenuItem key={process.name} onClick={() => processClicked(process)}>{process.label}</MenuItem>
<Link href={`/processes/${process.name}${getRecordsQueryString()}`}>{process.label}</Link>
</MenuItem>
))} ))}
</Menu> </Menu>
); );
useEffect(() => useEffect(() =>
{ {
setLoading(true);
updateTable(); updateTable();
}, [pageNumber, rowsPerPage, tableState, columnSortModel, filterModel]); }, [pageNumber, rowsPerPage, tableState, columnSortModel, filterModel]);
useEffect(() =>
{
document.documentElement.scrollTop = 0;
document.scrollingElement.scrollTop = 0;
}, [pageNumber, rowsPerPage]);
return ( return (
<DashboardLayout> <DashboardLayout>
<Navbar /> <Navbar />
@ -668,39 +744,27 @@ function EntityList({table}: Props): JSX.Element
<MDAlert color="success" dismissible> <MDAlert color="success" dismissible>
{`${tableLabel} successfully deleted`} {`${tableLabel} successfully deleted`}
</MDAlert> </MDAlert>
) : ("") ) : null
} }
<MDBox display="flex" justifyContent="space-between" alignItems="flex-start" mb={2}> <MDBox display="flex" justifyContent="flex-end" alignItems="flex-start" mb={2}>
{buttonText ? (
<Link href={`/${tableName}/create`}>
<MDButton variant="gradient" color="info">
{
buttonText
}
</MDButton>
</Link>
) : (
""
)}
<MDBox display="flex"> <MDBox display="flex" width="150px">
{tableProcesses.length > 0 && ( {tableProcesses.length > 0 && (
<MDButton <QActionsMenuButton isOpen={actionsMenu} onClickHandler={openActionsMenu} />
variant={actionsMenu ? "contained" : "outlined"}
color="dark"
onClick={openActionsMenu}
>
actions&nbsp;
<Icon>keyboard_arrow_down</Icon>
</MDButton>
)} )}
{renderActionsMenu} {renderActionsMenu}
</MDBox> </MDBox>
<QCreateNewButton />
</MDBox> </MDBox>
<Card> <Card>
{/* with these turned on, the toolbar & pagination controls become very flaky...
onMouseDown={(e) => handleGridMouseDown(e)} onDoubleClick={(e) => handleGridDoubleClick(e)} */}
<MDBox height="100%"> <MDBox height="100%">
<DataGridPro <DataGridPro
components={{Toolbar: CustomToolbar, Pagination: CustomPagination}} components={{Toolbar: CustomToolbar, Pagination: CustomPagination, LoadingOverlay: Loading}}
pinnedColumns={{left: ["__check__", "id"]}}
pagination pagination
paginationMode="server" paginationMode="server"
sortingMode="server" sortingMode="server"
@ -715,7 +779,7 @@ function EntityList({table}: Props): JSX.Element
rowCount={totalRecords} rowCount={totalRecords}
onPageSizeChange={handleRowsPerPageChange} onPageSizeChange={handleRowsPerPageChange}
onRowClick={handleRowClick} onRowClick={handleRowClick}
density="compact" density="standard"
loading={loading} loading={loading}
onFilterModelChange={handleFilterChange} onFilterModelChange={handleFilterChange}
columnVisibilityModel={columnVisibilityModel} columnVisibilityModel={columnVisibilityModel}

309
src/qqq/pages/entity-view/components/ViewContents/index.tsx
View File

@ -1,23 +1,31 @@
/** /*
========================================================= * QQQ - Low-code Application Framework for Engineers.
* Material Dashboard 2 PRO React TS - v1.0.0 * Copyright (C) 2021-2022. Kingsrook, LLC
========================================================= * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts * contact@kingsrook.com
* Copyright 2022 Creative Tim (https://www.creative-tim.com) * https://github.com/Kingsrook/
Coded by www.creative-tim.com *
========================================================= * This program is free software: you can redistribute it and/or modify
* The above copyright notice and this permission notice shall be included in all copies or * it under the terms of the GNU Affero General Public License as
* substantial portions of the Software. * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
// react components // react components
import {useParams, useSearchParams} from "react-router-dom"; import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
import React, {useReducer, useState} from "react"; import React, {useReducer, useState} from "react";
// @material-ui core components // @material-ui core components
import Card from "@mui/material/Card"; import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid"; import Grid from "@mui/material/Grid";
import Link from "@mui/material/Link";
import Dialog from "@mui/material/Dialog"; import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle"; import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent"; import DialogContent from "@mui/material/DialogContent";
@ -26,7 +34,6 @@ import DialogActions from "@mui/material/DialogActions";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
// qqq imports // qqq imports
import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData"; import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
// Material Dashboard 2 PRO React TS components // Material Dashboard 2 PRO React TS components
@ -34,31 +41,46 @@ import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography"; import MDTypography from "components/MDTypography";
import Menu from "@mui/material/Menu"; import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem"; import MenuItem from "@mui/material/MenuItem";
import Icon from "@mui/material/Icon";
import MDAlert from "components/MDAlert"; import MDAlert from "components/MDAlert";
import MDButton from "../../../../../components/MDButton";
import QProcessUtils from "../../../../utils/QProcessUtils"; import QProcessUtils from "../../../../utils/QProcessUtils";
import QClient from "qqq/utils/QClient"; import QClient from "qqq/utils/QClient";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QActionsMenuButton, QDeleteButton, QEditButton} from "qqq/components/QButtons";
import QValueUtils from "qqq/utils/QValueUtils";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import Icon from "@mui/material/Icon";
import Avatar from "@mui/material/Avatar";
import QRecordSidebar from "qqq/components/QRecordSidebar";
import QTableUtils from "qqq/utils/QTableUtils";
const qController = QClient.getInstance(); const qController = QClient.getInstance();
// Declaring props types for ViewForm // Declaring props types for ViewForm
interface Props interface Props
{ {
id: string; id: string;
table?: QTableMetaData;
} }
function ViewContents({id}: Props): JSX.Element function ViewContents({id, table}: Props): JSX.Element
{ {
const {tableName} = useParams(); const location = useLocation();
const navigate = useNavigate();
const pathParts = location.pathname.split("/");
const tableName = table ? table.name : pathParts[pathParts.length - 2];
const [asyncLoadInited, setAsyncLoadInited] = useState(false); const [asyncLoadInited, setAsyncLoadInited] = useState(false);
const [nameValues, setNameValues] = useState([] as JSX.Element[]); const [nameValues, setNameValues] = useState([] as JSX.Element[]);
const [sectionFieldElements, setSectionFieldElements] = useState(null as Map<string, JSX.Element[]>);
const [t1Section, setT1Section] = useState(null as JSX.Element);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [tableMetaData, setTableMetaData] = useState(null); const [tableMetaData, setTableMetaData] = useState(null);
const [record, setRecord] = useState(null as QRecord);
const [tableSections, setTableSections] = useState(null as any);
const [tableProcesses, setTableProcesses] = useState([] as QProcessMetaData[]); const [tableProcesses, setTableProcesses] = useState([] as QProcessMetaData[]);
const [actionsMenu, setActionsMenu] = useState(null); const [actionsMenu, setActionsMenu] = useState(null);
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const [, forceUpdate] = useReducer((x) => x + 1, 0); const [, forceUpdate] = useReducer((x) => x + 1, 0);
const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget); const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget);
@ -70,28 +92,66 @@ function ViewContents({id}: Props): JSX.Element
(async () => (async () =>
{ {
const tableMetaData = await qController.loadTableMetaData(tableName); //////////////////////////////////////////
// load the table meta-data (if needed) //
//////////////////////////////////////////
const tableMetaData = table || await qController.loadTableMetaData(tableName);
setTableMetaData(tableMetaData); setTableMetaData(tableMetaData);
//////////////////////////////////////////////////////////////////
// load top-level meta-data (e.g., to find processes for table) //
//////////////////////////////////////////////////////////////////
const metaData = await qController.loadMetaData(); const metaData = await qController.loadMetaData();
setTableProcesses(QProcessUtils.getProcessesForTable(metaData, tableName)); setTableProcesses(QProcessUtils.getProcessesForTable(metaData, tableName));
const foundRecord = await qController.get(tableName, id); /////////////////////
// load the record //
/////////////////////
const record = await qController.get(tableName, id);
setRecord(record);
nameValues.push( /////////////////////////////////////////////////
<MDBox key={tableMetaData.primaryKeyField} display="flex" py={1} pr={2}> // define the sections, e.g., for the left-bar //
<MDTypography variant="button" fontWeight="bold" textTransform="capitalize"> /////////////////////////////////////////////////
{tableMetaData.primaryKeyField} const tableSections = QTableUtils.getSectionsForRecordSidebar(tableMetaData);
: &nbsp; setTableSections(tableSections);
</MDTypography>
<MDTypography variant="button" fontWeight="regular" color="text">
&nbsp;
{id}
</MDTypography>
</MDBox>,
);
const sortedKeys = [...foundRecord.values.keys()].sort(); ////////////////////////////////////////////////////
// make elements with the values for each section //
////////////////////////////////////////////////////
const sectionFieldElements = new Map();
for (let i = 0; i < tableSections.length; i++)
{
const section = tableSections[i];
sectionFieldElements.set(
section.name,
<MDBox key={section.name} display="flex" flexDirection="column" py={1} pr={2}>
{
section.fieldNames.map((fieldName: string) => (
<MDBox key={fieldName} flexDirection="row" pr={2}>
<MDTypography variant="button" fontWeight="bold">
{tableMetaData.fields.get(fieldName).label}
: &nbsp;
</MDTypography>
<MDTypography variant="button" fontWeight="regular" color="text">
&nbsp;
{QValueUtils.getDisplayValue(tableMetaData.fields.get(fieldName), record)}
</MDTypography>
</MDBox>
))
}
</MDBox>,
);
if (section.tier === "T1")
{
setT1Section(sectionFieldElements.get(section.name));
}
}
setSectionFieldElements(sectionFieldElements);
// todo - delete this
const sortedKeys = [...record.values.keys()].sort();
sortedKeys.forEach((key) => sortedKeys.forEach((key) =>
{ {
if (key !== tableMetaData.primaryKeyField) if (key !== tableMetaData.primaryKeyField)
@ -103,15 +163,15 @@ function ViewContents({id}: Props): JSX.Element
: &nbsp; : &nbsp;
</MDTypography> </MDTypography>
<MDTypography variant="button" fontWeight="regular" color="text"> <MDTypography variant="button" fontWeight="regular" color="text">
&nbsp; &nbsp;
{foundRecord.values.get(key)} {QValueUtils.getDisplayValue(tableMetaData.fields.get(key), record)}
</MDTypography> </MDTypography>
</MDBox>, </MDBox>,
); );
} }
}); });
setNameValues(nameValues); setNameValues(nameValues);
forceUpdate(); forceUpdate();
})(); })();
} }
@ -134,32 +194,45 @@ function ViewContents({id}: Props): JSX.Element
await qController.delete(tableName, id) await qController.delete(tableName, id)
.then(() => .then(() =>
{ {
window.location.href = `/${tableName}?deleteSuccess=true`; const path = `${pathParts.slice(0, -1).join("/")}?deleteSuccess=true`;
navigate(path);
}); });
})(); })();
}; };
const editPath = `/${tableName}/${id}/edit`; function processClicked(process: QProcessMetaData)
{
const path = `${pathParts.slice(0, -1).join("/")}/${process.name}?recordIds=${id}`;
navigate(path);
}
const renderActionsMenu = ( const renderActionsMenu = (
<Menu <Menu
anchorEl={actionsMenu} anchorEl={actionsMenu}
anchorOrigin={{ anchorOrigin={{
vertical: "bottom", vertical: "bottom",
horizontal: "left", horizontal: "right",
}} }}
transformOrigin={{ transformOrigin={{
vertical: "top", vertical: "top",
horizontal: "left", horizontal: "right",
}} }}
open={Boolean(actionsMenu)} open={Boolean(actionsMenu)}
onClose={closeActionsMenu} onClose={closeActionsMenu}
keepMounted keepMounted
> >
<MenuItem onClick={() => navigate("edit")}>Edit</MenuItem>
<MenuItem onClick={() =>
{
setActionsMenu(null);
handleClickConfirmOpen();
}}
>
Delete
</MenuItem>
<MenuItem divider />
{tableProcesses.map((process) => ( {tableProcesses.map((process) => (
<MenuItem key={process.name}> <MenuItem key={process.name} onClick={() => processClicked(process)}>{process.label}</MenuItem>
<Link href={`/processes/${process.name}?recordIds=${id}`}>{process.label}</Link>
</MenuItem>
))} ))}
</Menu> </Menu>
); );
@ -179,77 +252,89 @@ function ViewContents({id}: Props): JSX.Element
</MDAlert> </MDAlert>
) : ("") ) : ("")
} }
<Card id="basic-info" sx={{overflow: "visible"}}>
<MDBox p={3}> <Grid container spacing={3}>
<MDBox display="flex" justifyContent="space-between"> <Grid item xs={12} lg={3}>
<MDTypography variant="h5"> <QRecordSidebar tableSections={tableSections} />
Viewing </Grid>
{" "} <Grid item xs={12} lg={9}>
{tableMetaData?.label}
{" "} <Grid container spacing={3}>
( <Grid item xs={12} mb={3}>
{id} <Card>
) <MDBox display="flex" p={3} pb={1}>
</MDTypography> <MDBox mr={1.5}>
{tableProcesses.length > 0 && ( <Avatar sx={{bgcolor: "rgb(26, 115, 232)"}}>
<MDButton <Icon>
variant={actionsMenu ? "contained" : "outlined"} {tableMetaData?.iconName}
color="dark" </Icon>
onClick={openActionsMenu} </Avatar>
> </MDBox>
actions&nbsp; <MDBox display="flex" justifyContent="space-between" width="100%" alignItems="center">
<Icon>keyboard_arrow_down</Icon> <MDTypography variant="h5">
</MDButton> {tableMetaData && record ? `Viewing ${tableMetaData?.label}: ${record?.recordLabel}` : ""}
)} </MDTypography>
{renderActionsMenu} {tableProcesses.length > 0 && (
</MDBox> <QActionsMenuButton isOpen={actionsMenu} onClickHandler={openActionsMenu} />
</MDBox> )}
<MDBox p={3}>{nameValues}</MDBox> {renderActionsMenu}
<MDBox component="form" pb={3} px={3}> </MDBox>
<Grid key="tres" container spacing={3}> </MDBox>
<MDBox ml="auto" mr={3}> {t1Section ? (<MDBox p={3} pt={0}>{t1Section}</MDBox>) : null}
<MDButton </Card>
variant="gradient" </Grid>
color="primary"
size="small"
onClick={handleClickConfirmOpen}
>
delete
{" "}
{tableMetaData?.label}
</MDButton>
<Dialog
open={open}
onClose={handleClickConfirmClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">Confirm Deletion</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure you want to delete this record?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClickConfirmClose}>No</Button>
<Button onClick={handleDelete} autoFocus>
Yes
</Button>
</DialogActions>
</Dialog>
</MDBox>
<MDBox>
<MDButton variant="gradient" color="dark" size="small">
<Link href={editPath}>
{`edit ${tableMetaData?.label}`}
</Link>
</MDButton>
</MDBox>
</Grid> </Grid>
</MDBox> {tableSections && sectionFieldElements ? tableSections.map(({
</Card> icon, label, name, fieldNames, tier,
}: any) => (tier !== "T1"
? (
<MDBox mb={3} key={name}>
<Card key={name} id={name} sx={{overflow: "visible"}}>
<MDTypography variant="h5" p={3} pb={1}>
{label}
</MDTypography>
<MDBox p={3} pt={0} flexDirection="column">{sectionFieldElements.get(name)}</MDBox>
</Card>
</MDBox>
) : null)) : null}
<MDBox component="form" p={3}>
<Grid container justifyContent="flex-end" spacing={3}>
<QDeleteButton onClickHandler={handleClickConfirmOpen} />
<QEditButton />
</Grid>
</MDBox>
</Grid>
</Grid>
{/* Delete confirmation Dialog */}
<Dialog
open={open}
onClose={handleClickConfirmClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">Confirm Deletion</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure you want to delete this record?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClickConfirmClose}>No</Button>
<Button onClick={handleDelete} autoFocus>
Yes
</Button>
</DialogActions>
</Dialog>
</MDBox> </MDBox>
); );
} }
ViewContents.defaultProps = {
table: null,
};
export default ViewContents; export default ViewContents;

57
src/qqq/pages/entity-view/index.tsx
View File

@ -1,16 +1,22 @@
/** /*
========================================================= * QQQ - Low-code Application Framework for Engineers.
* Material Dashboard 2 PRO React TS - v1.0.0 * Copyright (C) 2021-2022. Kingsrook, LLC
========================================================= * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts * https://github.com/Kingsrook/
* Copyright 2022 Creative Tim (https://www.creative-tim.com) *
* This program is free software: you can redistribute it and/or modify
Coded by www.creative-tim.com * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
========================================================= * License, or (at your option) any later version.
*
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import {useParams} from "react-router-dom"; import {useParams} from "react-router-dom";
@ -24,22 +30,25 @@ import MDBox from "components/MDBox";
// Settings page components // Settings page components
import BaseLayout from "qqq/components/BaseLayout"; import BaseLayout from "qqq/components/BaseLayout";
import ViewContents from "./components/ViewContents"; import ViewContents from "./components/ViewContents";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import EntityList from "qqq/pages/entity-list";
function EntityView(): JSX.Element interface Props
{
table?: QTableMetaData;
}
function EntityView({table}: Props): JSX.Element
{ {
const {id} = useParams(); const {id} = useParams();
return ( return (
<BaseLayout> <BaseLayout>
<MDBox mt={4}> <MDBox>
<Grid container spacing={3}> <Grid container>
<Grid item xs={12} lg={12}> <Grid item xs={12}>
<MDBox mb={3}> <MDBox mb={3}>
<Grid container spacing={3}> <ViewContents id={id} />
<Grid item xs={12}>
<ViewContents id={id} />
</Grid>
</Grid>
</MDBox> </MDBox>
</Grid> </Grid>
</Grid> </Grid>
@ -48,4 +57,8 @@ function EntityView(): JSX.Element
); );
} }
EntityView.defaultProps = {
table: null,
};
export default EntityView; export default EntityView;

52
src/qqq/pages/process-run/index.tsx
View File

@ -1,16 +1,22 @@
/** /*
========================================================= * QQQ - Low-code Application Framework for Engineers.
* Material Dashboard 2 PRO React TS - v1.0.0 * Copyright (C) 2021-2022. Kingsrook, LLC
========================================================= * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts * https://github.com/Kingsrook/
* Copyright 2022 Creative Tim (https://www.creative-tim.com) *
* This program is free software: you can redistribute it and/or modify
Coded by www.creative-tim.com * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
========================================================= * License, or (at your option) any later version.
*
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import React, {useEffect, useState, Fragment} from "react"; import React, {useEffect, useState, Fragment} from "react";
@ -31,9 +37,7 @@ import MDButton from "components/MDButton";
// Material Dashboard 2 PRO React TS examples components // Material Dashboard 2 PRO React TS examples components
import DashboardLayout from "examples/LayoutContainers/DashboardLayout"; import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
// ProcessRun layout schemas for form and form fields
import * as Yup from "yup"; import * as Yup from "yup";
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData"; import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData"; import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
@ -52,10 +56,18 @@ import {CircularProgress, TablePagination} from "@mui/material";
import QDynamicForm from "../../components/QDynamicForm"; import QDynamicForm from "../../components/QDynamicForm";
import MDTypography from "../../../components/MDTypography"; import MDTypography from "../../../components/MDTypography";
import Footer from "examples/Footer"; import Footer from "examples/Footer";
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import Navbar from "qqq/components/Navbar";
function ProcessRun(): JSX.Element interface Props
{ {
const {processName} = useParams(); process?: QProcessMetaData;
}
function ProcessRun({process}: Props): JSX.Element
{
const processNameParam = useParams().processName;
const processName = process === null ? processNameParam : process.name;
/////////////////// ///////////////////
// process state // // process state //
@ -686,7 +698,7 @@ function ProcessRun(): JSX.Element
return ( return (
<DashboardLayout> <DashboardLayout>
<DashboardNavbar /> <Navbar />
<MDBox py={3} mb={20}> <MDBox py={3} mb={20}>
<Grid <Grid
container container
@ -788,4 +800,8 @@ function ProcessRun(): JSX.Element
); );
} }
ProcessRun.defaultProps = {
process: null,
};
export default ProcessRun; export default ProcessRun;

84
src/qqq/styles/qqq-override-styles.css
View File

@ -19,6 +19,88 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
.MuiDrawer-docked .MuiPaper-elevation { .MuiDrawer-docked .MuiPaper-elevation
{
white-space: normal; white-space: normal;
} }
/* Disable red outlines on clicked cells */
.MuiDataGrid-cell:focus,
.MuiDataGrid-columnHeader:focus,
.MuiDataGrid-columnHeader:focus-within,
.MuiDataGrid-cell:focus-within
{
outline: none !important;
}
/* lighten & shrink cell font */
.MuiDataGrid-cell
{
color: rgb(45, 45, 45);
font-size: 0.85rem;
}
/* lighten & shrink header font */
.MuiDataGrid-columnHeaderTitle
{
color: rgb(95, 95, 95);
font-size: 0.75rem;
font-weight: 500 !important;
}
/* tighten widths in headers */
.MuiDataGrid-iconButtonContainer
{
width: 20px;
}
/* tighten widths in headers */
.MuiDataGrid-iconButtonContainer .MuiIconButton-root
{
padding: 2px;
}
/* tighten widths in headers */
.MuiDataGrid-menuIcon
{
margin-left: -5px !important;
}
/* tighten widths in headers */
.MuiDataGrid-menuIcon .MuiDataGrid-menuIconButton
{
padding: 2px;
}
/* when checked-column is pinned, its checkboxes disappear as gray-on-gray - this helps. */
.MuiCheckbox-root .MuiSvgIcon-root
{
background-color: white;
}
/* shrink font on in the pagination control */
.MuiTablePagination-displayedRows,
.MuiTablePagination-selectLabel,
.MuiTablePagination-select.MuiSelect-select.MuiSelect-standard
{
font-size: 0.85rem !important;
}
/* try to make the pagination select box look like one */
.MuiTablePagination-select
{
border: 1px solid rgb(175 175 175) !important;
border-radius: 5px !important;
}
/* hide the selected row count (we show our own) */
.MuiDataGrid-selectedRowCount
{
visibility: hidden !important;
}
/* move the green check / red x down to align with the calendar icon */
.MuiFormControl-root
{
background-position-y: 1.4rem;
}

4
src/qqq/utils/QProcessUtils.ts
View File

@ -28,14 +28,14 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
*******************************************************************************/ *******************************************************************************/
class QProcessUtils class QProcessUtils
{ {
public static getProcessesForTable(metaData: QInstance, tableName: string): QProcessMetaData[] public static getProcessesForTable(metaData: QInstance, tableName: string, includeHidden = false): QProcessMetaData[]
{ {
const matchingProcesses: QProcessMetaData[] = []; const matchingProcesses: QProcessMetaData[] = [];
const processKeys = [...metaData.processes.keys()]; const processKeys = [...metaData.processes.keys()];
processKeys.forEach((key) => processKeys.forEach((key) =>
{ {
const process = metaData.processes.get(key); const process = metaData.processes.get(key);
if (!process.isHidden && process.tableName === tableName) if (process.tableName === tableName && (includeHidden || !process.isHidden))
{ {
matchingProcesses.push(process); matchingProcesses.push(process);
} }

54
src/qqq/utils/QTableUtils.ts Normal file
View File

@ -0,0 +1,54 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
/*******************************************************************************
** Utility class for working with QQQ Tables
**
*******************************************************************************/
class QTableUtils
{
public static getSectionsForRecordSidebar(tableMetaData: QTableMetaData): any
{
const tableSections = [];
if (tableMetaData.sections)
{
for (let i = 0; i < tableMetaData.sections.length; i++)
{
const section = tableMetaData.sections[i];
tableSections.push({
icon: section.iconName, label: section.label, name: section.name, fieldNames: section.fieldNames, tier: section.tier,
});
}
}
else
{
tableSections.push({
icon: "description", label: "All Fields", name: "allFields", fieldNames: [...tableMetaData.fields.keys()],
});
}
return (tableSections);
}
}
export default QTableUtils;

59
src/qqq/utils/QValueUtils.ts Normal file
View File

@ -0,0 +1,59 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import "datejs";
/*******************************************************************************
** Utility class for working with QQQ Values
**
*******************************************************************************/
class QValueUtils
{
public static getDisplayValue(field: QFieldMetaData, record: QRecord): string
{
const displayValue = record.displayValues ? record.displayValues.get(field.name) : undefined;
const rawValue = record.values ? record.values.get(field.name) : undefined;
if (field.type === QFieldType.DATE_TIME)
{
const date = new Date(rawValue);
// @ts-ignore
return (`${date.toString("yyyy-MM-dd hh:mm:ss")} ${date.getHours() < 12 ? "AM" : "PM"} ${date.getTimezone()}`);
}
else if (field.type === QFieldType.DATE)
{
// unclear if we need any customization for DATE or TIME, but leaving blocks for them just in case
return (displayValue);
}
else if (field.type === QFieldType.TIME)
{
return (displayValue);
}
return (displayValue);
}
}
export default QValueUtils;