From 30f2da17a4754e047f2dfe02039d599fd5fd65ef Mon Sep 17 00:00:00 2001 From: Tim Chamberlain Date: Tue, 4 Oct 2022 12:38:53 -0500 Subject: [PATCH] SPRINT-12: added skeletons throughout widgets, fixed page header under breadcrumb, misc other improvements --- src/App.tsx | 55 +++-- src/QContext.tsx | 36 +++ src/qqq/components/DashboardWidgets.tsx | 218 +++++++++--------- src/qqq/components/EntityForm/index.tsx | 27 +-- src/qqq/components/QBreadcrumbs/index.tsx | 10 +- .../components/QDynamicFormField/index.tsx | 16 +- src/qqq/pages/app-home/index.tsx | 13 +- .../pages/dashboards/CarrierPerformance.tsx | 6 +- src/qqq/pages/dashboards/Overview.tsx | 6 +- .../Widgets/MultiStatisticsCard.tsx | 31 ++- .../pages/dashboards/Widgets/StepperCard.tsx | 22 +- .../pages/dashboards/Widgets/TableCard.tsx | 42 +++- src/qqq/pages/entity-list/index.tsx | 39 ++-- .../components/ViewContents/index.tsx | 5 +- src/qqq/pages/process-run/ReportRun.tsx | 21 +- src/qqq/pages/process-run/index.tsx | 29 +-- 16 files changed, 353 insertions(+), 223 deletions(-) create mode 100644 src/QContext.tsx diff --git a/src/App.tsx b/src/App.tsx index 13e32f8..ca49665 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -36,6 +36,7 @@ import {Md5} from "ts-md5/dist/md5"; import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "context"; import Settings from "layouts/pages/account/settings"; import ProfileOverview from "layouts/pages/profile/profile-overview"; +import QContext from "QContext"; import Sidenav from "qqq/components/Sidenav"; import Configurator from "qqq/components/Temporary/Configurator"; import MDAvatar from "qqq/components/Temporary/MDAvatar"; @@ -469,31 +470,39 @@ export default function App() ); + const [pageHeader, setPageHeader] = useState(""); + return ( + appRoutes && ( - - - {layout === "dashboard" && ( - <> - - - - )} - - } /> - {appRoutes && getRoutes(appRoutes)} - {getRoutes(getStaticRoutes())} - {profileRoutes && getRoutes([profileRoutes])} - - + setPageHeader(header) + }}> + + + {layout === "dashboard" && ( + <> + + + + )} + + } /> + {appRoutes && getRoutes(appRoutes)} + {getRoutes(getStaticRoutes())} + {profileRoutes && getRoutes([profileRoutes])} + + + ) ); } diff --git a/src/QContext.tsx b/src/QContext.tsx new file mode 100644 index 0000000..686531b --- /dev/null +++ b/src/QContext.tsx @@ -0,0 +1,36 @@ +/* + * 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 . + */ + +import {createContext} from "react"; + + +interface QContext +{ + pageHeader: string; + setPageHeader?: (header: string) => void; +} + +const defaultState = { + pageHeader: "" +}; + +const QContext = createContext(defaultState); +export default QContext; diff --git a/src/qqq/components/DashboardWidgets.tsx b/src/qqq/components/DashboardWidgets.tsx index f18c7a3..29351ca 100644 --- a/src/qqq/components/DashboardWidgets.tsx +++ b/src/qqq/components/DashboardWidgets.tsx @@ -20,6 +20,7 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance"; import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData"; +import {Skeleton} from "@mui/material"; import Card from "@mui/material/Card"; import Grid from "@mui/material/Grid"; import parse from "html-react-parser"; @@ -73,6 +74,7 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey}: Props): JSX.El return; } + forceUpdate(); for (let i = 0; i < widgetMetaDataList.length; i++) { widgetData[i] = {}; @@ -100,17 +102,19 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey}: Props): JSX.El }; const widgetCount = widgetMetaDataList ? widgetMetaDataList.length : 0; + console.log(JSON.stringify(widgetMetaDataList)); + console.log(widgetCount); return ( widgetCount > 0 ? ( - - - { - widgetMetaDataList.map((widgetMetaData, i) => ( - - { - widgetMetaData.type === "table" && ( - widgetData && widgetData[i] ? ( + + { + widgetMetaDataList.map((widgetMetaData, i) => ( + + { + widgetMetaData.type === "table" && ( + widgetData && widgetData[i] ? ( + - ) : null - ) - } - { - widgetMetaData.type === "stepper" && ( - - - + + ) : null + ) + } + { + widgetMetaData.type === "stepper" && ( + + + + { + widgetMetaData.label && ( + + {widgetMetaData.label} + + ) + } + + + + + ) + } + { + widgetMetaData.type === "html" && ( + + + + + {widgetMetaData.label} + + { - widgetMetaData.label && ( - - {widgetMetaData.label} - - ) + widgetData && widgetData[i] && widgetData[i].html ? ( + parse(widgetData[i].html) + ) : } - - - + + + + + ) + } + { + widgetMetaData.type === "multiStatistics" && ( + + ) + } + { + widgetMetaData.type === "quickSightChart" && ( + widgetData && widgetData[i] ? ( + + - ) - } - { - widgetMetaData.type === "html" && ( - - - - - {widgetMetaData.label} - - - { - widgetData && widgetData[i] && widgetData[i].html && ( - parse(widgetData[i].html) - ) - } - - - - - ) - } - { - widgetMetaData.type === "multiStatistics" && ( - widgetData && widgetData[i] ? ( - + - ) : null - ) - } - - )) - } - - - { - widgetMetaDataList.map((widgetMetaData, i) => ( - - { - widgetMetaData.type === "quickSightChart" && ( - widgetData && widgetData[i] ? ( - - - - ) : null - ) - } - { - widgetMetaData.type === "barChart" && ( - widgetData && widgetData[i] ? ( - - - - ) : null - ) - } - { - widgetMetaData.type === "lineChart" && ( - widgetData && widgetData[i] ? ( - - - - { - widgetData[i].lineChartData.datasets.map((dataSet: any) => ( - - )) - } - - + + ) : null + ) + } + { + widgetMetaData.type === "lineChart" && ( + widgetData && widgetData[i] ? ( + + + + { + widgetData[i].lineChartData.datasets.map((dataSet: any) => ( + + )) + } - )} - chart={widgetData[i].lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }} - /> - - ) : null - ) - } - - )) - } - + + + )} + chart={widgetData[i].lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }} + /> + + ) : null + ) + } + + )) + } ) : null ); diff --git a/src/qqq/components/EntityForm/index.tsx b/src/qqq/components/EntityForm/index.tsx index d389205..a6689ef 100644 --- a/src/qqq/components/EntityForm/index.tsx +++ b/src/qqq/components/EntityForm/index.tsx @@ -29,9 +29,10 @@ import Card from "@mui/material/Card"; import Grid from "@mui/material/Grid"; import Icon from "@mui/material/Icon"; import {Form, Formik} from "formik"; -import React, {useReducer, useState} from "react"; +import React, {useContext, useReducer, useState} from "react"; import {useLocation, useNavigate, useParams} from "react-router-dom"; import * as Yup from "yup"; +import QContext from "QContext"; import {QCancelButton, QSaveButton} from "qqq/components/QButtons"; import QDynamicForm from "qqq/components/QDynamicForm"; import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils"; @@ -54,6 +55,7 @@ function EntityForm({table, id}: Props): JSX.Element const tableNameParam = useParams().tableName; const tableName = table === null ? tableNameParam : table.name; + const [formTitle, setFormTitle] = useState(""); const [validations, setValidations] = useState({}); const [initialValues, setInitialValues] = useState({} as { [key: string]: string }); const [formFields, setFormFields] = useState(null as Map); @@ -69,6 +71,8 @@ function EntityForm({table, id}: Props): JSX.Element const [tableSections, setTableSections] = useState(null as QTableSection[]); const [, forceUpdate] = useReducer((x) => x + 1, 0); + const {pageHeader, setPageHeader} = useContext(QContext); + const navigate = useNavigate(); const location = useLocation(); @@ -79,7 +83,6 @@ function EntityForm({table, id}: Props): JSX.Element formData.touched = touched; formData.errors = errors; formData.formFields = {}; - console.log(formFields); for (let i = 0; i < formFields.length; i++) { formData.formFields[formFields[i].name] = formFields[i]; @@ -121,6 +124,8 @@ function EntityForm({table, id}: Props): JSX.Element { const record = await qController.get(tableName, id); setRecord(record); + setFormTitle(`Edit ${tableMetaData?.label}: ${record?.recordLabel}`); + setPageHeader(`Edit ${tableMetaData?.label}: ${record?.recordLabel}`); tableMetaData.fields.forEach((fieldMetaData, key) => { @@ -129,6 +134,11 @@ function EntityForm({table, id}: Props): JSX.Element setFormValues(formValues); } + else + { + setFormTitle(`Creating New ${tableMetaData?.label}`); + setPageHeader(`Creating New ${tableMetaData?.label}`); + } setInitialValues(initialValues); ///////////////////////////////////////////////////////// @@ -255,19 +265,6 @@ function EntityForm({table, id}: Props): JSX.Element })(); }; - let formTitle = ""; - if (tableMetaData) - { - if (id == null) - { - formTitle = `Create new ${tableMetaData?.label}`; - } - else if (record != null) - { - formTitle = `Edit ${tableMetaData?.label}: ${record?.recordLabel}`; - } - } - const formId = id != null ? `edit-${tableMetaData?.name}-form` : `create-${tableMetaData?.name}-form`; return ( diff --git a/src/qqq/components/QBreadcrumbs/index.tsx b/src/qqq/components/QBreadcrumbs/index.tsx index d9eb1cf..9de9cfe 100644 --- a/src/qqq/components/QBreadcrumbs/index.tsx +++ b/src/qqq/components/QBreadcrumbs/index.tsx @@ -21,8 +21,9 @@ import {Breadcrumbs as MuiBreadcrumbs} from "@mui/material"; import Icon from "@mui/material/Icon"; -import {ReactNode} from "react"; +import {ReactNode, useContext} from "react"; import {Link} from "react-router-dom"; +import QContext from "QContext"; import MDBox from "qqq/components/Temporary/MDBox"; import MDTypography from "qqq/components/Temporary/MDTypography"; @@ -56,11 +57,10 @@ export const routeToLabel = (route: string): string => return (label); }; -function QBreadcrumbs({ - icon, title, route, light, -}: Props): JSX.Element +function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element { const routes: string[] | any = route.slice(0, -1); + const {pageHeader, setPageHeader} = useContext(QContext); let pageTitle = "Nutrifresh One"; const fullRoutes: string[] = []; @@ -118,7 +118,7 @@ function QBreadcrumbs({ color={light ? "white" : "dark"} noWrap > - {routeToLabel(title)} + {pageHeader} ); diff --git a/src/qqq/components/QDynamicFormField/index.tsx b/src/qqq/components/QDynamicFormField/index.tsx index f1016e6..169952f 100644 --- a/src/qqq/components/QDynamicFormField/index.tsx +++ b/src/qqq/components/QDynamicFormField/index.tsx @@ -38,9 +38,11 @@ interface Props value: any; type: string; isEditable?: boolean; + [key: string]: any; + bulkEditMode?: boolean; - bulkEditSwitchChangeHandler?: any + bulkEditSwitchChangeHandler?: any; } function QDynamicFormField({ @@ -71,11 +73,21 @@ function QDynamicFormField({ inputProps.endAdornment = %; } + // @ts-ignore + const handleOnWheel = (e) => + { + if (type.toLowerCase().match("number")) + { + e.target.blur(); + } + }; + + const field = () => (type == "checkbox" ? : <> - + {!isDisabled &&
} diff --git a/src/qqq/pages/app-home/index.tsx b/src/qqq/pages/app-home/index.tsx index 58a6a8e..fd17fc6 100644 --- a/src/qqq/pages/app-home/index.tsx +++ b/src/qqq/pages/app-home/index.tsx @@ -29,8 +29,9 @@ import {Icon} from "@mui/material"; import Card from "@mui/material/Card"; import Divider from "@mui/material/Divider"; import Grid from "@mui/material/Grid"; -import React, {useEffect, useState} from "react"; +import React, {useContext, useEffect, useState} from "react"; import {Link, useLocation} from "react-router-dom"; +import QContext from "QContext"; import BaseLayout from "qqq/components/BaseLayout"; import DashboardWidgets from "qqq/components/DashboardWidgets"; import ProcessLinkCard from "qqq/components/ProcessLinkCard"; @@ -57,6 +58,8 @@ function AppHome({app}: Props): JSX.Element const [updatedTableCounts, setUpdatedTableCounts] = useState(new Date()); const [widgets, setWidgets] = useState([] as any[]); + const {pageHeader, setPageHeader} = useContext(QContext); + const location = useLocation(); useEffect(() => @@ -70,6 +73,8 @@ function AppHome({app}: Props): JSX.Element useEffect(() => { + setPageHeader(app.label); + if (!qInstance) { return; @@ -153,11 +158,9 @@ function AppHome({app}: Props): JSX.Element return ( - + {app.widgets && ( - - - + )} { diff --git a/src/qqq/pages/dashboards/CarrierPerformance.tsx b/src/qqq/pages/dashboards/CarrierPerformance.tsx index e47801e..10ab92a 100644 --- a/src/qqq/pages/dashboards/CarrierPerformance.tsx +++ b/src/qqq/pages/dashboards/CarrierPerformance.tsx @@ -24,7 +24,8 @@ import {Icon} from "@mui/material"; import Grid from "@mui/material/Grid"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; -import React, {useEffect, useState} from "react"; +import React, {useContext, useEffect, useState} from "react"; +import QContext from "QContext"; import DashboardLayout from "qqq/components/DashboardLayout"; import Footer from "qqq/components/Footer"; import Navbar from "qqq/components/Navbar"; @@ -115,12 +116,15 @@ function CarrierPerformance(): JSX.Element const [qInstance, setQInstance] = useState(null as QInstance); const [dataLoaded, setDataLoaded] = useState(false); + const {pageHeader, setPageHeader} = useContext(QContext); ////////////////////////// // load meta data first // ////////////////////////// useEffect(() => { + setPageHeader("Carrier Performance"); + (async () => { const newQInstance = await qController.loadMetaData(); diff --git a/src/qqq/pages/dashboards/Overview.tsx b/src/qqq/pages/dashboards/Overview.tsx index 77ab9cd..62a42f2 100644 --- a/src/qqq/pages/dashboards/Overview.tsx +++ b/src/qqq/pages/dashboards/Overview.tsx @@ -23,7 +23,8 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan import Grid from "@mui/material/Grid"; import Icon from "@mui/material/Icon"; import Tooltip from "@mui/material/Tooltip"; -import {useEffect, useState} from "react"; +import {useContext, useEffect, useState} from "react"; +import QContext from "QContext"; import DashboardLayout from "qqq/components/DashboardLayout"; import Footer from "qqq/components/Footer"; import Navbar from "qqq/components/Navbar"; @@ -66,6 +67,7 @@ function Overview(): JSX.Element const [warehouseData, setWarehouseData] = useState([] as LocationCardData[]); const [qInstance, setQInstance] = useState(null as QInstance); + const {pageHeader, setPageHeader} = useContext(QContext); ////////////////////////// @@ -73,6 +75,8 @@ function Overview(): JSX.Element ////////////////////////// useEffect(() => { + setPageHeader("Overview"); + (async () => { const newQInstance = await qController.loadMetaData(); diff --git a/src/qqq/pages/dashboards/Widgets/MultiStatisticsCard.tsx b/src/qqq/pages/dashboards/Widgets/MultiStatisticsCard.tsx index b52569a..8486c46 100644 --- a/src/qqq/pages/dashboards/Widgets/MultiStatisticsCard.tsx +++ b/src/qqq/pages/dashboards/Widgets/MultiStatisticsCard.tsx @@ -19,6 +19,7 @@ * along with this program. If not, see . */ +import {Skeleton} from "@mui/material"; import Card from "@mui/material/Card"; import Divider from "@mui/material/Divider"; import Grid from "@mui/material/Grid"; @@ -76,7 +77,7 @@ function MultiStatisticsCard({title, data}: Props): JSX.Element { - data && data.statisticsGroupData && ( + data && data.statisticsGroupData ? ( data.statisticsGroupData.map((statisticsGroup, i1) => @@ -112,6 +113,34 @@ function MultiStatisticsCard({title, data}: Props): JSX.Element ) + ) : ( + Array(4).fill(0).map((_, i) => + + + + + pending + + + + + + + + + + + + + + + + + + + + + ) ) } diff --git a/src/qqq/pages/dashboards/Widgets/StepperCard.tsx b/src/qqq/pages/dashboards/Widgets/StepperCard.tsx index 7cb2d61..748f649 100644 --- a/src/qqq/pages/dashboards/Widgets/StepperCard.tsx +++ b/src/qqq/pages/dashboards/Widgets/StepperCard.tsx @@ -65,11 +65,7 @@ function StepperCard({data}: Props): JSX.Element marginTop: "9px", marginRight: "30px", marginLeft: "30px", - }, - "& .MuiStepConnector-completed": - { - color: "red !important" - } + } })(StepConnector); console.log(`data ${JSON.stringify(data)}`); @@ -132,7 +128,21 @@ function StepperCard({data}: Props): JSX.Element )) ) : ( - + + Array(5).fill(0).map((_, i) => + + + } sx={{ + color: "#ced4da", + fontSize: "35px", + "& .MuiStepLabel-label.MuiStepLabel-alternativeLabel": + { + color: "#ced4da !important", + } + }}> + + + ) ) } diff --git a/src/qqq/pages/dashboards/Widgets/TableCard.tsx b/src/qqq/pages/dashboards/Widgets/TableCard.tsx index 6792e7f..6fe5c5b 100644 --- a/src/qqq/pages/dashboards/Widgets/TableCard.tsx +++ b/src/qqq/pages/dashboards/Widgets/TableCard.tsx @@ -24,10 +24,17 @@ import Card from "@mui/material/Card"; import Grid from "@mui/material/Grid"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableContainer from "@mui/material/TableContainer"; +import TableRow from "@mui/material/TableRow"; import parse from "html-react-parser"; import React, {useEffect, useState} from "react"; import {NavLink} from "react-router-dom"; +import DefaultCell from "layouts/dashboards/sales/components/DefaultCell"; import DataTable, {TableDataInput} from "qqq/components/Temporary/DataTable"; +import DataTableBodyCell from "qqq/components/Temporary/DataTable/DataTableBodyCell"; +import DataTableHeadCell from "qqq/components/Temporary/DataTable/DataTableHeadCell"; import MDBox from "qqq/components/Temporary/MDBox"; import MDTypography from "qqq/components/Temporary/MDTypography"; @@ -175,17 +182,30 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt ) : ( - - - - - - - + + + + + {Array(8).fill(0).map((_, i) => + + + + )} + + + + {Array(5).fill(0).map((_, i) => + + {Array(8).fill(0).map((_, j) => + + + + )} + + )} + +
+ ) } diff --git a/src/qqq/pages/entity-list/index.tsx b/src/qqq/pages/entity-list/index.tsx index d538614..a9dc386 100644 --- a/src/qqq/pages/entity-list/index.tsx +++ b/src/qqq/pages/entity-list/index.tsx @@ -57,8 +57,9 @@ import { MuiEvent } from "@mui/x-data-grid-pro"; import {GridFilterOperator} from "@mui/x-data-grid/models/gridFilterOperator"; -import React, {useCallback, useEffect, useReducer, useRef, useState} from "react"; +import React, {useCallback, useContext, useEffect, useReducer, useRef, useState} from "react"; import {Link, useNavigate, useParams, useSearchParams} from "react-router-dom"; +import QContext from "QContext"; import DashboardLayout from "qqq/components/DashboardLayout"; import Footer from "qqq/components/Footer"; import Navbar from "qqq/components/Navbar"; @@ -197,6 +198,7 @@ function EntityList({table}: Props): JSX.Element const [queryErrors, setQueryErrors] = useState({} as any); const [receivedQueryErrorTimestamp, setReceivedQueryErrorTimestamp] = useState(new Date()); + const {pageHeader, setPageHeader} = useContext(QContext); const [, forceUpdate] = useReducer((x) => x + 1, 0); @@ -233,6 +235,7 @@ function EntityList({table}: Props): JSX.Element (async () => { const tableMetaData = await qController.loadTableMetaData(tableName); + setPageHeader(tableMetaData.label); //////////////////////////////////////////////////////////////////////////////////////////////// // we need the table meta data to look up the default filter (if it comes from query string), // @@ -263,7 +266,7 @@ function EntityList({table}: Props): JSX.Element // assign a new query id to the query being issued here. then run both the count & query async // // and when they load, store their results associated with this id. // ////////////////////////////////////////////////////////////////////////////////////////////////// - const thisQueryId = latestQueryId + 1 + const thisQueryId = latestQueryId + 1; setLatestQueryId(thisQueryId); console.log(`Issuing query: ${thisQueryId}`); @@ -291,7 +294,7 @@ function EntityList({table}: Props): JSX.Element { errorMessage = error.message; } - else if(error && error.response && error.response.data && error.response.data.error) + else if (error && error.response && error.response.data && error.response.data.error) { errorMessage = error.response.data.error; } @@ -307,7 +310,7 @@ function EntityList({table}: Props): JSX.Element throw error; }); })(); - } + }; /////////////////////////// // display count results // @@ -358,9 +361,9 @@ function EntityList({table}: Props): JSX.Element /////////////////////////// // display query results // /////////////////////////// - useEffect(() => + useEffect(() => { - if(!queryResults[latestQueryId]) + if (!queryResults[latestQueryId]) { /////////////////////////////////////////////////////////////////////////////////////////// // to avoid showing results from an "older" query (e.g., one that was slow, and returned // @@ -382,8 +385,8 @@ function EntityList({table}: Props): JSX.Element const row: any = {}; fields.forEach((field) => { - const value = QValueUtils.getDisplayValue(field, record) - if(typeof value !== "string") + const value = QValueUtils.getDisplayValue(field, record); + if (typeof value !== "string") { columnsToRender[field.name] = true; } @@ -450,15 +453,15 @@ function EntityList({table}: Props): JSX.Element filterOperators = getCustomGridBooleanOperators(); break; default: - // noop - leave as string + // noop - leave as string } } - if(field.hasAdornment(AdornmentType.SIZE)) + if (field.hasAdornment(AdornmentType.SIZE)) { - const sizeAdornment = field.getAdornment(AdornmentType.SIZE) - const width = sizeAdornment.getValue("width") - switch(width) + const sizeAdornment = field.getAdornment(AdornmentType.SIZE); + const width = sizeAdornment.getValue("width"); + switch (width) { case "small": { @@ -482,7 +485,7 @@ function EntityList({table}: Props): JSX.Element } default: { - console.log("Unrecognized size.width adornment value: " + width) + console.log("Unrecognized size.width adornment value: " + width); } } } @@ -496,7 +499,7 @@ function EntityList({table}: Props): JSX.Element filterOperators: filterOperators, }; - if(columnsToRender[field.name]) + if (columnsToRender[field.name]) { column.renderCell = (cellValues: any) => ( (cellValues.value) @@ -811,9 +814,9 @@ function EntityList({table}: Props): JSX.Element // @ts-ignore const defaultLabelDisplayedRows = ({from, to, count}) => { - if(count !== null && count !== undefined) + if (count !== null && count !== undefined) { - if(count === 0) + if (count === 0) { return (loading ? "Counting records..." : "No rows"); } @@ -823,7 +826,7 @@ function EntityList({table}: Props): JSX.Element { return ("Counting records..."); } - } + }; function CustomPagination() { diff --git a/src/qqq/pages/entity-view/components/ViewContents/index.tsx b/src/qqq/pages/entity-view/components/ViewContents/index.tsx index 3a790dd..fcf5fbc 100644 --- a/src/qqq/pages/entity-view/components/ViewContents/index.tsx +++ b/src/qqq/pages/entity-view/components/ViewContents/index.tsx @@ -36,8 +36,9 @@ 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 React, {useEffect, useReducer, useState} from "react"; +import React, {useContext, useEffect, useReducer, useState} from "react"; import {useLocation, useNavigate, useSearchParams} from "react-router-dom"; +import QContext from "QContext"; import DashboardWidgets from "qqq/components/DashboardWidgets"; import {QActionsMenuButton, QDeleteButton, QEditButton} from "qqq/components/QButtons"; import QRecordSidebar from "qqq/components/QRecordSidebar"; @@ -80,6 +81,7 @@ function ViewContents({id, table}: Props): JSX.Element const [actionsMenu, setActionsMenu] = useState(null); const [tableWidgets, setTableWidgets] = useState([] as QWidgetMetaData[]); const [searchParams] = useSearchParams(); + const {pageHeader, setPageHeader} = useContext(QContext); const [, forceUpdate] = useReducer((x) => x + 1, 0); const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget); @@ -126,6 +128,7 @@ function ViewContents({id, table}: Props): JSX.Element ///////////////////// const record = await qController.get(tableName, id); setRecord(record); + setPageHeader(record.recordLabel); /////////////////////////// // load widget meta data // diff --git a/src/qqq/pages/process-run/ReportRun.tsx b/src/qqq/pages/process-run/ReportRun.tsx index b048fa9..0ba0a8d 100644 --- a/src/qqq/pages/process-run/ReportRun.tsx +++ b/src/qqq/pages/process-run/ReportRun.tsx @@ -20,9 +20,9 @@ */ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance"; -import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData"; import {QReportMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QReportMetaData"; -import React, {useEffect, useState} from "react"; +import React, {useContext, useEffect, useState} from "react"; +import QContext from "QContext"; import ProcessRun from "qqq/pages/process-run/index"; import QClient from "qqq/utils/QClient"; @@ -36,10 +36,11 @@ function ReportRun({report}: Props): JSX.Element // const reportNameParam = useParams().reportName; // const processName = process === null ? processNameParam : process.name; const [metaData, setMetaData] = useState(null as QInstance); + const {pageHeader, setPageHeader} = useContext(QContext); useEffect(() => { - if(!metaData) + if (!metaData) { (async () => { @@ -49,18 +50,20 @@ function ReportRun({report}: Props): JSX.Element } }); - if(metaData) + if (metaData) { - console.log(`Report Process name is ${report.processName}`) - const process = metaData.processes.get(report.processName) - console.log(`Process is ${process.name}`) - const defaultProcessValues = {reportName: report.name} + setPageHeader(report.label); + + console.log(`Report Process name is ${report.processName}`); + const process = metaData.processes.get(report.processName); + console.log(`Process is ${process.name}`); + const defaultProcessValues = {reportName: report.name}; return (); } else { // todo - loading? - return (
); + return (
); } } diff --git a/src/qqq/pages/process-run/index.tsx b/src/qqq/pages/process-run/index.tsx index e2e01a8..0915fc5 100644 --- a/src/qqq/pages/process-run/index.tsx +++ b/src/qqq/pages/process-run/index.tsx @@ -31,7 +31,7 @@ import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobEr import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning"; import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted"; import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord"; -import {Button, Icon, CircularProgress, TablePagination} from "@mui/material"; +import {Button, CircularProgress, Icon, TablePagination} from "@mui/material"; import Box from "@mui/material/Box"; import Card from "@mui/material/Card"; import Grid from "@mui/material/Grid"; @@ -41,12 +41,12 @@ import StepLabel from "@mui/material/StepLabel"; import Stepper from "@mui/material/Stepper"; import Typography from "@mui/material/Typography"; import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro"; -import {GoogleOAuthProvider} from "@react-oauth/google"; import FormData from "form-data"; import {Form, Formik} from "formik"; -import React, {useEffect, useState} from "react"; -import {useLocation, useParams, useNavigate} from "react-router-dom"; +import React, {useContext, useEffect, useState} from "react"; +import {useLocation, useNavigate, useParams} from "react-router-dom"; import * as Yup from "yup"; +import QContext from "QContext"; import BaseLayout from "qqq/components/BaseLayout"; import {QCancelButton, QSubmitButton} from "qqq/components/QButtons"; import QDynamicForm from "qqq/components/QDynamicForm"; @@ -102,6 +102,8 @@ function ProcessRun({process, defaultProcessValues}: Props): JSX.Element const [showErrorDetail, setShowErrorDetail] = useState(false); const [showFullHelpText, setShowFullHelpText] = useState(false); + const {pageHeader, setPageHeader} = useContext(QContext); + ////////////////////////////////////////////////////////////////////////////////////////////////////////////// // for setting the processError state - call this function, which will also set the isUserFacingError state // ////////////////////////////////////////////////////////////////////////////////////////////////////////////// @@ -302,7 +304,7 @@ function ProcessRun({process, defaultProcessValues}: Props): JSX.Element component.values.previewText ? <> - @@ -471,17 +473,17 @@ function ProcessRun({process, defaultProcessValues}: Props): JSX.Element { let rs: QFieldMetaData[] = []; - if(activeStep && activeStep.formFields) + if (activeStep && activeStep.formFields) { - for(let i = 0; i 0) + if (Object.keys(dynamicFormFields).length > 0) { /////////////////////////////////////////// // if there are form fields, set them up // @@ -743,7 +746,7 @@ function ProcessRun({process, defaultProcessValues}: Props): JSX.Element const qJobError = lastProcessResponse as QJobError; console.log(`Got an error from the backend... ${qJobError.error} : ${qJobError.userFacingError}`); setJobUUID(null); - if(qJobError.userFacingError) + if (qJobError.userFacingError) { setProcessError(qJobError.userFacingError, true); } @@ -874,9 +877,9 @@ function ProcessRun({process, defaultProcessValues}: Props): JSX.Element return; } - if(defaultProcessValues) + if (defaultProcessValues) { - for(let key in defaultProcessValues) + for (let key in defaultProcessValues) { queryStringPairsForInit.push(`${key}=${encodeURIComponent(defaultProcessValues[key])}`); }