diff --git a/src/qqq/components/widgets/CompositeWidget.tsx b/src/qqq/components/widgets/CompositeWidget.tsx index fe68a43..b345487 100644 --- a/src/qqq/components/widgets/CompositeWidget.tsx +++ b/src/qqq/components/widgets/CompositeWidget.tsx @@ -22,16 +22,16 @@ import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData"; import {Box, Skeleton} from "@mui/material"; -import React from "react"; import {BlockData} from "qqq/components/widgets/blocks/BlockModels"; import WidgetBlock from "qqq/components/widgets/WidgetBlock"; +import React from "react"; interface CompositeData { blocks: BlockData[]; styleOverrides?: any; - layout?: string + layout?: string; } @@ -57,7 +57,14 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP //////////////////////////////////////////////////////////////////////////////////// let layout = data?.layout; let boxStyle: any = {}; - if (layout == "FLEX_ROW_WRAPPED") + if (layout == "FLEX_COLUMN") + { + boxStyle.display = "flex"; + boxStyle.flexDirection = "column"; + boxStyle.flexWrap = "wrap"; + boxStyle.gap = "0.5rem"; + } + else if (layout == "FLEX_ROW_WRAPPED") { boxStyle.display = "flex"; boxStyle.flexDirection = "row"; @@ -68,7 +75,7 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP { boxStyle.display = "flex"; boxStyle.flexDirection = "row"; - boxStyle.justifyContent = "space-between" + boxStyle.justifyContent = "space-between"; boxStyle.gap = "0.25rem"; } else if (layout == "TABLE_SUB_ROW_DETAILS") diff --git a/src/qqq/components/widgets/DashboardWidgets.tsx b/src/qqq/components/widgets/DashboardWidgets.tsx index 46132a6..ee57e83 100644 --- a/src/qqq/components/widgets/DashboardWidgets.tsx +++ b/src/qqq/components/widgets/DashboardWidgets.tsx @@ -50,7 +50,7 @@ import USMapWidget from "qqq/components/widgets/misc/USMapWidget"; import ParentWidget from "qqq/components/widgets/ParentWidget"; import MultiStatisticsCard from "qqq/components/widgets/statistics/MultiStatisticsCard"; import StatisticsCard from "qqq/components/widgets/statistics/StatisticsCard"; -import Widget, {HeaderIcon, LabelComponent, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT} from "qqq/components/widgets/Widget"; +import Widget, {HeaderIcon, LabelComponent, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT, WidgetData} from "qqq/components/widgets/Widget"; import WidgetBlock from "qqq/components/widgets/WidgetBlock"; import ProcessRun from "qqq/pages/processes/ProcessRun"; import Client from "qqq/utils/qqq/Client"; @@ -258,11 +258,11 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco ** helper function, to convert values from a QRecord values map to a regular old ** js object *******************************************************************************/ - function convertQRecordValuesFromMapToObject(record: QRecord): {[name: string]: any} + function convertQRecordValuesFromMapToObject(record: QRecord): { [name: string]: any } { - const rs: {[name: string]: any} = {}; + const rs: { [name: string]: any } = {}; - if(record && record.values) + if (record && record.values) { record.values.forEach((value, key) => rs[key] = value); } @@ -293,7 +293,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco } return ( - + { haveLoadedParams && widgetMetaData.type === "parentWidget" && ( ) } + { + widgetMetaData.type === "multiTable" && ( + widgetData[i]?.tableDataList?.map((tableData: WidgetData, index: number) => + + reloadWidget(i, data)} + isChild={areChildren} + /> + + ) + ) + } { widgetMetaData.type === "stackedBarChart" && ( - {}} /> + { + }} /> ) } { widgetMetaData.type === "pivotTableSetup" && ( widgetData && widgetData[i] && widgetData[i].queryParams && - {}} /> + { + }} /> ) } { diff --git a/src/qqq/components/widgets/blocks/NumberIconBadgeBlock.tsx b/src/qqq/components/widgets/blocks/NumberIconBadgeBlock.tsx index 8c9f86e..67e0460 100644 --- a/src/qqq/components/widgets/blocks/NumberIconBadgeBlock.tsx +++ b/src/qqq/components/widgets/blocks/NumberIconBadgeBlock.tsx @@ -41,7 +41,7 @@ export default function NumberIconBadgeBlock({widgetMetaData, data}: StandardBlo { data.values.iconName && - {data.values.iconName} + {data.values.iconName} } ); diff --git a/src/qqq/components/widgets/tables/DataTable.tsx b/src/qqq/components/widgets/tables/DataTable.tsx index 863b987..d039c2a 100644 --- a/src/qqq/components/widgets/tables/DataTable.tsx +++ b/src/qqq/components/widgets/tables/DataTable.tsx @@ -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 {headerGroups.map((headerGroup: any, i: number) => ( - + {headerGroup.headers.map((column: any) => ( column.type !== "hidden" && ( 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({ - + ; } return ( diff --git a/src/qqq/components/widgets/tables/TableCard.tsx b/src/qqq/components/widgets/tables/TableCard.tsx index b4fd395..cdfcaba 100644 --- a/src/qqq/components/widgets/tables/TableCard.tsx +++ b/src/qqq/components/widgets/tables/TableCard.tsx @@ -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, - + {Array(8).fill(0).map((_, i) => diff --git a/src/qqq/components/widgets/tables/TableWidget.tsx b/src/qqq/components/widgets/tables/TableWidget.tsx index 1024ded..15eb382 100644 --- a/src/qqq/components/widgets/tables/TableWidget.tsx +++ b/src/qqq/components/widgets/tables/TableWidget.tsx @@ -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 = ; columnHeaderTooltips[column.accessor] = formattedHelpContent;