CE-876 New dashboard widgets (more or less):

- New Composite & Block widget constructs.
- Option for a parent widget's label to be the app home page's label
- Updates to table-widget handling of fixed footer (to expand and stay fixed)
- Option for widgets to have CSV Data that can be exported differently from just the data "in" the widget.
-- This included changing the default value for showExportButton from true to false

src/qqq/components/widgets/tables/DataTable.tsx

@@ -18,6 +18,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {tooltipClasses, TooltipProps} from "@mui/material";
 import Autocomplete from "@mui/material/Autocomplete";
 import Box from "@mui/material/Box";
@@ -35,11 +36,13 @@ import colors from "qqq/assets/theme/base/colors";
 import MDInput from "qqq/components/legacy/MDInput";
 import MDPagination from "qqq/components/legacy/MDPagination";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import CompositeWidget from "qqq/components/widgets/CompositeWidget";
 import DataTableBodyCell from "qqq/components/widgets/tables/cells/DataTableBodyCell";
 import DataTableHeadCell from "qqq/components/widgets/tables/cells/DataTableHeadCell";
 import DefaultCell from "qqq/components/widgets/tables/cells/DefaultCell";
 import ImageCell from "qqq/components/widgets/tables/cells/ImageCell";
 import {TableDataInput} from "qqq/components/widgets/tables/TableCard";
+import WidgetBlock from "qqq/components/widgets/WidgetBlock";
 
 interface Props
 {
@@ -57,6 +60,7 @@ interface Props
    };
    isSorted?: boolean;
    noEndBorder?: boolean;
+   widgetMetaData: QWidgetMetaData;
 }
 
 DataTable.defaultProps = {
@@ -92,6 +96,7 @@ function DataTable({
    pagination,
    isSorted,
    noEndBorder,
+   widgetMetaData
 }: Props): JSX.Element
 {
    let defaultValue: any;
@@ -280,21 +285,36 @@ function DataTable({
       entriesEnd = pageSize * (pageIndex + 1);
    }
 
+   let visibleFooterRows = 1;
+   if(expanded && expanded[`${table.rows.length-1}`])
+   {
+      //////////////////////////////////////////////////
+      // todo - should count how many are expanded... //
+      //////////////////////////////////////////////////
+      visibleFooterRows = 2;
+   }
+
    function getTable(includeHead: boolean, rows: any, isFooter: boolean)
    {
       let boxStyle = {};
       if(fixedStickyLastRow)
       {
          boxStyle = isFooter
-            ? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, overflow: "auto", scrollbarGutter: "stable"}
-            : {height: fixedHeight ? `${fixedHeight}px` : "360px", overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
+            ? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, backgroundColor: "#EEEEEE"}
+            : {flexGrow: 1, overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
       }
 
-      return <Box sx={boxStyle}>
+      let innerBoxStyle = {};
+      if(fixedStickyLastRow && isFooter)
+      {
+         innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"};
+      }
+
+      return <Box sx={boxStyle}><Box sx={innerBoxStyle}>
          <Table {...getTableProps()}>
             {
                includeHead && (
-                  <Box component="thead" sx={{position: "sticky", top: 0, background: "white"}}>
+                  <Box component="thead" sx={{position: "sticky", top: 0, background: "white", zIndex: 10}}>
                      {headerGroups.map((headerGroup: any, i: number) => (
                         <TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", gridTemplateColumns: gridTemplateColumns}}>
                            {headerGroup.headers.map((column: any) => (
@@ -341,13 +361,23 @@ function DataTable({
                      overrideNoEndBorder = true;
                   }
 
+                  let background = "initial";
+                  if(isFooter)
+                  {
+                     background = "#EEEEEE";
+                  }
+                  else if(row.depth > 0 || row.isExpanded)
+                  {
+                     background = "#FAFAFA";
+                  }
+
                   return (
-                     <TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: (row.depth > 0 ? "#FAFAFA" : "initial")}} key={key} {...row.getRowProps()}>
+                     <TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: background}} key={key} {...row.getRowProps()}>
                         {row.cells.map((cell: any) => (
                            cell.column.type !== "hidden" && (
                               <DataTableBodyCell
                                  key={key}
-                                 noBorder={noEndBorder || overrideNoEndBorder}
+                                 noBorder={noEndBorder || overrideNoEndBorder || row.isExpanded}
                                  depth={row.depth}
                                  align={cell.column.align ? cell.column.align : "left"}
                                  {...cell.getCellProps()}
@@ -372,7 +402,21 @@ function DataTable({
                                  }
                                  {
                                     cell.column.type === "html" && (
-                                       <DefaultCell isFooter={isFooter}>{parse(cell.value)}</DefaultCell>
+                                       <DefaultCell isFooter={isFooter}>{parse(cell.value ?? "")}</DefaultCell>
+                                    )
+                                 }
+                                 {
+                                    cell.column.type === "composite" && (
+                                       <DefaultCell isFooter={isFooter}>
+                                          <CompositeWidget widgetMetaData={widgetMetaData} data={cell.value} />
+                                       </DefaultCell>
+                                    )
+                                 }
+                                 {
+                                    cell.column.type === "block" && (
+                                       <DefaultCell isFooter={isFooter}>
+                                          <WidgetBlock widgetMetaData={widgetMetaData} block={cell.value} />
+                                       </DefaultCell>
                                     )
                                  }
                                  {
@@ -397,11 +441,11 @@ function DataTable({
 
             </TableBody>
          </Table>
-      </Box>
+      </Box></Box>
    }
 
    return (
-      <TableContainer sx={{boxShadow: "none"}}>
+      <TableContainer sx={{boxShadow: "none", height: fixedHeight ? `${fixedHeight}px` : "auto"}}>
          {entriesPerPage && ((hidePaginationDropdown !== undefined && !hidePaginationDropdown) || canSearch) ? (
             <Box display="flex" justifyContent="space-between" alignItems="center" p={3}>
                {entriesPerPage && (hidePaginationDropdown === undefined || !hidePaginationDropdown) && (
@@ -448,14 +492,16 @@ function DataTable({
             </Box>
          ) : null}
 
-         {
-            fixedStickyLastRow ? (
-               <>
-                  {getTable(true, page.slice(0, page.length -1), false)}
-                  {getTable(false, page.slice(page.length-1), true)}
-               </>
-            ) : getTable(true, page, false)
-         }
+         <Box display="flex" justifyContent="space-between" flexDirection="column" height="100%">
+            {
+               fixedStickyLastRow ? (
+                  <>
+                     {getTable(true, page.slice(0, page.length - visibleFooterRows), false)}
+                     {getTable(false, page.slice(page.length - visibleFooterRows), true)}
+                  </>
+               ) : getTable(true, page, false)
+            }
+         </Box>
 
          <Box
             display="flex"

src/qqq/components/widgets/tables/TableCard.tsx

@@ -20,6 +20,7 @@
  */
 
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {Skeleton} from "@mui/material";
 import Box from "@mui/material/Box";
 import Table from "@mui/material/Table";
@@ -57,10 +58,11 @@ interface Props
    fixedStickyLastRow?: boolean;
    fixedHeight?: number;
    data: TableDataInput;
+   widgetMetaData: QWidgetMetaData;
 }
 
 const qController = Client.getInstance();
-function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight}: Props): JSX.Element
+function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight, widgetMetaData}: Props): JSX.Element
 {
    const [qInstance, setQInstance] = useState(null as QInstance);
 
@@ -74,7 +76,7 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
    }, []);
 
    return (
-      <Box py={1} mx={-2}>
+      <Box className="tableCard" mx={-2} mb="-28px" pt="11px" pb="0.25rem">
          {
             data && data.columns && !noRowsFoundHTML ?
                <DataTable
@@ -85,9 +87,10 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
                   fixedHeight={fixedHeight}
                   showTotalEntries={false}
                   isSorted={false}
+                  widgetMetaData={widgetMetaData}
                />
                : noRowsFoundHTML ?
-                  <Box p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
+                  <Box p={3} pt={0} pb={3} sx={{textAlign: "center"}}>
                      <MDTypography
                         variant="subtitle2"
                         color="secondary"

src/qqq/components/widgets/tables/TableWidget.tsx

@@ -21,16 +21,12 @@
 
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import Button from "@mui/material/Button";
-import Icon from "@mui/material/Icon";
-import Tooltip from "@mui/material/Tooltip/Tooltip";
-import Typography from "@mui/material/Typography";
 // @ts-ignore
 import {htmlToText} from "html-to-text";
 import React, {useEffect, useState} from "react";
-import colors from "qqq/assets/theme/base/colors";
 import TableCard from "qqq/components/widgets/tables/TableCard";
 import Widget, {WidgetData} from "qqq/components/widgets/Widget";
+import {WidgetUtils} from "qqq/components/widgets/WidgetUtils";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
@@ -105,7 +101,7 @@ function TableWidget(props: Props): JSX.Element
 
          setCsv(csv);
 
-         const fileName = (props.widgetData.label ?? props.widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
+         const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
          setFileName(fileName)
 
          console.log(`useEffect, setting fileName ${fileName}`);
@@ -115,7 +111,13 @@ function TableWidget(props: Props): JSX.Element
 
    const onExportClick = () =>
    {
-      if(csv)
+      if(props.widgetData?.csvData)
+      {
+         const csv = WidgetUtils.widgetCsvDataToString(props.widgetData);
+         const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
+         HtmlUtils.download(fileName, csv);
+      }
+      else if(csv)
       {
          HtmlUtils.download(fileName, csv);
       }
@@ -128,11 +130,7 @@ function TableWidget(props: Props): JSX.Element
    const labelAdditionalElementsLeft: JSX.Element[] = [];
    if(props.widgetMetaData?.showExportButton)
    {
-      labelAdditionalElementsLeft.push(
-         <Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative" top="-0.25rem">
-            <Tooltip title="Export"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={false}><Icon sx={{color: colors.gray.main, fontSize: 1.125}}>save_alt</Icon></Button></Tooltip>
-         </Typography>
-      );
+      labelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
    }
 
    return (
@@ -151,6 +149,7 @@ function TableWidget(props: Props): JSX.Element
             fixedStickyLastRow={props.widgetData?.fixedStickyLastRow}
             fixedHeight={props.widgetData?.fixedHeight}
             data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows}}
+            widgetMetaData={props.widgetMetaData}
          />
       </Widget>
    );

src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx

@@ -39,7 +39,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
          component="td"
          textAlign={align}
          py={1.5}
-         px={3}
+         px={1.5}
          sx={({palette: {light}, typography: {size}, borders: {borderWidth}}: Theme) => ({
             borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${colors.grayLines.main}`,
             fontSize: "0.875rem",

src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx

@@ -45,7 +45,7 @@ function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JS
          component="th"
          width={width}
          py={1.5}
-         px={3}
+         px={1.5}
          sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
             borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
             "&:nth-child(1)": {