QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 13:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

CE-1240: updated composite widget to have flex column ability, support for 'multi table' widget,

Browse Source
This commit is contained in:
Tim Chamberlain
2024-05-03 20:26:36 -05:00
parent 1859dd603d
commit f925ad9116
6 changed files with 69 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/qqq/components/widgets/tables/DataTable.tsx
View File

@ -30,8 +30,6 @@ import TableContainer from "@mui/material/TableContainer";
import TableRow from "@mui/material/TableRow";
import Tooltip from "@mui/material/Tooltip";
import parse from "html-react-parser";
import React, {useEffect, useMemo, useState} from "react";
import {useAsyncDebounce, useExpanded, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
import colors from "qqq/assets/theme/base/colors";
import MDInput from "qqq/components/legacy/MDInput";
import MDPagination from "qqq/components/legacy/MDPagination";
@ -43,6 +41,8 @@ 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";
import React, {useEffect, useMemo, useState} from "react";
import {useAsyncDebounce, useExpanded, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
interface Props
{
@ -106,17 +106,17 @@ function DataTable({
entries = entriesPerPageOptions ? entriesPerPageOptions : ["10", "25", "50", "100"];
let widths = [];
for(let i = 0; i<table.columns.length; i++)
for (let i = 0; i < table.columns.length; i++)
{
const column = table.columns[i];
if(column.type !== "hidden")
if (column.type !== "hidden")
{
widths.push(table.columns[i].width ?? "1fr");
}
}
let showExpandColumn = false;
if(table.rows)
if (table.rows)
{
for (let i = 0; i < table.rows.length; i++)
{
@ -129,7 +129,7 @@ function DataTable({
}
const columnsToMemo = [...table.columns];
if(showExpandColumn)
if (showExpandColumn)
{
widths.push("60px");
columnsToMemo.push(
@ -173,11 +173,11 @@ function DataTable({
);
}
if(table.columnHeaderTooltips)
if (table.columnHeaderTooltips)
{
for (let column of columnsToMemo)
{
if(table.columnHeaderTooltips[column.accessor])
if (table.columnHeaderTooltips[column.accessor])
{
column.tooltip = table.columnHeaderTooltips[column.accessor];
}
@ -297,7 +297,7 @@ function DataTable({
}
let visibleFooterRows = 1;
if(expanded && expanded[`${table.rows.length-1}`])
if (expanded && expanded[`${table.rows.length - 1}`])
{
//////////////////////////////////////////////////
// todo - should count how many are expanded... //
@ -308,7 +308,7 @@ function DataTable({
function getTable(includeHead: boolean, rows: any, isFooter: boolean)
{
let boxStyle = {};
if(fixedStickyLastRow)
if (fixedStickyLastRow)
{
boxStyle = isFooter
? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, backgroundColor: "#EEEEEE"}
@ -316,7 +316,7 @@ function DataTable({
}
let innerBoxStyle = {};
if(fixedStickyLastRow && isFooter)
if (fixedStickyLastRow && isFooter)
{
innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"};
}
@ -327,7 +327,7 @@ function DataTable({
includeHead && (
<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}}>
<TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", alignItems: "flex-end", gridTemplateColumns: gridTemplateColumns}}>
{headerGroup.headers.map((column: any) => (
column.type !== "hidden" && (
<DataTableHeadCell
@ -356,10 +356,10 @@ function DataTable({
//////////////////////////////////////////////////////////////////////////////////
// don't do an end-border on nested rows - unless they're the last one in a set //
//////////////////////////////////////////////////////////////////////////////////
if(row.depth > 0)
if (row.depth > 0)
{
overrideNoEndBorder = true;
if(key + 1 < rows.length && rows[key + 1].depth == 0)
if (key + 1 < rows.length && rows[key + 1].depth == 0)
{
overrideNoEndBorder = false;
}
@ -368,17 +368,17 @@ function DataTable({
///////////////////////////////////////
// don't do end-border on the footer //
///////////////////////////////////////
if(isFooter)
if (isFooter)
{
overrideNoEndBorder = true;
}
let background = "initial";
if(isFooter)
if (isFooter)
{
background = "#EEEEEE";
}
else if(row.depth > 0 || row.isExpanded)
else if (row.depth > 0 || row.isExpanded)
{
background = "#FAFAFA";
}
@ -453,7 +453,7 @@ function DataTable({
</TableBody>
</Table>
</Box></Box>
</Box></Box>;
}
return (

7
src/qqq/components/widgets/tables/TableCard.tsx
View File

@ -28,13 +28,13 @@ import TableBody from "@mui/material/TableBody";
import TableContainer from "@mui/material/TableContainer";
import TableRow from "@mui/material/TableRow";
import parse from "html-react-parser";
import React, {useEffect, useState} from "react";
import MDTypography from "qqq/components/legacy/MDTypography";
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 DataTable from "qqq/components/widgets/tables/DataTable";
import Client from "qqq/utils/qqq/Client";
import React, {useEffect, useState} from "react";
//////////////////////////////////////
@ -43,7 +43,7 @@ import Client from "qqq/utils/qqq/Client";
export interface TableDataInput
{
columns: { [key: string]: any }[];
columnHeaderTooltips?: { [columnName: string]: string | JSX.Element }
columnHeaderTooltips?: { [columnName: string]: string | JSX.Element };
rows: { [key: string]: any }[];
}
@ -63,6 +63,7 @@ interface Props
}
const qController = Client.getInstance();
function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight, widgetMetaData}: Props): JSX.Element
{
const [qInstance, setQInstance] = useState(null as QInstance);
@ -108,7 +109,7 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
<TableContainer sx={{boxShadow: "none"}}>
<Table>
<Box component="thead">
<TableRow key="header">
<TableRow sx={{alignItems: "flex-end"}} key="header">
{Array(8).fill(0).map((_, i) =>
<DataTableHeadCell key={`head-${i}`} sorted={false} width="auto" align="center">
<Skeleton width="100%" />

25
src/qqq/components/widgets/tables/TableWidget.tsx
View File

@ -23,7 +23,6 @@
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
// @ts-ignore
import {htmlToText} from "html-to-text";
import React, {useContext, useEffect, useState} from "react";
import QContext from "QContext";
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
import TableCard from "qqq/components/widgets/tables/TableCard";
@ -31,6 +30,7 @@ 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";
import React, {useContext, useEffect, useState} from "react";
interface Props
{
@ -40,8 +40,7 @@ interface Props
isChild?: boolean;
}
TableWidget.defaultProps = {
};
TableWidget.defaultProps = {};
function TableWidget(props: Props): JSX.Element
{
@ -86,7 +85,7 @@ function TableWidget(props: Props): JSX.Element
const cell = rows[i][columns[j].accessor];
let text = cell;
if(columns[j].type != "default")
if (columns[j].type != "default")
{
text = htmlToText(cell,
{
@ -105,7 +104,7 @@ function TableWidget(props: Props): JSX.Element
setCsv(csv);
const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
setFileName(fileName)
setFileName(fileName);
console.log(`useEffect, setting fileName ${fileName}`);
}
@ -114,24 +113,24 @@ function TableWidget(props: Props): JSX.Element
const onExportClick = () =>
{
if(props.widgetData?.csvData)
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)
else if (csv)
{
HtmlUtils.download(fileName, csv);
}
else
{
alert("There is no data available to export.")
alert("There is no data available to export.");
}
}
};
const labelAdditionalElementsLeft: JSX.Element[] = [];
if(props.widgetMetaData?.showExportButton)
if (props.widgetMetaData?.showExportButton)
{
labelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
}
@ -139,14 +138,14 @@ function TableWidget(props: Props): JSX.Element
//////////////////////////////////////////////////////
// look for column-header tooltips from helpContent //
//////////////////////////////////////////////////////
const columnHeaderTooltips: {[columnName: string]: JSX.Element} = {}
const columnHeaderTooltips: { [columnName: string]: JSX.Element } = {};
for (let column of props.widgetData?.columns ?? [])
{
const helpRoles = ["ALL_SCREENS"]
const helpRoles = ["ALL_SCREENS"];
const slotName = `columnHeader=${column.accessor}`;
const showHelp = helpHelpActive || hasHelpContent(props.widgetMetaData?.helpContent?.get(slotName), helpRoles);
if(showHelp)
if (showHelp)
{
const formattedHelpContent = <HelpContent helpContents={props.widgetMetaData?.helpContent?.get(slotName)} roles={helpRoles} helpContentKey={`widget:${props.widgetMetaData?.name};slot:${slotName}`} />;
columnHeaderTooltips[column.accessor] = formattedHelpContent;