From 1413e6c8d36d7a39bc12299b8ee222388b860dc7 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Wed, 7 Sep 2022 10:18:11 -0500 Subject: [PATCH] Fix flash of wrong step between steps; support component.values.previewText in QComponentType.HELP_TEXT; minor styles on upload button --- src/qqq/components/QDynamicForm/index.tsx | 35 ++++++++++++--- src/qqq/pages/process-run/index.tsx | 44 ++++++++++++------- .../utils/{QValueUtils.ts => QValueUtils.tsx} | 17 +++++++ 3 files changed, 73 insertions(+), 23 deletions(-) rename src/qqq/utils/{QValueUtils.ts => QValueUtils.tsx} (84%) diff --git a/src/qqq/components/QDynamicForm/index.tsx b/src/qqq/components/QDynamicForm/index.tsx index 34aa5d6..0107ca2 100644 --- a/src/qqq/components/QDynamicForm/index.tsx +++ b/src/qqq/components/QDynamicForm/index.tsx @@ -19,9 +19,12 @@ * along with this program. If not, see . */ +import {colors} from "@mui/material"; +import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; import Grid from "@mui/material/Grid"; import {useFormikContext} from "formik"; -import React from "react"; +import React, {useState} from "react"; import QDynamicFormField from "qqq/components/QDynamicFormField"; import MDBox from "qqq/components/Temporary/MDBox"; import MDTypography from "qqq/components/Temporary/MDTypography"; @@ -44,9 +47,16 @@ function QDynamicForm(props: Props): JSX.Element } = formData; const formikProps = useFormikContext(); + const [fileName, setFileName] = useState(null as string); const fileChanged = (event: React.FormEvent, field: any) => { + setFileName(null) + if(event.currentTarget.files && event.currentTarget.files[0]) + { + setFileName(event.currentTarget.files[0].name) + } + formikProps.setFieldValue(field.name, event.currentTarget.files[0]); }; @@ -82,12 +92,23 @@ function QDynamicForm(props: Props): JSX.Element return ( - ) => fileChanged(event, field)} - /> + + + + + {fileName} + + + {errors[fieldName] && You must select a file to proceed} diff --git a/src/qqq/pages/process-run/index.tsx b/src/qqq/pages/process-run/index.tsx index 724b47e..e248e2a 100644 --- a/src/qqq/pages/process-run/index.tsx +++ b/src/qqq/pages/process-run/index.tsx @@ -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 - - {value} -
- - ))} - - ); + return QValueUtils.breakTextIntoLines(value); } return ({value}); @@ -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
{ component.type === QComponentType.HELP_TEXT && ( - - {component.values.text} - + component.values.previewText ? + <> + + + + + + {QValueUtils.breakTextIntoLines(component.values.text)} + + + + : + + {QValueUtils.breakTextIntoLines(component.values.text)} + ) } { @@ -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; diff --git a/src/qqq/utils/QValueUtils.ts b/src/qqq/utils/QValueUtils.tsx similarity index 84% rename from src/qqq/utils/QValueUtils.ts rename to src/qqq/utils/QValueUtils.tsx index c2684a5..be2262f 100644 --- a/src/qqq/utils/QValueUtils.ts +++ b/src/qqq/utils/QValueUtils.tsx @@ -23,6 +23,7 @@ import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QF import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType"; import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord"; import "datejs"; +import React, {Fragment} from "react"; /******************************************************************************* ** Utility class for working with QQQ Values @@ -62,6 +63,22 @@ class QValueUtils return (displayValue); } + + + public static breakTextIntoLines(value: string): JSX.Element + { + return ( + + {value.split(/\n/).map((value: string, index: number) => ( + // eslint-disable-next-line react/no-array-index-key + + {value} +
+ + ))} + + ); + } } export default QValueUtils;