Fix add widget behavior, widget types and view settings button menu item...

This commit is contained in:
Dan Hansen
2026-01-30 19:02:31 +00:00
parent b1e9b442ff
commit 6c49239675
51 changed files with 4999 additions and 174 deletions
@@ -2,9 +2,13 @@ import GridLayout, { WidthProvider } from 'react-grid-layout';
import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
import CustomResizeHandle from '../../CanvasComponents/CustomResizeHandle';
import FirstWidgetButton from '../../CanvasComponents/FirstWidgetButton';
import PlaceholderWidget from '../../CanvasComponents/PlaceholderWidget';
import { WIDGET_REGISTRY, WIDGET_COMPONENTS } from '@/constants/widgetRegistry';
export default function MyDashboard({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray, appendWidget}) {
console.log("rendering MyDashboard");
export default function MyDashboard({view, layout, onLayoutChange,
isEditable, isDelete, DeleteWidget, widgetArray, appendWidget, openInspector
}) {
//console.log("rendering MyDashboard");
const recipe = useSlotRecipe({ key: "widget" });
const styles = recipe(); // using root recipe for widget below
const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size
@@ -12,8 +16,8 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
const handleDragStop = () => { document.body.style.userSelect = ""; }; // allow text highlighting all other times
let merged = [];
console.log("widgetArray: ", widgetArray);
console.log("layout: ", layout);
//console.log("widgetArray: ", widgetArray);
//console.log("layout: ", layout);
if (widgetArray.length && layout.length) {
const widgetMap = new Map(widgetArray.map(item => [item.i, item]));
@@ -36,7 +40,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
bg="gray.150"
borderRadius="md"
>
<FirstWidgetButton appendWidget={ appendWidget } />
<FirstWidgetButton view={view} appendWidget={ appendWidget } />
</Flex>
);
}
@@ -59,11 +63,36 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
position="relative"
resizeHandle={<CustomResizeHandle isVisable={isEditable} />}
>
{ merged.map((item) => {
const Widget = item.widget;
{merged.map((item) => {
const def = WIDGET_REGISTRY[item.widgetKey];
const isReal = def?.kind === "real";
const Widget = isReal
? WIDGET_COMPONENTS[item.widgetKey]
: PlaceholderWidget;
const title =
def?.PlaceholderTitle ??
def?.label ??
item.widgetKey ??
"Widget";
return (
<Flex key={item.i} css={styles.root} boxShadow="md" height="100%" >
<Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget} appendWidget={appendWidget}/>
<Widget
title={!isReal ? title : undefined} // placeholder uses title prop
id={item.i}
config={item.config}
isEditable={isEditable}
isDelete={isDelete}
DeleteWidget={DeleteWidget}
appendWidget={appendWidget}
openInspector={
openInspector ? () => openInspector({ id: item.i, widgetKey: item.widgetKey })
: undefined
}
/>
</Flex>
);
})