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

src/qqq/components/QDynamicForm/index.tsx

@@ -25,29 +25,30 @@ import FormField from "layouts/pages/users/new-user/components/FormField";
 import { QFrontendStepMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
 
 interface Props {
+  formLabel?: string;
   formData: any;
-  step?: QFrontendStepMetaData | undefined;
+  primaryKeyId?: string;
 }
 
 function QDynamicForm(props: Props): JSX.Element {
-  const { formData, step } = props;
+  const { formData, formLabel, primaryKeyId } = props;
   const { formFields, values, errors, touched } = formData;
 
   /*
-    const {
-      firstName: firstNameV,
-      lastName: lastNameV,
-      company: companyV,
-      email: emailV,
-      password: passwordV,
-      repeatPassword: repeatPasswordV,
-    } = values;
-    */
+        const {
+          firstName: firstNameV,
+          lastName: lastNameV,
+          company: companyV,
+          email: emailV,
+          password: passwordV,
+          repeatPassword: repeatPasswordV,
+        } = values;
+        */
 
   return (
     <MDBox>
       <MDBox lineHeight={0}>
-        <MDTypography variant="h5">{step?.label}</MDTypography>
+        <MDTypography variant="h5">{formLabel}</MDTypography>
         {/* TODO - help text
         <MDTypography variant="button" color="text">
           Mandatory information
@@ -60,12 +61,16 @@ function QDynamicForm(props: Props): JSX.Element {
             Object.keys(formFields).length > 0 &&
             Object.keys(formFields).map((fieldName: any) => {
               const field = formFields[fieldName];
+              if (primaryKeyId && fieldName === primaryKeyId) {
+                return null;
+              }
               if (values[fieldName] === undefined) {
                 values[fieldName] = "";
               }
               return (
                 <Grid item xs={12} sm={6} key={fieldName}>
                   <FormField
+                    required={field.isRequired}
                     type={field.type}
                     label={field.label}
                     name={fieldName}
@@ -156,7 +161,8 @@ function QDynamicForm(props: Props): JSX.Element {
 }
 
 QDynamicForm.defaultProps = {
-  step: undefined,
+  formLabel: undefined,
+  primaryKeyId: undefined,
 };
 
 export default QDynamicForm;

src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts

@@ -0,0 +1,75 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import * as Yup from "yup";
+
+import { QFieldMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import { QFieldType } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+
+/*******************************************************************************
+ ** Meta-data to represent a single field in a table.
+ **
+ *******************************************************************************/
+class DynamicFormUtils {
+  public static getFormData(qqqFormFields: QFieldMetaData[]) {
+    const dynamicFormFields: any = {};
+    const formValidations: any = {};
+
+    qqqFormFields.forEach((field) => {
+      let fieldType: string;
+      switch (field.type.toString()) {
+        case QFieldType.DECIMAL:
+        case QFieldType.INTEGER:
+          fieldType = "number";
+          break;
+        case QFieldType.DATE_TIME:
+          fieldType = "datetime-local";
+          break;
+        case QFieldType.PASSWORD:
+        case QFieldType.TIME:
+        case QFieldType.DATE:
+          fieldType = field.type.toString();
+          break;
+        case QFieldType.TEXT:
+        case QFieldType.HTML:
+        case QFieldType.STRING:
+        default:
+          fieldType = "text";
+      }
+
+      dynamicFormFields[field.name] = {
+        name: field.name,
+        label: field.label ? field.label : field.name,
+        isRequired: field.isRequired,
+        type: fieldType,
+        // todo invalidMsg: "Zipcode is not valid (e.g. 70000).",
+      };
+
+      if (field.isRequired) {
+        formValidations[field.name] = Yup.string().required(`${field.label} is required.`);
+      }
+    });
+
+    return { dynamicFormFields, formValidations };
+  }
+}
+
+export default DynamicFormUtils;