QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-17 21:00:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

SPRINT-12: added skeletons throughout widgets, fixed page header under breadcrumb, misc other improvements

Browse Source
This commit is contained in:
Tim Chamberlain
2022-10-04 12:38:53 -05:00
parent e67301dc4b
commit 30f2da17a4
16 changed files with 353 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.tsx
View File

@ -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,8 +470,15 @@ export default function App()
</MDBox>
);
const [pageHeader, setPageHeader] = useState("");
return (
appRoutes && (
<QContext.Provider value={{
pageHeader: pageHeader,
setPageHeader: (header: string) => setPageHeader(header)
}}>
<ThemeProvider theme={theme}>
<CssBaseline />
{layout === "dashboard" && (
@ -494,6 +502,7 @@ export default function App()
{profileRoutes && getRoutes([profileRoutes])}
</Routes>
</ThemeProvider>
</QContext.Provider>
)
);
}

36
src/QContext.tsx Normal file
View File

@ -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 <https://www.gnu.org/licenses/>.
*/
import {createContext} from "react";
interface QContext
{
pageHeader: string;
setPageHeader?: (header: string) => void;
}
const defaultState = {
pageHeader: ""
};
const QContext = createContext<QContext>(defaultState);
export default QContext;

32
src/qqq/components/DashboardWidgets.tsx
View File

@ -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 ? (
<Grid item xs={12} lg={12}>
<Grid container spacing={3}>
<Grid container spacing={3} pb={4}>
{
widgetMetaDataList.map((widgetMetaData, i) => (
<Grid key={`${i}`} item xs={12} lg={12}>
<Grid key={`${i}`} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12}>
{
widgetMetaData.type === "table" && (
widgetData && widgetData[i] ? (
<MDBox>
<TableCard
color="info"
title={widgetMetaData.label}
@ -122,6 +126,7 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey}: Props): JSX.El
dropdownOnChange={handleDropdownOnChange}
widgetIndex={i}
/>
</MDBox>
) : null
)
}
@ -145,17 +150,17 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey}: Props): JSX.El
}
{
widgetMetaData.type === "html" && (
<MDBox pb={3}>
<Card sx={{marginTop: "0px", paddingTop: "0px"}}>
<MDBox>
<Card sx={{alignContents: "stretch", marginTop: "0px", paddingTop: "0px"}}>
<MDBox padding="1rem">
<MDTypography variant="h5" textTransform="capitalize">
{widgetMetaData.label}
</MDTypography>
<MDTypography component="div" variant="button" color="text" fontWeight="light">
{
widgetData && widgetData[i] && widgetData[i].html && (
widgetData && widgetData[i] && widgetData[i].html ? (
parse(widgetData[i].html)
)
) : <Skeleton />
}
</MDTypography>
</MDBox>
@ -165,23 +170,13 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey}: Props): JSX.El
}
{
widgetMetaData.type === "multiStatistics" && (
widgetData && widgetData[i] ? (
<MultiStatisticsCard
color="info"
title={widgetData[i].title}
title={widgetMetaData.label}
data={widgetData[i]}
/>
) : null
)
}
</Grid>
))
}
</Grid>
<Grid item xs={12} lg={widgetCount === 1 ? 3 : 6}>
{
widgetMetaDataList.map((widgetMetaData, i) => (
<Grid key={`${i}`} item xs={12} lg={widgetCount === 1 ? 12 : 6}>
{
widgetMetaData.type === "quickSightChart" && (
widgetData && widgetData[i] ? (
@ -233,7 +228,6 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey}: Props): JSX.El
))
}
</Grid>
</Grid>
) : null
);
}

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

@ -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<string, any>);
@ -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 (

10
src/qqq/components/QBreadcrumbs/index.tsx
View File

@ -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}
</MDTypography>
</MDBox>
);

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

@ -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 = <InputAdornment position="end">%</InputAdornment>;
}
// @ts-ignore
const handleOnWheel = (e) =>
{
if (type.toLowerCase().match("number"))
{
e.target.blur();
}
};
const field = () =>
(type == "checkbox" ?
<QBooleanFieldSwitch name={name} label={label} value={value} isDisabled={isDisabled} /> :
<>
<Field {...rest} name={name} type={type} as={MDInput} variant="standard" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled} />
<Field {...rest} onWheel={handleOnWheel} name={name} type={type} as={MDInput} variant="standard" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled} />
<MDBox mt={0.75}>
<MDTypography component="div" variant="caption" color="error" fontWeight="regular">
{!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={name} /></div>}

11
src/qqq/pages/app-home/index.tsx
View File

@ -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 (
<BaseLayout>
<MDBox mt={4}>
<MDBox mt={4} mb={4}>
{app.widgets && (
<Grid container spacing={3}>
<DashboardWidgets widgetMetaDataList={widgets} />
</Grid>
)}
<Grid container spacing={3}>
{

6
src/qqq/pages/dashboards/CarrierPerformance.tsx
View File

@ -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();

6
src/qqq/pages/dashboards/Overview.tsx
View File

@ -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();

31
src/qqq/pages/dashboards/Widgets/MultiStatisticsCard.tsx
View File

@ -19,6 +19,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
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
</Grid>
<Grid container>
{
data && data.statisticsGroupData && (
data && data.statisticsGroupData ? (
data.statisticsGroupData.map((statisticsGroup, i1) =>
<Grid key={`statgroup-${i1}`} item xs={3} lg={3} sx={{textAlign: "center"}}>
<MDBox p={3} pt={3} sx={{alignItems: "center"}}>
@ -112,6 +113,34 @@ function MultiStatisticsCard({title, data}: Props): JSX.Element
</MDBox>
</Grid>
)
) : (
Array(4).fill(0).map((_, i) =>
<Grid key={`item-${i}`} item xs={3} lg={3} sx={{textAlign: "center"}}>
<MDBox p={3} pt={3} sx={{alignItems: "center"}}>
<MDBox>
<MDTypography variant="h6">
<Icon sx={{fontSize: "30px", margin: "5px", color: "grey"}} fontSize="medium">pending</Icon>
</MDTypography>
</MDBox>
<MDBox>
<MDTypography variant="h6">
<Skeleton />
</MDTypography>
<MDTypography variant="subtitle2">
<Skeleton />
</MDTypography>
</MDBox>
<Divider sx={{margin: "10px"}}></Divider>
<MDBox sx={{alignItems: "center"}}>
<MDBox key={`stat-${i}`}>
<MDTypography variant="subtitle2">
<Skeleton />
</MDTypography>
</MDBox>
</MDBox>
</MDBox>
</Grid>
)
)
}
</Grid>

20
src/qqq/pages/dashboards/Widgets/StepperCard.tsx
View File

@ -65,10 +65,6 @@ function StepperCard({data}: Props): JSX.Element
marginTop: "9px",
marginRight: "30px",
marginLeft: "30px",
},
"& .MuiStepConnector-completed":
{
color: "red !important"
}
})(StepConnector);
@ -132,7 +128,21 @@ function StepperCard({data}: Props): JSX.Element
</Step>
))
) : (
<Skeleton width="100%" height="80px" />
Array(5).fill(0).map((_, i) =>
<Step key={`step-${i}`}>
<MDBox>
<StepLabel icon={<Pending />} sx={{
color: "#ced4da",
fontSize: "35px",
"& .MuiStepLabel-label.MuiStepLabel-alternativeLabel":
{
color: "#ced4da !important",
}
}}><Skeleton /></StepLabel>
</MDBox>
</Step>
)
)
}
</Stepper>

40
src/qqq/pages/dashboards/Widgets/TableCard.tsx
View File

@ -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
</MDTypography>
</MDBox>
) : (
<MDBox p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
<MDTypography
variant="subtitle2"
color="secondary"
fontWeight="regular"
>
<Skeleton />
<Skeleton />
<Skeleton />
</MDTypography>
<TableContainer sx={{boxShadow: "none"}}>
<Table>
<MDBox component="thead">
<TableRow key="header">
{Array(8).fill(0).map((_, i) =>
<DataTableHeadCell key={`head-${i}`} sorted={false} width="auto" align="center">
<Skeleton width="100%" />
</DataTableHeadCell>
)}
</TableRow>
</MDBox>
<TableBody>
{Array(5).fill(0).map((_, i) =>
<TableRow sx={{verticalAlign: "top"}} key={`row-${i}`}>
{Array(8).fill(0).map((_, j) =>
<DataTableBodyCell key={`cell-${i}-${j}`} align="center">
<DefaultCell><Skeleton /></DefaultCell>
</DataTableBodyCell>
)}
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
)
}
</MDBox>

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

@ -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}`);
@ -307,7 +310,7 @@ function EntityList({table}: Props): JSX.Element
throw error;
});
})();
}
};
///////////////////////////
// display count results //
@ -382,7 +385,7 @@ function EntityList({table}: Props): JSX.Element
const row: any = {};
fields.forEach((field) =>
{
const value = QValueUtils.getDisplayValue(field, record)
const value = QValueUtils.getDisplayValue(field, record);
if (typeof value !== "string")
{
columnsToRender[field.name] = true;
@ -456,8 +459,8 @@ function EntityList({table}: Props): JSX.Element
if (field.hasAdornment(AdornmentType.SIZE))
{
const sizeAdornment = field.getAdornment(AdornmentType.SIZE)
const width = sizeAdornment.getValue("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);
}
}
}
@ -823,7 +826,7 @@ function EntityList({table}: Props): JSX.Element
{
return ("Counting records...");
}
}
};
function CustomPagination()
{

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

@ -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 //

15
src/qqq/pages/process-run/ReportRun.tsx
View File

@ -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,6 +36,7 @@ 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(() =>
{
@ -51,10 +52,12 @@ function ReportRun({report}: Props): JSX.Element
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 (<ProcessRun process={process} defaultProcessValues={defaultProcessValues} />);
}
else

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

@ -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 //
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
@ -501,6 +503,7 @@ function ProcessRun({process, defaultProcessValues}: Props): JSX.Element
console.log("No process meta data yet, so returning early");
return;
}
setPageHeader(processMetaData.label)
let newIndex = null;
if (typeof newStep === "number")