diff --git a/src/qqq/components/widgets/CompositeWidget.tsx b/src/qqq/components/widgets/CompositeWidget.tsx index b345487..b7347ff 100644 --- a/src/qqq/components/widgets/CompositeWidget.tsx +++ b/src/qqq/components/widgets/CompositeWidget.tsx @@ -22,16 +22,19 @@ 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"; -interface CompositeData +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/components/widgets/DashboardWidgets.tsx b/src/qqq/components/widgets/DashboardWidgets.tsx index f2d1dc0..38fe772 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} ); } diff --git a/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx b/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx index dbfcce2..965522d 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 && link.href) { - 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; } 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; +}