From e08e37222b4bb2e459f2789727b93dff03bf4d04 Mon Sep 17 00:00:00 2001 From: Tim Chamberlain Date: Tue, 13 Aug 2024 16:22:12 -0500 Subject: [PATCH 1/6] 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 2/6] 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 3/6] 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 4/6] 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 5/6] 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 6/6] 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};