QQQ-21: initial stab at merging some of form parts of create/edit and processes

src/qqq/pages/entity-list/index.tsx

@@ -22,23 +22,24 @@ import Icon from "@mui/material/Icon";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Divider from "@mui/material/Divider";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
-import MDButton from "components/MDButton";
+import Link from "@mui/material/Link";
 
 // Material Dashboard 2 PRO React TS examples components
 import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
 import DashboardNavbar from "examples/Navbars/DashboardNavbar";
 import DataTable from "examples/Tables/DataTable";
 
-// Data
+// QQQ
 import { QProcessMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
-import Link from "@mui/material/Link";
 import { QTableMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import { useParams } from "react-router-dom";
+import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+import MDButton from "components/MDButton";
 import Footer from "../../components/Footer";
 import IdCell from "../../components/EntityForm/components/IdCell";
 

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

@@ -13,7 +13,9 @@
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  */
 
+// react components
 import { useParams } from "react-router-dom";
+import React, { useReducer, useState } from "react";
 
 // @material-ui core components
 import Card from "@mui/material/Card";
@@ -26,17 +28,12 @@ import DialogContentText from "@mui/material/DialogContentText";
 import DialogActions from "@mui/material/DialogActions";
 import Button from "@mui/material/Button";
 
+// qqq imports
+import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
+
 // Material Dashboard 2 PRO React TS components
 import MDBox from "components/MDBox";
 import MDTypography from "components/MDTypography";
-
-// Settings page components
-
-// qqq imports
-import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
-import { QRecord } from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import React, { useReducer, useState } from "react";
-
 import MDButton from "../../../../../components/MDButton";
 
 const qController = new QController("");
@@ -104,20 +101,16 @@ function ViewContents({ id }: Props): JSX.Element {
     setOpen(false);
   };
 
-  /*
   const handleDelete = (event: { preventDefault: () => void }) => {
     event.preventDefault();
-    /*
     (async () => {
       await qController.delete(tableName, id).then(() => {
-        window.location.href = `/${tableName}/list/`;
+        window.location.href = `/${tableName}`;
       });
     })();
-
   };
-     */
 
-  const editPath = `/${tableName}/edit/${id}`;
+  const editPath = `/${tableName}/${id}/edit`;
 
   return (
     <Card id="basic-info" sx={{ overflow: "visible" }}>
@@ -131,7 +124,6 @@ function ViewContents({ id }: Props): JSX.Element {
         <Grid key="tres" container spacing={3}>
           <MDBox ml="auto" mr={3}>
             <MDButton
-              type="submit"
               variant="gradient"
               color="primary"
               size="small"
@@ -153,14 +145,14 @@ function ViewContents({ id }: Props): JSX.Element {
               </DialogContent>
               <DialogActions>
                 <Button onClick={handleClickConfirmClose}>No</Button>
-                <Button onClick={handleClickConfirmClose} autoFocus>
+                <Button onClick={handleDelete} autoFocus>
                   Yes
                 </Button>
               </DialogActions>
             </Dialog>
           </MDBox>
           <MDBox>
-            <MDButton type="submit" variant="gradient" color="dark" size="small">
+            <MDButton variant="gradient" color="dark" size="small">
               <Link href={editPath}>edit {tableMetaData?.label}</Link>
             </MDButton>
           </MDBox>

src/qqq/pages/process-run/index.tsx

@@ -45,6 +45,7 @@ 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 {
@@ -57,7 +58,7 @@ function getDynamicStepContent(stepIndex: number, stepParam: any, formData: any)
     return <div>Loading...</div>;
   }
 
-  return <QDynamicForm formData={formData} step={step} />;
+  return <QDynamicForm formData={formData} formLabel={step.name} />;
 }
 
 const qController = new QController("");
@@ -90,31 +91,23 @@ function ProcessRun(): JSX.Element {
       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) => {
-        formFields[field.name] = {
-          name: field.name,
-          label: field.label,
-          type: "text", // todo better
-          // todo invalidMsg: "Zipcode is not valid (e.g. 70000).",
-        };
-
         // todo - not working - also, needs real value.
         initialValues[field.name] = "Hi";
-
-        // todo - all this based on type and other metadata.
-        //  see src/layouts/pages/users/new-user/schemas/validations.ts
-        validations[field.name] = Yup.string().required(`${field.label} is required.`);
-        // validations[field.name] = Yup.string().optional();
       });
 
-      setFormFields(formFields);
+      setFormFields(dynamicFormFields);
       setInitialValues(initialValues);
-      setValidations(Yup.object().shape(validations));
-      console.log(`in updateActiveStep: formFields ${JSON.stringify(formFields)}`);
+      setValidations(Yup.object().shape(formValidations));
+      console.log(`in updateActiveStep: formFields ${JSON.stringify(dynamicFormFields)}`);
       console.log(`in updateActiveStep: initialValues ${JSON.stringify(initialValues)}`);
     }
   };