Merged feature/quartz-scheduler into main

package.json

@@ -6,7 +6,7 @@
       "@auth0/auth0-react": "1.10.2",
       "@emotion/react": "11.7.1",
       "@emotion/styled": "11.6.0",
-      "@kingsrook/qqq-frontend-core": "1.0.88",
+      "@kingsrook/qqq-frontend-core": "1.0.90",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.11.1",
       "@mui/styles": "5.11.1",

src/qqq/components/forms/DynamicFormUtils.ts

@@ -24,27 +24,38 @@ import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QF
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 import * as Yup from "yup";
 
+
+type DisabledFields = { [fieldName: string]: boolean } | string[];
+
 /*******************************************************************************
  ** Meta-data to represent a single field in a table.
  **
  *******************************************************************************/
 class DynamicFormUtils
 {
-   public static getFormData(qqqFormFields: QFieldMetaData[])
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static getFormData(qqqFormFields: QFieldMetaData[], disabledFields?: DisabledFields)
    {
       const dynamicFormFields: any = {};
       const formValidations: any = {};
 
       qqqFormFields.forEach((field) =>
       {
-         dynamicFormFields[field.name] = this.getDynamicField(field);
+         dynamicFormFields[field.name] = this.getDynamicField(field, disabledFields);
-         formValidations[field.name] = this.getValidationForField(field);
+         formValidations[field.name] = this.getValidationForField(field, disabledFields);
       });
 
       return {dynamicFormFields, formValidations};
    }
 
-   public static getDynamicField(field: QFieldMetaData)
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static getDynamicField(field: QFieldMetaData, disabledFields?: DisabledFields)
    {
       let fieldType: string;
       switch (field.type.toString())
@@ -85,15 +96,21 @@ class DynamicFormUtils
          }
       }
 
+      ////////////////////////////////////////////////////////////
+      // this feels right, but... might be cases where it isn't //
+      ////////////////////////////////////////////////////////////
+      const effectiveIsEditable = field.isEditable && !this.isFieldDynamicallyDisabled(field.name, disabledFields);
+      const effectivelyIsRequired = field.isRequired && effectiveIsEditable;
+
       let label = field.label ? field.label : field.name;
-      label += field.isRequired ? " *" : "";
+      label += effectivelyIsRequired ? " *" : "";
 
       return ({
          fieldMetaData: field,
          name: field.name,
          label: label,
-         isRequired: field.isRequired,
+         isRequired: effectivelyIsRequired,
-         isEditable: field.isEditable,
+         isEditable: effectiveIsEditable,
          type: fieldType,
          displayFormat: field.displayFormat,
          // todo invalidMsg: "Zipcode is not valid (e.g. 70000).",
@@ -101,11 +118,18 @@ class DynamicFormUtils
       });
    }
 
-   public static getValidationForField(field: QFieldMetaData)
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static getValidationForField(field: QFieldMetaData, disabledFields?: DisabledFields)
    {
-      if (field.isRequired)
+      const effectiveIsEditable = field.isEditable && !this.isFieldDynamicallyDisabled(field.name, disabledFields);
+      const effectivelyIsRequired = field.isRequired && effectiveIsEditable;
+
+      if (effectivelyIsRequired)
       {
-         if(field.possibleValueSourceName)
+         if (field.possibleValueSourceName)
          {
             ////////////////////////////////////////////////////////////////////////////////////////////
             // the "nullable(true)" here doesn't mean that you're allowed to set the field to null... //
@@ -121,6 +145,10 @@ class DynamicFormUtils
       return (null);
    }
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
    public static addPossibleValueProps(dynamicFormFields: any, qFields: QFieldMetaData[], tableName: string, processName: string, displayValues: Map<string, string>)
    {
       for (let i = 0; i < qFields.length; i++)
@@ -159,6 +187,29 @@ class DynamicFormUtils
          }
       }
    }
+
+
+   /*******************************************************************************
+    ** private helper - check the disabled fields object (array or map), and return
+    ** true iff fieldName is in it.
+    *******************************************************************************/
+   private static isFieldDynamicallyDisabled(fieldName: string, disabledFields?: DisabledFields): boolean
+   {
+      if (!disabledFields)
+      {
+         return (false);
+      }
+
+      if (Array.isArray(disabledFields))
+      {
+         return (disabledFields.indexOf(fieldName) > -1)
+      }
+      else
+      {
+         return (disabledFields[fieldName]);
+      }
+   }
+
 }
 
 export default DynamicFormUtils;

src/qqq/components/forms/EntityForm.tsx

@@ -22,8 +22,10 @@
 import {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capability";
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import {Alert} from "@mui/material";
@@ -32,22 +34,24 @@ import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
 import Icon from "@mui/material/Icon";
-import {Form, Formik, useFormikContext} from "formik";
+import Modal from "@mui/material/Modal";
-import React, {useContext, useEffect, useReducer, useState} from "react";
+import {Form, Formik, FormikErrors, FormikTouched, FormikValues, useFormikContext} from "formik";
-import {useLocation, useNavigate, useParams} from "react-router-dom";
-import * as Yup from "yup";
 import QContext from "QContext";
-import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import QDynamicForm from "qqq/components/forms/DynamicForm";
 import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import HelpContent from "qqq/components/misc/HelpContent";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
+import RecordGridWidget, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useContext, useEffect, useReducer, useState} from "react";
+import {useLocation, useNavigate, useParams} from "react-router-dom";
+import {Value} from "sass";
+import * as Yup from "yup";
 
 interface Props
 {
@@ -58,6 +62,8 @@ interface Props
    defaultValues: { [key: string]: string };
    disabledFields: { [key: string]: boolean } | string[];
    isCopy?: boolean;
+   onSubmitCallback?: (values: any) => void;
+   overrideHeading?: string
 }
 
 EntityForm.defaultProps = {
@@ -67,7 +73,8 @@ EntityForm.defaultProps = {
    closeModalHandler: null,
    defaultValues: {},
    disabledFields: {},
-   isCopy: false
+   isCopy: false,
+   onSubmitCallback: null,
 };
 
 function EntityForm(props: Props): JSX.Element
@@ -90,10 +97,15 @@ function EntityForm(props: Props): JSX.Element
 
    const [asyncLoadInited, setAsyncLoadInited] = useState(false);
    const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
+   const [metaData, setMetaData] = useState(null as QInstance);
    const [record, setRecord] = useState(null as QRecord);
    const [tableSections, setTableSections] = useState(null as QTableSection[]);
+   const [renderedWidgetSections, setRenderedWidgetSections] = useState({} as {[name: string]: JSX.Element});
+   const [childListWidgetData, setChildListWidgetData] = useState({} as {[name: string]: ChildRecordListData});
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
+   const [showEditChildForm, setShowEditChildForm] = useState(null as any);
+
    const [notAllowedError, setNotAllowedError] = useState(null as string);
 
    const {pageHeader, setPageHeader} = useContext(QContext);
@@ -101,6 +113,8 @@ function EntityForm(props: Props): JSX.Element
    const navigate = useNavigate();
    const location = useLocation();
 
+   const cardElevation = props.isModal ? 3 : 0;
+
    ////////////////////////////////////////////////////////////////////
    // first take defaultValues and disabledFields from props         //
    // but, also allow them to be sent in the hash, in the format of: //
@@ -129,7 +143,131 @@ function EntityForm(props: Props): JSX.Element
       {}
    }
 
-   function getFormSection(values: any, touched: any, formFields: any, errors: any): JSX.Element
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function openAddChildRecord(name: string, widgetData: any)
+   {
+      let defaultValues = widgetData.defaultValuesForNewChildRecords;
+
+      let disabledFields = widgetData.disabledFieldsForNewChildRecords;
+      if(!disabledFields)
+      {
+         disabledFields = widgetData.defaultValuesForNewChildRecords;
+      }
+
+      doOpenEditChildForm(name, widgetData.childTableMetaData, null, defaultValues, disabledFields);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function openEditChildRecord(name: string, widgetData: any, rowIndex: number)
+   {
+      let defaultValues = widgetData.queryOutput.records[rowIndex].values;
+
+      let disabledFields = widgetData.disabledFieldsForNewChildRecords;
+      if(!disabledFields)
+      {
+         disabledFields = widgetData.defaultValuesForNewChildRecords;
+      }
+
+      doOpenEditChildForm(name, widgetData.childTableMetaData, rowIndex, defaultValues, disabledFields);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const deleteChildRecord = (name: string, widgetData: any, rowIndex: number) =>
+   {
+      updateChildRecordList(name, "delete", rowIndex);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function doOpenEditChildForm(widgetName: string, table: QTableMetaData, rowIndex: number, defaultValues: any, disabledFields: any)
+   {
+      const showEditChildForm: any = {};
+      showEditChildForm.widgetName = widgetName;
+      showEditChildForm.table = table;
+      showEditChildForm.rowIndex = rowIndex;
+      showEditChildForm.defaultValues = defaultValues;
+      showEditChildForm.disabledFields = disabledFields;
+      setShowEditChildForm(showEditChildForm);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const closeEditChildForm = (event: object, reason: string) =>
+   {
+      if (reason === "backdropClick" || reason === "escapeKeyDown")
+      {
+         return;
+      }
+
+      setShowEditChildForm(null);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function submitEditChildForm(values: any)
+   {
+      updateChildRecordList(showEditChildForm.widgetName, showEditChildForm.rowIndex == null ? "insert" : "edit", showEditChildForm.rowIndex, values);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   async function updateChildRecordList(widgetName: string, action: "insert" | "edit" | "delete", rowIndex?: number, values?: any)
+   {
+      const metaData = await qController.loadMetaData();
+      const widgetMetaData = metaData.widgets.get(widgetName);
+
+      const newChildListWidgetData: {[name: string]: ChildRecordListData} = Object.assign({}, childListWidgetData)
+      if(!newChildListWidgetData[widgetName].queryOutput.records)
+      {
+         newChildListWidgetData[widgetName].queryOutput.records = [];
+      }
+
+      switch(action)
+      {
+         case "insert":
+            newChildListWidgetData[widgetName].queryOutput.records.push({values: values})
+            break;
+         case "edit":
+            newChildListWidgetData[widgetName].queryOutput.records[rowIndex] = {values: values};
+            break;
+         case "delete":
+            newChildListWidgetData[widgetName].queryOutput.records.splice(rowIndex, 1);
+            break;
+      }
+      newChildListWidgetData[widgetName].totalRows = newChildListWidgetData[widgetName].queryOutput.records.length;
+      setChildListWidgetData(newChildListWidgetData);
+
+      const newRenderedWidgetSections = Object.assign({}, renderedWidgetSections)
+      newRenderedWidgetSections[widgetName] = getWidgetSection(widgetMetaData, newChildListWidgetData[widgetName]);
+      setRenderedWidgetSections(newRenderedWidgetSections);
+      forceUpdate();
+
+      setShowEditChildForm(null);
+   }
+
+
+   /*******************************************************************************
+    ** render a section (full of fields) as a form
+    *******************************************************************************/
+   function getFormSection(section: QTableSection, values: any, touched: any, formFields: any, errors: any, omitWrapper = false): JSX.Element
    {
       const formData: any = {};
       formData.values = values;
@@ -152,13 +290,68 @@ function EntityForm(props: Props): JSX.Element
 
       if (!Object.keys(formFields).length)
       {
-         return <div>Loading...</div>;
+         return <div>Error:  No form fields in section {section.name}</div>;
       }
 
       const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
-      return <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />;
+
+      if(omitWrapper)
+      {
+         return <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />
       }
 
+      return <Card id={section.name} sx={{overflow: "visible", scrollMarginTop: "100px"}} elevation={cardElevation}>
+         <MDTypography variant="h6" p={3} pb={1}>
+            {section.label}
+         </MDTypography>
+         {getSectionHelp(section)}
+         <Box pb={1} px={3}>
+            <Box pb={"0.75rem"} width="100%">
+               <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />
+            </Box>
+         </Box>
+      </Card>
+   }
+
+
+   /*******************************************************************************
+    ** render a section as a widget
+    *******************************************************************************/
+   function getWidgetSection(widgetMetaData: QWidgetMetaData, widgetData: any): JSX.Element
+   {
+      widgetData.viewAllLink = null;
+      widgetMetaData.showExportButton = false;
+
+      return <RecordGridWidget
+         key={new Date().getTime()} // added so that editing values actually re-renders...
+         widgetMetaData={widgetMetaData}
+         data={widgetData}
+         disableRowClick
+         allowRecordEdit
+         allowRecordDelete
+         addNewRecordCallback={() => openAddChildRecord(widgetMetaData.name, widgetData)}
+         editRecordCallback={(rowIndex) => openEditChildRecord(widgetMetaData.name, widgetData, rowIndex)}
+         deleteRecordCallback={(rowIndex) => deleteChildRecord(widgetMetaData.name, widgetData, rowIndex)}
+      />
+   }
+
+
+   /*******************************************************************************
+    ** render a form section
+    *******************************************************************************/
+   function renderSection(section: QTableSection, values: FormikValues | Value, touched: FormikTouched<FormikValues> | Value, formFields: Map<string, any>, errors: FormikErrors<FormikValues> | Value)
+   {
+      if(section.fieldNames && section.fieldNames.length > 0)
+      {
+         return getFormSection(section, values, touched, formFields.get(section.name), errors);
+      }
+      else
+      {
+         return renderedWidgetSections[section.widgetName] ?? <Box>Loading {section.label}...</Box>
+      }
+   }
+
+
    if (!asyncLoadInited)
    {
       setAsyncLoadInited(true);
@@ -167,10 +360,16 @@ function EntityForm(props: Props): JSX.Element
          const tableMetaData = await qController.loadTableMetaData(tableName);
          setTableMetaData(tableMetaData);
 
+         const metaData = await qController.loadMetaData();
+         setMetaData(metaData);
+
          /////////////////////////////////////////////////
          // define the sections, e.g., for the left-bar //
          /////////////////////////////////////////////////
-         const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()]);
+         const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()], (section: QTableSection) =>
+         {
+            return section.widgetName && metaData.widgets.get(section.widgetName)?.type == "childRecordList" && metaData.widgets.get(section.widgetName)?.defaultValues?.has("manageAssociationName")
+         });
          setTableSections(tableSections);
 
          const fieldArray = [] as QFieldMetaData[];
@@ -263,6 +462,18 @@ function EntityForm(props: Props): JSX.Element
             }
          }
 
+         ///////////////////////////////////////////////////
+         // if an override heading was passed in, use it. //
+         ///////////////////////////////////////////////////
+         if(props.overrideHeading)
+         {
+            setFormTitle(props.overrideHeading);
+            if (!props.isModal)
+            {
+               setPageHeader(props.overrideHeading);
+            }
+         }
+
          //////////////////////////////////////
          // check capabilities & permissions //
          //////////////////////////////////////
@@ -309,27 +520,9 @@ function EntityForm(props: Props): JSX.Element
          const {
             dynamicFormFields,
             formValidations,
-         } = DynamicFormUtils.getFormData(fieldArray);
+         } = DynamicFormUtils.getFormData(fieldArray, disabledFields);
          DynamicFormUtils.addPossibleValueProps(dynamicFormFields, fieldArray, tableName, null, record ? record.displayValues : defaultDisplayValues);
 
-         if(disabledFields)
-         {
-            if(Array.isArray(disabledFields))
-            {
-               for (let i = 0; i < disabledFields.length; i++)
-               {
-                  dynamicFormFields[disabledFields[i]].isEditable = false;
-               }
-            }
-            else
-            {
-               for (let fieldName in disabledFields)
-               {
-                  dynamicFormFields[fieldName].isEditable = false;
-               }
-            }
-         }
-
          /////////////////////////////////////
          // group the formFields by section //
          /////////////////////////////////////
@@ -337,22 +530,34 @@ function EntityForm(props: Props): JSX.Element
          let t1sectionName;
          let t1section;
          const nonT1Sections: QTableSection[] = [];
+         const newRenderedWidgetSections: {[name: string]: JSX.Element} = {};
+         const newChildListWidgetData: {[name: string]: ChildRecordListData} = {};
+
          for (let i = 0; i < tableSections.length; i++)
          {
             const section = tableSections[i];
             const sectionDynamicFormFields: any[] = [];
 
-            if (section.isHidden || !section.fieldNames)
+            if (section.isHidden)
             {
                continue;
             }
 
+            const hasFields = section.fieldNames && section.fieldNames.length > 0;
+            const hasChildRecordListWidget = section.widgetName && metaData.widgets.get(section.widgetName)?.type == "childRecordList"
+            if(!hasFields && !hasChildRecordListWidget)
+            {
+               continue;
+            }
+
+            if(hasFields)
+            {
                for (let j = 0; j < section.fieldNames.length; j++)
                {
                   const fieldName = section.fieldNames[j];
                   const field = tableMetaData.fields.get(fieldName);
 
-               if(!field)
+                  if (!field)
                   {
                      console.log(`Omitting un-found field ${fieldName} from form`);
                      continue;
@@ -381,7 +586,14 @@ function EntityForm(props: Props): JSX.Element
                {
                   dynamicFormFieldsBySection.set(section.name, sectionDynamicFormFields);
                }
-
+            }
+            else
+            {
+               const widgetMetaData = metaData.widgets.get(section.widgetName);
+               const widgetData = await qController.widget(widgetMetaData.name, props.id ? `${tableMetaData.primaryKeyField}=${props.id}` : "");
+               newRenderedWidgetSections[section.widgetName] = getWidgetSection(widgetMetaData, widgetData);
+               newChildListWidgetData[section.widgetName] = widgetData;
+            }
             //////////////////////////////////////
             // capture the tier1 section's name //
             //////////////////////////////////////
@@ -395,16 +607,38 @@ function EntityForm(props: Props): JSX.Element
                nonT1Sections.push(section);
             }
          }
+
          setT1SectionName(t1sectionName);
          setT1Section(t1section);
          setNonT1Sections(nonT1Sections);
          setFormFields(dynamicFormFieldsBySection);
          setValidations(Yup.object().shape(formValidations));
+         setRenderedWidgetSections(newRenderedWidgetSections);
+         setChildListWidgetData(newChildListWidgetData);
 
          forceUpdate();
       })();
    }
 
+
+   //////////////////////////////////////////////////////////////////
+   // watch widget data - if they change, re-render those sections //
+   //////////////////////////////////////////////////////////////////
+   useEffect(() =>
+   {
+      if(childListWidgetData)
+      {
+         const newRenderedWidgetSections: {[name: string]: JSX.Element} = {};
+         for(let name in childListWidgetData)
+         {
+            const widgetMetaData = metaData.widgets.get(name);
+            newRenderedWidgetSections[name] = getWidgetSection(widgetMetaData, childListWidgetData[name]);
+         }
+         setRenderedWidgetSections(newRenderedWidgetSections);
+      }
+   }, [childListWidgetData]);
+
+
    const handleCancelClicked = () =>
    {
       ///////////////////////////////////////////////////////////////////////////////////////
@@ -429,9 +663,23 @@ function EntityForm(props: Props): JSX.Element
       }
    };
 
+
+   /*******************************************************************************
+    ** event handler for the (Formik) Form.
+    *******************************************************************************/
    const handleSubmit = async (values: any, actions: any) =>
    {
       actions.setSubmitting(true);
+
+      /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // if there's a callback (e.g., for a modal nested on another create/edit screen), then just pass our data back there anre return. //
+      /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      if(props.onSubmitCallback)
+      {
+         props.onSubmitCallback(values);
+         return;
+      }
+
       await (async () =>
       {
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -486,9 +734,32 @@ function EntityForm(props: Props): JSX.Element
             }
          }
 
+         const associationsToPost: any = {}
+         let haveAssociationsToPost = false;
+         for (let name of Object.keys(childListWidgetData))
+         {
+            const manageAssociationName = metaData.widgets.get(name)?.defaultValues?.get("manageAssociationName")
+            if(!manageAssociationName)
+            {
+               console.log(`Cannot send association data to backend - missing a manageAssociationName defaultValue in widget meta data for widget name ${name}`);
+            }
+            associationsToPost[manageAssociationName] = [];
+            haveAssociationsToPost = true;
+            for(let i=0; i<childListWidgetData[name].queryOutput?.records?.length; i++)
+            {
+               associationsToPost[manageAssociationName].push(childListWidgetData[name].queryOutput.records[i].values);
+            }
+         }
+         if(haveAssociationsToPost)
+         {
+            valuesToPost["associations"] = JSON.stringify(associationsToPost);
+         }
+
          if (props.id !== null && !props.isCopy)
          {
-            // todo - audit that it's a dupe
+            ///////////////////////
+            // perform an update //
+            ///////////////////////
             await qController
                .update(tableName, props.id, valuesToPost)
                .then((record) =>
@@ -499,8 +770,14 @@ function EntityForm(props: Props): JSX.Element
                   }
                   else
                   {
+                     let warningMessage = null;
+                     if(record.warnings && record.warnings.length && record.warnings.length > 0)
+                     {
+                        warningMessage = record.warnings[0];
+                     }
+
                      const path = location.pathname.replace(/\/edit$/, "");
-                     navigate(path, {state: {updateSuccess: true}});
+                     navigate(path, {state: {updateSuccess: true, warning: warningMessage}});
                   }
                })
                .catch((error) =>
@@ -522,6 +799,10 @@ function EntityForm(props: Props): JSX.Element
          }
          else
          {
+            /////////////////////////////////
+            // perform an insert           //
+            // todo - audit if it's a dupe //
+            /////////////////////////////////
             await qController
                .create(tableName, valuesToPost)
                .then((record) =>
@@ -532,10 +813,16 @@ function EntityForm(props: Props): JSX.Element
                   }
                   else
                   {
+                     let warningMessage = null;
+                     if(record.warnings && record.warnings.length && record.warnings.length > 0)
+                     {
+                        warningMessage = record.warnings[0];
+                     }
+
                      const path = props.isCopy ?
                         location.pathname.replace(new RegExp(`/${props.id}/copy$`), "/" + record.values.get(tableMetaData.primaryKeyField))
                         : location.pathname.replace(/create$/, record.values.get(tableMetaData.primaryKeyField));
-                     navigate(path, {state: {createSuccess: true}});
+                     navigate(path, {state: {createSuccess: true, warning: warningMessage}});
                   }
                })
                .catch((error) =>
@@ -594,7 +881,6 @@ function EntityForm(props: Props): JSX.Element
    }
    else
    {
-      const cardElevation = props.isModal ? 3 : 0;
       body = (
          <Box mb={3}>
             {
@@ -656,7 +942,7 @@ function EntityForm(props: Props): JSX.Element
                                     t1sectionName && formFields ? (
                                        <Box px={3}>
                                           <Box pb={"0.25rem"} width="100%">
-                                             {getFormSection(values, touched, formFields.get(t1sectionName), errors)}
+                                             {getFormSection(t1section, values, touched, formFields.get(t1sectionName), errors, true)}
                                           </Box>
                                        </Box>
                                     ) : null
@@ -665,17 +951,7 @@ function EntityForm(props: Props): JSX.Element
                            </Box>
                            {formFields && nonT1Sections.length ? nonT1Sections.map((section: QTableSection) => (
                               <Box key={`edit-card-${section.name}`} pb={3}>
-                                 <Card id={section.name} sx={{overflow: "visible", scrollMarginTop: "100px"}} elevation={cardElevation}>
+                                 {renderSection(section, values, touched, formFields, errors)}
-                                    <MDTypography variant="h6" p={3} pb={1}>
-                                       {section.label}
-                                    </MDTypography>
-                                    {getSectionHelp(section)}
-                                    <Box pb={1} px={3}>
-                                       <Box pb={"0.75rem"} width="100%">
-                                          {getFormSection(values, touched, formFields.get(section.name), errors)}
-                                       </Box>
-                                    </Box>
-                                 </Card>
                               </Box>
                            )) : null}
 
@@ -690,6 +966,23 @@ function EntityForm(props: Props): JSX.Element
                      )}
                   </Formik>
 
+                  {
+                     showEditChildForm &&
+                     <Modal open={showEditChildForm as boolean} onClose={(event, reason) => closeEditChildForm(event, reason)}>
+                        <div className="modalEditForm">
+                           <EntityForm
+                              isModal={true}
+                              closeModalHandler={closeEditChildForm}
+                              table={showEditChildForm.table}
+                              defaultValues={showEditChildForm.defaultValues}
+                              disabledFields={showEditChildForm.disabledFields}
+                              onSubmitCallback={submitEditChildForm}
+                              overrideHeading={`${showEditChildForm.rowIndex != null ? "Editing" : "Creating New"} ${showEditChildForm.table.label}`}
+                           />
+                        </div>
+                     </Modal>
+                  }
+
                </Grid>
             </Grid>
          </Box>

src/qqq/components/widgets/Widget.tsx

@@ -169,15 +169,17 @@ export class AddNewRecordButton extends LabelComponent
    label: string;
    defaultValues: any;
    disabledFields: any;
+   addNewRecordCallback?: () => void;
 
 
-   constructor(table: QTableMetaData, defaultValues: any, label: string = "Add new", disabledFields: any = defaultValues)
+   constructor(table: QTableMetaData, defaultValues: any, label: string = "Add new", disabledFields: any = defaultValues, addNewRecordCallback?: () => void)
    {
       super();
       this.table = table;
       this.label = label;
       this.defaultValues = defaultValues;
       this.disabledFields = disabledFields;
+      this.addNewRecordCallback = addNewRecordCallback;
    }
 
    openEditForm = (navigate: any, table: QTableMetaData, id: any = null, defaultValues: any, disabledFields: any) =>
@@ -189,7 +191,7 @@ export class AddNewRecordButton extends LabelComponent
    {
       return (
          <Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="-0.5rem">
-            <Button sx={{mt: 0.75}} onClick={() => this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
+            <Button sx={{mt: 0.75}} onClick={() => this.addNewRecordCallback ? this.addNewRecordCallback() : this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
          </Typography>
       );
    };

src/qqq/components/widgets/misc/RecordGridWidget.tsx

@@ -25,28 +25,53 @@ import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
 import Typography from "@mui/material/Typography";
-import {DataGridPro, GridCallbackDetails, GridEventListener, GridFilterModel, gridPreferencePanelStateSelector, GridRowParams, GridSelectionModel, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, GridToolbarFilterButton, MuiEvent, useGridApiContext, useGridApiEventHandler, useGridSelector} from "@mui/x-data-grid-pro";
+import {DataGridPro, GridCallbackDetails, GridEventListener, GridRenderCellParams, GridRowParams, GridToolbarContainer, MuiEvent, useGridApiContext, useGridApiEventHandler} from "@mui/x-data-grid-pro";
-import React, {useEffect, useRef, useState} from "react";
+import Widget, {AddNewRecordButton, LabelComponent, WidgetData} from "qqq/components/widgets/Widget";
-import {useNavigate, Link} from "react-router-dom";
-import Widget, {AddNewRecordButton, LabelComponent} from "qqq/components/widgets/Widget";
 import DataGridUtils from "qqq/utils/DataGridUtils";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useEffect, useRef, useState} from "react";
+import {Link, useNavigate} from "react-router-dom";
+
+export interface ChildRecordListData extends WidgetData
+{
+   title: string;
+   queryOutput: {records: {values: any}[]}
+   childTableMetaData: QTableMetaData;
+   tablePath: string;
+   viewAllLink: string;
+   totalRows: number;
+   canAddChildRecord: boolean;
+   defaultValuesForNewChildRecords: {[fieldName: string]: any};
+   disabledFieldsForNewChildRecords: {[fieldName: string]: any};
+}
 
 interface Props
 {
    widgetMetaData: QWidgetMetaData;
-   data: any;
+   data: ChildRecordListData;
+   addNewRecordCallback?: () => void;
+   disableRowClick: boolean;
+   allowRecordEdit: boolean;
+   editRecordCallback?: (rowIndex: number) => void;
+   allowRecordDelete: boolean;
+   deleteRecordCallback?: (rowIndex: number) => void;
 }
 
-RecordGridWidget.defaultProps = {};
+RecordGridWidget.defaultProps =
+   {
+      disableRowClick: false,
+      allowRecordEdit: false,
+      allowRecordDelete: false
+   };
 
 const qController = Client.getInstance();
 
-function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
+function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRowClick, allowRecordEdit, editRecordCallback, allowRecordDelete, deleteRecordCallback}: Props): JSX.Element
 {
    const instance = useRef({timer: null});
    const [rows, setRows] = useState([]);
@@ -74,7 +99,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
          }
 
          const tableMetaData = new QTableMetaData(data.childTableMetaData);
-         const rows = DataGridUtils.makeRows(records, tableMetaData);
+         const rows = DataGridUtils.makeRows(records, tableMetaData, true);
 
          /////////////////////////////////////////////////////////////////////////////////
          // note - tablePath may be null, if the user doesn't have access to the table. //
@@ -103,6 +128,28 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
             }
          }
 
+         ////////////////////////////////////
+         // add actions cell, if available //
+         ////////////////////////////////////
+         if(allowRecordEdit || allowRecordDelete)
+         {
+            columns.unshift({
+               field: "_actions",
+               type: "string",
+               headerName: "Actions",
+               sortable: false,
+               filterable: false,
+               width: allowRecordEdit && allowRecordDelete ? 80 : 50,
+               renderCell: ((params: GridRenderCellParams) =>
+               {
+                  return <Box>
+                     {allowRecordEdit && <IconButton onClick={() => editRecordCallback(params.row.__rowIndex)}><Icon>edit</Icon></IconButton>}
+                     {allowRecordDelete && <IconButton onClick={() => deleteRecordCallback(params.row.__rowIndex)}><Icon>delete</Icon></IconButton>}
+                  </Box>
+               })
+            })
+         }
+
          setRows(rows);
          setRecords(records)
          setColumns(columns);
@@ -195,7 +242,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
       {
          disabledFields = data.defaultValuesForNewChildRecords;
       }
-      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields))
+      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields, addNewRecordCallback))
    }
 
 
@@ -204,13 +251,18 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
    /////////////////////////////////////////////////////////////////
    const handleRowClick = (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) =>
    {
+      if(disableRowClick)
+      {
+         return;
+      }
+
       (async () =>
       {
          const qInstance = await qController.loadMetaData()
          let tablePath = qInstance.getTablePathByName(data.childTableMetaData.name)
          if(tablePath)
          {
-            tablePath = `${tablePath}/${params.id}`;
+            tablePath = `${tablePath}/${params.row[data.childTableMetaData.primaryKeyField]}`;
             DataGridUtils.handleRowClick(tablePath, event, gridMouseDownX, gridMouseDownY, navigate, instance);
          }
       })();
@@ -266,6 +318,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
                rowBuffer={10}
                getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
                onRowClick={handleRowClick}
+               getRowId={(row) => row.__rowIndex}
                // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
                components={{
                   Toolbar: CustomToolbar

src/qqq/pages/records/view/RecordView.tsx

@@ -867,7 +867,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                               }
                               {
                                  warningMessage ?
-                                    <Alert color="warning" sx={{mb: 3}} onClose={() =>
+                                    <Alert color="warning" sx={{mb: 3}} icon={<Icon>warning</Icon>} onClose={() =>
                                     {
                                        setWarningMessage(null);
                                     }}>

src/qqq/utils/DataGridUtils.tsx

@@ -29,11 +29,11 @@ import Tooltip from "@mui/material/Tooltip/Tooltip";
 import {GridColDef, GridFilterItem, GridRowsProp, MuiEvent} from "@mui/x-data-grid-pro";
 import {GridFilterOperator} from "@mui/x-data-grid/models/gridFilterOperator";
 import {GridColumnHeaderParams} from "@mui/x-data-grid/models/params/gridColumnHeaderParams";
-import React from "react";
-import {Link, NavigateFunction} from "react-router-dom";
 import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import {buildQGridPvsOperators, QGridBlobOperators, QGridBooleanOperators, QGridNumericOperators, QGridStringOperators} from "qqq/pages/records/query/GridFilterOperators";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React from "react";
+import {Link, NavigateFunction} from "react-router-dom";
 
 
 const emptyApplyFilterFn = (filterItem: GridFilterItem, column: GridColDef): null => null;
@@ -118,7 +118,7 @@ export default class DataGridUtils
    /*******************************************************************************
     **
     *******************************************************************************/
-   public static makeRows = (results: QRecord[], tableMetaData: QTableMetaData): GridRowsProp[] =>
+   public static makeRows = (results: QRecord[], tableMetaData: QTableMetaData, allowEmptyId = false): GridRowsProp[] =>
    {
       const fields = [...tableMetaData.fields.values()];
       const rows = [] as any[];
@@ -159,9 +159,12 @@ export default class DataGridUtils
                /////////////////////////////////////////////////////////////////////////////////////////
                // DataGrid gets very upset about a null or undefined here, so, try to make it happier //
                /////////////////////////////////////////////////////////////////////////////////////////
+               if(!allowEmptyId)
+               {
                   row["id"] = "--";
                }
             }
+         }
 
          rows.push(row);
       });
@@ -279,7 +282,7 @@ export default class DataGridUtils
          if (key === tableMetaData.primaryKeyField && linkBase)
          {
             column.renderCell = (cellValues: any) => (
-               <Link to={`${linkBase}${encodeURIComponent(cellValues.value)}`} onClick={(e) => e.stopPropagation()}>{cellValues.value}</Link>
+               cellValues.value ? <Link to={`${linkBase}${encodeURIComponent(cellValues.value)}`} onClick={(e) => e.stopPropagation()}>{cellValues.value}</Link> : ""
             );
          }
       });

src/qqq/utils/qqq/TableUtils.ts

@@ -30,62 +30,102 @@ import {QueryJoin} from "@kingsrook/qqq-frontend-core/lib/model/query/QueryJoin"
  *******************************************************************************/
 class TableUtils
 {
+
    /*******************************************************************************
+    ** For a table, return a sub-set of sections (originally meant for display in
+    ** the record-screen sidebars)
     **
+    ** If the table has no sections, one big "all fields" section is created.
+    **
+    ** a list of "allowed field names" may be given, in which case, a section is only
+    ** included if it has a field in that list.  e.g., an edit-screen, where disabled
+    ** fields aren't to be shown - if a section only has disabled fields, don't include it.
+    **
+    ** By default sections w/ widget names are excluded -- but -- to include them,
+    ** provide the metaData plus list of allowedWidgetTypes.
     *******************************************************************************/
-   public static getSectionsForRecordSidebar(tableMetaData: QTableMetaData, allowedKeys: any = null): QTableSection[]
+   public static getSectionsForRecordSidebar(tableMetaData: QTableMetaData, allowedFieldNames: any = null, additionalInclusionPredicate?: (section: QTableSection) => boolean): QTableSection[]
    {
+      /////////////////////////////////////////////////////////////////
+      // if the table has sections, then filter them and return some //
+      /////////////////////////////////////////////////////////////////
       if (tableMetaData.sections)
       {
-         if (allowedKeys)
+         //////////////////////////////////////////////////////////////////////////////////////////////
+         // if there are filters (a list of allowed field names, or an additionalInclusionPredicate, //
+         // then only return a subset of sections matching the filters                               //
+         //////////////////////////////////////////////////////////////////////////////////////////////
+         if (allowedFieldNames || additionalInclusionPredicate)
          {
-            const allowedKeySet = new Set<string>();
+            ////////////////////////////////////////////////////////////////
-            allowedKeys.forEach((k: string) => allowedKeySet.add(k));
+            // put the field names in a set, for better inclusion testing //
+            ////////////////////////////////////////////////////////////////
+            const allowedFieldNameSet = new Set<string>();
+            if(allowedFieldNames)
+            {
+               allowedFieldNames.forEach((k: string) => allowedFieldNameSet.add(k));
+            }
 
+            ///////////////////////////////////////////////////////////////////////////////
+            // loop over the sections, deciding which ones to include in the return list //
+            ///////////////////////////////////////////////////////////////////////////////
             const allowedSections: QTableSection[] = [];
-
             for (let i = 0; i < tableMetaData.sections.length; i++)
             {
                const section = tableMetaData.sections[i];
-               if (section.fieldNames)
+               let includeSection = false;
+
+               for (let j = 0; j < section.fieldNames?.length; j++)
                {
-                  for (let j = 0; j < section.fieldNames.length; j++)
+                  if (allowedFieldNameSet.has(section.fieldNames[j]))
                   {
-                     if (allowedKeySet.has(section.fieldNames[j]))
+                     includeSection = true;
-                     {
-                        allowedSections.push(section);
                      break;
                   }
                }
+
+               if (additionalInclusionPredicate && additionalInclusionPredicate(section))
+               {
+                  includeSection = true;
+               }
+
+               if(includeSection)
+               {
+                  allowedSections.push(section);
                }
             }
 
+            console.log("allowedSections length: " + allowedSections.length);
             return (allowedSections);
          }
-         else
+
-         {
+         ////////////////////////////////////////////////////////////////
+         // if there are no filters to apply, then return all sections //
+         ////////////////////////////////////////////////////////////////
          return (tableMetaData.sections);
       }
-      }
+
-      else
+      ///////////////////////////////////////////////////////////////////////////////////////////////
-      {
+      // else, if the table had no sections, then make a pseudo-one with either all of the fields, //
+      // or a subset based on the allowedFieldNames                                                //
+      ///////////////////////////////////////////////////////////////////////////////////////////////
       let fieldNames = [...tableMetaData.fields.keys()];
-         if (allowedKeys)
+      if (allowedFieldNames)
       {
          fieldNames = [];
          for (const fieldName in tableMetaData.fields.keys())
          {
-               if (allowedKeys[fieldName])
+            if (allowedFieldNames[fieldName])
             {
                fieldNames.push(fieldName);
             }
          }
       }
+
       return ([new QTableSection({
          iconName: "description", label: "All Fields", name: "allFields", fieldNames: [...fieldNames],
       })]);
    }
-   }
 
 
    /*******************************************************************************