CE-1115 pre-QA commit on saved report UI, including:

- redo pivots so editing is in a modal
- add form validations
- field rules for clearing one field when another changes

src/qqq/components/widgets/Widget.tsx

@@ -206,9 +206,16 @@ interface HeaderToggleComponentProps
    label: string;
    getValue: () => boolean;
    onClickCallback: () => void;
+   disabled?: boolean;
+   disabledTooltip?: string;
 }
 
-export function HeaderToggleComponent({label, getValue, onClickCallback}: HeaderToggleComponentProps): JSX.Element
+HeaderToggleComponent.defaultProps = {
+   disabled: false,
+   disabledTooltip: null
+};
+
+export function HeaderToggleComponent({label, getValue, onClickCallback, disabled, disabledTooltip}: HeaderToggleComponentProps): JSX.Element
 {
    const onClick = () =>
    {
@@ -217,9 +224,13 @@ export function HeaderToggleComponent({label, getValue, onClickCallback}: Header
 
    return (
       <Box alignItems="baseline" mr="-0.75rem">
-         <InputLabel sx={{fontSize: "1.125rem", px: "0 !important", cursor: "pointer"}} unselectable="on">
-            {label} <Switch checked={getValue()} onClick={onClick} />
-         </InputLabel>
+         <Tooltip title={disabledTooltip}>
+            <span>
+               <InputLabel sx={{fontSize: "1.125rem", px: "0 !important", cursor: disabled ? "default" : "pointer", opacity: disabled ? 0.65 : 1}} unselectable="on">
+                  {label} <Switch disabled={disabled} checked={getValue()} onClick={onClick} />
+               </InputLabel>
+            </span>
+         </Tooltip>
       </Box>
    );
 }

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

@@ -51,6 +51,7 @@ export interface PivotTableGroupByElementProps
    groupBy: PivotTableGroupBy;
    rowsOrColumns: "rows" | "columns";
    callback: () => void;
+   attemptedSubmit?: boolean;
 }
 
 
@@ -67,7 +68,7 @@ interface DragItem
 /*******************************************************************************
  **
  *******************************************************************************/
-export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id, index, dragCallback, rowsOrColumns, metaData, tableMetaData, pivotTableDefinition, groupBy, usedGroupByFieldNames, availableFieldNames, isEditable, callback}) =>
+export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id, index, dragCallback, rowsOrColumns, metaData, tableMetaData, pivotTableDefinition, groupBy, usedGroupByFieldNames, availableFieldNames, isEditable, callback, attemptedSubmit}) =>
 {
    ////////////////////////////////////////////////////////////////////////////
    // credit: https://react-dnd.github.io/react-dnd/examples/sortable/simple //
@@ -171,7 +172,7 @@ export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id,
       if (selectedField)
       {
          const label = selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label;
-         return (<Box mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{label}</Box>);
+         return (<Box><Box display="inline-block" mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{label}</Box></Box>);
       }
 
       return (<React.Fragment />);
@@ -179,6 +180,8 @@ export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id,
 
    preview(drop(ref));
 
+   const showError = attemptedSubmit && !groupBy.fieldName;
+
    return (<Box ref={ref} display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center" sx={{backgroundColor: "white", opacity: isDragging ? 0 : 1}} data-handler-id={handlerId}>
       <Box>
          <Icon ref={drag} sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
@@ -195,6 +198,7 @@ export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id,
             hiddenFieldNames={usedGroupByFieldNames}
             availableFieldNames={availableFieldNames}
             defaultValue={getSelectedFieldForAutoComplete(tableMetaData, groupBy.fieldName)}
+            hasError={showError}
          />
       </Box>
       <Box>

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

@@ -23,19 +23,25 @@
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import Alert from "@mui/material/Alert";
 import Autocomplete from "@mui/material/Autocomplete";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
 import Icon from "@mui/material/Icon";
+import Modal from "@mui/material/Modal";
 import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
+import Typography from "@mui/material/Typography";
 import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
+import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
 import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import {PivotTableGroupByElement} from "qqq/components/widgets/misc/PivotTableGroupByElement";
 import {PivotTableValueElement} from "qqq/components/widgets/misc/PivotTableValueElement";
+import {buttonSX, unborderedButtonSX} from "qqq/components/widgets/misc/ReportSetupWidget";
 import Widget, {HeaderToggleComponent} from "qqq/components/widgets/Widget";
 import {PivotObjectKey, PivotTableDefinition, PivotTableFunction, pivotTableFunctionLabels, PivotTableGroupBy, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
 import QQueryColumns from "qqq/models/query/QQueryColumns";
@@ -52,22 +58,6 @@ export const DragItemTypes =
       VALUE: "value"
    };
 
-export const buttonSX =
-   {
-      border: `1px solid ${colors.grayLines.main} !important`,
-      borderRadius: "0.75rem",
-      textTransform: "none",
-      fontSize: "1rem",
-      fontWeight: "400",
-      width: "160px",
-      paddingLeft: 0,
-      paddingRight: 0,
-      color: colors.dark.main,
-      "&:hover": {color: colors.dark.main},
-      "&:focus": {color: colors.dark.main},
-      "&:focus:not(:hover)": {color: colors.dark.main},
-   };
-
 export const xIconButtonSX =
    {
       border: `1px solid ${colors.grayLines.main} !important`,
@@ -139,11 +129,20 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
    const [metaData, setMetaData] = useState(null as QInstance);
    const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
 
+   const [modalOpen, setModalOpen] = useState(false);
    const [enabled, setEnabled] = useState(!!recordValues["usePivotTable"]);
+   const [attemptedSubmit, setAttemptedSubmit] = useState(false);
+   const [errorAlert, setErrorAlert] = useState(null as string);
+
+   const [pivotTableDefinition, setPivotTableDefinition] = useState(null as PivotTableDefinition);
 
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
-   const [pivotTableDefinition, setPivotTableDefinition] = useState(null as PivotTableDefinition);
+   ///////////////////////////////////////////////////////////////////////////////////
+   // this is a copy of pivotTableDefinition, that we'll render in the modal.       //
+   // then on-save, we'll move it to pivotTableDefinition, e.g., the actual record. //
+   ///////////////////////////////////////////////////////////////////////////////////
+   const [modalPivotTableDefinition, setModalPivotTableDefinition] = useState(null as PivotTableDefinition);
 
    const [usedGroupByFieldNames, setUsedGroupByFieldNames] = useState([] as string[]);
    const [availableFieldNames, setAvailableFieldNames] = useState([] as string[]);
@@ -195,9 +194,9 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
          updateUsedGroupByFieldNames(originalPivotTableDefinition);
       }
 
-      if(recordValues["columnsJson"])
+      if (recordValues["columnsJson"])
       {
-         updateAvailableFieldNames(JSON.parse(recordValues["columnsJson"]) as QQueryColumns)
+         updateAvailableFieldNames(JSON.parse(recordValues["columnsJson"]) as QQueryColumns);
       }
 
       (async () =>
@@ -251,6 +250,11 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
       const newEnabled = !!!getEnabled();
       setEnabled(newEnabled);
       onSaveCallback({usePivotTable: newEnabled});
+
+      if (!newEnabled)
+      {
+         onSaveCallback({pivotTableJson: null});
+      }
    }
 
 
@@ -268,13 +272,13 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
     *******************************************************************************/
    function addGroupBy(rowsOrColumns: "rows" | "columns")
    {
-      if (!pivotTableDefinition[rowsOrColumns])
+      if (!modalPivotTableDefinition[rowsOrColumns])
       {
-         pivotTableDefinition[rowsOrColumns] = [];
+         modalPivotTableDefinition[rowsOrColumns] = [];
       }
 
-      pivotTableDefinition[rowsOrColumns].push(new PivotTableGroupBy());
-      onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
+      modalPivotTableDefinition[rowsOrColumns].push(new PivotTableGroupBy());
+      validateForm()
       forceUpdate();
    }
 
@@ -284,8 +288,8 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
     *******************************************************************************/
    function groupByChangedCallback()
    {
-      onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
-      updateUsedGroupByFieldNames();
+      updateUsedGroupByFieldNames(modalPivotTableDefinition);
+      validateForm()
       forceUpdate();
    }
 
@@ -295,13 +299,13 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
     *******************************************************************************/
    function addValue()
    {
-      if (!pivotTableDefinition.values)
+      if (!modalPivotTableDefinition.values)
       {
-         pivotTableDefinition.values = [];
+         modalPivotTableDefinition.values = [];
       }
 
-      pivotTableDefinition.values.push(new PivotTableValue());
-      onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
+      modalPivotTableDefinition.values.push(new PivotTableValue());
+      validateForm()
       forceUpdate();
    }
 
@@ -311,8 +315,8 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
     *******************************************************************************/
    function removeValue(index: number)
    {
-      pivotTableDefinition.values.splice(index, 1);
-      onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
+      modalPivotTableDefinition.values.splice(index, 1);
+      validateForm()
       forceUpdate();
    }
 
@@ -346,7 +350,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
       const fieldNames: string[] = [];
       for (let i = 0; i < columns?.columns?.length; i++)
       {
-         if(columns.columns[i].isVisible)
+         if (columns.columns[i].isVisible)
          {
             fieldNames.push(columns.columns[i].name);
          }
@@ -375,13 +379,11 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
       const handleFieldChange = (event: any, newValue: any, reason: string) =>
       {
          value.fieldName = newValue ? newValue.fieldName : null;
-         onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
       };
 
       const handleFunctionChange = (event: any, newValue: any, reason: string) =>
       {
          value.function = newValue ? newValue.id : null;
-         onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
       };
 
       const functionOptions: any[] = [];
@@ -446,14 +448,13 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
     *******************************************************************************/
    const moveGroupBy = useCallback((rowsOrColumns: "rows" | "columns", dragIndex: number, hoverIndex: number) =>
    {
-      const array = pivotTableDefinition[rowsOrColumns];
+      const array = modalPivotTableDefinition[rowsOrColumns];
       const dragItem = array[dragIndex];
       array.splice(dragIndex, 1);
       array.splice(hoverIndex, 0, dragItem);
 
-      onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
       forceUpdate();
-   }, [pivotTableDefinition]);
+   }, [modalPivotTableDefinition]);
 
 
    /*******************************************************************************
@@ -461,183 +462,388 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
     *******************************************************************************/
    const moveValue = useCallback((dragIndex: number, hoverIndex: number) =>
    {
-      const array = pivotTableDefinition.values;
+      const array = modalPivotTableDefinition.values;
       const dragItem = array[dragIndex];
       array.splice(dragIndex, 1);
       array.splice(hoverIndex, 0, dragItem);
 
-      onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
       forceUpdate();
-   }, [pivotTableDefinition]);
+   }, [modalPivotTableDefinition]);
 
 
+   const noTable = (tableMetaData == null);
+   const noColumns = (!availableFieldNames || availableFieldNames.length == 0);
+
+   const selectTableFirstTooltipTitle = noTable ? "You must select a table before you can set up your pivot table" : null;
+   const selectColumnsFirstTooltipTitle = noColumns ? "You must set up your report's Columns before you can set up your Pivot Table" : null;
+   const editPopupDisabled = noTable || noColumns;
+
    /////////////////////////////////////////////////////////////
    // add toggle component to widget header for editable mode //
    /////////////////////////////////////////////////////////////
    const labelAdditionalElementsRight: JSX.Element[] = [];
    if (isEditable)
    {
-      labelAdditionalElementsRight.push(<HeaderToggleComponent label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
+      labelAdditionalElementsRight.push(<HeaderToggleComponent disabled={editPopupDisabled} disabledTooltip={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle} label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
    }
 
-   const selectTableFirstTooltipTitle = tableMetaData ? null : "You must select a table before you can set up a pivot table";
-
 
    /*******************************************************************************
     ** render a group-by (row or column)
     *******************************************************************************/
-   const renderGroupBy = useCallback(
-      (groupBy: PivotTableGroupBy, rowsOrColumns: "rows" | "columns", index: number) =>
-      {
-         return (
-            <PivotTableGroupByElement
-               key={groupBy.fieldName}
-               index={index}
-               id={`${groupBy.key}`}
-               dragCallback={moveGroupBy}
-               metaData={metaData}
-               tableMetaData={tableMetaData}
-               pivotTableDefinition={pivotTableDefinition}
-               usedGroupByFieldNames={usedGroupByFieldNames}
-               availableFieldNames={availableFieldNames}
-               isEditable={isEditable}
-               groupBy={groupBy}
-               rowsOrColumns={rowsOrColumns}
-               callback={groupByChangedCallback}
-            />
-         );
-      },
-      [tableMetaData, usedGroupByFieldNames, availableFieldNames],
+   const renderGroupBy = useCallback((groupBy: PivotTableGroupBy, rowsOrColumns: "rows" | "columns", index: number, forModal: boolean) =>
+   {
+      return (
+         <PivotTableGroupByElement
+            key={groupBy.fieldName}
+            index={index}
+            id={`${groupBy.key}`}
+            dragCallback={moveGroupBy}
+            metaData={metaData}
+            tableMetaData={tableMetaData}
+            pivotTableDefinition={forModal ? modalPivotTableDefinition : pivotTableDefinition}
+            usedGroupByFieldNames={usedGroupByFieldNames}
+            availableFieldNames={availableFieldNames}
+            isEditable={isEditable && forModal}
+            groupBy={groupBy}
+            rowsOrColumns={rowsOrColumns}
+            callback={groupByChangedCallback}
+            attemptedSubmit={attemptedSubmit}
+         />
+      );
+   },
+   [tableMetaData, usedGroupByFieldNames, availableFieldNames],
    );
 
 
    /*******************************************************************************
     ** render a pivot-table value (row or column)
     *******************************************************************************/
-   const renderValue = useCallback(
-      (value: PivotTableValue, index: number) =>
-      {
-         return (
-            <PivotTableValueElement
-               key={value.key}
-               index={index}
-               id={`${value.key}`}
-               dragCallback={moveValue}
-               metaData={metaData}
-               tableMetaData={tableMetaData}
-               pivotTableDefinition={pivotTableDefinition}
-               availableFieldNames={availableFieldNames}
-               isEditable={isEditable}
-               value={value}
-               callback={groupByChangedCallback}
-            />
-         );
-      },
-      [tableMetaData, usedGroupByFieldNames, availableFieldNames],
+   const renderValue = useCallback((value: PivotTableValue, index: number, forModal: boolean) =>
+   {
+      return (
+         <PivotTableValueElement
+            key={value.key}
+            index={index}
+            id={`${value.key}`}
+            dragCallback={moveValue}
+            metaData={metaData}
+            tableMetaData={tableMetaData}
+            pivotTableDefinition={forModal ? modalPivotTableDefinition : pivotTableDefinition}
+            availableFieldNames={availableFieldNames}
+            isEditable={isEditable && forModal}
+            value={value}
+            callback={groupByChangedCallback}
+            attemptedSubmit={attemptedSubmit}
+         />
+      );
+   },
+   [tableMetaData, usedGroupByFieldNames, availableFieldNames],
    );
 
 
-   return (<Widget widgetMetaData={widgetMetaData} labelAdditionalElementsRight={labelAdditionalElementsRight}>
-      {enabled && pivotTableDefinition &&
-         <DndProvider backend={HTML5Backend}>
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function openEditor()
+   {
+      if (recordValues["tableName"])
+      {
+         setModalPivotTableDefinition(Object.assign({}, pivotTableDefinition));
+         setModalOpen(true);
+         setAttemptedSubmit(false);
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function closeEditor(event?: {}, reason?: "backdropClick" | "escapeKeyDown")
+   {
+      if (reason == "backdropClick" || reason == "escapeKeyDown")
+      {
+         return;
+      }
+
+      setModalOpen(false);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function renderGroupBys(forModal: boolean, rowsOrColumns: "rows" | "columns")
+   {
+      const ptd = forModal ? modalPivotTableDefinition : pivotTableDefinition;
+
+      return <>
+         <h5>{rowsOrColumns == "rows" ? "Rows" : "Columns"}</h5>
+         <Box fontSize="1rem">
             {
-               showHelp("sectionSubhead") &&
-               <Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"}>
-                  {getHelpContent("sectionSubhead")}
-               </Box>
+               tableMetaData && (<div>{ptd[rowsOrColumns]?.map((groupBy, i) => renderGroupBy(groupBy, rowsOrColumns, i, forModal))}</div>)
             }
-            <Grid container spacing="16">
-
-               <Grid item lg={4} md={6} xs={12}>
-                  <h5>Rows</h5>
-                  <Box fontSize="1rem">
-                     {
-                        tableMetaData && (<div>{pivotTableDefinition?.rows?.map((row, i) => renderGroupBy(row, "rows", i))}</div>)
-                     }
-                  </Box>
-                  {
-                     isEditable &&
-                     <Box mt="0.375rem">
-                        <Tooltip title={selectTableFirstTooltipTitle}>
-                           <span><Button disabled={tableMetaData == null} sx={buttonSX} onClick={() => addGroupBy("rows")}>+ Add new row</Button></span>
-                        </Tooltip>
-                     </Box>
-                  }
-               </Grid>
-
-               <Grid item lg={4} md={6} xs={12}>
-                  <h5>Columns</h5>
-                  <Box fontSize="1rem">
-                     {
-                        tableMetaData && (<div>{pivotTableDefinition?.columns?.map((column, i) => renderGroupBy(column, "columns", i))}</div>)
-                     }
-                  </Box>
-                  {
-                     isEditable &&
-                     <Box mt="0.375rem">
-                        <Tooltip title={selectTableFirstTooltipTitle}>
-                           <span><Button disabled={tableMetaData == null} sx={buttonSX} onClick={() => addGroupBy("columns")}>+ Add new column</Button></span>
-                        </Tooltip>
-                     </Box>
-                  }
-               </Grid>
-
-               <Grid item lg={4} md={6} xs={12}>
-                  <h5>Values</h5>
-                  <Box fontSize="1rem">
-                     {
-                        tableMetaData && (<div>{pivotTableDefinition?.values?.map((value, i) => renderValue(value, i))}</div>)
-                     }
-                  </Box>
-                  {
-                     isEditable &&
-                     <Box mt="0.375rem">
-                        <Tooltip title={selectTableFirstTooltipTitle}>
-                           <span><Button disabled={tableMetaData == null} sx={buttonSX} onClick={addValue}>+ Add new value</Button></span>
-                        </Tooltip>
-                     </Box>
-                  }
-               </Grid>
-
-            </Grid>
-            {/*
-            <Box mt={"1rem"}>
-               <h5>Preview</h5>
-               <table>
-                  <tr>
-                     <th style={{textAlign: "left", fontSize: "0.875rem"}}></th>
-                     <th style={{textAlign: "left", fontSize: "0.875rem"}}>Column Labels</th>
-                  </tr>
-                  {
-                     pivotTableDefinition?.columns?.map((column, i) =>
-                        (
-                           <tr key={column.key}>
-                              <th style={{textAlign: "left", fontSize: "0.875rem"}}></th>
-                              <th style={{textAlign: "left", fontSize: "0.875rem"}}>{column.fieldName}</th>
-                           </tr>
-                        ))
-                  }
-                  <tr>
-                     <th style={{textAlign: "left", fontSize: "0.875rem"}}>Row Labels</th>
-                     {
-                        pivotTableDefinition?.values?.map((value, i) =>
-                           (
-                              <th key={value.key} style={{textAlign: "left", fontSize: "0.875rem"}}>{value.function} of {value.fieldName}</th>
-                           ))
-                     }
-                  </tr>
-                  {
-                     pivotTableDefinition?.rows?.map((row, i) =>
-                        (
-                           <tr key={row.key}>
-                              <th style={{textAlign: "left", fontSize: "0.875rem", paddingLeft: (i * 1) + "rem"}}>{row.fieldName}</th>
-                           </tr>
-                        ))
-                  }
-               </table>
+         </Box>
+         {
+            (forModal || (isEditable && !ptd[rowsOrColumns]?.length)) &&
+            <Box mt={forModal ? "0.5rem" : "0"} mb="1rem">
+               <Tooltip title={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle}>
+                  <span><Button disabled={editPopupDisabled} sx={forModal ? buttonSX : unborderedButtonSX} onClick={() => forModal ? addGroupBy(rowsOrColumns) : openEditor()}>+ Add new {rowsOrColumns == "rows" ? "row" : "column"}</Button></span>
+               </Tooltip>
             </Box>
-            */}
-         </DndProvider>
+         }
+         {
+            !isEditable && !forModal && !ptd[rowsOrColumns]?.length &&
+            <Box color={colors.gray.main} fontSize="1rem">Your pivot table has no {rowsOrColumns}.</Box>
+         }
+      </>;
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function renderValues(forModal: boolean)
+   {
+      const ptd = forModal ? modalPivotTableDefinition : pivotTableDefinition;
+
+      return <>
+         <h5>Values</h5>
+         <Box fontSize="1rem">
+            {
+               tableMetaData && (<div>{ptd?.values?.map((value, i) => renderValue(value, i, forModal))}</div>)
+            }
+         </Box>
+         {
+            (forModal || (isEditable && !ptd?.values?.length)) &&
+            <Box mt={forModal ? "0.5rem" : "0"} mb="1rem">
+               <Tooltip title={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle}>
+                  <span><Button disabled={editPopupDisabled} sx={forModal ? buttonSX : unborderedButtonSX} onClick={() => forModal ? addValue() : openEditor()}>+ Add new value</Button></span>
+               </Tooltip>
+            </Box>
+         }
+         {
+            !isEditable && !forModal && !ptd?.values?.length &&
+            <Box color={colors.gray.main} fontSize="1rem">Your pivot table has no values.</Box>
+         }
+      </>;
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function validateForm(submitting: boolean = false)
+   {
+      ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // if this isn't a call from the on-submit handler, and we haven't previously attempted a submit, then return w/o setting any alerts //
+      // this is like a version of considering "touched"...                                                                                //
+      ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      if(!submitting && !attemptedSubmit)
+      {
+         return;
+      }
+
+      let missingValues = 0;
+
+      for (let i = 0; i < modalPivotTableDefinition?.rows?.length; i++)
+      {
+         if (!modalPivotTableDefinition.rows[i].fieldName)
+         {
+            missingValues++;
+         }
+      }
+
+      for (let i = 0; i < modalPivotTableDefinition?.columns?.length; i++)
+      {
+         if (!modalPivotTableDefinition.columns[i].fieldName)
+         {
+            missingValues++;
+         }
+      }
+
+      for (let i = 0; i < modalPivotTableDefinition?.values?.length; i++)
+      {
+         if (!modalPivotTableDefinition.values[i].fieldName)
+         {
+            missingValues++;
+         }
+         if (!modalPivotTableDefinition.values[i].function)
+         {
+            missingValues++;
+         }
+      }
+
+      if (missingValues == 0)
+      {
+         setErrorAlert(null);
+
+         ////////////////////////////////////////////////////////////////////////////////////
+         // this is to catch the case of - user attempted to submit, and there were errors //
+         // now they've fixed 'em - so go back to a 'clean' state - so if they add more    //
+         // boxes, they won't immediately show errors, until a re-submit                   //
+         ////////////////////////////////////////////////////////////////////////////////////
+         if(attemptedSubmit)
+         {
+            setAttemptedSubmit(false);
+         }
+         return (false);
+      }
+
+      setErrorAlert(`Missing value in ${missingValues} field${missingValues == 1 ? "" : "s"}.`);
+      return (true);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function saveClicked()
+   {
+      setAttemptedSubmit(true);
+
+      if (validateForm(true))
+      {
+         return;
+      }
+
+      if (!onSaveCallback)
+      {
+         console.log("onSaveCallback was not defined");
+         return;
+      }
+
+      setPivotTableDefinition(Object.assign({}, modalPivotTableDefinition));
+      updateUsedGroupByFieldNames(modalPivotTableDefinition);
+
+      onSaveCallback({pivotTableJson: JSON.stringify(modalPivotTableDefinition)});
+
+      closeEditor();
+   }
+
+
+   ////////////
+   // render //
+   ////////////
+   return (<Widget widgetMetaData={widgetMetaData} labelAdditionalElementsRight={labelAdditionalElementsRight}>
+      {
+         <React.Fragment>
+            <DndProvider backend={HTML5Backend}>
+               {
+                  enabled &&
+                  <Box display="flex" justifyContent="space-between">
+                     <Box>
+                        {
+                           showHelp("sectionSubhead") &&
+                           <Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"}>
+                              {getHelpContent("sectionSubhead")}
+                           </Box>
+                        }
+                     </Box>
+                     {
+                        isEditable &&
+                        <Tooltip title={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle}>
+                           <span>
+                              <Button disabled={editPopupDisabled} onClick={() => openEditor()} sx={{p: 0}} disableRipple>
+                                 <Typography display="inline" textTransform="none" fontSize={"1.125rem"}>
+                                    Edit Pivot Table
+                                 </Typography>
+                              </Button>
+                           </span>
+                        </Tooltip>
+                     }
+                  </Box>
+               }
+               {
+                  (!enabled || !pivotTableDefinition) && !isEditable &&
+                  <Box fontSize="1rem">Your report does not use a Pivot Table.</Box>
+               }
+               {
+                  enabled && pivotTableDefinition &&
+                  <>
+                     <Grid container spacing="16">
+
+                        <Grid item lg={4} md={6} xs={12}>{renderGroupBys(false, "rows")}</Grid>
+                        <Grid item lg={4} md={6} xs={12}>{renderGroupBys(false, "columns")}</Grid>
+                        <Grid item lg={4} md={6} xs={12}>{renderValues(false)}</Grid>
+
+                     </Grid>
+                     {
+                        modalOpen &&
+                        <Modal open={modalOpen} onClose={(event, reason) => closeEditor(event, reason)}>
+                           <div>
+                              <Box sx={{position: "absolute", width: "100%"}}>
+                                 <Card sx={{m: "2rem", p: "2rem", overflowY: "auto", height: "calc(100vh - 4rem)"}}>
+                                    <h3>Edit Pivot Table</h3>
+                                    {
+                                       showHelp("modalSubheader") &&
+                                       <Box color={colors.gray.main}>
+                                          {getHelpContent("modalSubheader")}
+                                       </Box>
+                                    }
+                                    {
+                                       errorAlert && <Alert icon={<Icon>error_outline</Icon>} color="error" onClose={() => setErrorAlert(null)}>{errorAlert}</Alert>
+                                    }
+                                    <Grid container spacing="16" overflow="auto" mt="0.5rem" mb="1rem" height="100%">
+
+                                       <Grid item lg={4} md={6} xs={12}>{renderGroupBys(true, "rows")}</Grid>
+                                       <Grid item lg={4} md={6} xs={12}>{renderGroupBys(true, "columns")}</Grid>
+                                       <Grid item lg={4} md={6} xs={12}>{renderValues(true)}</Grid>
+
+                                    </Grid>
+                                    <Box>
+                                       <Box display="flex" justifyContent="flex-end">
+                                          <QCancelButton disabled={false} onClickHandler={closeEditor} />
+                                          <QSaveButton label="OK" iconName="check" disabled={false} onClickHandler={saveClicked} />
+                                       </Box>
+                                    </Box>
+                                 </Card>
+                              </Box>
+                           </div>
+                        </Modal>
+                     }
+                  </>
+               }
+            </DndProvider>
+         </React.Fragment>
       }
    </Widget>);
 }
+
+/* this was a rough-draft of what a preview of a pivot could look like...
+   <Box mt={"1rem"}>
+      <h5>Preview</h5>
+      <table>
+         <tr>
+            <th style={{textAlign: "left", fontSize: "0.875rem"}}></th>
+            <th style={{textAlign: "left", fontSize: "0.875rem"}}>Column Labels</th>
+         </tr>
+         {
+            pivotTableDefinition?.columns?.map((column, i) =>
+               (
+                  <tr key={column.key}>
+                     <th style={{textAlign: "left", fontSize: "0.875rem"}}></th>
+                     <th style={{textAlign: "left", fontSize: "0.875rem"}}>{column.fieldName}</th>
+                  </tr>
+               ))
+         }
+         <tr>
+            <th style={{textAlign: "left", fontSize: "0.875rem"}}>Row Labels</th>
+            {
+               pivotTableDefinition?.values?.map((value, i) =>
+                  (
+                     <th key={value.key} style={{textAlign: "left", fontSize: "0.875rem"}}>{value.function} of {value.fieldName}</th>
+                  ))
+            }
+         </tr>
+         {
+            pivotTableDefinition?.rows?.map((row, i) =>
+               (
+                  <tr key={row.key}>
+                     <th style={{textAlign: "left", fontSize: "0.875rem", paddingLeft: (i * 1) + "rem"}}>{row.fieldName}</th>
+                  </tr>
+               ))
+         }
+      </table>
+   </Box>
+*/

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

@@ -20,6 +20,8 @@
  */
 
 
+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 Autocomplete from "@mui/material/Autocomplete";
@@ -31,8 +33,8 @@ import type {Identifier, XYCoord} from "dnd-core";
 import colors from "qqq/assets/theme/base/colors";
 import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
 import {DragItemTypes, fieldAutoCompleteTextFieldSX, getSelectedFieldForAutoComplete, xIconButtonSX} from "qqq/components/widgets/misc/PivotTableSetupWidget";
-import {PivotTableDefinition, PivotTableFunction, pivotTableFunctionLabels, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
-import React, {FC, useRef} from "react";
+import {functionsPerFieldType, PivotTableDefinition, pivotTableFunctionLabels, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
+import React, {FC, useReducer, useRef, useState} from "react";
 import {useDrag, useDrop} from "react-dnd";
 
 
@@ -51,6 +53,7 @@ export interface PivotTableValueElementProps
    isEditable: boolean;
    value: PivotTableValue;
    callback: () => void;
+   attemptedSubmit?: boolean;
 }
 
 
@@ -68,8 +71,11 @@ interface DragItem
 /*******************************************************************************
  ** Element to render 1 pivot-table value.
  *******************************************************************************/
-export const PivotTableValueElement: FC<PivotTableValueElementProps> = ({id, index, dragCallback, metaData, tableMetaData, pivotTableDefinition, availableFieldNames, value, isEditable, callback}) =>
+export const PivotTableValueElement: FC<PivotTableValueElementProps> = ({id, index, dragCallback, metaData, tableMetaData, pivotTableDefinition, availableFieldNames, value, isEditable, callback, attemptedSubmit}) =>
 {
+   const [defaultFunctionValue, setDefaultFunctionValue] = useState(null);
+   const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
    ////////////////////////////////////////////////////////////////////////////
    // credit: https://react-dnd.github.io/react-dnd/examples/sortable/simple //
    ////////////////////////////////////////////////////////////////////////////
@@ -147,24 +153,68 @@ export const PivotTableValueElement: FC<PivotTableValueElementProps> = ({id, ind
    });
 
 
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getFunctionsForField(field: QFieldMetaData)
+   {
+      if(field)
+      {
+         let type = field.type;
+         if (field.possibleValueSourceName)
+         {
+            type = QFieldType.STRING;
+         }
+
+         if(functionsPerFieldType[type])
+         {
+            return (functionsPerFieldType[type]);
+         }
+      }
+
+      //////////////////////////////////////
+      // return broadest list if no field //
+      //////////////////////////////////////
+      return (functionsPerFieldType[QFieldType.INTEGER]);
+   }
+
+
    /*******************************************************************************
     ** event handler for user selecting a field
     *******************************************************************************/
-   const handleFieldChange = (event: any, newValue: any, reason: string) =>
+   function handleFieldChange(event: any, newValue: any, reason: string)
    {
       value.fieldName = newValue ? newValue.fieldName : null;
+
+      if(newValue)
+      {
+         /////////////////////////////////////////////////////////////////////////////////////////
+         // if newly selected field doesn't have the currently selected function, then clear it //
+         /////////////////////////////////////////////////////////////////////////////////////////
+         const newSelectedField = getSelectedFieldForAutoComplete(tableMetaData, newValue.fieldName);
+         if (newSelectedField)
+         {
+            if(getFunctionsForField(newSelectedField.field).indexOf(value.function) == -1)
+            {
+               setDefaultFunctionValue(null);
+               handleFunctionChange(null, null, null);
+               forceUpdate();
+            }
+         }
+      }
+
       callback();
-   };
+   }
 
 
    /*******************************************************************************
     ** event handler for user selecting a function
     *******************************************************************************/
-   const handleFunctionChange = (event: any, newValue: any, reason: string) =>
+   function handleFunctionChange(event: any, newValue: any, reason: string)
    {
       value.function = newValue ? newValue.id : null;
       callback();
-   };
+   }
 
 
    /*******************************************************************************
@@ -176,65 +226,43 @@ export const PivotTableValueElement: FC<PivotTableValueElementProps> = ({id, ind
       callback();
    }
 
+   const selectedField = getSelectedFieldForAutoComplete(tableMetaData, value.fieldName);
 
    /////////////////////////////////////////////////////////////////////
    // if we're not on an edit screen, return a simpler read-only view //
    /////////////////////////////////////////////////////////////////////
    if (!isEditable)
    {
-      const selectedField = getSelectedFieldForAutoComplete(tableMetaData, value.fieldName);
+      let label = "--";
       if (selectedField && value.function)
       {
-         const label = selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label;
-         return (<Box mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{pivotTableFunctionLabels[value.function]} of {label}</Box>);
+         label = pivotTableFunctionLabels[value.function] + " of " + (selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label);
       }
 
-      return (<React.Fragment />);
+      return (<Box><Box display="inline-block" mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{label}</Box></Box>);
    }
 
    ///////////////////////////////////////////////////////////////////////////////
    // figure out functions to display in drop down, plus selected/default value //
    ///////////////////////////////////////////////////////////////////////////////
    const functionOptions: any[] = [];
-   let defaultFunctionValue = null;
-   for (let pivotTableFunctionKey in PivotTableFunction)
+   const availableFunctions = getFunctionsForField(selectedField?.field);
+   for (let pivotTableFunction of availableFunctions)
    {
-      // @ts-ignore any?
-      const label = "" + pivotTableFunctionLabels[pivotTableFunctionKey];
-      const option = {id: pivotTableFunctionKey, label: label};
+      const label = pivotTableFunctionLabels[pivotTableFunction];
+      const option = {id: pivotTableFunction, label: label};
       functionOptions.push(option);
 
-      if (option.id == value.function)
+      if (option.id == value.function && JSON.stringify(option) != JSON.stringify(defaultFunctionValue))
       {
-         defaultFunctionValue = option;
+         setDefaultFunctionValue(option);
       }
    }
 
    drag(drop(ref));
 
-   /*
-   return (<Box ref={ref} display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center" sx={{backgroundColor: "white", opacity: isDragging ? 0 : 1}} data-handler-id={handlerId}>
-      <Box sx={{whiteSpace: "nowrap"}}>
-         <Icon sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
-      </Box>
-      <Box width="100%">
-         <FieldAutoComplete
-            id={`${rowsOrColumns}-${index}`}
-            label={null}
-            variant="outlined"
-            textFieldSX={fieldAutoCompleteTextFieldSX}
-            metaData={metaData}
-            tableMetaData={tableMetaData}
-            handleFieldChange={handleFieldChange}
-            hiddenFieldNames={usedGroupByFieldNames}
-            defaultValue={getSelectedFieldForAutoComplete(tableMetaData, groupBy.fieldName)}
-         />
-      </Box>
-      <Box>
-         <Button sx={xIconButtonSX} onClick={() => removeGroupBy(index, rowsOrColumns)}><Icon>clear</Icon></Button>
-      </Box>
-   </Box>);
-    */
+   const showValueError = attemptedSubmit && !value.fieldName;
+   const showFunctionError = attemptedSubmit && !value.function;
 
    return (<Box ref={ref} display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center" sx={{backgroundColor: "white", opacity: isDragging ? 0 : 1}} data-handler-id={handlerId}>
       <Box>
@@ -250,25 +278,34 @@ export const PivotTableValueElement: FC<PivotTableValueElementProps> = ({id, ind
             tableMetaData={tableMetaData}
             handleFieldChange={handleFieldChange}
             availableFieldNames={availableFieldNames}
-            defaultValue={getSelectedFieldForAutoComplete(tableMetaData, value.fieldName)}
+            defaultValue={selectedField}
+            hasError={showValueError}
          />
       </Box>
-      <Box width="330px">
+      <Box width="370px">
          <Autocomplete
-            id={`values-field-${index}`}
-            renderInput={(params) => (<TextField {...params} label={null} variant="outlined" sx={fieldAutoCompleteTextFieldSX} autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
+            id={`values-function-${index}`}
+            renderInput={(params) =>
+            {
+               const inputProps = params.InputProps;
+               const originalEndAdornment = inputProps.endAdornment;
+               inputProps.endAdornment = <Box>
+                  {showFunctionError && <Icon color="error">error_outline</Icon>}
+                  {originalEndAdornment}
+               </Box>;
+
+               return (<TextField {...params} label={null} variant="outlined" sx={fieldAutoCompleteTextFieldSX} autoComplete="off" type="search" InputProps={inputProps} />)
+            }}
             // @ts-ignore
-            defaultValue={defaultFunctionValue}
+            value={defaultFunctionValue}
+            inputValue={defaultFunctionValue?.label ?? ""}
             options={functionOptions}
             onChange={handleFunctionChange}
             isOptionEqualToValue={(option, value) => option.id === value.id}
             getOptionLabel={(option) => option.label}
-            // todo? renderOption={(props, option, state) => renderFieldOption(props, option, state)}
             autoSelect={true}
             autoHighlight={true}
             disableClearable
-            // slotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
-            // {...alsoOpen}
          />
       </Box>
       <Box>

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

@@ -25,8 +25,8 @@ import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Q
 import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
 import {Alert, Collapse} from "@mui/material";
 import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
-import Link from "@mui/material/Link";
 import Modal from "@mui/material/Modal";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
 import QContext from "QContext";
@@ -53,6 +53,27 @@ ReportSetupWidget.defaultProps = {
    onSaveCallback: null
 };
 
+export const buttonSX =
+   {
+      border: `1px solid ${colors.grayLines.main} !important`,
+      borderRadius: "0.75rem",
+      textTransform: "none",
+      fontSize: "1rem",
+      fontWeight: "400",
+      paddingLeft: "1rem",
+      paddingRight: "1rem",
+      opacity: "1",
+      color: colors.dark.main,
+      "&:hover": {color: colors.dark.main},
+      "&:focus": {color: colors.dark.main},
+      "&:focus:not(:hover)": {color: colors.dark.main},
+   };
+
+export const unborderedButtonSX = Object.assign({}, buttonSX);
+unborderedButtonSX.border = "none !important";
+unborderedButtonSX.opacity = "0.7";
+
+
 const qController = Client.getInstance();
 
 /*******************************************************************************
@@ -126,6 +147,9 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
 
       // @ts-ignore possibly 'undefined'.
       const view = recordQueryRef?.current?.getCurrentView();
+
+      view.queryColumns.sortColumnsFixingPinPositions();
+
       onSaveCallback({queryFilterJson: JSON.stringify(view.queryFilter), columnsJson: JSON.stringify(view.queryColumns)});
 
       closeEditor();
@@ -189,9 +213,12 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
    {
       if(tableMetaData)
       {
-         if(columns?.columns?.length > 0)
+         for(let i = 0; i<columns?.columns?.length; i++)
          {
-            return (true);
+            if(columns.columns[i].isVisible && columns.columns[i].name != "__check__")
+            {
+               return (true);
+            }
          }
       }
 
@@ -252,7 +279,7 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
                   {
                      isEditable &&
                      <Tooltip title={selectTableFirstTooltipTitle}>
-                        <Link sx={{cursor: "pointer"}} onClick={openEditor} color={colors.gray.main}>+ Add Filters</Link>
+                        <span><Button disabled={!recordValues["tableName"]} sx={{mb: "0.125rem", ...unborderedButtonSX}} onClick={openEditor}>+ Add Filters</Button></span>
                      </Tooltip>
                   }
                   {
@@ -274,11 +301,11 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
                      {
                         isEditable &&
                         <Tooltip title={selectTableFirstTooltipTitle}>
-                           <Link sx={{cursor: "pointer"}} onClick={openEditor} color={colors.gray.main}>+ Add Columns</Link>
+                           <span><Button disabled={!recordValues["tableName"]} sx={unborderedButtonSX} onClick={openEditor}>+ Add Columns</Button></span>
                         </Tooltip>
                      }
                      {
-                        !isEditable && <Box color={colors.gray.main}>Your report has no filters.</Box>
+                        !isEditable && <Box color={colors.gray.main}>Your report has no columns.</Box>
                      }
                   </Box>
                }