Refactor continuing to work on UI
This commit is contained in:
@@ -1,208 +1,199 @@
|
||||
import { Box, Text, Flex, IconButton, Spinner, Popover } from "@chakra-ui/react";
|
||||
import { X, MoreVertical } from "lucide-react";
|
||||
import { Responsive, WidthProvider } from "react-grid-layout";
|
||||
import { useDashboardStore } from "@/store/useDashboardStore.jsx";
|
||||
import { Suspense, useEffect, useRef } from 'react';
|
||||
import { useColorModeValue } from "@/components/ui/color-mode";
|
||||
import {Box, Text, Flex, IconButton, Spinner, Popover, useSlotRecipe} from "@chakra-ui/react";
|
||||
import {X, MoreVertical} from "lucide-react";
|
||||
import {Responsive, WidthProvider} from "react-grid-layout";
|
||||
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
|
||||
import {Suspense, useEffect, useRef} from 'react';
|
||||
import {useColorModeValue} from "@/components/ui/color-mode";
|
||||
// 1. Import database messenger
|
||||
import useAuthStore from "@/store/authStore";
|
||||
|
||||
// 2. Import registry
|
||||
import { WIDGET_REGISTRY } from '@/constants/widgetRegistry.jsx';
|
||||
import {WIDGET_REGISTRY} from '@/constants/widgetRegistry.jsx';
|
||||
|
||||
// React-Grid-Layout requires this wrapper to automatically calculate screen width
|
||||
const ResponsiveGridLayout = WidthProvider(Responsive);
|
||||
|
||||
export default function MyDashboard() {
|
||||
// 🌗 Let's adjust for our light and dark mode
|
||||
const frameBg = useColorModeValue("FFFFFF0A", "#FFFFFF0A");
|
||||
const titleColor = useColorModeValue("gray.800", "#FFFFFF");
|
||||
const iconColor = useColorModeValue("gray.600", "#FFFFFF");
|
||||
const iconHoverBg = useColorModeValue("gray.100", "gray.700");
|
||||
// 🌗 Let's adjust for our light and dark mode
|
||||
const frameBg = useColorModeValue("FFFFFF0A", "#FFFFFF0A");
|
||||
const titleColor = useColorModeValue("gray.800", "#FFFFFF");
|
||||
const iconColor = useColorModeValue("gray.600", "#FFFFFF");
|
||||
const iconHoverBg = useColorModeValue("gray.100", "gray.700");
|
||||
|
||||
// ☁️ Database Connection
|
||||
const { user } = useAuthStore();
|
||||
// ☁️ Database Connection
|
||||
const {user} = useAuthStore();
|
||||
|
||||
// ☁️ Local UI Connections
|
||||
const widgets = useDashboardStore(state => state.widgets);
|
||||
const isEditing = useDashboardStore(state => state.isEditing);
|
||||
const updateLayoutPositions = useDashboardStore(state => state.updateLayoutPositions);
|
||||
const removeWidget = useDashboardStore(state => state.removeWidget);
|
||||
const setWidgets = useDashboardStore(state => state.setWidgets); // The injection action
|
||||
// ☁️ Local UI Connections
|
||||
const widgets = useDashboardStore(state => state.widgets);
|
||||
const isEditing = useDashboardStore(state => state.isEditing);
|
||||
const updateLayoutPositions = useDashboardStore(state => state.updateLayoutPositions);
|
||||
const removeWidget = useDashboardStore(state => state.removeWidget);
|
||||
const setWidgets = useDashboardStore(state => state.setWidgets); // The injection action
|
||||
|
||||
// 🔒 Safety lock to prevent infinite re-renders
|
||||
const hasHydrated = useRef(false);
|
||||
// 🔒 Safety lock to prevent infinite re-renders
|
||||
const hasHydrated = useRef(false);
|
||||
|
||||
// ==========================================
|
||||
// INITIAL LOAD: Grab data from Django
|
||||
// ==========================================
|
||||
useEffect(() => {
|
||||
if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
|
||||
const savedLayout = user.preferences.dashboard_layout;
|
||||
// 1. Pull the new global slot recipe
|
||||
const recipe = useSlotRecipe({key: "glassPanel"});
|
||||
const styles = recipe({ layout: "widget" });
|
||||
|
||||
// Safety check: Only inject if it's actually an array of widgets.
|
||||
// (Prevents a crash if MariaDB returns a default empty object {})
|
||||
if (Array.isArray(savedLayout)) {
|
||||
setWidgets(savedLayout);
|
||||
}
|
||||
useEffect(() => {
|
||||
if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
|
||||
const savedLayout = user.preferences.dashboard_layout;
|
||||
|
||||
hasHydrated.current = true;
|
||||
}
|
||||
}, [user, setWidgets]);
|
||||
// Safety check: Only inject if it's actually an array of widgets.
|
||||
// (Prevents a crash if MariaDB returns a default empty object {})
|
||||
if (Array.isArray(savedLayout)) {
|
||||
setWidgets(savedLayout);
|
||||
}
|
||||
hasHydrated.current = true;
|
||||
}
|
||||
}, [user, setWidgets]);
|
||||
|
||||
|
||||
// 🛠️ Format the data for RGL
|
||||
const rglLayout = widgets.map(w => ({
|
||||
i: w.id,
|
||||
x: w.x,
|
||||
y: w.y,
|
||||
w: w.w,
|
||||
h: w.h,
|
||||
isResizable: false // 🚫 The magic lock! No resizing allowed globally.
|
||||
}));
|
||||
// 🛠️ Format the data for RGL
|
||||
const rglLayout = widgets.map(w => ({
|
||||
i: w.id,
|
||||
x: w.x,
|
||||
y: w.y,
|
||||
w: w.w,
|
||||
h: w.h,
|
||||
isResizable: false // 🚫 The magic lock! No resizing allowed globally.
|
||||
}));
|
||||
|
||||
// 3. THE COMPONENT MAPPER
|
||||
const renderWidget = (widget) => {
|
||||
const registryEntry = WIDGET_REGISTRY[widget.type];
|
||||
// 3. THE COMPONENT MAPPER
|
||||
const renderWidget = (widget) => {
|
||||
const registryEntry = WIDGET_REGISTRY[widget.type];
|
||||
|
||||
if (registryEntry && registryEntry.component) {
|
||||
const Component = registryEntry.component;
|
||||
if (registryEntry && registryEntry.component) {
|
||||
const Component = registryEntry.component;
|
||||
|
||||
// 1. Check if this widget type has a settings component registered
|
||||
const SettingsUI = registryEntry.settingsComponent;
|
||||
// 1. Check if this widget type has a settings component registered
|
||||
const SettingsUI = registryEntry.settingsComponent;
|
||||
|
||||
return (
|
||||
// The "Frame" that holds both the Title and the Chart
|
||||
<Flex direction="column" height="100%" width="100%" bg={frameBg}>
|
||||
return (
|
||||
<>
|
||||
<Box css={styles.header}>
|
||||
<Text color="titleColor" fontWeight="semibold" fontSize="md" isTruncated>
|
||||
{registryEntry.name}
|
||||
</Text>
|
||||
|
||||
{/* THE TITLE BAR */}
|
||||
<Flex
|
||||
justify="space-between"
|
||||
align="center"
|
||||
px={3}
|
||||
py={2}
|
||||
>
|
||||
<Text color={titleColor} fontWeight="semibold" fontSize="md" isTruncated>
|
||||
{registryEntry.name}
|
||||
</Text>
|
||||
{/* THE SETTINGS ELLIPSIS */}
|
||||
{SettingsUI ? (
|
||||
<Popover.Root positioning={{placement: "bottom-end"}}>
|
||||
<Popover.Trigger asChild>
|
||||
<IconButton
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
color="gray.400"
|
||||
borderRadius="xl"
|
||||
_hover={{color: "white", bg: "gray.700"}}
|
||||
aria-label="Widget Settings"
|
||||
>
|
||||
<MoreVertical size={16}/>
|
||||
</IconButton>
|
||||
</Popover.Trigger>
|
||||
|
||||
{/* THE SETTINGS ELLIPSIS */}
|
||||
{SettingsUI ? (
|
||||
<Popover.Root positioning={{ placement: "bottom-end" }}>
|
||||
<Popover.Trigger asChild>
|
||||
<IconButton
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
color="gray.400"
|
||||
_hover={{ color: "white", bg: "gray.700" }}
|
||||
aria-label="Widget Settings"
|
||||
>
|
||||
<MoreVertical size={16} />
|
||||
</IconButton>
|
||||
</Popover.Trigger>
|
||||
|
||||
{/* NEW: The Positioner lifts the content out of the Flexbox flow */}
|
||||
<Popover.Positioner zIndex={10}>
|
||||
<Popover.Content bg="gray.50" p={4} boxShadow="xl" borderRadius="md">
|
||||
<Suspense fallback={<Spinner size="sm" />}>
|
||||
<SettingsUI
|
||||
widgetId={widget.id}
|
||||
currentSettings={widget.settings || {}}
|
||||
/>
|
||||
</Suspense>
|
||||
</Popover.Content>
|
||||
</Popover.Positioner>
|
||||
</Popover.Root>
|
||||
) : (
|
||||
<Box w="20px" h="20px" />
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
{/* THE CHART CANVAS */}
|
||||
<Box flex="1" overflow="hidden" position="relative" p={1}>
|
||||
{/* Pass the settings object into the actual chart component */}
|
||||
<Component settings={widget.settings || {}} />
|
||||
</Box>
|
||||
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
// Fallback if someone asks for a widget that doesn't exist
|
||||
return (
|
||||
<Flex width="100%" height="100%" align="center" justify="center" direction="column" bg="gray.800">
|
||||
<Text fontWeight="bold" color="red.400">Error</Text>
|
||||
<Text fontSize="sm" color="gray.400">Widget '{widget.type}' not found.</Text>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box width="100%" height="100%">
|
||||
<ResponsiveGridLayout
|
||||
className="layout"
|
||||
layouts={{ lg: rglLayout }} // We feed it the formatted layout map
|
||||
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
|
||||
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }} // Our 12-column master grid
|
||||
rowHeight={30}
|
||||
isDraggable={isEditing} // Only allows dragging when Settings tools toggle this
|
||||
isResizable={false} // Double lock-down
|
||||
onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
|
||||
compactType="vertical" // Auto-packs widgets to the top
|
||||
>
|
||||
{/* 3. 🎨 Paint the Widgets */}
|
||||
{widgets.map(widget => (
|
||||
<Box
|
||||
key={widget.id}
|
||||
borderRadius="md"
|
||||
boxShadow={isEditing ? "outline" : "sm"} // Visual cue when editing
|
||||
border={isEditing ? "2px dashed gray" : "1px solid"}
|
||||
borderColor={isEditing ? "gray.400" : "gray.200"}
|
||||
overflow="hidden"
|
||||
cursor={isEditing ? "grab" : "default"}
|
||||
position="relative" // 3. REQUIRED so the absolute button stays inside this box
|
||||
>
|
||||
{/* 4. THE DELETE BUTTON */}
|
||||
{isEditing && (
|
||||
<IconButton
|
||||
aria-label="Remove widget"
|
||||
position="absolute"
|
||||
top={2}
|
||||
right={2}
|
||||
size="xs"
|
||||
bg="white"
|
||||
color={iconColor}
|
||||
border="1px solid"
|
||||
borderColor="gray.200"
|
||||
_hover={{ bg: "red.50", color: "red.500", borderColor: "red.200" }}
|
||||
zIndex={2}
|
||||
onClick={() => removeWidget(widget.id)}
|
||||
onMouseDown={(e) => e.stopPropagation()} // 🚫 Stops RGL from grabbing the widget
|
||||
onTouchStart={(e) => e.stopPropagation()} // 🚫 Same protection for mobile touches
|
||||
>
|
||||
<X size={14} />
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
{/* 4. SUSPENSE BOUNDARY wrapping the render function */}
|
||||
<Suspense fallback={
|
||||
<Flex w="100%" h="100%" align="center" justify="center" bg="gray.800">
|
||||
<Spinner size="md" color="blue.400" thickness="3px" />
|
||||
</Flex>
|
||||
}>
|
||||
{renderWidget(widget)}
|
||||
</Suspense>
|
||||
|
||||
</Box>
|
||||
))}
|
||||
</ResponsiveGridLayout>
|
||||
|
||||
{/* Empty State Helper */}
|
||||
{widgets.length === 0 && (
|
||||
<Flex width="100%" height="200px" align="center" justify="center">
|
||||
<Text color="gray.400">Your dashboard is empty. Click Settings to add widgets.</Text>
|
||||
</Flex>
|
||||
{/* NEW: The Positioner lifts the content out of the Flexbox flow */}
|
||||
<Popover.Positioner zIndex={10}>
|
||||
<Popover.Content bg="gray.50" p={4} boxShadow="xl" borderRadius="md">
|
||||
<Suspense fallback={<Spinner size="sm"/>}>
|
||||
<SettingsUI
|
||||
widgetId={widget.id}
|
||||
currentSettings={widget.settings || {}}
|
||||
/>
|
||||
</Suspense>
|
||||
</Popover.Content>
|
||||
</Popover.Positioner>
|
||||
</Popover.Root>
|
||||
) : (
|
||||
<Box w="20px" h="20px"/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box css={styles.body}>
|
||||
<Component settings={widget.settings || {}}/>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Fallback if someone asks for a widget that doesn't exist
|
||||
return (
|
||||
<Flex css={styles.body} align="center" justify="center" direction="column">
|
||||
<Text fontWeight="bold" color="red.400">Error</Text>
|
||||
<Text fontSize="sm" color="gray.400">Widget '{widget.type}' not found.</Text>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box width="100%" height="100%">
|
||||
<ResponsiveGridLayout
|
||||
className="layout"
|
||||
layouts={{lg: rglLayout}} // We feed it the formatted layout map
|
||||
breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
|
||||
cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}} // Our 12-column master grid
|
||||
rowHeight={30}
|
||||
isDraggable={isEditing} // Only allows dragging when Settings tools toggle this
|
||||
isResizable={false} // Double lock-down
|
||||
onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
|
||||
compactType="vertical" // Auto-packs widgets to the top
|
||||
>
|
||||
{/* 3. 🎨 Paint the Widgets */}
|
||||
{widgets.map(widget => (
|
||||
<Box
|
||||
key={widget.id}
|
||||
css={styles.root}
|
||||
// 3. Grid-specific state overrides remain inline
|
||||
boxShadow={isEditing ? "outline" : styles.root.boxShadow}
|
||||
borderStyle={isEditing ? "dashed" : "solid"}
|
||||
borderWidth={isEditing ? "2px" : "1px"}
|
||||
borderColor={isEditing ? "gray.400" : styles.root.borderColor}
|
||||
cursor={isEditing ? "grab" : "default"}
|
||||
position="relative" // 3. REQUIRED so the absolute button stays inside this box
|
||||
>
|
||||
{/* 4. THE DELETE BUTTON */}
|
||||
{isEditing && (
|
||||
<IconButton
|
||||
aria-label="Remove widget"
|
||||
position="absolute"
|
||||
top={2}
|
||||
right={2}
|
||||
size="xs"
|
||||
bg="white"
|
||||
color="black"
|
||||
border="1px solid"
|
||||
borderRadius="xl"
|
||||
borderColor="gray.200"
|
||||
_hover={{bg: "red.50", color: "red.500", borderColor: "red.200"}}
|
||||
zIndex={2}
|
||||
onClick={() => removeWidget(widget.id)}
|
||||
onMouseDown={(e) => e.stopPropagation()} // 🚫 Stops RGL from grabbing the widget
|
||||
onTouchStart={(e) => e.stopPropagation()} // 🚫 Same protection for mobile touches
|
||||
>
|
||||
<X size={14}/>
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
{/* 4. SUSPENSE BOUNDARY wrapping the render function */}
|
||||
<Suspense fallback={
|
||||
<Flex css={styles.body} align="center" justify="center">
|
||||
<Spinner size="md" color="blue.400" thickness="3px"/>
|
||||
</Flex>
|
||||
}>
|
||||
{renderWidget(widget)}
|
||||
</Suspense>
|
||||
</Box>
|
||||
))}
|
||||
</ResponsiveGridLayout>
|
||||
|
||||
{/* Empty State Helper */}
|
||||
{widgets.length === 0 && (
|
||||
<Flex width="100%" height="200px" align="center" justify="center">
|
||||
<Text color="gray.400">Your dashboard is empty. Click Settings to add widgets.</Text>
|
||||
</Flex>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user