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

QQQ-21 Fixing to use empty validation for empty form; making records properly trigger state change

Browse Source
This commit is contained in:
darin.kelkhoff
2022-07-12 19:28:10 -05:00
parent fd6f07f3e6
commit 26025d282b
1 changed files with 51 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/ */
import { useEffect, useReducer, useState } from "react"; import { useEffect, useState } from "react";
// formik components // formik components
import { Formik, Form } from "formik"; import { Formik, Form } from "formik";
@ -77,9 +77,9 @@ function getDynamicStepContent(
); );
} }
if (!Object.keys(formFields).length) if (step === null)
{ {
// console.log("in getDynamicStepContent. No fields yet, so returning 'loading'"); console.log("in getDynamicStepContent. No step yet, so returning 'loading'");
return <div>Loading...</div>; return <div>Loading...</div>;
} }
@ -104,7 +104,7 @@ function getDynamicStepContent(
)} )}
{step.recordListFields && ( {step.recordListFields && (
<div> <div>
<b>Records:</b> <b>Records</b>
{" "} {" "}
<br /> <br />
<MDBox height="100%"> <MDBox height="100%">
@ -164,7 +164,8 @@ function ProcessRun(): JSX.Element
const [formId, setFormId] = useState(""); const [formId, setFormId] = useState("");
const [formFields, setFormFields] = useState({}); const [formFields, setFormFields] = useState({});
const [initialValues, setInitialValues] = useState({}); const [initialValues, setInitialValues] = useState({});
const [validations, setValidations] = useState({}); const [validationScheme, setValidationScheme] = useState(null);
const [validationFunction, setValidationFunction] = useState(null);
const [needToCheckJobStatus, setNeedToCheckJobStatus] = useState(false); const [needToCheckJobStatus, setNeedToCheckJobStatus] = useState(false);
const [needRecords, setNeedRecords] = useState(false); const [needRecords, setNeedRecords] = useState(false);
const [processError, setProcessError] = useState(null as string); const [processError, setProcessError] = useState(null as string);
@ -174,6 +175,21 @@ function ProcessRun(): JSX.Element
trace("ProcessRun", true); trace("ProcessRun", true);
function buildNewRecordConfig()
{
const newRecordConfig = {} as any;
newRecordConfig.pageNo = 1;
newRecordConfig.rowsPerPage = 20;
newRecordConfig.columns = [] as GridColDef[];
newRecordConfig.rows = [];
newRecordConfig.totalRecords = 0;
newRecordConfig.handleRowsPerPageChange = null;
newRecordConfig.handlePageChange = null;
newRecordConfig.handleRowClick = null;
newRecordConfig.loading = true;
return (newRecordConfig);
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////
// handle moving to another step in the process - e.g., after the backend told us what screen to show next. // // handle moving to another step in the process - e.g., after the backend told us what screen to show next. //
////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////
@ -234,36 +250,36 @@ function ProcessRun(): JSX.Element
setFormFields(dynamicFormFields); setFormFields(dynamicFormFields);
setInitialValues(initialValues); setInitialValues(initialValues);
setValidations(Yup.object().shape(formValidations)); setValidationScheme(Yup.object().shape(formValidations));
setValidationFunction(null);
}
else
{
/////////////////////////////////////////////////////////////////////////
// if there are no form fields, set a null validationScheme (Yup), and //
// instead use a validation function that always says true. //
/////////////////////////////////////////////////////////////////////////
setValidationScheme(null);
setValidationFunction(() => true);
} }
////////////////////////////////////////////////////////////////////////////////////////////
// if there are fields to load, build a record config, and set the needRecords state flag //
////////////////////////////////////////////////////////////////////////////////////////////
if (activeStep.recordListFields) if (activeStep.recordListFields)
{ {
const newRecordConfig = {} as any; const newRecordConfig = buildNewRecordConfig();
newRecordConfig.pageNo = 1;
newRecordConfig.rowsPerPage = 20;
newRecordConfig.columns = [] as GridColDef[];
newRecordConfig.rows = [];
newRecordConfig.totalRecords = 0;
newRecordConfig.handleRowsPerPageChange = null;
newRecordConfig.handlePageChange = null;
newRecordConfig.handleRowClick = null;
newRecordConfig.loading = true;
activeStep.recordListFields.forEach((field) => activeStep.recordListFields.forEach((field) =>
{ {
newRecordConfig.columns.push({ field: field.name, headerName: field.label }); newRecordConfig.columns.push({ field: field.name, headerName: field.label, width: 200 });
}); });
setRecordConfig(newRecordConfig); setRecordConfig(newRecordConfig);
setNeedRecords(true); setNeedRecords(true);
} }
// console.log(`in updateActiveStep: formFields ${JSON.stringify(dynamicFormFields)}`);
// console.log(`in updateActiveStep: initialValues ${JSON.stringify(initialValues)}`);
} }
}, [newStep]); }, [newStep]);
// when we need to load records, do so, async
useEffect(() => useEffect(() =>
{ {
if (needRecords) if (needRecords)
@ -277,8 +293,14 @@ function ProcessRun(): JSX.Element
recordConfig.rowsPerPage * (recordConfig.pageNo - 1), recordConfig.rowsPerPage * (recordConfig.pageNo - 1),
recordConfig.rowsPerPage, recordConfig.rowsPerPage,
); );
recordConfig.loading = false;
recordConfig.rows = []; /////////////////////////////////////////////////////////////////////////////////////////
// re-construct the recordConfig object, so the setState call triggers a new rendering //
/////////////////////////////////////////////////////////////////////////////////////////
const newRecordConfig = buildNewRecordConfig();
newRecordConfig.loading = false;
newRecordConfig.columns = recordConfig.columns;
newRecordConfig.rows = [];
let rowId = 0; let rowId = 0;
records.forEach((record) => records.forEach((record) =>
{ {
@ -287,11 +309,11 @@ function ProcessRun(): JSX.Element
{ {
row.id = ++rowId; row.id = ++rowId;
} }
recordConfig.rows.push(row); newRecordConfig.rows.push(row);
}); });
// todo count? // todo count?
recordConfig.totalRecords = records.length; newRecordConfig.totalRecords = records.length;
setRecordConfig(recordConfig); setRecordConfig(newRecordConfig);
})(); })();
} }
}, [needRecords]); }, [needRecords]);
@ -450,7 +472,8 @@ function ProcessRun(): JSX.Element
<Formik <Formik
enableReinitialize enableReinitialize
initialValues={initialValues} initialValues={initialValues}
validationSchema={validations} validationSchema={validationScheme}
validation={validationFunction}
onSubmit={handleSubmit} onSubmit={handleSubmit}
> >
{({ {({