From d9de96ea7fcca9ec3ed75caac56fd0b3f9dccfb5 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Thu, 25 Jul 2024 08:36:13 -0500 Subject: [PATCH 01/12] Make whole top-right bar display:none at under md breakpoints --- src/qqq/components/horseshoe/NavBar.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/qqq/components/horseshoe/NavBar.tsx b/src/qqq/components/horseshoe/NavBar.tsx index bcd1e07..24e3f94 100644 --- a/src/qqq/components/horseshoe/NavBar.tsx +++ b/src/qqq/components/horseshoe/NavBar.tsx @@ -25,6 +25,7 @@ import Autocomplete from "@mui/material/Autocomplete"; import Icon from "@mui/material/Icon"; import IconButton from "@mui/material/IconButton"; import ListItemIcon from "@mui/material/ListItemIcon"; +import {Theme} from "@mui/material/styles"; import TextField from "@mui/material/TextField"; import Toolbar from "@mui/material/Toolbar"; import React, {useContext, useEffect, useRef, useState} from "react"; @@ -225,6 +226,19 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element const breadcrumbTitle = fullPathToLabel(fullPath, route[route.length - 1]); + /////////////////////////////////////////////////////////////////////////////////////////////// + // set the right-half of the navbar up so that below the 'md' breakpoint, it just disappears // + /////////////////////////////////////////////////////////////////////////////////////////////// + const navbarRowRight = (theme: Theme, {isMini}: any) => + { + return { + [theme.breakpoints.down("md")]: { + display: "none", + }, + ...navbarRow(theme, isMini) + } + }; + return ( {isMini ? null : ( - navbarRow(theme, {isMini})}> + navbarRowRight(theme, {isMini})}> {renderHistory()} From 97bab5797433aa66dd8ff88bfaaff8be7a69610c Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Thu, 25 Jul 2024 08:37:37 -0500 Subject: [PATCH 02/12] Re-do css on tables, to do the whole table as divs with display: grid --- .../components/widgets/tables/DataTable.tsx | 236 +++++++++--------- .../tables/cells/DataTableBodyCell.tsx | 2 +- .../tables/cells/DataTableHeadCell.tsx | 9 +- 3 files changed, 119 insertions(+), 128 deletions(-) diff --git a/src/qqq/components/widgets/tables/DataTable.tsx b/src/qqq/components/widgets/tables/DataTable.tsx index d039c2a..1cb35c9 100644 --- a/src/qqq/components/widgets/tables/DataTable.tsx +++ b/src/qqq/components/widgets/tables/DataTable.tsx @@ -321,137 +321,133 @@ function DataTable({ innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"}; } + /////////////////////////////////////////////////////////////////////////////////// + // note - at one point, we had the table's sx including: whiteSpace: "nowrap"... // + /////////////////////////////////////////////////////////////////////////////////// return - +
{ includeHead && ( - - {headerGroups.map((headerGroup: any, i: number) => ( - - {headerGroup.headers.map((column: any) => ( - column.type !== "hidden" && ( - - {column.render("header")} - - ) - ))} - - ))} - + headerGroups.map((headerGroup: any, i: number) => ( + headerGroup.headers.map((column: any) => ( + column.type !== "hidden" && ( + + {column.render("header")} + + ) + )) + )) ) } - - {rows.map((row: any, key: any) => + {rows.map((row: any, key: any) => + { + prepareRow(row); + + let overrideNoEndBorder = false; + + ////////////////////////////////////////////////////////////////////////////////// + // don't do an end-border on nested rows - unless they're the last one in a set // + ////////////////////////////////////////////////////////////////////////////////// + if (row.depth > 0) { - prepareRow(row); - - let overrideNoEndBorder = false; - - ////////////////////////////////////////////////////////////////////////////////// - // don't do an end-border on nested rows - unless they're the last one in a set // - ////////////////////////////////////////////////////////////////////////////////// - if (row.depth > 0) + overrideNoEndBorder = true; + if (key + 1 < rows.length && rows[key + 1].depth == 0) { - overrideNoEndBorder = true; - if (key + 1 < rows.length && rows[key + 1].depth == 0) - { - overrideNoEndBorder = false; - } + overrideNoEndBorder = false; } + } - /////////////////////////////////////// - // don't do end-border on the footer // - /////////////////////////////////////// - if (isFooter) - { - overrideNoEndBorder = true; - } + /////////////////////////////////////// + // don't do end-border on the footer // + /////////////////////////////////////// + if (isFooter) + { + overrideNoEndBorder = true; + } - let background = "initial"; - if (isFooter) - { - background = "#EEEEEE"; - } - else if (row.depth > 0 || row.isExpanded) - { - background = "#FAFAFA"; - } + let background = "initial"; + if (isFooter) + { + background = "#EEEEEE"; + } + else if (row.depth > 0 || row.isExpanded) + { + background = "#FAFAFA"; + } - return ( - - {row.cells.map((cell: any) => ( - cell.column.type !== "hidden" && ( - - { - cell.column.type === "default" && ( - cell.value && "number" === typeof cell.value ? ( - {cell.value.toLocaleString()} - ) : ({cell.render("Cell")}) - ) - } - { - cell.column.type === "htmlAndTooltip" && ( - - - - {parse(cell.value)} - - - - ) - } - { - cell.column.type === "html" && ( - {parse(cell.value ?? "")} - ) - } - { - cell.column.type === "composite" && ( - - - - ) - } - { - cell.column.type === "block" && ( - - - - ) - } - { - cell.column.type === "image" && row.values["imageTotal"] && ( - - ) - } - { - cell.column.type === "image" && !row.values["imageTotal"] && ( - - ) - } - { - (cell.column.id === "__expander") && cell.render("cell") - } - - ) - ))} - - ); - })} - - + return ( + row.cells.map((cell: any) => ( + cell.column.type !== "hidden" && ( + + { + cell.column.type === "default" && ( + cell.value && "number" === typeof cell.value ? ( + {cell.value.toLocaleString()} + ) : ({cell.render("Cell")}) + ) + } + { + cell.column.type === "htmlAndTooltip" && ( + + + + {parse(cell.value)} + + + + ) + } + { + cell.column.type === "html" && ( + {parse(cell.value ?? "")} + ) + } + { + cell.column.type === "composite" && ( + + + + ) + } + { + cell.column.type === "block" && ( + + + + ) + } + { + cell.column.type === "image" && row.values["imageTotal"] && ( + + ) + } + { + cell.column.type === "image" && !row.values["imageTotal"] && ( + + ) + } + { + (cell.column.id === "__expander") && cell.render("cell") + } + + ) + )) + ); + })}
; } diff --git a/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx b/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx index 5f22d53..2e13d22 100644 --- a/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx +++ b/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx @@ -36,7 +36,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element { return ( ({ borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`, - "&:nth-of-type(1)": { - paddingLeft: "1rem" - }, - "&:last-child": { - paddingRight: "1rem" - }, + position: "sticky", top: 0, background: "white" })} > Date: Thu, 25 Jul 2024 09:27:53 -0500 Subject: [PATCH 03/12] Re-do css on table skeleton, per changes in the included DataTable*Cell components --- .../components/widgets/tables/TableCard.tsx | 46 ++++++------------- 1 file changed, 15 insertions(+), 31 deletions(-) diff --git a/src/qqq/components/widgets/tables/TableCard.tsx b/src/qqq/components/widgets/tables/TableCard.tsx index cdfcaba..2240fb2 100644 --- a/src/qqq/components/widgets/tables/TableCard.tsx +++ b/src/qqq/components/widgets/tables/TableCard.tsx @@ -93,41 +93,25 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, /> : noRowsFoundHTML ? - - { - noRowsFoundHTML ? ( - parse(noRowsFoundHTML) - ) : "No rows found" - } + + {noRowsFoundHTML ? (parse(noRowsFoundHTML)) : "No rows found"} : - - - - {Array(8).fill(0).map((_, i) => - - - - )} - - - - {Array(5).fill(0).map((_, i) => - - {Array(8).fill(0).map((_, j) => - - - - )} - - )} - +
+ {Array(8).fill(0).map((_, i) => + + + + )} + {Array(5).fill(0).map((_, i) => + Array(8).fill(0).map((_, j) => + + + + ) + )}
} From 3fa017e8b98f18319e111c9b3ce0283144339870 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Thu, 25 Jul 2024 09:28:28 -0500 Subject: [PATCH 04/12] Update selector and widths per css change --- .../selenium/tests/DashboardTableWidgetExportTest.java | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/DashboardTableWidgetExportTest.java b/src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/DashboardTableWidgetExportTest.java index 23ad722..61e737e 100755 --- a/src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/DashboardTableWidgetExportTest.java +++ b/src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/DashboardTableWidgetExportTest.java @@ -56,8 +56,8 @@ public class DashboardTableWidgetExportTest extends QBaseSeleniumTest "label": "Sample Table Widget", "footerHTML": "Updated at 2023-10-17 09:11:38 AM CDT", "columns": [ - { "type": "html", "header": "Id", "accessor": "id", "width": "1%" }, - { "type": "html", "header": "Name", "accessor": "name", "width": "99%" } + { "type": "html", "header": "Id", "accessor": "id", "width": "30px" }, + { "type": "html", "header": "Name", "accessor": "name", "width": "1fr" } ], "rows": [ { "id": "1", "name": "Homer S." }, @@ -83,7 +83,7 @@ public class DashboardTableWidgetExportTest extends QBaseSeleniumTest // assert that the table widget rendered its header and some contents // //////////////////////////////////////////////////////////////////////// qSeleniumLib.waitForSelectorContaining("#SampleTableWidget h6", "Sample Table Widget"); - qSeleniumLib.waitForSelectorContaining("#SampleTableWidget table a", "Homer S."); + qSeleniumLib.waitForSelectorContaining("#SampleTableWidget a", "Homer S."); qSeleniumLib.waitForSelectorContaining("#SampleTableWidget div", "Updated at 2023-10-17 09:11:38 AM CDT"); ///////////////////////////// From e604f47231d0f48f87ecbeea0b6e6bddef905852 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Fri, 26 Jul 2024 10:34:18 -0500 Subject: [PATCH 05/12] Fixes for data table css redo (a z-index on headers, and use background color (as sx prop) in body cells --- .../components/widgets/tables/cells/DataTableBodyCell.tsx | 8 +++++--- .../components/widgets/tables/cells/DataTableHeadCell.tsx | 3 ++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx b/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx index 2e13d22..7623de3 100644 --- a/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx +++ b/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx @@ -19,7 +19,7 @@ * along with this program. If not, see . */ -import Box from "@mui/material/Box"; +import {Box} from "@mui/material"; import {Theme} from "@mui/material/styles"; import colors from "qqq/assets/theme/base/colors"; import {ReactNode} from "react"; @@ -30,9 +30,10 @@ interface Props children: ReactNode; noBorder?: boolean; align?: "left" | "right" | "center"; + sx?: any; } -function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element +function DataTableBodyCell({noBorder, align, sx, children}: Props): JSX.Element { return ( ({ borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`, - position: "sticky", top: 0, background: "white" + position: "sticky", top: 0, background: "white", + zIndex: 1 // so if body rows scroll behind it, they don't show through })} > Date: Mon, 12 Aug 2024 12:09:29 -0500 Subject: [PATCH 06/12] CE-1555: updates 'accordian' behavior of tables --- src/qqq/components/widgets/tables/DataTable.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/qqq/components/widgets/tables/DataTable.tsx b/src/qqq/components/widgets/tables/DataTable.tsx index 1cb35c9..34772ce 100644 --- a/src/qqq/components/widgets/tables/DataTable.tsx +++ b/src/qqq/components/widgets/tables/DataTable.tsx @@ -19,15 +19,12 @@ */ import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData"; -import {tooltipClasses, TooltipProps} from "@mui/material"; +import {Box, tooltipClasses, TooltipProps} from "@mui/material"; import Autocomplete from "@mui/material/Autocomplete"; -import Box from "@mui/material/Box"; import Icon from "@mui/material/Icon"; import {styled} from "@mui/material/styles"; import Table from "@mui/material/Table"; -import TableBody from "@mui/material/TableBody"; 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 colors from "qqq/assets/theme/base/colors"; @@ -166,7 +163,7 @@ function DataTable({ })} > {/* float this icon to keep it "out of the flow" - in other words, to keep it from making the row taller than it otherwise would be... */} - {row.isExpanded ? "expand_less" : "chevron_right"} + {row.isExpanded ? "expand_less" : "chevron_left"} ) : null, }, @@ -312,7 +309,7 @@ function DataTable({ { boxStyle = isFooter ? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, backgroundColor: "#EEEEEE"} - : {flexGrow: 1, overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"}; + : {height: fixedHeight ? `${fixedHeight}px` : "auto", flexGrow: 1, overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"}; } let innerBoxStyle = {}; @@ -453,7 +450,7 @@ function DataTable({ } return ( - + {entriesPerPage && ((hidePaginationDropdown !== undefined && !hidePaginationDropdown) || canSearch) ? ( {entriesPerPage && (hidePaginationDropdown === undefined || !hidePaginationDropdown) && ( From e08e37222b4bb2e459f2789727b93dff03bf4d04 Mon Sep 17 00:00:00 2001 From: Tim Chamberlain Date: Tue, 13 Aug 2024 16:22:12 -0500 Subject: [PATCH 07/12] CE-1556: updated to try to use composite block data within tooltips --- .../components/widgets/CompositeWidget.tsx | 2 +- .../widgets/blocks/BlockElementWrapper.tsx | 46 ++++++++++++------- .../components/widgets/blocks/BlockModels.ts | 6 ++- 3 files changed, 35 insertions(+), 19 deletions(-) diff --git a/src/qqq/components/widgets/CompositeWidget.tsx b/src/qqq/components/widgets/CompositeWidget.tsx index b345487..0834268 100644 --- a/src/qqq/components/widgets/CompositeWidget.tsx +++ b/src/qqq/components/widgets/CompositeWidget.tsx @@ -27,7 +27,7 @@ import WidgetBlock from "qqq/components/widgets/WidgetBlock"; import React from "react"; -interface CompositeData +export interface CompositeData { blocks: BlockData[]; styleOverrides?: any; diff --git a/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx b/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx index dbfcce2..4ae8d7d 100644 --- a/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx +++ b/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx @@ -21,18 +21,19 @@ import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData"; -import {Tooltip} from "@mui/material"; -import React, {ReactElement, useContext} from "react"; -import {Link} from "react-router-dom"; +import {Box, Tooltip} from "@mui/material"; import QContext from "QContext"; import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent"; import {BlockData, BlockLink, BlockTooltip} from "qqq/components/widgets/blocks/BlockModels"; +import CompositeWidget from "qqq/components/widgets/CompositeWidget"; +import React, {ReactElement, useContext} from "react"; +import {Link} from "react-router-dom"; interface BlockElementWrapperProps { data: BlockData; metaData: QWidgetMetaData; - slot: string + slot: string; linkProps?: any; children: ReactElement; } @@ -47,16 +48,16 @@ export default function BlockElementWrapper({data, metaData, slot, linkProps, ch let link: BlockLink; let tooltip: BlockTooltip; - if(slot) + if (slot) { link = data.linkMap && data.linkMap[slot.toUpperCase()]; - if(!link) + if (!link) { link = data.link; } tooltip = data.tooltipMap && data.tooltipMap[slot.toUpperCase()]; - if(!tooltip) + if (!tooltip) { tooltip = data.tooltip; } @@ -67,9 +68,9 @@ export default function BlockElementWrapper({data, metaData, slot, linkProps, ch tooltip = data.tooltip; } - if(!tooltip) + if (!tooltip) { - const helpRoles = ["ALL_SCREENS"] + const helpRoles = ["ALL_SCREENS"]; /////////////////////////////////////////////////////////////////////////////////////////////// // the full keys in the helpContent table will look like: // @@ -80,26 +81,39 @@ export default function BlockElementWrapper({data, metaData, slot, linkProps, ch const key = data.blockId ? `${data.blockId},${slot}` : slot; const showHelp = helpHelpActive || hasHelpContent(metaData?.helpContent?.get(key), helpRoles); - if(showHelp) + if (showHelp) { const formattedHelpContent = ; - tooltip = {title: formattedHelpContent, placement: "bottom"} + tooltip = {title: formattedHelpContent, placement: "bottom"}; } } let rs = children; - if(link) + if (link) { - rs = {rs} + rs = {rs}; } - if(tooltip) + if (tooltip) { - let placement = tooltip.placement ? tooltip.placement.toLowerCase() : "bottom" + let placement = tooltip.placement ? tooltip.placement.toLowerCase() : "bottom"; // @ts-ignore - placement possible values - rs = {rs} + if (tooltip.blockData) + { + // @ts-ignore - special case for composite type block... + rs = + + + }>{rs}; + } + else + { + // @ts-ignore - placement possible values + rs = {rs}; + } } return (rs); diff --git a/src/qqq/components/widgets/blocks/BlockModels.ts b/src/qqq/components/widgets/blocks/BlockModels.ts index 22a7c1e..c29f77c 100644 --- a/src/qqq/components/widgets/blocks/BlockModels.ts +++ b/src/qqq/components/widgets/blocks/BlockModels.ts @@ -20,6 +20,7 @@ */ import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData"; +import {CompositeData} from "qqq/components/widgets/CompositeWidget"; export interface BlockData @@ -29,8 +30,8 @@ export interface BlockData tooltip?: BlockTooltip; link?: BlockLink; - tooltipMap?: {[slot: string]: BlockTooltip}; - linkMap?: {[slot: string]: BlockLink}; + tooltipMap?: { [slot: string]: BlockTooltip }; + linkMap?: { [slot: string]: BlockLink }; values: any; styles?: any; @@ -39,6 +40,7 @@ export interface BlockData export interface BlockTooltip { + blockData?: CompositeData; title: string | JSX.Element; placement: string; } From 4230f34b15be1cb69d8d0d5e13c2e8963057e1fa Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Tue, 20 Aug 2024 10:07:45 -0500 Subject: [PATCH 08/12] Only output Link if link has an href (else page blows up) --- src/qqq/components/widgets/blocks/BlockElementWrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx b/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx index 4ae8d7d..11acd1a 100644 --- a/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx +++ b/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx @@ -90,7 +90,7 @@ export default function BlockElementWrapper({data, metaData, slot, linkProps, ch let rs = children; - if (link) + if (link && link.href) { rs = {rs}; } From 45338155354f321004516b51c1bb95e6a9870e94 Mon Sep 17 00:00:00 2001 From: Tim Chamberlain Date: Tue, 20 Aug 2024 15:42:58 -0500 Subject: [PATCH 09/12] CE-1554: added ability to overlay html over a block widget --- .../components/widgets/CompositeWidget.tsx | 37 ++++++++++++++----- src/qqq/styles/qqq-override-styles.css | 17 +++++++++ 2 files changed, 44 insertions(+), 10 deletions(-) diff --git a/src/qqq/components/widgets/CompositeWidget.tsx b/src/qqq/components/widgets/CompositeWidget.tsx index 0834268..b7347ff 100644 --- a/src/qqq/components/widgets/CompositeWidget.tsx +++ b/src/qqq/components/widgets/CompositeWidget.tsx @@ -22,6 +22,7 @@ import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData"; import {Box, Skeleton} from "@mui/material"; +import parse from "html-react-parser"; import {BlockData} from "qqq/components/widgets/blocks/BlockModels"; import WidgetBlock from "qqq/components/widgets/WidgetBlock"; import React from "react"; @@ -32,6 +33,8 @@ export interface CompositeData blocks: BlockData[]; styleOverrides?: any; layout?: string; + overlayHtml?: string; + overlayStyleOverrides?: any; } @@ -97,20 +100,34 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP boxStyle.borderRadius = "0.5rem"; boxStyle.background = "#FFFFFF"; } - if (data?.styleOverrides) { boxStyle = {...boxStyle, ...data.styleOverrides}; } - return ( - { - data.blocks.map((block: BlockData, index) => ( - - - - )) - } - ); + let overlayStyle: any = {}; + + if (data?.overlayStyleOverrides) + { + overlayStyle = {...overlayStyle, ...data.overlayStyleOverrides}; + } + + return ( + <> + { + data?.overlayHtml && + {parse(data.overlayHtml)} + } + + { + data.blocks.map((block: BlockData, index) => ( + + + + )) + } + + + ); } diff --git a/src/qqq/styles/qqq-override-styles.css b/src/qqq/styles/qqq-override-styles.css index ef5d407..c1de29c 100644 --- a/src/qqq/styles/qqq-override-styles.css +++ b/src/qqq/styles/qqq-override-styles.css @@ -787,3 +787,20 @@ input[type="search"]::-webkit-search-results-decoration { margin: 2rem 1rem; } + +/* default styles for a block widget overlay */ +.blockWidgetOverlay +{ + font-weight: 400; + position: relative; + top: 15px; + height: 0; + display: flex; + font-size: 14px; + flex-direction: column; + align-items: center; +} +.blockWidgetOverlay a +{ + color: #0062FF !important; +} From 1ca1313a251ff3eadba44f3bde78a24d67fcccc7 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Wed, 21 Aug 2024 08:35:35 -0500 Subject: [PATCH 10/12] CE-1405 / CE-1479 - Let widget meta data default values set more grid cols per size classes --- .../components/widgets/DashboardWidgets.tsx | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/qqq/components/widgets/DashboardWidgets.tsx b/src/qqq/components/widgets/DashboardWidgets.tsx index f2d1dc0..6b5f4f8 100644 --- a/src/qqq/components/widgets/DashboardWidgets.tsx +++ b/src/qqq/components/widgets/DashboardWidgets.tsx @@ -638,8 +638,28 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco if (!omitWrappingGridContainer) { - // @ts-ignore - renderedWidget = ( + const gridProps: {[key: string]: any} = {}; + + for(let size of ["xs", "sm", "md", "lg", "xl", "xxl"]) + { + const key = `gridCols:sizeClass:${size}` + if(widgetMetaData?.defaultValues.has(key)) + { + gridProps[size] = widgetMetaData?.defaultValues.get(key); + } + } + + if(!gridProps["xxl"]) + { + gridProps["xxl"] = widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12; + } + + if(!gridProps["xs"]) + { + gridProps["xs"] = 12; + } + + renderedWidget = ( {renderedWidget} ); } From 8be8bf367ada84ce4f891309019b15511996e40c Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Wed, 21 Aug 2024 08:52:57 -0500 Subject: [PATCH 11/12] CE-1405 / CE-1479 - Add missing ? --- src/qqq/components/widgets/DashboardWidgets.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/qqq/components/widgets/DashboardWidgets.tsx b/src/qqq/components/widgets/DashboardWidgets.tsx index 6b5f4f8..38fe772 100644 --- a/src/qqq/components/widgets/DashboardWidgets.tsx +++ b/src/qqq/components/widgets/DashboardWidgets.tsx @@ -643,7 +643,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco for(let size of ["xs", "sm", "md", "lg", "xl", "xxl"]) { const key = `gridCols:sizeClass:${size}` - if(widgetMetaData?.defaultValues.has(key)) + if(widgetMetaData?.defaultValues?.has(key)) { gridProps[size] = widgetMetaData?.defaultValues.get(key); } From f112cf5543fffc46ffdaaea7e683b6bbd017ef01 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Fri, 23 Aug 2024 10:24:00 -0500 Subject: [PATCH 12/12] Remove sold border --- src/qqq/components/widgets/blocks/BlockElementWrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx b/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx index 11acd1a..965522d 100644 --- a/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx +++ b/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx @@ -104,7 +104,7 @@ export default function BlockElementWrapper({data, metaData, slot, linkProps, ch { // @ts-ignore - special case for composite type block... rs = + }>{rs};