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

Fix flash of wrong step between steps; support component.values.previewText in QComponentType.HELP_TEXT; minor styles on upload button

Browse Source
This commit is contained in:
darin.kelkhoff
2022-09-07 10:18:11 -05:00
parent c902dde118
commit 1413e6c8d3
3 changed files with 73 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,11 +32,13 @@ import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJob
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 Box from "@mui/material/Box";
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 Typography from "@mui/material/Typography";
import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
import FormData from "form-data";
import {Form, Formik} from "formik";
@ -53,6 +55,7 @@ import MDProgress from "qqq/components/Temporary/MDProgress";
import MDTypography from "qqq/components/Temporary/MDTypography";
import QValidationReview from "qqq/pages/process-run/components/QValidationReview";
import QClient from "qqq/utils/QClient";
import QValueUtils from "qqq/utils/QValueUtils";
import QProcessSummaryResults from "./components/QProcessSummaryResults";
interface Props
@ -92,6 +95,7 @@ function ProcessRun({process}: Props): JSX.Element
null as QJobStarted | QJobComplete | QJobError | QJobRunning,
);
const [showErrorDetail, setShowErrorDetail] = useState(false);
const [showFullHelpText, setShowFullHelpText] = useState(false);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// the validation screen - it can change whether next is actually the final step or not... so, use this state field to track that. //
@ -183,17 +187,7 @@ function ProcessRun({process}: Props): JSX.Element
if (typeof value === "string")
{
return (
<>
{value.split(/\n/).map((value: string, index: number) => (
// eslint-disable-next-line react/no-array-index-key
<Fragment key={index}>
<span>{value}</span>
<br />
</Fragment>
))}
</>
);
return QValueUtils.breakTextIntoLines(value);
}
return (<span>{value}</span>);
@ -204,6 +198,11 @@ function ProcessRun({process}: Props): JSX.Element
setShowErrorDetail(!showErrorDetail);
};
const toggleShowFullHelpText = () =>
{
setShowFullHelpText(!showFullHelpText);
};
////////////////////////////////////////////////////
// generate the main form body content for a step //
////////////////////////////////////////////////////
@ -293,9 +292,24 @@ function ProcessRun({process}: Props): JSX.Element
<div key={index}>
{
component.type === QComponentType.HELP_TEXT && (
<MDTypography variant="button" color="info">
{component.values.text}
</MDTypography>
component.values.previewText ?
<>
<Box mt={1}>
<Button onClick={toggleShowFullHelpText} startIcon={<Icon>{showFullHelpText ? "expand_less" : "expand_more"}</Icon>} sx={{pl: 1}} >
{showFullHelpText ? "Hide " : "Show "}
{component.values.previewText}
</Button>
</Box>
<MDBox mt={1} style={{display: showFullHelpText ? "block" : "none"}}>
<Typography variant="body2" color="info">
{QValueUtils.breakTextIntoLines(component.values.text)}
</Typography>
</MDBox>
</>
:
<MDTypography variant="button" color="info">
{QValueUtils.breakTextIntoLines(component.values.text)}
</MDTypography>
)
}
{
@ -623,8 +637,6 @@ function ProcessRun({process}: Props): JSX.Element
setLastProcessResponse(null);
setRetryMillis(INITIAL_RETRY_MILLIS);
setQJobRunning(null);
if (lastProcessResponse instanceof QJobComplete)
{
const qJobComplete = lastProcessResponse as QJobComplete;