Add sections and autocomplete (QDynamicSelect) on bulk-edit

src/qqq/components/EntityForm/index.tsx

@@ -155,6 +155,7 @@ function EntityForm({table, id}: Props): JSX.Element
             dynamicFormFields,
             formValidations,
          } = DynamicFormUtils.getFormData(fieldArray);
+         DynamicFormUtils.addPossibleValueProps(dynamicFormFields, fieldArray, tableName, record?.displayValues);
 
          /////////////////////////////////////
          // group the formFields by section //
@@ -180,24 +181,6 @@ function EntityForm({table, id}: Props): JSX.Element
                {
                   sectionDynamicFormFields.push(dynamicFormFields[fieldName]);
                }
-
-               /////////////////////////////////////////
-               // add props for possible value fields //
-               /////////////////////////////////////////
-               if(field.possibleValueSourceName)
-               {
-                  let initialDisplayValue = null;
-                  if(record && record.displayValues)
-                  {
-                     initialDisplayValue = record.displayValues.get(field.name);
-                  }
-                  dynamicFormFields[fieldName].possibleValueProps =
-                     {
-                        isPossibleValue: true,
-                        tableName: tableName,
-                        initialDisplayValue: initialDisplayValue,
-                     };
-               }
             }
 
             if (sectionDynamicFormFields.length === 0)

src/qqq/components/QDynamicForm/index.tsx

@@ -136,6 +136,8 @@ function QDynamicForm(props: Props): JSX.Element
                                  fieldLabel={field.label}
                                  initialValue={values[fieldName]}
                                  initialDisplayValue={field.possibleValueProps.initialDisplayValue}
+                                 bulkEditMode={bulkEditMode}
+                                 bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
                               />
                            </Grid>
                         );

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

@@ -95,6 +95,33 @@ class DynamicFormUtils
       }
       return (null);
    }
+
+   public static addPossibleValueProps(dynamicFormFields: any, qFields: QFieldMetaData[], tableName: string, displayValues: Map<string, string>)
+   {
+      for (let i = 0; i < qFields.length; i++)
+      {
+         const field = qFields[i];
+
+         /////////////////////////////////////////
+         // add props for possible value fields //
+         /////////////////////////////////////////
+         if (field.possibleValueSourceName && dynamicFormFields[field.name])
+         {
+            let initialDisplayValue = null;
+            if (displayValues)
+            {
+               initialDisplayValue = displayValues.get(field.name);
+            }
+
+            dynamicFormFields[field.name].possibleValueProps =
+               {
+                  isPossibleValue: true,
+                  tableName: tableName,
+                  initialDisplayValue: initialDisplayValue,
+               };
+         }
+      }
+   }
 }
 
 export default DynamicFormUtils;

src/qqq/components/QDynamicFormField/index.tsx

@@ -123,7 +123,7 @@ function QDynamicFormField({
                   onClick={bulkEditSwitchChanged}
                />
             </Box>
-            <Box width="100%">
+            <Box width="100%" sx={{background: (type == "checkbox" && isDisabled) ? "#f0f2f5!important" : "initial"}}>
                {/* for checkboxes, if we put the whole thing in a label, we get bad overly aggressive toggling of the outer switch... */}
                {(type == "checkbox" ?
                   field() :

src/qqq/components/QDynamicSelect/QDynamicSelect.tsx

@@ -22,9 +22,12 @@
 import {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
 import {CircularProgress, FilterOptionsState} from "@mui/material";
 import Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
+import Switch from "@mui/material/Switch";
 import TextField from "@mui/material/TextField";
 import {useFormikContext} from "formik";
 import React, {useEffect, useState} from "react";
+import MDBox from "qqq/components/Temporary/MDBox";
 import QClient from "qqq/utils/QClient";
 
 interface Props
@@ -35,7 +38,10 @@ interface Props
    inForm: boolean;
    initialValue?: any;
    initialDisplayValue?: string;
-   onChange?: any
+   onChange?: any;
+   isEditable?: boolean;
+   bulkEditMode?: boolean;
+   bulkEditSwitchChangeHandler?: any;
 }
 
 QDynamicSelect.defaultProps = {
@@ -43,11 +49,16 @@ QDynamicSelect.defaultProps = {
    initialValue: null,
    initialDisplayValue: null,
    onChange: null,
+   isEditable: true,
+   bulkEditMode: false,
+   bulkEditSwitchChangeHandler: () =>
+   {
+   },
 };
 
 const qController = QClient.getInstance();
 
-function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue, initialDisplayValue, onChange}: Props)
+function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue, initialDisplayValue, onChange, isEditable, bulkEditMode, bulkEditSwitchChangeHandler}: Props)
 {
    const [ open, setOpen ] = useState(false);
    const [ options, setOptions ] = useState<readonly QPossibleValue[]>([]);
@@ -56,6 +67,8 @@ function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue,
    const [defaultValue, _] = useState(initialValue && initialDisplayValue ? {id: initialValue, label: initialDisplayValue} : null);
    // const loading = open && options.length === 0;
    const [loading, setLoading] = useState(false);
+   const [ switchChecked, setSwitchChecked ] = useState(false);
+   const [ isDisabled, setIsDisabled ] = useState(!isEditable || bulkEditMode);
 
    let setFieldValueRef: (field: string, value: any, shouldValidate?: boolean) => void = null;
    if(inForm)
@@ -152,9 +165,18 @@ function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue,
       );
    }
 
-   return (
+   const bulkEditSwitchChanged = () =>
+   {
+      const newSwitchValue = !switchChecked;
+      setSwitchChecked(newSwitchValue);
+      setIsDisabled(!newSwitchValue);
+      bulkEditSwitchChangeHandler(fieldName, newSwitchValue);
+   };
+
+   const autocomplete = (
       <Autocomplete
          id={fieldName}
+         sx={{background: isDisabled ? "#f0f2f5!important" : "initial"}}
          open={open}
          fullWidth
          onOpen={() =>
@@ -190,6 +212,7 @@ function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue,
          }}
          renderOption={renderOption}
          filterOptions={filterOptions}
+         disabled={isDisabled}
          renderInput={(params) => (
             <TextField
                {...params}
@@ -210,6 +233,35 @@ function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue,
          )}
       />
    );
+
+
+   if (bulkEditMode)
+   {
+      return (
+         <Box mb={1.5} display="flex" flexDirection="row">
+            <Box alignItems="baseline" pt={1}>
+               <Switch
+                  id={`bulkEditSwitch-${fieldName}`}
+                  checked={switchChecked}
+                  onClick={bulkEditSwitchChanged}
+               />
+            </Box>
+            <Box width="100%">
+               {autocomplete}
+            </Box>
+         </Box>
+      );
+   }
+   else
+   {
+      return (
+         <MDBox mb={1.5}>
+            {autocomplete}
+         </MDBox>
+      );
+   }
+
+
 }
 
 export default QDynamicSelect;

src/qqq/components/QRecordSidebar/index.tsx

@@ -36,8 +36,14 @@ interface Props
    metaData?: QTableMetaData;
    widgetMetaDataList?: QWidgetMetaData[];
    light?: boolean;
+   stickyTop?: string;
 }
 
+QRecordSidebar.defaultProps = {
+   light: false,
+   stickyTop: "100px",
+};
+
 interface SidebarEntry
 {
    iconName: string;
@@ -45,7 +51,7 @@ interface SidebarEntry
    label: string;
 }
 
-function QRecordSidebar({tableSections, widgetMetaDataList, light}: Props): JSX.Element
+function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: Props): JSX.Element
 {
    /////////////////////////////////////////////////////////
    // insert widgets after identity (first) table section //
@@ -65,7 +71,7 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light}: Props): JSX.
 
 
    return (
-      <Card sx={{borderRadius: ({borders: {borderRadius}}) => borderRadius.lg, position: "sticky", top: "100px"}}>
+      <Card sx={{borderRadius: ({borders: {borderRadius}}) => borderRadius.lg, position: "sticky", top: stickyTop}}>
          <MDBox component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
             {
                sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (
@@ -109,8 +115,4 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light}: Props): JSX.
    );
 }
 
-QRecordSidebar.defaultProps = {
-   light: false,
-};
-
 export default QRecordSidebar;

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

@@ -40,7 +40,6 @@ import Modal from "@mui/material/Modal";
 import {
    DataGridPro,
    getGridDateOperators,
-   getGridNumericOperators,
    GridCallbackDetails,
    GridColDef,
    GridColumnOrderChangeParams,
@@ -235,7 +234,7 @@ function EntityList({table, launchProcess}: Props): JSX.Element
    const [ gridMouseDownY, setGridMouseDownY ] = useState(0);
    const [ pinnedColumns, setPinnedColumns ] = useState({left: [ "__check__", "id" ]});
 
-   const [activeModalProcess, setActiveModalProcess] = useState(null as QProcessMetaData)
+   const [ activeModalProcess, setActiveModalProcess ] = useState(null as QProcessMetaData);
    const [ launchingProcess, setLaunchingProcess ] = useState(launchProcess);
 
    const instance = useRef({timer: null});
@@ -350,7 +349,7 @@ function EntityList({table, launchProcess}: Props): JSX.Element
          if (!defaultFilterLoaded)
          {
             setDefaultFilterLoaded(true);
-            localFilterModel = await getDefaultFilter(tableMetaData, searchParams, filterLocalStorageKey)
+            localFilterModel = await getDefaultFilter(tableMetaData, searchParams, filterLocalStorageKey);
             setFilterModel(localFilterModel);
             return;
          }
@@ -886,7 +885,7 @@ function EntityList({table, launchProcess}: Props): JSX.Element
       navigate(newPath.join("/"));
 
       updateTable();
-   }
+   };
 
    const openBulkProcess = (processNamePart: "Insert" | "Edit" | "Delete", processLabelPart: "Load" | "Edit" | "Delete") =>
    {
@@ -899,7 +898,7 @@ function EntityList({table, launchProcess}: Props): JSX.Element
       {
          setAlertContent(`Could not find Bulk ${processLabelPart} process for this table.`);
       }
-   }
+   };
 
    const bulkLoadClicked = () =>
    {
@@ -1171,7 +1170,9 @@ function EntityList({table, launchProcess}: Props): JSX.Element
          {
             activeModalProcess &&
             <Modal open={activeModalProcess !== null} onClose={(event, reason) => closeModalProcess(event, reason)}>
+               <div className="modalProcess">
                   <ProcessRun process={activeModalProcess} isModal={true} recordIds={getRecordIdsForProcess()} closeModalHandler={closeModalProcess} />
+               </div>
             </Modal>
          }
 

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

@@ -451,7 +451,9 @@ function ViewContents({id, table, launchProcess}: Props): JSX.Element
             {
                activeModalProcess &&
                <Modal open={activeModalProcess !== null} onClose={(event, reason) => closeModalProcess(event, reason)}>
+                  <div className="modalProcess">
                      <ProcessRun process={activeModalProcess} isModal={true} recordIds={id} closeModalHandler={closeModalProcess} />
+                  </div>
                </Modal>
             }
 

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

@@ -26,6 +26,7 @@ import {QFrontendComponent} from "@kingsrook/qqq-frontend-core/lib/model/metaDat
 import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
+import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
 import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
 import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
 import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning";
@@ -52,6 +53,7 @@ import BaseLayout from "qqq/components/BaseLayout";
 import {QCancelButton, QSubmitButton} from "qqq/components/QButtons";
 import QDynamicForm from "qqq/components/QDynamicForm";
 import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
+import QRecordSidebar from "qqq/components/QRecordSidebar";
 import MDBox from "qqq/components/Temporary/MDBox";
 import MDButton from "qqq/components/Temporary/MDButton";
 import MDProgress from "qqq/components/Temporary/MDProgress";
@@ -59,6 +61,7 @@ import MDTypography from "qqq/components/Temporary/MDTypography";
 import {QGoogleDriveFolderPickerWrapper} from "qqq/pages/process-run/components/QGoogleDriveFolderPickerWrapper";
 import QValidationReview from "qqq/pages/process-run/components/QValidationReview";
 import QClient from "qqq/utils/QClient";
+import QTableUtils from "qqq/utils/QTableUtils";
 import QValueUtils from "qqq/utils/QValueUtils";
 import QProcessSummaryResults from "./components/QProcessSummaryResults";
 
@@ -66,9 +69,9 @@ interface Props
 {
    process?: QProcessMetaData;
    defaultProcessValues?: any;
-   isModal?: boolean
+   isModal?: boolean;
-   recordIds?: string | QQueryFilter
+   recordIds?: string | QQueryFilter;
-   closeModalHandler?: (event: object, reason: string) => void
+   closeModalHandler?: (event: object, reason: string) => void;
 }
 
 const INITIAL_RETRY_MILLIS = 1_500;
@@ -95,6 +98,7 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
    const [needInitialLoad, setNeedInitialLoad] = useState(true);
    const [processMetaData, setProcessMetaData] = useState(null);
    const [tableMetaData, setTableMetaData] = useState(null);
+   const [tableSections, setTableSections] = useState(null as QTableSection[]);
    const [qInstance, setQInstance] = useState(null as QInstance);
    const [processValues, setProcessValues] = useState({} as any);
    const [processError, _setProcessError] = useState(null as string);
@@ -303,6 +307,17 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
          );
       }
 
+      const {formFields, values, errors, touched} = formData;
+      let localTableSections = tableSections;
+      if(localTableSections == null)
+      {
+         //////////////////////////////////////////////////////////////////////////////////////////////////////
+         // if the table sections (ones that actually have fields to edit) haven't been built yet, do so now //
+         //////////////////////////////////////////////////////////////////////////////////////////////////////
+         localTableSections = tableMetaData ? QTableUtils.getSectionsForRecordSidebar(tableMetaData, Object.keys(formFields)) : null;
+         setTableSections(localTableSections);
+      }
+
       return (
          <>
             <MDTypography variation="h5" component="div" fontWeight="bold">
@@ -337,7 +352,61 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
                      }
                      {
                         component.type === QComponentType.BULK_EDIT_FORM && (
-                           <QDynamicForm formData={formData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} />
+                           tableMetaData && localTableSections ?
+                              <Grid container spacing={3} mt={2}>
+                                 <Grid item xs={12} lg={3}>
+                                    <QRecordSidebar tableSections={localTableSections} stickyTop="20px" />
+                                 </Grid>
+                                 <Grid item xs={12} lg={9}>
+
+                                    {localTableSections.map((section: QTableSection, index: number) =>
+                                    {
+                                       const name = section.name
+                                       console.log(formData);
+                                       console.log(section.fieldNames);
+
+                                       const sectionFormFields = {};
+                                       for(let i = 0; i<section.fieldNames.length; i++)
+                                       {
+                                          const fieldName = section.fieldNames[i];
+                                          if(formFields[fieldName])
+                                          {
+                                             // @ts-ignore
+                                             sectionFormFields[fieldName] = formFields[fieldName];
+                                          }
+                                       }
+
+                                       if(Object.keys(sectionFormFields).length > 0)
+                                       {
+                                          const sectionFormData = {
+                                             formFields: sectionFormFields,
+                                             values: values,
+                                             errors: errors,
+                                             touched: touched
+                                          };
+
+                                          return (
+                                             <Box key={name} pb={3}>
+                                                <Card id={name} sx={{scrollMarginTop: "20px"}} elevation={5}>
+                                                   <MDTypography variant="h5" p={3} pb={1}>
+                                                      {section.label}
+                                                   </MDTypography>
+                                                   <Box px={2}>
+                                                      <QDynamicForm formData={sectionFormData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} />
+                                                   </Box>
+                                                </Card>
+                                             </Box>
+                                          );
+                                       }
+                                       else
+                                       {
+                                          return (<br />);
+                                       }
+                                    }
+                                    )}
+                                 </Grid>
+                              </Grid>
+                              : <QDynamicForm formData={formData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} />
                         )
                      }
                      {
@@ -505,7 +574,7 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
       }
 
       return (rs);
-   }
+   };
 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // handle moving to another step in the process - e.g., after the backend told us what screen to show next. //
@@ -517,7 +586,7 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
          console.log("No process meta data yet, so returning early");
          return;
       }
-      setPageHeader(processMetaData.label)
+      setPageHeader(processMetaData.label);
 
       let newIndex = null;
       if (typeof newStep === "number")
@@ -560,6 +629,8 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
          {
             let fullFieldList = getFullFieldList(activeStep, processValues);
             const formData = DynamicFormUtils.getFormData(fullFieldList);
+            DynamicFormUtils.addPossibleValueProps(formData.dynamicFormFields, fullFieldList, tableMetaData.name, null);
+
             dynamicFormFields = formData.dynamicFormFields;
             formValidations = formData.formValidations;
 
@@ -592,7 +663,7 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
             dynamicFormFields[fieldName] = dynamicFormValue;
             initialValues[fieldName] = initialValue;
             formValidations[fieldName] = validation;
-         }
+         };
 
          if (doesStepHaveComponent(activeStep, QComponentType.VALIDATION_REVIEW_SCREEN))
          {
@@ -602,9 +673,9 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
 
          if (doesStepHaveComponent(activeStep, QComponentType.GOOGLE_DRIVE_SELECT_FOLDER))
          {
-            addField("googleDriveAccessToken", {type: "hidden", omitFromQDynamicForm: true}, null, null);
+            addField("googleDriveAccessToken", {type: "hidden", omitFromQDynamicForm: true}, "", null);
-            addField("googleDriveFolderId", {type: "hidden", omitFromQDynamicForm: true}, null, null);
+            addField("googleDriveFolderId", {type: "hidden", omitFromQDynamicForm: true}, "", null);
-            addField("googleDriveFolderName", {type: "hidden", omitFromQDynamicForm: true}, null, null);
+            addField("googleDriveFolderName", {type: "hidden", omitFromQDynamicForm: true}, "", null);
          }
 
          if (Object.keys(dynamicFormFields).length > 0)
@@ -673,6 +744,8 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
             }
          });
 
+         DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, fullFieldList, tableMetaData.name, null);
+
          setFormFields(newDynamicFormFields);
          setValidationScheme(Yup.object().shape(newFormValidations));
       }

src/qqq/styles/qqq-override-styles.css

@@ -177,3 +177,9 @@ input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-results-button,
 input[type="search"]::-webkit-search-results-decoration { display: none; }
+
+/* Shrink the big margin-bottom on modal processes */
+.modalProcess>.MuiBox-root>.MuiBox-root
+{
+   margin-bottom: 24px;
+}

src/qqq/utils/QTableUtils.ts

@@ -28,16 +28,60 @@ import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTa
  *******************************************************************************/
 class QTableUtils
 {
-   public static getSectionsForRecordSidebar(tableMetaData: QTableMetaData): QTableSection[]
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static getSectionsForRecordSidebar(tableMetaData: QTableMetaData, allowedKeys: any = null): QTableSection[]
    {
       if (tableMetaData.sections)
       {
-         return (tableMetaData.sections);
+         if (allowedKeys)
+         {
+            const allowedKeySet = new Set<string>();
+            allowedKeys.forEach((k: string) => allowedKeySet.add(k));
+
+            const allowedSections: QTableSection[] = [];
+
+            for (let i = 0; i < tableMetaData.sections.length; i++)
+            {
+               const section = tableMetaData.sections[i];
+               if (section.fieldNames)
+               {
+                  for (let j = 0; j < section.fieldNames.length; j++)
+                  {
+                     if (allowedKeySet.has(section.fieldNames[j]))
+                     {
+                        allowedSections.push(section);
+                        break;
+                     }
+                  }
+               }
+            }
+
+            return (allowedSections);
          }
          else
          {
+            return (tableMetaData.sections);
+         }
+      }
+      else
+      {
+         let fieldNames = [...tableMetaData.fields.keys()];
+         if (allowedKeys)
+         {
+            fieldNames = [];
+            for (const fieldName in tableMetaData.fields.keys())
+            {
+               if (allowedKeys[fieldName])
+               {
+                  fieldNames.push(fieldName);
+               }
+            }
+         }
          return ([new QTableSection({
-            iconName: "description", label: "All Fields", name: "allFields", fieldNames: [...tableMetaData.fields.keys()],
+            iconName: "description", label: "All Fields", name: "allFields", fieldNames: [...fieldNames],
          })]);
       }
    }