From be42a98d4d1e0fc94d8406005d58d9b6e14e2a43 Mon Sep 17 00:00:00 2001 From: Tim Chamberlain Date: Thu, 14 Jul 2022 14:32:11 -0500 Subject: [PATCH] reformatted all relevant files to new style --- package.json | 1 + src/App.tsx | 28 +-- src/index.tsx | 4 +- src/qqq/components/BaseLayout/index.tsx | 7 +- .../components/CustomerCell/index.tsx | 4 +- .../components/DefaultCell/index.tsx | 2 +- .../EntityForm/components/IdCell/index.tsx | 2 +- .../components/StatusCell/index.tsx | 6 +- src/qqq/components/EntityForm/index.tsx | 18 +- src/qqq/components/Footer/index.tsx | 12 +- src/qqq/components/Navbar/index.tsx | 214 ++++++++++++++++++ src/qqq/components/Navbar/styles.ts | 167 ++++++++++++++ src/qqq/components/QDynamicForm/index.tsx | 4 +- .../QDynamicForm/utils/DynamicFormUtils.ts | 40 ++-- .../buttons/AuthenticationButton/index.tsx | 17 ++ src/qqq/pages/entity-edit/index.tsx | 4 +- .../components/ViewContents/index.tsx | 14 +- src/qqq/pages/process-run/index.tsx | 32 +-- src/qqq/utils/QClient.ts | 6 +- src/qqq/utils/QProcessUtils.ts | 4 +- 20 files changed, 493 insertions(+), 93 deletions(-) create mode 100644 src/qqq/components/Navbar/index.tsx create mode 100644 src/qqq/components/Navbar/styles.ts create mode 100644 src/qqq/components/buttons/AuthenticationButton/index.tsx diff --git a/package.json b/package.json index 04865c6..660b569 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "proxy": "http://localhost:8000", "dependencies": { "@asseinfo/react-kanban": "2.2.0", + "@auth0/auth0-react": "1.10.2", "@emotion/cache": "11.7.1", "@emotion/react": "11.7.1", "@emotion/styled": "11.6.0", diff --git a/src/App.tsx b/src/App.tsx index 9891839..7014811 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,8 +12,8 @@ import { } from "react-router-dom"; // @mui material components -import { LicenseInfo } from "@mui/x-license-pro"; -import { ThemeProvider } from "@mui/material/styles"; +import {LicenseInfo} from "@mui/x-license-pro"; +import {ThemeProvider} from "@mui/material/styles"; import CssBaseline from "@mui/material/CssBaseline"; import Icon from "@mui/material/Icon"; @@ -31,13 +31,13 @@ import theme from "assets/theme"; import themeDark from "assets/theme-dark"; // Material Dashboard 2 PRO React TS contexts -import { useMaterialUIController, setMiniSidenav, setOpenConfigurator } from "context"; +import {useMaterialUIController, setMiniSidenav, setOpenConfigurator} from "context"; // Images import nfLogo from "assets/images/nutrifresh_one_icon_white.png"; import brandWhite from "assets/images/logo-ct.png"; import brandDark from "assets/images/logo-ct-dark.png"; -import { Md5 } from "ts-md5/dist/md5"; +import {Md5} from "ts-md5/dist/md5"; import EntityCreate from "./qqq/pages/entity-create"; import EntityList from "./qqq/pages/entity-list"; import EntityView from "./qqq/pages/entity-view"; @@ -87,7 +87,7 @@ function getStaticRoutes() }, ], }, - { type: "divider", key: "divider-0" }, + {type: "divider", key: "divider-0"}, { type: "collapse", name: "Dashboards", @@ -108,8 +108,8 @@ function getStaticRoutes() }, ], }, - { type: "divider", key: "divider-1" }, - { type: "title", title: "Tables", key: "title-docs" }, + {type: "divider", key: "divider-1"}, + {type: "title", title: "Tables", key: "title-docs"}, ]; } @@ -129,7 +129,7 @@ export default function App() darkMode, } = controller; const [onMouseEnter, setOnMouseEnter] = useState(false); - const { pathname } = useLocation(); + const {pathname} = useLocation(); const [needToLoadRoutes, setNeedToLoadRoutes] = useState(true); const [routes, setRoutes] = useState(getStaticRoutes()); @@ -223,11 +223,11 @@ export default function App() const getRoutes = (allRoutes: any[]): any => allRoutes.map( (route: { - collapse: any; - route: string; - component: ReactElement>; - key: Key; - }) => + collapse: any; + route: string; + component: ReactElement>; + key: Key; + }) => { if (route.collapse) { @@ -258,7 +258,7 @@ export default function App() bottom="2rem" zIndex={99} color="dark" - sx={{ cursor: "pointer" }} + sx={{cursor: "pointer"}} onClick={handleConfiguratorOpen} > diff --git a/src/index.tsx b/src/index.tsx index d8c18b8..3a535ca 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -14,11 +14,11 @@ Coded by www.creative-tim.com */ import ReactDOM from "react-dom"; -import { BrowserRouter } from "react-router-dom"; +import {BrowserRouter} from "react-router-dom"; import App from "App"; // Material Dashboard 2 PRO React TS Context Provider -import { MaterialUIControllerProvider } from "context"; +import {MaterialUIControllerProvider} from "context"; import "./qqq/styles/qqq-override-styles.css"; ReactDOM.render( diff --git a/src/qqq/components/BaseLayout/index.tsx b/src/qqq/components/BaseLayout/index.tsx index ca9be95..f8c8416 100644 --- a/src/qqq/components/BaseLayout/index.tsx +++ b/src/qqq/components/BaseLayout/index.tsx @@ -13,15 +13,16 @@ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ -import { useState, useEffect, ReactNode } from "react"; +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 DashboardNavbar from "examples/Navbars/DashboardNavbar"; +import Navbar from "qqq/components/Navbar"; import Footer from "qqq/components/Footer"; +import DashboardNavbar from "examples/Navbars/DashboardNavbar"; import MDBox from "../../../components/MDBox"; // Declaring props types for BaseLayout @@ -30,7 +31,7 @@ interface Props { children: ReactNode; } -function BaseLayout({ stickyNavbar, children }: Props): JSX.Element +function BaseLayout({stickyNavbar, children}: Props): JSX.Element { const [tabsOrientation, setTabsOrientation] = useState<"horizontal" | "vertical">("horizontal"); diff --git a/src/qqq/components/EntityForm/components/CustomerCell/index.tsx b/src/qqq/components/EntityForm/components/CustomerCell/index.tsx index 81a15fa..19ee4a1 100644 --- a/src/qqq/components/EntityForm/components/CustomerCell/index.tsx +++ b/src/qqq/components/EntityForm/components/CustomerCell/index.tsx @@ -34,14 +34,14 @@ interface Props { | "dark"; } -function CustomerCell({ image, name, color }: Props): JSX.Element +function CustomerCell({image, name, color}: Props): JSX.Element { return ( - + {name} diff --git a/src/qqq/components/EntityForm/components/DefaultCell/index.tsx b/src/qqq/components/EntityForm/components/DefaultCell/index.tsx index ff577f4..022623e 100644 --- a/src/qqq/components/EntityForm/components/DefaultCell/index.tsx +++ b/src/qqq/components/EntityForm/components/DefaultCell/index.tsx @@ -22,7 +22,7 @@ interface Props { suffix?: string | boolean; } -function DefaultCell({ value, suffix }: Props): JSX.Element +function DefaultCell({value, suffix}: Props): JSX.Element { return ( diff --git a/src/qqq/components/EntityForm/components/IdCell/index.tsx b/src/qqq/components/EntityForm/components/IdCell/index.tsx index a4d370d..0a6f91b 100644 --- a/src/qqq/components/EntityForm/components/IdCell/index.tsx +++ b/src/qqq/components/EntityForm/components/IdCell/index.tsx @@ -27,7 +27,7 @@ interface Props { checked?: boolean; } -function IdCell({ id, checked }: Props): JSX.Element +function IdCell({id, checked}: Props): JSX.Element { const pathParts = window.location.pathname.split("/"); const tableName = pathParts[1]; diff --git a/src/qqq/components/EntityForm/components/StatusCell/index.tsx b/src/qqq/components/EntityForm/components/StatusCell/index.tsx index 1c3649f..1f2508b 100644 --- a/src/qqq/components/EntityForm/components/StatusCell/index.tsx +++ b/src/qqq/components/EntityForm/components/StatusCell/index.tsx @@ -38,16 +38,16 @@ interface Props { status: string; } -function StatusCell({ icon, color, status }: Props): JSX.Element +function StatusCell({icon, color, status}: Props): JSX.Element { return ( - {icon} + {icon} - + {status} diff --git a/src/qqq/components/EntityForm/index.tsx b/src/qqq/components/EntityForm/index.tsx index 4f558b7..9f6e074 100644 --- a/src/qqq/components/EntityForm/index.tsx +++ b/src/qqq/components/EntityForm/index.tsx @@ -1,21 +1,21 @@ // react components -import { useParams, useSearchParams } from "react-router-dom"; -import React, { useReducer, useState } from "react"; +import {useParams, useSearchParams} from "react-router-dom"; +import React, {useReducer, useState} from "react"; // misc components import * as Yup from "yup"; -import { Form, Formik } from "formik"; +import {Form, Formik} from "formik"; // qqq components -import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController"; +import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController"; 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"; +import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData"; // @material-ui core components import Card from "@mui/material/Card"; import Grid from "@mui/material/Grid"; -import { Alert } from "@mui/material"; +import {Alert} from "@mui/material"; // Material Dashboard 2 PRO React TS components import MDBox from "components/MDBox"; @@ -28,10 +28,10 @@ interface Props id?: string; } -function EntityForm({ id }: Props): JSX.Element +function EntityForm({id}: Props): JSX.Element { const qController = new QController(""); - const { tableName } = useParams(); + const {tableName} = useParams(); const [validations, setValidations] = useState({}); const [initialValues, setInitialValues] = useState({} as { [key: string]: string }); @@ -154,7 +154,7 @@ function EntityForm({ id }: Props): JSX.Element ) : ( "" )} - + {formTitle} diff --git a/src/qqq/components/Footer/index.tsx b/src/qqq/components/Footer/index.tsx index a354b3f..2743222 100644 --- a/src/qqq/components/Footer/index.tsx +++ b/src/qqq/components/Footer/index.tsx @@ -37,10 +37,10 @@ interface Props { [key: string]: any; } -function Footer({ company, links }: Props): JSX.Element +function Footer({company, links}: Props): JSX.Element { - const { href, name } = company; - const { size } = typography; + const {href, name} = company; + const {size} = typography; const renderLinks = () => links.map((link) => ( @@ -56,7 +56,7 @@ function Footer({ company, links }: Props): JSX.Element ({ + sx={({breakpoints}) => ({ display: "flex", flexWrap: "wrap", alignItems: "center", @@ -107,7 +107,7 @@ function Footer({ company, links }: Props): JSX.Element // Declaring default props for Footer Footer.defaultProps = { - company: { href: "https://www.nutrifreshservices.com/", name: "Nutrifresh Services" }, + company: {href: "https://www.nutrifreshservices.com/", name: "Nutrifresh Services"}, links: [], }; diff --git a/src/qqq/components/Navbar/index.tsx b/src/qqq/components/Navbar/index.tsx new file mode 100644 index 0000000..4fd5ed3 --- /dev/null +++ b/src/qqq/components/Navbar/index.tsx @@ -0,0 +1,214 @@ +import {useState, useEffect} from "react"; + +// react-router components +import {useLocation, Link} from "react-router-dom"; + +// @material-ui core components +import AppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +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 MDBox from "components/MDBox"; +import MDInput from "components/MDInput"; +import MDBadge from "components/MDBadge"; + +// Material Dashboard 2 PRO React TS examples components +import Breadcrumbs from "examples/Breadcrumbs"; +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 AuthenticationButton from "qqq/components/buttons/AuthenticationButton"; + +// Declaring prop types for Navbar +interface Props +{ + absolute?: boolean; + light?: boolean; + isMini?: boolean; +} + +function Navbar({absolute, light, isMini}: Props): JSX.Element +{ + const [navbarType, setNavbarType] = useState<"fixed" | "absolute" | "relative" | "static" | "sticky">(); + const [controller, dispatch] = useMaterialUIController(); + const { + miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode, + } = controller; + const [openMenu, setOpenMenu] = useState(false); + const route = useLocation().pathname.split("/").slice(1); + + useEffect(() => + { + // Setting the navbar type + if (fixedNavbar) + { + setNavbarType("sticky"); + } + else + { + setNavbarType("static"); + } + + // A function that sets the transparent state of the navbar. + function handleTransparentNavbar() + { + setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar); + } + + /** + The event listener that's calling the handleTransparentNavbar function when + scrolling the window. + */ + window.addEventListener("scroll", handleTransparentNavbar); + + // Call the handleTransparentNavbar function to set the state with the initial value. + handleTransparentNavbar(); + + // Remove event listener on cleanup + return () => window.removeEventListener("scroll", handleTransparentNavbar); + }, [dispatch, fixedNavbar]); + + const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav); + const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator); + const handleOpenMenu = (event: any) => setOpenMenu(event.currentTarget); + const handleCloseMenu = () => setOpenMenu(false); + + // Render the notifications menu + const renderMenu = () => ( + + email} title="Check new messages" /> + podcasts} title="Manage Podcast sessions" /> + shopping_cart} title="Payment successfully completed" /> + + ); + + // Styles for the navbar icons + const iconsStyle = ({ + palette: {dark, white, text}, + functions: {rgba}, + }: { + palette: any; + functions: any; + }) => ({ + color: () => + { + let colorValue = light || darkMode ? white.main : dark.main; + + if (transparentNavbar && !light) + { + colorValue = darkMode ? rgba(text.main, 0.6) : text.main; + } + + return colorValue; + }, + }); + + return ( + navbar(theme, { + transparentNavbar, absolute, light, darkMode, + })} + > + + navbarRow(theme, {isMini})}> + + + + {miniSidenav ? "menu_open" : "menu"} + + + + {isMini ? null : ( + navbarRow(theme, {isMini})}> + + + + + + { /* + + + account_circle + + + */ } + + + {miniSidenav ? "menu_open" : "menu"} + + + + settings + + + + notifications + + + {renderMenu()} + + + )} + + + ); +} + +// Declaring default props for Navbar +Navbar.defaultProps = { + absolute: false, + light: false, + isMini: false, +}; + +export default Navbar; diff --git a/src/qqq/components/Navbar/styles.ts b/src/qqq/components/Navbar/styles.ts new file mode 100644 index 0000000..3c18da8 --- /dev/null +++ b/src/qqq/components/Navbar/styles.ts @@ -0,0 +1,167 @@ +/** + ========================================================= + * 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 {Theme} from "@mui/material/styles"; + +function navbar(theme: Theme | any, ownerState: any) +{ + const { + palette, boxShadows, functions, transitions, breakpoints, borders, + } = theme; + const { + transparentNavbar, absolute, light, darkMode, + } = ownerState; + + const { + dark, white, text, transparent, background, + } = palette; + const {navbarBoxShadow} = boxShadows; + const {rgba, pxToRem} = functions; + const {borderRadius} = borders; + + return { + boxShadow: transparentNavbar || absolute ? "none" : navbarBoxShadow, + backdropFilter: transparentNavbar || absolute ? "none" : `saturate(200%) blur(${pxToRem(30)})`, + backgroundColor: + transparentNavbar || absolute + ? `${transparent.main} !important` + : rgba(darkMode ? background.default : white.main, 0.8), + + color: () => + { + let color; + + if (light) + { + color = white.main; + } + else if (transparentNavbar) + { + color = text.main; + } + else + { + color = dark.main; + } + + return color; + }, + top: absolute ? 0 : pxToRem(12), + minHeight: pxToRem(75), + display: "grid", + alignItems: "center", + borderRadius: borderRadius.xl, + paddingTop: pxToRem(8), + paddingBottom: pxToRem(8), + paddingRight: absolute ? pxToRem(8) : 0, + paddingLeft: absolute ? pxToRem(16) : 0, + + "& > *": { + transition: transitions.create("all", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + + "& .MuiToolbar-root": { + display: "flex", + justifyContent: "space-between", + alignItems: "center", + + [breakpoints.up("sm")]: { + minHeight: "auto", + padding: `${pxToRem(4)} ${pxToRem(16)}`, + }, + }, + }; +} + +const navbarContainer = ({breakpoints}: Theme): any => ({ + flexDirection: "column", + alignItems: "flex-start", + justifyContent: "space-between", + pt: 0.5, + pb: 0.5, + + [breakpoints.up("md")]: { + flexDirection: "row", + alignItems: "center", + paddingTop: "0", + paddingBottom: "0", + }, +}); + +const navbarRow = ({breakpoints}: Theme, {isMini}: any) => ({ + display: "flex", + alignItems: "center", + justifyContent: "space-between", + width: "100%", + + [breakpoints.up("md")]: { + justifyContent: isMini ? "space-between" : "stretch", + width: isMini ? "100%" : "max-content", + }, + + [breakpoints.up("xl")]: { + justifyContent: "stretch !important", + width: "max-content !important", + }, +}); + +const navbarIconButton = ({typography: {size}, breakpoints}: Theme) => ({ + px: 1, + + "& .material-icons, .material-icons-round": { + fontSize: `${size.xl} !important`, + }, + + "& .MuiTypography-root": { + display: "none", + + [breakpoints.up("sm")]: { + display: "inline-block", + lineHeight: 1.2, + ml: 0.5, + }, + }, +}); + +const navbarDesktopMenu = ({breakpoints}: Theme) => ({ + display: "none !important", + cursor: "pointer", + + [breakpoints.up("xl")]: { + display: "inline-block !important", + }, +}); + +const navbarMobileMenu = ({breakpoints}: Theme) => ({ + display: "inline-block", + lineHeight: 0, + + [breakpoints.up("xl")]: { + display: "none", + }, +}); + +export { + navbar, + navbarContainer, + navbarRow, + navbarIconButton, + navbarDesktopMenu, + navbarMobileMenu, +}; diff --git a/src/qqq/components/QDynamicForm/index.tsx b/src/qqq/components/QDynamicForm/index.tsx index 1be96c4..d54d9d3 100644 --- a/src/qqq/components/QDynamicForm/index.tsx +++ b/src/qqq/components/QDynamicForm/index.tsx @@ -22,7 +22,7 @@ import MDTypography from "components/MDTypography"; // NewUser page components import FormField from "layouts/pages/users/new-user/components/FormField"; -import { QFrontendStepMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData"; +import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData"; interface Props { formLabel?: string; @@ -32,7 +32,7 @@ interface Props { function QDynamicForm(props: Props): JSX.Element { - const { formData, formLabel, primaryKeyId } = props; + const {formData, formLabel, primaryKeyId} = props; const { formFields, values, errors, touched, } = formData; diff --git a/src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts b/src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts index d553957..1f1bad1 100644 --- a/src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts +++ b/src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts @@ -23,8 +23,8 @@ 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 {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData"; +import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType"; /******************************************************************************* ** Meta-data to represent a single field in a table. @@ -42,23 +42,23 @@ class DynamicFormUtils let fieldType: string; switch (field.type.toString()) { - case QFieldType.DECIMAL: - case QFieldType.INTEGER: - fieldType = "number"; - break; - case QFieldType.DATE_TIME: - fieldType = "datetime-local"; - break; - case QFieldType.PASSWORD: - case QFieldType.TIME: - case QFieldType.DATE: - fieldType = field.type.toString(); - break; - case QFieldType.TEXT: - case QFieldType.HTML: - case QFieldType.STRING: - default: - fieldType = "text"; + case QFieldType.DECIMAL: + case QFieldType.INTEGER: + fieldType = "number"; + break; + case QFieldType.DATE_TIME: + fieldType = "datetime-local"; + break; + case QFieldType.PASSWORD: + case QFieldType.TIME: + case QFieldType.DATE: + fieldType = field.type.toString(); + break; + case QFieldType.TEXT: + case QFieldType.HTML: + case QFieldType.STRING: + default: + fieldType = "text"; } let label = field.label ? field.label : field.name; @@ -78,7 +78,7 @@ class DynamicFormUtils } }); - return { dynamicFormFields, formValidations }; + return {dynamicFormFields, formValidations}; } } diff --git a/src/qqq/components/buttons/AuthenticationButton/index.tsx b/src/qqq/components/buttons/AuthenticationButton/index.tsx new file mode 100644 index 0000000..6696503 --- /dev/null +++ b/src/qqq/components/buttons/AuthenticationButton/index.tsx @@ -0,0 +1,17 @@ +import {useAuth0} from "@auth0/auth0-react"; +import React from "react"; +import {Button} from "@mui/material"; + +function AuthenticationButton() +{ + const {loginWithRedirect, logout, isAuthenticated} = useAuth0(); + + if (isAuthenticated) + { + return ; + } + + return ; +} + +export default AuthenticationButton; diff --git a/src/qqq/pages/entity-edit/index.tsx b/src/qqq/pages/entity-edit/index.tsx index 1a80868..ffe4155 100644 --- a/src/qqq/pages/entity-edit/index.tsx +++ b/src/qqq/pages/entity-edit/index.tsx @@ -21,12 +21,12 @@ import MDBox from "components/MDBox"; // Settings page components import BaseLayout from "qqq/components/BaseLayout"; -import { useParams } from "react-router-dom"; +import {useParams} from "react-router-dom"; import EntityForm from "qqq/components/EntityForm"; function EntityEdit(): JSX.Element { - const { id } = useParams(); + const {id} = useParams(); return ( diff --git a/src/qqq/pages/entity-view/components/ViewContents/index.tsx b/src/qqq/pages/entity-view/components/ViewContents/index.tsx index a8fbeb8..ff1db94 100644 --- a/src/qqq/pages/entity-view/components/ViewContents/index.tsx +++ b/src/qqq/pages/entity-view/components/ViewContents/index.tsx @@ -11,8 +11,8 @@ */ // react components -import { useParams, useSearchParams } from "react-router-dom"; -import React, { useReducer, useState } from "react"; +import {useParams, useSearchParams} from "react-router-dom"; +import React, {useReducer, useState} from "react"; // @material-ui core components import Card from "@mui/material/Card"; @@ -26,8 +26,8 @@ import DialogActions from "@mui/material/DialogActions"; import Button from "@mui/material/Button"; // qqq imports -import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController"; -import { QProcessMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData"; +import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController"; +import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData"; // Material Dashboard 2 PRO React TS components import MDBox from "components/MDBox"; @@ -47,9 +47,9 @@ interface Props id: string; } -function ViewContents({ id }: Props): JSX.Element +function ViewContents({id}: Props): JSX.Element { - const { tableName } = useParams(); + const {tableName} = useParams(); const [asyncLoadInited, setAsyncLoadInited] = useState(false); const [nameValues, setNameValues] = useState([] as JSX.Element[]); @@ -178,7 +178,7 @@ function ViewContents({ id }: Props): JSX.Element ) : ("") } - + diff --git a/src/qqq/pages/process-run/index.tsx b/src/qqq/pages/process-run/index.tsx index e6216a6..1e7f4c4 100644 --- a/src/qqq/pages/process-run/index.tsx +++ b/src/qqq/pages/process-run/index.tsx @@ -13,10 +13,10 @@ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ -import { useEffect, useState } from "react"; +import {useEffect, useState} from "react"; // formik components -import { Formik, Form } from "formik"; +import {Formik, Form} from "formik"; // @mui material components import Grid from "@mui/material/Grid"; @@ -36,15 +36,15 @@ import Footer from "examples/Footer"; // ProcessRun layout schemas for form and form fields import * as Yup from "yup"; -import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController"; -import { QFieldMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData"; -import { QFrontendStepMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData"; -import { useLocation, useParams } from "react-router-dom"; +import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController"; +import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData"; +import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData"; +import {useLocation, useParams} from "react-router-dom"; import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils"; -import { QJobStarted } from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted"; -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 {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 { DataGrid, GridColDef, GridRowParams, GridRowsProp, } from "@mui/x-data-grid"; @@ -148,7 +148,7 @@ const qController = new QController(""); function ProcessRun(): JSX.Element { - const { processName } = useParams(); + const {processName} = useParams(); const [processUUID, setProcessUUID] = useState(null as string); const [jobUUID, setJobUUID] = useState(null as string); const [activeStepIndex, setActiveStepIndex] = useState(0); @@ -238,7 +238,7 @@ function ProcessRun(): JSX.Element /////////////////////////////////////////////////// if (activeStep.formFields) { - const { dynamicFormFields, formValidations } = DynamicFormUtils.getFormData( + const {dynamicFormFields, formValidations} = DynamicFormUtils.getFormData( activeStep.formFields, ); @@ -271,7 +271,7 @@ function ProcessRun(): JSX.Element const newRecordConfig = buildNewRecordConfig(); activeStep.recordListFields.forEach((field) => { - newRecordConfig.columns.push({ field: field.name, headerName: field.label, width: 200 }); + newRecordConfig.columns.push({field: field.name, headerName: field.label, width: 200}); }); setRecordConfig(newRecordConfig); setNeedRecords(true); @@ -388,7 +388,7 @@ function ProcessRun(): JSX.Element setNeedInitialLoad(false); (async () => { - const { search } = useLocation(); + const {search} = useLocation(); const urlSearchParams = new URLSearchParams(search); let queryStringForInit = null; if (urlSearchParams.get("recordIds")) @@ -466,7 +466,7 @@ function ProcessRun(): JSX.Element container justifyContent="center" alignItems="center" - sx={{ height: "100%", mt: 8 }} + sx={{height: "100%", mt: 8}} > (
- + {steps.map((step) => ( diff --git a/src/qqq/utils/QClient.ts b/src/qqq/utils/QClient.ts index c0fee0c..9f46ef1 100644 --- a/src/qqq/utils/QClient.ts +++ b/src/qqq/utils/QClient.ts @@ -19,9 +19,9 @@ * along with this program. If not, see . */ -import { QFieldMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData"; -import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController"; -import { QQueryFilter } from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter"; +import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData"; +import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController"; +import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter"; /******************************************************************************* ** client wrapper of qqq backend diff --git a/src/qqq/utils/QProcessUtils.ts b/src/qqq/utils/QProcessUtils.ts index 170d91f..79bce82 100644 --- a/src/qqq/utils/QProcessUtils.ts +++ b/src/qqq/utils/QProcessUtils.ts @@ -19,8 +19,8 @@ * along with this program. If not, see . */ -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"; +import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance"; /******************************************************************************* ** Utility class for working with QQQ Processes