mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 21:00:45 +00:00
233 lines
8.5 KiB
TypeScript
233 lines
8.5 KiB
TypeScript
/**
|
|
=========================================================
|
|
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
=========================================================
|
|
|
|
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
|
|
Coded by www.creative-tim.com
|
|
|
|
=========================================================
|
|
|
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
*/
|
|
|
|
import { useReducer, useState } from "react";
|
|
|
|
// formik components
|
|
import { Formik, Form } from "formik";
|
|
|
|
// @mui material components
|
|
import Grid from "@mui/material/Grid";
|
|
import Card from "@mui/material/Card";
|
|
import Stepper from "@mui/material/Stepper";
|
|
import Step from "@mui/material/Step";
|
|
import StepLabel from "@mui/material/StepLabel";
|
|
|
|
// Material Dashboard 2 PRO React TS components
|
|
import MDBox from "components/MDBox";
|
|
import MDButton from "components/MDButton";
|
|
|
|
// Material Dashboard 2 PRO React TS examples components
|
|
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
|
|
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
|
|
import Footer from "examples/Footer";
|
|
|
|
// ProcessRun page components
|
|
import UserInfo from "layouts/pages/users/new-user/components/UserInfo";
|
|
import Address from "layouts/pages/users/new-user/components/Address";
|
|
import Socials from "layouts/pages/users/new-user/components/Socials";
|
|
import Profile from "layouts/pages/users/new-user/components/Profile";
|
|
|
|
// ProcessRun layout schemas for form and form fields
|
|
import * as Yup from "yup";
|
|
import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
|
|
import { QFrontendStepMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
|
|
import { useParams } from "react-router-dom";
|
|
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
|
|
import QDynamicForm from "../../components/QDynamicForm";
|
|
|
|
function getDynamicStepContent(stepIndex: number, stepParam: any, formData: any): JSX.Element {
|
|
const { formFields, values, errors, touched } = formData;
|
|
const { step } = stepParam;
|
|
// console.log(`in getDynamicStepContent: step label ${step?.label}`);
|
|
|
|
if (!Object.keys(formFields).length) {
|
|
console.log("in getDynamicStepContent. No fields yet, so returning 'loading'");
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
return <QDynamicForm formData={formData} formLabel={step.name} />;
|
|
}
|
|
|
|
const qController = new QController("");
|
|
console.log(qController);
|
|
|
|
function ProcessRun(): JSX.Element {
|
|
const { processName } = useParams();
|
|
const [activeStepIndex, setActiveStepIndex] = useState(0);
|
|
const [activeStep, setActiveStep] = useState(null as QFrontendStepMetaData);
|
|
const [steps, setSteps] = useState([] as QFrontendStepMetaData[]);
|
|
const [loadCounter, setLoadCounter] = useState(0);
|
|
const [processMetaData, setProcessMetaData] = useState(null);
|
|
const [formId, setFormId] = useState("");
|
|
const [formFields, setFormFields] = useState({});
|
|
const [initialValues, setInitialValues] = useState({});
|
|
const [validations, setValidations] = useState({});
|
|
// const currentValidation = validations[activeStepIndex];
|
|
const [_, forceUpdate] = useReducer((x) => x + 1, 0);
|
|
const isLastStep = activeStepIndex === steps.length - 1;
|
|
|
|
console.log("In the function");
|
|
|
|
const updateActiveStep = (newIndex: number, steps: QFrontendStepMetaData[]) => {
|
|
console.log(`Steps are: ${steps}`);
|
|
console.log(`Setting step to ${newIndex}`);
|
|
setActiveStepIndex(newIndex);
|
|
|
|
if (steps) {
|
|
const activeStep = steps[newIndex];
|
|
setActiveStep(activeStep);
|
|
setFormId(activeStep.name);
|
|
|
|
const { dynamicFormFields, formValidations } = DynamicFormUtils.getFormData(
|
|
activeStep.formFields
|
|
);
|
|
|
|
const formFields: any = {};
|
|
const initialValues: any = {};
|
|
const validations: any = {};
|
|
|
|
activeStep.formFields.forEach((field) => {
|
|
// todo - not working - also, needs real value.
|
|
initialValues[field.name] = "Hi";
|
|
});
|
|
|
|
setFormFields(dynamicFormFields);
|
|
setInitialValues(initialValues);
|
|
setValidations(Yup.object().shape(formValidations));
|
|
console.log(`in updateActiveStep: formFields ${JSON.stringify(dynamicFormFields)}`);
|
|
console.log(`in updateActiveStep: initialValues ${JSON.stringify(initialValues)}`);
|
|
}
|
|
};
|
|
|
|
const doInitialLoad = async () => {
|
|
console.log("Starting doInitialLoad");
|
|
const processMetaData = await qController.loadProcessMetaData(processName);
|
|
console.log(processMetaData);
|
|
setProcessMetaData(processMetaData);
|
|
setSteps(processMetaData.frontendSteps);
|
|
updateActiveStep(0, processMetaData.frontendSteps);
|
|
console.log("Done with doInitialLoad");
|
|
};
|
|
|
|
if (loadCounter === 0) {
|
|
setLoadCounter(1);
|
|
doInitialLoad();
|
|
}
|
|
|
|
const sleep = (ms: any) =>
|
|
new Promise((resolve) => {
|
|
setTimeout(resolve, ms);
|
|
});
|
|
const handleBack = () => updateActiveStep(activeStepIndex - 1, processMetaData.frontendSteps);
|
|
|
|
const submitForm = async (values: any, actions: any) => {
|
|
await sleep(1000);
|
|
|
|
// eslint-disable-next-line no-alert
|
|
alert(JSON.stringify(values, null, 2));
|
|
|
|
actions.setSubmitting(false);
|
|
actions.resetForm();
|
|
|
|
updateActiveStep(0, processMetaData.frontendSteps);
|
|
};
|
|
|
|
const handleSubmit = (values: any, actions: any) => {
|
|
submitForm(values, actions);
|
|
|
|
// if (isLastStep) {
|
|
// submitForm(values, actions);
|
|
// } else {
|
|
// updateActiveStep(activeStepIndex + 1, processMetaData.frontendSteps);
|
|
// actions.setTouched({});
|
|
// actions.setSubmitting(false);
|
|
// }
|
|
};
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<DashboardNavbar />
|
|
<MDBox py={3} mb={20} height="65vh">
|
|
<Grid container justifyContent="center" alignItems="center" sx={{ height: "100%", mt: 8 }}>
|
|
<Grid item xs={12} lg={8}>
|
|
<Formik
|
|
initialValues={initialValues}
|
|
validationSchema={validations}
|
|
onSubmit={handleSubmit}
|
|
>
|
|
{({ values, errors, touched, isSubmitting }) => (
|
|
<Form id={formId} autoComplete="off">
|
|
<Card sx={{ height: "100%" }}>
|
|
<MDBox mx={2} mt={-3}>
|
|
<Stepper activeStep={activeStepIndex} alternativeLabel>
|
|
{steps.map((step) => (
|
|
<Step key={step.name}>
|
|
<StepLabel>{step.label}</StepLabel>
|
|
</Step>
|
|
))}
|
|
</Stepper>
|
|
</MDBox>
|
|
<MDBox p={3}>
|
|
<MDBox>
|
|
{/***************************************************************************
|
|
** step content - e.g., the appropriate form or other screen for the step **
|
|
***************************************************************************/}
|
|
{getDynamicStepContent(
|
|
activeStepIndex,
|
|
{ step: activeStep },
|
|
{
|
|
values,
|
|
touched,
|
|
formFields,
|
|
errors,
|
|
}
|
|
)}
|
|
{/********************************
|
|
** back &| next/submit buttons **
|
|
********************************/}
|
|
<MDBox mt={2} width="100%" display="flex" justifyContent="space-between">
|
|
{activeStepIndex === 0 ? (
|
|
<MDBox />
|
|
) : (
|
|
<MDButton variant="gradient" color="light" onClick={handleBack}>
|
|
back
|
|
</MDButton>
|
|
)}
|
|
<MDButton
|
|
disabled={isSubmitting}
|
|
type="submit"
|
|
variant="gradient"
|
|
color="dark"
|
|
>
|
|
{isLastStep ? "submit" : "next"}
|
|
</MDButton>
|
|
</MDBox>
|
|
</MDBox>
|
|
</MDBox>
|
|
</Card>
|
|
</Form>
|
|
)}
|
|
</Formik>
|
|
</Grid>
|
|
</Grid>
|
|
</MDBox>
|
|
<Footer />
|
|
</DashboardLayout>
|
|
);
|
|
}
|
|
|
|
export default ProcessRun;
|