Merge branch 'feature/QQQ-38-app-home-widgets' into feature/sprint-10
@ -5,7 +5,8 @@
|
||||
},
|
||||
"extends": [
|
||||
"plugin:react/recommended",
|
||||
"airbnb"
|
||||
"plugin:import/recommended",
|
||||
"plugin:import/typescript"
|
||||
],
|
||||
"globals": {
|
||||
"JSX": true
|
||||
@ -27,7 +28,8 @@
|
||||
},
|
||||
"plugins": [
|
||||
"react",
|
||||
"@typescript-eslint"
|
||||
"@typescript-eslint",
|
||||
"import"
|
||||
],
|
||||
"rules": {
|
||||
"brace-style": [
|
||||
@ -56,7 +58,26 @@
|
||||
"devDependencies": true
|
||||
}
|
||||
],
|
||||
"import/order": "off",
|
||||
"import/order": [
|
||||
"error",
|
||||
{
|
||||
"groups": [
|
||||
"builtin", // Built-in imports (come from NodeJS native) go first
|
||||
"external", // <- External imports
|
||||
"internal", // <- Absolute imports
|
||||
["sibling", "parent"], // <- Relative imports, the sibling and parent types they can be mingled together
|
||||
"index", // <- index imports
|
||||
"unknown"
|
||||
],
|
||||
"newlines-between": "never",
|
||||
"alphabetize": {
|
||||
/* sort in ascending order. Options: ["ignore", "asc", "desc"] */
|
||||
"order": "asc",
|
||||
/* ignore case. Options: [true, false] */
|
||||
"caseInsensitive": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"jsx-one-expression-per-line": "off",
|
||||
"max-len": "off",
|
||||
"no-console": "off",
|
||||
@ -82,10 +103,7 @@
|
||||
]
|
||||
}
|
||||
],
|
||||
"react/jsx-indent": [
|
||||
"error",
|
||||
3
|
||||
],
|
||||
"react/jsx-indent": "off",
|
||||
"react/jsx-indent-props": [
|
||||
"error",
|
||||
3
|
||||
@ -95,6 +113,15 @@
|
||||
"quotes": [
|
||||
"error",
|
||||
"double"
|
||||
],
|
||||
"sort-imports": [
|
||||
"error",
|
||||
{
|
||||
"ignoreCase": false,
|
||||
"ignoreDeclarationSort": true,
|
||||
"ignoreMemberSort": true,
|
||||
"allowSeparatedGroups": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"settings": {
|
||||
|
@ -13,7 +13,7 @@
|
||||
"@fullcalendar/interaction": "5.10.0",
|
||||
"@fullcalendar/react": "5.10.0",
|
||||
"@fullcalendar/timegrid": "5.10.0",
|
||||
"@kingsrook/qqq-frontend-core": "1.0.13",
|
||||
"@kingsrook/qqq-frontend-core": "1.0.14",
|
||||
"@mui/icons-material": "5.4.1",
|
||||
"@mui/material": "5.4.1",
|
||||
"@mui/styled-engine": "5.4.1",
|
||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 8.0 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 8.0 KiB |
88
src/App.tsx
@ -1,56 +1,56 @@
|
||||
import React, {
|
||||
JSXElementConstructor, Key, ReactElement, useEffect, useState,
|
||||
} from "react";
|
||||
|
||||
// react-router components
|
||||
import {
|
||||
Navigate, Route, Routes, useLocation,
|
||||
} from "react-router-dom";
|
||||
/*
|
||||
* 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";
|
||||
|
||||
// @mui material components
|
||||
import {LicenseInfo} from "@mui/x-license-pro";
|
||||
import {ThemeProvider} from "@mui/material/styles";
|
||||
import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType";
|
||||
import {QAppTreeNode} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppTreeNode";
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import CssBaseline from "@mui/material/CssBaseline";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Material Dashboard 2 PRO React TS exampless
|
||||
import Sidenav from "examples/Sidenav";
|
||||
import Configurator from "examples/Configurator";
|
||||
|
||||
// Material Dashboard 2 PRO React TS themes
|
||||
import theme from "assets/theme";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Dark Mode themes
|
||||
import themeDark from "assets/theme-dark";
|
||||
|
||||
// Material Dashboard 2 PRO React TS contexts
|
||||
import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "context";
|
||||
|
||||
// Images
|
||||
import nfLogo from "assets/images/nutrifresh_one_icon_white.png";
|
||||
import {Md5} from "ts-md5/dist/md5";
|
||||
import {ThemeProvider} from "@mui/material/styles";
|
||||
import {LicenseInfo} from "@mui/x-license-pro";
|
||||
import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react";
|
||||
import {useCookies} from "react-cookie";
|
||||
import EntityCreate from "./qqq/pages/entity-create";
|
||||
import EntityList from "./qqq/pages/entity-list";
|
||||
import EntityView from "./qqq/pages/entity-view";
|
||||
import EntityEdit from "./qqq/pages/entity-edit";
|
||||
import ProcessRun from "./qqq/pages/process-run";
|
||||
import {Navigate, Route, Routes, useLocation,} from "react-router-dom";
|
||||
import {Md5} from "ts-md5/dist/md5";
|
||||
import theme from "assets/theme";
|
||||
import themeDark from "assets/theme-dark";
|
||||
import MDBox from "components/MDBox";
|
||||
import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "context";
|
||||
import Configurator from "examples/Configurator";
|
||||
import Sidenav from "examples/Sidenav";
|
||||
import AppHome from "qqq/pages/app-home";
|
||||
import QProcessUtils from "qqq/utils/QProcessUtils";
|
||||
import MDAvatar from "./components/MDAvatar";
|
||||
import ProfileOverview from "./layouts/pages/profile/profile-overview";
|
||||
import Settings from "./layouts/pages/account/settings";
|
||||
import Analytics from "./layouts/dashboards/analytics";
|
||||
import Sales from "./layouts/dashboards/sales";
|
||||
import Settings from "./layouts/pages/account/settings";
|
||||
import ProfileOverview from "./layouts/pages/profile/profile-overview";
|
||||
import Logo from "./qqq/images/logo.png";
|
||||
import EntityCreate from "./qqq/pages/entity-create";
|
||||
import EntityEdit from "./qqq/pages/entity-edit";
|
||||
import EntityList from "./qqq/pages/entity-list";
|
||||
import EntityView from "./qqq/pages/entity-view";
|
||||
import ProcessRun from "./qqq/pages/process-run";
|
||||
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";
|
||||
import {QAppTreeNode} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppTreeNode";
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// define the parts of the nav that are static - before the qqq tables etc get dynamic added //
|
||||
@ -436,7 +436,7 @@ export default function App()
|
||||
<>
|
||||
<Sidenav
|
||||
color={sidenavColor}
|
||||
brand={nfLogo}
|
||||
brand={Logo}
|
||||
brandName="Nutrifresh One"
|
||||
routes={sideNavRoutes}
|
||||
onMouseEnter={handleOnMouseEnter}
|
||||
|
@ -1,6 +1,27 @@
|
||||
/*
|
||||
* 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} from "react";
|
||||
import {SESSION_ID_COOKIE_NAME} from "App";
|
||||
import {useCookies} from "react-cookie";
|
||||
import {SESSION_ID_COOKIE_NAME} from "App";
|
||||
|
||||
interface Props
|
||||
{
|
||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 8.0 KiB |
@ -1,16 +1,35 @@
|
||||
import ReactDOM from "react-dom";
|
||||
import {BrowserRouter, useNavigate, useSearchParams} from "react-router-dom";
|
||||
import {Auth0Provider} from "@auth0/auth0-react";
|
||||
import App from "App";
|
||||
/*
|
||||
* 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/>.
|
||||
*/
|
||||
|
||||
// Material Dashboard 2 PRO React TS Context Provider
|
||||
import {Auth0Provider} from "@auth0/auth0-react";
|
||||
import React from "react";
|
||||
import {render} from "react-dom";
|
||||
import {BrowserRouter, useNavigate, useSearchParams} from "react-router-dom";
|
||||
import App from "App";
|
||||
import {MaterialUIControllerProvider} from "context";
|
||||
import "./qqq/styles/qqq-override-styles.css";
|
||||
import ProtectedRoute from "qqq/auth0/protected-route";
|
||||
import React from "react";
|
||||
import HandleAuthorizationError from "HandleAuthorizationError";
|
||||
import ProtectedRoute from "qqq/auth0/protected-route";
|
||||
|
||||
|
||||
// Auth0 params from env
|
||||
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
|
||||
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
|
||||
|
||||
@ -43,7 +62,7 @@ function Auth0ProviderWithRedirectCallback({children, ...props})
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<Auth0ProviderWithRedirectCallback
|
||||
domain={domain}
|
||||
|
@ -20,14 +20,10 @@
|
||||
*/
|
||||
|
||||
import {useState, useEffect, ReactNode} from "react";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import breakpoints from "assets/theme/base/breakpoints";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
|
||||
import Navbar from "qqq/components/Navbar";
|
||||
import Footer from "qqq/components/Footer";
|
||||
import Navbar from "qqq/components/Navbar";
|
||||
import MDBox from "../../../components/MDBox";
|
||||
|
||||
// Declaring props types for BaseLayout
|
||||
|
@ -20,8 +20,8 @@
|
||||
*/
|
||||
|
||||
import {useAuth0} from "@auth0/auth0-react";
|
||||
import React from "react";
|
||||
import {Button} from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
function AuthenticationButton()
|
||||
{
|
||||
|
@ -1,36 +1,46 @@
|
||||
// react components
|
||||
import {useParams, useNavigate, useLocation} from "react-router-dom";
|
||||
import React, {useReducer, useState} from "react";
|
||||
/*
|
||||
* 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/>.
|
||||
*/
|
||||
|
||||
// misc components
|
||||
import * as Yup from "yup";
|
||||
import {
|
||||
Form, Formik, useFormik, useFormikContext,
|
||||
} from "formik";
|
||||
|
||||
// qqq components
|
||||
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
|
||||
import QDynamicForm from "qqq/components/QDynamicForm";
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
|
||||
// @material-ui core components
|
||||
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import {Alert} from "@mui/material";
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import {Alert} from "@mui/material";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import Icon from "@mui/material/Icon";
|
||||
import {Form, Formik} from "formik";
|
||||
import React, {useReducer, useState} from "react";
|
||||
import {useParams, useNavigate, useLocation} from "react-router-dom";
|
||||
import * as Yup from "yup";
|
||||
import colors from "assets/theme/base/colors";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
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 QDynamicForm from "qqq/components/QDynamicForm";
|
||||
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
|
||||
import QRecordSidebar from "qqq/components/QRecordSidebar";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import QTableUtils from "qqq/utils/QTableUtils";
|
||||
import colors from "assets/theme/base/colors";
|
||||
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
|
||||
|
||||
interface Props
|
||||
{
|
||||
|
@ -19,28 +19,25 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Link from "@mui/material/Link";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import typography from "assets/theme/base/typography";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import typography from "assets/theme/base/typography";
|
||||
|
||||
// Declaring props types for Footer
|
||||
interface Props {
|
||||
company?: {
|
||||
href: string;
|
||||
name: string;
|
||||
};
|
||||
links?: {
|
||||
href: string;
|
||||
name: string;
|
||||
}[];
|
||||
[key: string]: any;
|
||||
interface Props
|
||||
{
|
||||
company?: {
|
||||
href: string;
|
||||
name: string;
|
||||
};
|
||||
links?: {
|
||||
href: string;
|
||||
name: string;
|
||||
}[];
|
||||
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function Footer({company, links}: Props): JSX.Element
|
||||
@ -85,9 +82,9 @@ function Footer({company, links}: Props): JSX.Element
|
||||
,
|
||||
<Link href={href} target="_blank">
|
||||
<MDTypography variant="button" fontWeight="medium">
|
||||
|
||||
|
||||
{name}
|
||||
|
||||
|
||||
</MDTypography>
|
||||
</Link>
|
||||
</MDBox>
|
||||
|
@ -19,45 +19,19 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {useState, useEffect} from "react";
|
||||
|
||||
// react-router components
|
||||
import {useLocation} from "react-router-dom";
|
||||
|
||||
// @material-ui core components
|
||||
import AppBar from "@mui/material/AppBar";
|
||||
import Toolbar from "@mui/material/Toolbar";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import Toolbar from "@mui/material/Toolbar";
|
||||
import {useState, useEffect} from "react";
|
||||
import {useLocation} from "react-router-dom";
|
||||
import MDBadge from "components/MDBadge";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDBadge from "components/MDBadge";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import {useMaterialUIController, setTransparentNavbar, setMiniSidenav, setOpenConfigurator,} from "context";
|
||||
import NotificationItem from "examples/Items/NotificationItem";
|
||||
|
||||
// Custom styles for Navbar
|
||||
import {
|
||||
navbar,
|
||||
navbarContainer,
|
||||
navbarRow,
|
||||
navbarIconButton,
|
||||
navbarDesktopMenu,
|
||||
navbarMobileMenu,
|
||||
} from "qqq/components/Navbar/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import {
|
||||
useMaterialUIController,
|
||||
setTransparentNavbar,
|
||||
setMiniSidenav,
|
||||
setOpenConfigurator,
|
||||
} from "context";
|
||||
|
||||
// qqq
|
||||
import {navbar, navbarContainer, navbarRow, navbarIconButton, navbarDesktopMenu, navbarMobileMenu,} from "qqq/components/Navbar/styles";
|
||||
import QBreadcrumbs, {routeToLabel} from "qqq/components/QBreadcrumbs";
|
||||
|
||||
// Declaring prop types for Navbar
|
||||
|
@ -19,7 +19,6 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import {Theme} from "@mui/material/styles";
|
||||
|
||||
function navbar(theme: Theme | any, ownerState: any)
|
||||
|
@ -18,14 +18,11 @@
|
||||
* 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 {ReactNode} from "react";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
|
@ -19,11 +19,10 @@
|
||||
* 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 {ReactNode} from "react";
|
||||
import {Link} from "react-router-dom";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
|
@ -19,12 +19,11 @@
|
||||
* 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";
|
||||
import EntityForm from "qqq/components/EntityForm";
|
||||
import {Link} from "react-router-dom";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// eslint-disable import/prefer-default-export
|
||||
|
||||
|
@ -19,23 +19,19 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// NewUser page components
|
||||
import {useFormikContext} from "formik";
|
||||
import React from "react";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import QDynamicFormField from "qqq/components/QDynamicFormField";
|
||||
|
||||
interface Props {
|
||||
formLabel?: string;
|
||||
formData: any;
|
||||
bulkEditMode?: boolean;
|
||||
bulkEditSwitchChangeHandler?: any
|
||||
interface Props
|
||||
{
|
||||
formLabel?: string;
|
||||
formData: any;
|
||||
bulkEditMode?: boolean;
|
||||
bulkEditSwitchChangeHandler?: any;
|
||||
}
|
||||
|
||||
function QDynamicForm(props: Props): JSX.Element
|
||||
@ -72,55 +68,55 @@ function QDynamicForm(props: Props): JSX.Element
|
||||
<MDBox mt={1.625}>
|
||||
<Grid container spacing={3}>
|
||||
{formFields
|
||||
&& Object.keys(formFields).length > 0
|
||||
&& Object.keys(formFields).map((fieldName: any) =>
|
||||
{
|
||||
const field = formFields[fieldName];
|
||||
if (values[fieldName] === undefined)
|
||||
{
|
||||
values[fieldName] = "";
|
||||
}
|
||||
&& Object.keys(formFields).length > 0
|
||||
&& Object.keys(formFields).map((fieldName: any) =>
|
||||
{
|
||||
const field = formFields[fieldName];
|
||||
if (values[fieldName] === undefined)
|
||||
{
|
||||
values[fieldName] = "";
|
||||
}
|
||||
|
||||
if (field.type === "file")
|
||||
{
|
||||
return (
|
||||
<Grid item xs={12} sm={6} key={fieldName}>
|
||||
<MDBox mb={1.5}>
|
||||
<input
|
||||
id={fieldName}
|
||||
if (field.type === "file")
|
||||
{
|
||||
return (
|
||||
<Grid item xs={12} sm={6} key={fieldName}>
|
||||
<MDBox mb={1.5}>
|
||||
<input
|
||||
id={fieldName}
|
||||
name={fieldName}
|
||||
type="file"
|
||||
onChange={(event: React.FormEvent<HTMLInputElement>) => fileChanged(event, field)}
|
||||
/>
|
||||
<MDBox mt={0.75}>
|
||||
<MDTypography component="div" variant="caption" color="error" fontWeight="regular">
|
||||
{errors[fieldName] && <span>You must select a file to proceed</span>}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
// todo? inputProps={{ autoComplete: "" }}
|
||||
// todo? placeholder={password.placeholder}
|
||||
return (
|
||||
<Grid item xs={12} sm={6} key={fieldName}>
|
||||
<QDynamicFormField
|
||||
type={field.type}
|
||||
label={field.label}
|
||||
isEditable={field.isEditable}
|
||||
name={fieldName}
|
||||
type="file"
|
||||
onChange={(event: React.FormEvent<HTMLInputElement>) => fileChanged(event, field)}
|
||||
displayFormat={field.displayFormat}
|
||||
value={values[fieldName]}
|
||||
error={errors[fieldName] && touched[fieldName]}
|
||||
bulkEditMode={bulkEditMode}
|
||||
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
|
||||
success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
|
||||
/>
|
||||
<MDBox mt={0.75}>
|
||||
<MDTypography component="div" variant="caption" color="error" fontWeight="regular">
|
||||
{errors[fieldName] && <span>You must select a file to proceed</span>}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
// todo? inputProps={{ autoComplete: "" }}
|
||||
// todo? placeholder={password.placeholder}
|
||||
return (
|
||||
<Grid item xs={12} sm={6} key={fieldName}>
|
||||
<QDynamicFormField
|
||||
type={field.type}
|
||||
label={field.label}
|
||||
isEditable={field.isEditable}
|
||||
name={fieldName}
|
||||
displayFormat={field.displayFormat}
|
||||
value={values[fieldName]}
|
||||
error={errors[fieldName] && touched[fieldName]}
|
||||
bulkEditMode={bulkEditMode}
|
||||
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
|
||||
success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
|
||||
/>
|
||||
</Grid>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
@ -131,7 +127,8 @@ QDynamicForm.defaultProps = {
|
||||
formLabel: undefined,
|
||||
bulkEditMode: false,
|
||||
bulkEditSwitchChangeHandler: () =>
|
||||
{},
|
||||
{
|
||||
},
|
||||
};
|
||||
|
||||
export default QDynamicForm;
|
||||
|
@ -19,12 +19,9 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// misc imports
|
||||
import * as Yup from "yup";
|
||||
|
||||
// qqq imports
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
|
||||
import * as Yup from "yup";
|
||||
|
||||
/*******************************************************************************
|
||||
** Meta-data to represent a single field in a table.
|
||||
|
@ -19,17 +19,14 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// formik components
|
||||
import {ErrorMessage, Field} from "formik";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDInput from "components/MDInput";
|
||||
import React, {useState} from "react";
|
||||
import {InputAdornment} from "@mui/material";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Switch from "@mui/material/Switch";
|
||||
import {InputAdornment} from "@mui/material";
|
||||
import {ErrorMessage, Field} from "formik";
|
||||
import React, {useState} from "react";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Declaring props types for FormField
|
||||
interface Props
|
||||
|
@ -19,16 +19,15 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import React, {ReactNode} from "react";
|
||||
|
||||
import {Link} from "react-router-dom";
|
||||
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
|
||||
import {Breadcrumbs as MuiBreadcrumbs} from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import {Theme} from "@mui/material/styles";
|
||||
import React, {ReactNode} from "react";
|
||||
import {Link} from "react-router-dom";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import Card from "@mui/material/Card";
|
||||
import {Theme} from "@mui/material/styles";
|
||||
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
|
||||
|
||||
interface Props {
|
||||
tableSections: QSection[];
|
||||
|
99
src/qqq/components/Widgets/BarChart.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
/*
|
||||
* 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 Card from "@mui/material/Card";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import {useMemo, ReactNode} from "react";
|
||||
import {Bar} from "react-chartjs-2";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import configs from "qqq/components/Widgets/Configs/BarChartConfig";
|
||||
|
||||
// Declaring props types for ReportsBarChart
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
title: string;
|
||||
description?: string | ReactNode;
|
||||
date: string;
|
||||
chart: {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
label: string;
|
||||
data: number[];
|
||||
};
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function ReportsBarChart({color, title, description, date, chart}: Props): JSX.Element
|
||||
{
|
||||
const {data, options} = configs(chart.labels || [], chart.datasets || {});
|
||||
|
||||
return (
|
||||
<Card sx={{height: "100%"}}>
|
||||
<MDBox padding="1rem">
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox
|
||||
variant="gradient"
|
||||
bgColor={color}
|
||||
borderRadius="lg"
|
||||
coloredShadow={color}
|
||||
py={2}
|
||||
pr={0.5}
|
||||
mt={-5}
|
||||
height="12.5rem"
|
||||
>
|
||||
<Bar data={data} options={options} />
|
||||
</MDBox>
|
||||
),
|
||||
[chart, color]
|
||||
)}
|
||||
<MDBox pt={3} pb={1} px={1}>
|
||||
<MDTypography variant="h6" textTransform="capitalize">
|
||||
{title}
|
||||
</MDTypography>
|
||||
<MDTypography component="div" variant="button" color="text" fontWeight="light">
|
||||
{description}
|
||||
</MDTypography>
|
||||
<Divider />
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDTypography variant="button" color="text" lineHeight={1} sx={{mt: 0.15, mr: 0.5}}>
|
||||
<Icon>schedule</Icon>
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" color="text" fontWeight="light">
|
||||
{date}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Setting default values for the props of ReportsBarChart
|
||||
ReportsBarChart.defaultProps = {
|
||||
color: "dark",
|
||||
description: "",
|
||||
};
|
||||
|
||||
export default ReportsBarChart;
|
104
src/qqq/components/Widgets/Configs/BarChartConfig.ts
Normal file
@ -0,0 +1,104 @@
|
||||
/*
|
||||
* 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/>.
|
||||
*/
|
||||
|
||||
function configs(labels: any, datasets: any)
|
||||
{
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: datasets.label,
|
||||
tension: 0.4,
|
||||
borderWidth: 0,
|
||||
borderRadius: 4,
|
||||
borderSkipped: false,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.8)",
|
||||
data: datasets.data,
|
||||
maxBarThickness: 6,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: "index",
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
color: "rgba(255, 255, 255, .2)",
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 0,
|
||||
suggestedMax: 500,
|
||||
beginAtZero: true,
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
color: "rgba(255, 255, 255, .2)",
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: "#f8f9fa",
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
100
src/qqq/components/Widgets/Configs/PieChartConfigs.ts
Normal file
@ -0,0 +1,100 @@
|
||||
/*
|
||||
* 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 colors from "assets/theme/base/colors";
|
||||
|
||||
const {gradients, dark} = colors;
|
||||
|
||||
function configs(labels: any, datasets: any)
|
||||
{
|
||||
const backgroundColors = [];
|
||||
|
||||
if (datasets.backgroundColors)
|
||||
{
|
||||
datasets.backgroundColors.forEach((color: string) =>
|
||||
gradients[color]
|
||||
? backgroundColors.push(gradients[color].state)
|
||||
: backgroundColors.push(dark.main)
|
||||
);
|
||||
}
|
||||
else
|
||||
{
|
||||
backgroundColors.push(dark.main);
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: datasets.label,
|
||||
weight: 9,
|
||||
cutout: 0,
|
||||
tension: 0.9,
|
||||
pointRadius: 2,
|
||||
borderWidth: 2,
|
||||
backgroundColor: backgroundColors,
|
||||
fill: false,
|
||||
data: datasets.data,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: "index",
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
110
src/qqq/components/Widgets/PieChart.tsx
Normal file
@ -0,0 +1,110 @@
|
||||
/*
|
||||
* 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 Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import {useMemo, ReactNode} from "react";
|
||||
import {Pie} from "react-chartjs-2";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import configs from "qqq/components/Widgets/Configs/PieChartConfigs"
|
||||
|
||||
// Declaring props types for PieChart
|
||||
interface Props
|
||||
{
|
||||
icon?: {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
component: ReactNode;
|
||||
};
|
||||
title?: string;
|
||||
description?: string | ReactNode;
|
||||
height?: string | number;
|
||||
chart: {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
label: string;
|
||||
backgroundColors: string[];
|
||||
data: number[];
|
||||
};
|
||||
};
|
||||
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function PieChart({icon, title, description, height, chart}: Props): JSX.Element
|
||||
{
|
||||
const {data, options} = configs(chart.labels || [], chart.datasets || {});
|
||||
|
||||
const renderChart = (
|
||||
<MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
|
||||
{title || description ? (
|
||||
<MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
|
||||
{icon.component && (
|
||||
<MDBox
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
bgColor={icon.color || "info"}
|
||||
variant="gradient"
|
||||
coloredShadow={icon.color || "info"}
|
||||
borderRadius="xl"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
color="white"
|
||||
mt={-5}
|
||||
mr={2}
|
||||
>
|
||||
<Icon fontSize="medium">{icon.component}</Icon>
|
||||
</MDBox>
|
||||
)}
|
||||
<MDBox mt={icon.component ? -2 : 0}>
|
||||
{title && <MDTypography variant="h6">{title}</MDTypography>}
|
||||
<MDBox mb={2}>
|
||||
<MDTypography component="div" variant="button" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
) : null}
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox height={height}>
|
||||
<Pie data={data} options={options} />
|
||||
</MDBox>
|
||||
),
|
||||
[chart, height]
|
||||
)}
|
||||
</MDBox>
|
||||
);
|
||||
|
||||
return title || description ? <Card>{renderChart}</Card> : renderChart;
|
||||
}
|
||||
|
||||
// Declaring default props for PieChart
|
||||
PieChart.defaultProps = {
|
||||
icon: {color: "info", component: ""},
|
||||
title: "",
|
||||
description: "",
|
||||
height: "19.125rem",
|
||||
};
|
||||
|
||||
export default PieChart;
|
57
src/qqq/components/Widgets/QuickSightChart.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
/*
|
||||
* 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 Card from "@mui/material/Card";
|
||||
import React from "react";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
interface Props
|
||||
{
|
||||
label: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface IframeProps
|
||||
{
|
||||
iframe: string;
|
||||
}
|
||||
|
||||
function Iframe({iframe}: IframeProps)
|
||||
{
|
||||
return (<div dangerouslySetInnerHTML={{__html: iframe || ""}} />);
|
||||
}
|
||||
|
||||
function QuickSightChart({label, url}: Props): JSX.Element
|
||||
{
|
||||
const iframe = `<iframe style='border: 0 solid #1A73E8; height: 411px; width: 99%' title=${label} src=${url} />`;
|
||||
|
||||
return (
|
||||
<Card sx={{height: "100%"}}>
|
||||
<MDBox padding="1rem">
|
||||
<MDTypography variant="h5">{label}</MDTypography>
|
||||
<Iframe iframe={iframe} />
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default QuickSightChart;
|
BIN
src/qqq/images/logo.png
Normal file
After Width: | Height: | Size: 8.0 KiB |
@ -19,30 +19,27 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {QAppMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppMetaData";
|
||||
import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType";
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {Icon} from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
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 MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import DefaultInfoCard from "examples/Cards/InfoCards/DefaultInfoCard";
|
||||
import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCard";
|
||||
import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import ProcessLinkCard from "qqq/components/ProcessLinkCard";
|
||||
import BarChart from "qqq/components/Widgets/BarChart";
|
||||
import QuickSightChart from "qqq/components/Widgets/QuickSightChart";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
|
||||
const qController = QClient.getInstance();
|
||||
|
||||
@ -57,6 +54,9 @@ function AppHome({app}: Props): JSX.Element
|
||||
const [tables, setTables] = useState([] as QTableMetaData[]);
|
||||
const [processes, setProcesses] = useState([] as QProcessMetaData[]);
|
||||
const [childApps, setChildApps] = useState([] as QAppMetaData[]);
|
||||
const [tableCounts, setTableCounts] = useState(new Map<string, { isLoading: boolean, value: number }>());
|
||||
const [updatedTableCounts, setUpdatedTableCounts] = useState(new Date());
|
||||
const [widgets, setWidgets] = useState([] as any[]);
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
@ -102,154 +102,213 @@ function AppHome({app}: Props): JSX.Element
|
||||
setTables(newTables);
|
||||
setProcesses(newProcesses);
|
||||
setChildApps(newChildApps);
|
||||
|
||||
const tableCounts = new Map<string, { isLoading: boolean, value: number }>();
|
||||
newTables.forEach((table) =>
|
||||
{
|
||||
tableCounts.set(table.name, {isLoading: true, value: null});
|
||||
|
||||
setTimeout(async () =>
|
||||
{
|
||||
const count = await qController.count(table.name);
|
||||
tableCounts.set(table.name, {isLoading: false, value: count});
|
||||
setTableCounts(tableCounts);
|
||||
setUpdatedTableCounts(new Date());
|
||||
}, 1);
|
||||
});
|
||||
setTableCounts(tableCounts);
|
||||
|
||||
console.log(app.widgets);
|
||||
if (app.widgets)
|
||||
{
|
||||
const widgets: any[] = [];
|
||||
for (let i = 0; i < app.widgets.length; i++)
|
||||
{
|
||||
widgets[i] = {};
|
||||
setTimeout(async () =>
|
||||
{
|
||||
const widget = await qController.widget(app.widgets[i]);
|
||||
widgets[i] = widget;
|
||||
setUpdatedTableCounts(new Date());
|
||||
}, 1);
|
||||
}
|
||||
setWidgets(widgets);
|
||||
}
|
||||
}, [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],
|
||||
/*
|
||||
const charts = [
|
||||
{
|
||||
type: "barChart",
|
||||
title: "Parcel Invoice Lines per Month",
|
||||
barChartData: {
|
||||
labels: ["Feb 22", "Mar 22", "Apr 22", "May 22", "Jun 22", "Jul 22", "Aug 22"],
|
||||
datasets: {label: "Parcel Invoice Lines", data: [50000, 22000, 11111, 22333, 40404, 9876, 2355]},
|
||||
},
|
||||
{
|
||||
label: "Google Ads",
|
||||
color: "dark",
|
||||
data: [10, 30, 40, 120, 150, 220, 280, 250, 280],
|
||||
},
|
||||
{
|
||||
type: "lineChart",
|
||||
title: "Total Charges by Carrier per Month",
|
||||
lineChartData: {
|
||||
labels: ["Feb 22", "Mar 22", "Apr 22", "May 22", "Jun 22", "Jul 22", "Aug 22"],
|
||||
datasets: [
|
||||
{label: "UPS", color: "info", data: [50000, 22000, 11111, 22333, 40404, 9876, 2355]},
|
||||
{label: "FedEx", color: "dark", data: [5000, 22000, 31111, 32333, 20404, 19876, 24355]},
|
||||
{label: "LSO", color: "error", data: [500, 2200, 1111, 2333, 404, 17876, 2355]},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
];
|
||||
*/
|
||||
|
||||
console.log(`Widgets: ${widgets} and tables: ${tables}`);
|
||||
|
||||
const haveWidgets = widgets && widgets.length;
|
||||
const widgetCount = widgets ? widgets.length : 0;
|
||||
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
const tileSizeLg = (widgetCount === 0 ? 3 : widgetCount === 1 ? 4 : 6);
|
||||
let gridIndex = 0;
|
||||
|
||||
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"
|
||||
{
|
||||
widgetCount > 0 ? (
|
||||
<Grid item xs={12} lg={widgetCount === 1 ? 3 : 6}>
|
||||
<Grid container spacing={3}>
|
||||
{
|
||||
widgets.map((chart) => (
|
||||
<Grid key={`${gridIndex++}`} item xs={12} lg={widgetCount === 1 ? 12 : 6}>
|
||||
<MDBox mb={3}>
|
||||
{
|
||||
chart.type === "quickSightChart" && (
|
||||
<QuickSightChart url={chart.url} label={chart.label} />
|
||||
)
|
||||
}
|
||||
{
|
||||
chart.type === "barChart" && (
|
||||
<BarChart
|
||||
color="info"
|
||||
title={chart.title}
|
||||
date={`As of ${new Date().toDateString()}`}
|
||||
chart={chart.barChartData}
|
||||
/>
|
||||
</MDBox>
|
||||
</Link>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Card>
|
||||
</MDBox>
|
||||
) : null
|
||||
}
|
||||
)
|
||||
}
|
||||
{
|
||||
chart.type === "lineChart" && (
|
||||
<DefaultLineChart
|
||||
title={chart.title}
|
||||
description={(
|
||||
<MDBox display="flex" justifyContent="space-between">
|
||||
<MDBox display="flex" ml={-1}>
|
||||
{
|
||||
chart.lineChartData.datasets.map((dataSet: any) => (
|
||||
<MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
|
||||
))
|
||||
}
|
||||
</MDBox>
|
||||
<MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
|
||||
</MDBox>
|
||||
)}
|
||||
chart={chart.lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</MDBox>
|
||||
</Grid>
|
||||
))
|
||||
}
|
||||
</Grid>
|
||||
</Grid>
|
||||
) : null
|
||||
}
|
||||
|
||||
{
|
||||
processes.length ? (
|
||||
<MDBox mb={3}>
|
||||
<Card id="basic-info" sx={{overflow: "visible"}}>
|
||||
<MDBox p={3}>
|
||||
<MDTypography variant="h5">Processes</MDTypography>
|
||||
{
|
||||
tables.length > 0 || processes.length > 0 || childApps.length > 0 ? (
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
<Grid item xs={12} lg={widgetCount === 0 ? 12 : widgetCount === 1 ? 9 : 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={tileSizeLg}>
|
||||
<Link to={table.name}>
|
||||
<MDBox mb={3}>
|
||||
<MiniStatisticsCard
|
||||
title={{fontWeight: "bold", text: table.label}}
|
||||
count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : tableCounts.get(table.name).value.toLocaleString()}
|
||||
percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : "total records")}}
|
||||
icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
|
||||
direction="right"
|
||||
/>
|
||||
</MDBox>
|
||||
</Link>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Card>
|
||||
</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
|
||||
}
|
||||
) : 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>
|
||||
{
|
||||
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={tileSizeLg}>
|
||||
<Link to={process.name}>
|
||||
<ProcessLinkCard
|
||||
icon={process.iconName || app.iconName}
|
||||
title={process.label}
|
||||
/>
|
||||
</Link>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Card>
|
||||
</MDBox>
|
||||
) : null
|
||||
}
|
||||
</Grid>
|
||||
</Card>
|
||||
</MDBox>
|
||||
) : null
|
||||
}
|
||||
|
||||
{
|
||||
childApps.length ? (
|
||||
<MDBox mb={3}>
|
||||
<Card id="basic-info" sx={{overflow: "visible"}}>
|
||||
<MDBox p={3}>
|
||||
<MDTypography variant="h5">Apps</MDTypography>
|
||||
</MDBox>
|
||||
<Grid container spacing={3} padding={3} paddingTop={3}>
|
||||
{childApps.map((childApp) => (
|
||||
<Grid key={childApp.name} item xs={12} md={12} lg={tileSizeLg}>
|
||||
<Link to={childApp.name}>
|
||||
<DefaultInfoCard
|
||||
icon={childApp.iconName || app.iconName}
|
||||
title={childApp.label}
|
||||
/>
|
||||
</Link>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Card>
|
||||
</MDBox>
|
||||
) : null
|
||||
}
|
||||
</Grid>
|
||||
) : null
|
||||
}
|
||||
|
||||
</Grid>
|
||||
</MDBox>
|
||||
|
@ -19,16 +19,11 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Settings page components
|
||||
import EntityForm from "qqq/components/EntityForm";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import MDBox from "components/MDBox";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import EntityForm from "qqq/components/EntityForm";
|
||||
|
||||
interface Props
|
||||
{
|
||||
|
@ -19,18 +19,12 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Settings page components
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import {useParams} from "react-router-dom";
|
||||
import EntityForm from "qqq/components/EntityForm";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import EntityList from "qqq/pages/entity-list";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import {useParams} from "react-router-dom";
|
||||
import MDBox from "components/MDBox";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import EntityForm from "qqq/components/EntityForm";
|
||||
|
||||
interface Props
|
||||
{
|
||||
|
@ -19,26 +19,25 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import React, {
|
||||
useCallback, useEffect, useReducer, useRef, useState,
|
||||
} from "react";
|
||||
import {
|
||||
Link, useNavigate, useParams, useSearchParams,
|
||||
} from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
|
||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
|
||||
import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
|
||||
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
|
||||
import {Alert, TablePagination} from "@mui/material";
|
||||
import Button from "@mui/material/Button";
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import LinearProgress from "@mui/material/LinearProgress";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import {Alert, TablePagination} from "@mui/material";
|
||||
import {
|
||||
DataGridPro,
|
||||
GridCallbackDetails,
|
||||
GridColDef,
|
||||
GridColumnOrderChangeParams,
|
||||
GridColumnVisibilityModel,
|
||||
GridExportMenuItemProps,
|
||||
GridFilterModel,
|
||||
GridRowId,
|
||||
GridRowParams,
|
||||
@ -51,33 +50,22 @@ import {
|
||||
GridToolbarDensitySelector,
|
||||
GridToolbarExportContainer,
|
||||
GridToolbarFilterButton,
|
||||
MuiEvent,
|
||||
GridExportMenuItemProps,
|
||||
MuiEvent
|
||||
} from "@mui/x-data-grid-pro";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
|
||||
import MDBox from "components/MDBox";
|
||||
import React, {useCallback, useEffect, useReducer, useRef, useState} from "react";
|
||||
import {Link, useNavigate, useParams, useSearchParams} from "react-router-dom";
|
||||
import MDAlert from "components/MDAlert";
|
||||
|
||||
// QQQ
|
||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
|
||||
import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
|
||||
import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
|
||||
import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
|
||||
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import MDBox from "components/MDBox";
|
||||
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
|
||||
import Navbar from "qqq/components/Navbar";
|
||||
import Button from "@mui/material/Button";
|
||||
import {QActionsMenuButton, QCreateNewButton} from "qqq/components/QButtons";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import QFilterUtils from "qqq/utils/QFilterUtils";
|
||||
import QValueUtils from "qqq/utils/QValueUtils";
|
||||
import Footer from "../../components/Footer";
|
||||
import QProcessUtils from "../../utils/QProcessUtils";
|
||||
|
||||
import {QActionsMenuButton, QCreateNewButton} from "qqq/components/QButtons";
|
||||
import QValueUtils from "qqq/utils/QValueUtils";
|
||||
import LinearProgress from "@mui/material/LinearProgress";
|
||||
import QFilterUtils from "qqq/utils/QFilterUtils";
|
||||
|
||||
const COLUMN_VISIBILITY_LOCAL_STORAGE_KEY_ROOT = "qqq.columnVisibility";
|
||||
const COLUMN_SORT_LOCAL_STORAGE_KEY_ROOT = "qqq.columnSort";
|
||||
const FILTER_LOCAL_STORAGE_KEY_ROOT = "qqq.filter";
|
||||
|
@ -19,41 +19,34 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// react components
|
||||
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
|
||||
import React, {useReducer, useState} from "react";
|
||||
|
||||
// @material-ui core components
|
||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import Button from "@mui/material/Button";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Dialog from "@mui/material/Dialog";
|
||||
import DialogTitle from "@mui/material/DialogTitle";
|
||||
import DialogActions from "@mui/material/DialogActions";
|
||||
import DialogContent from "@mui/material/DialogContent";
|
||||
import DialogContentText from "@mui/material/DialogContentText";
|
||||
import DialogActions from "@mui/material/DialogActions";
|
||||
import Button from "@mui/material/Button";
|
||||
|
||||
// qqq imports
|
||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import DialogTitle from "@mui/material/DialogTitle";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import MDAlert from "components/MDAlert";
|
||||
import QProcessUtils from "../../../../utils/QProcessUtils";
|
||||
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";
|
||||
import React, {useReducer, useState} from "react";
|
||||
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
|
||||
import colors from "assets/theme/base/colors";
|
||||
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
|
||||
import MDAlert from "components/MDAlert";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import {QActionsMenuButton, QDeleteButton, QEditButton} from "qqq/components/QButtons";
|
||||
import QRecordSidebar from "qqq/components/QRecordSidebar";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import QTableUtils from "qqq/utils/QTableUtils";
|
||||
import QValueUtils from "qqq/utils/QValueUtils";
|
||||
import QProcessUtils from "../../../../utils/QProcessUtils";
|
||||
|
||||
const qController = QClient.getInstance();
|
||||
|
||||
|
@ -19,19 +19,12 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {useParams} from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import {useParams} from "react-router-dom";
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Settings page components
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import ViewContents from "./components/ViewContents";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import EntityList from "qqq/pages/entity-list";
|
||||
|
||||
interface Props
|
||||
{
|
||||
|
@ -19,48 +19,41 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import * as Yup from "yup";
|
||||
|
||||
import {
|
||||
Button, CircularProgress, Icon, TablePagination,
|
||||
} from "@mui/material";
|
||||
import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
|
||||
// formik components
|
||||
import {Form, Formik} from "formik";
|
||||
import React, {Fragment, useEffect, useState} from "react";
|
||||
import {useLocation, useNavigate, useParams} from "react-router-dom";
|
||||
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import Card from "@mui/material/Card";
|
||||
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
|
||||
import FormData from "form-data";
|
||||
import Grid from "@mui/material/Grid";
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDButton from "components/MDButton";
|
||||
import MDProgress from "components/MDProgress";
|
||||
import MDTypography from "../../../components/MDTypography";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
|
||||
import {QComponentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QComponentType";
|
||||
import QDynamicForm from "../../components/QDynamicForm";
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QFrontendComponent} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendComponent";
|
||||
import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
|
||||
import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
|
||||
import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning";
|
||||
import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted";
|
||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import {Button, Icon, CircularProgress, TablePagination} from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Step from "@mui/material/Step";
|
||||
import StepLabel from "@mui/material/StepLabel";
|
||||
import Stepper from "@mui/material/Stepper";
|
||||
import QValidationReview from "qqq/pages/process-run/components/QValidationReview";
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import QProcessSummaryResults from "./components/QProcessSummaryResults";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
|
||||
import FormData from "form-data";
|
||||
import {Form, Formik} from "formik";
|
||||
import React, {Fragment, useEffect, useState} from "react";
|
||||
import {useLocation, useNavigate, useParams} from "react-router-dom";
|
||||
import * as Yup from "yup";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDButton from "components/MDButton";
|
||||
import MDProgress from "components/MDProgress";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import {QCancelButton, QSubmitButton} from "qqq/components/QButtons";
|
||||
import {formatDate} from "@fullcalendar/react";
|
||||
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
|
||||
import QValidationReview from "qqq/pages/process-run/components/QValidationReview";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import MDTypography from "../../../components/MDTypography";
|
||||
import QDynamicForm from "../../components/QDynamicForm";
|
||||
import QProcessSummaryResults from "./components/QProcessSummaryResults";
|
||||
|
||||
interface Props
|
||||
{
|
||||
|
@ -19,9 +19,9 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {useAuth0} from "@auth0/auth0-react";
|
||||
import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
|
||||
import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
|
||||
import {useAuth0} from "@auth0/auth0-react";
|
||||
|
||||
/*******************************************************************************
|
||||
** client wrapper of qqq backend
|
||||
|
@ -19,8 +19,8 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
|
||||
/*******************************************************************************
|
||||
** Utility class for working with QQQ Processes
|
||||
|
@ -19,8 +19,8 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
|
||||
/*******************************************************************************
|
||||
** Utility class for working with QQQ Tables
|
||||
|
@ -20,9 +20,8 @@
|
||||
*/
|
||||
|
||||
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 {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import "datejs";
|
||||
|
||||
/*******************************************************************************
|
||||
|