85 lines
2.8 KiB
React
85 lines
2.8 KiB
React
import Header from './Header/Header.jsx';
|
|
import Sidebar from './Sidebar/Sidebar.jsx';
|
|
import Canvas from './Canvas/Canvas.jsx';
|
|
import { Grid, GridItem, useRecipe, Dialog } from '@chakra-ui/react';
|
|
import { useState } from 'react';
|
|
|
|
export default function Dashboard() {
|
|
const recipe = useRecipe({ key: "dashboard" });
|
|
const styles = recipe();
|
|
|
|
const [darkMode, setDarkMode] = useState(false);
|
|
const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
|
|
const [isDelete, setIsDelete] = useState(false);
|
|
const [originalLayout, setOriginalLayout] = useState([]);
|
|
const [originalWidgets, setOriginalWidgets] = useState([]);
|
|
const [view, setView] = useState("mydashboard");
|
|
const [layout, setLayout] = useState([]);
|
|
const [widgetArray, setWidgetArray] = useState([]);
|
|
|
|
const beginEditIfNeeded = () => {
|
|
if ( !isEditable ) {
|
|
// Save deep copies to preserve state
|
|
setOriginalLayout(structuredClone(layout));
|
|
setOriginalWidgets(structuredClone(widgetArray));
|
|
setIsEditable(true);
|
|
setIsDelete(false);
|
|
}
|
|
};
|
|
|
|
const onCancel = () => {
|
|
console.log("canceling changes...");
|
|
if (originalLayout.length) {
|
|
setLayout(originalLayout.map(item => ({
|
|
...item,
|
|
static: true
|
|
})));
|
|
};
|
|
setWidgetArray(originalWidgets.length ? originalWidgets : []);
|
|
setIsEditable(false);
|
|
setIsDelete(false);
|
|
setOriginalLayout([]);
|
|
setOriginalWidgets([]);
|
|
}
|
|
|
|
// Prevent navigation while in Edit mode without saving or cancelling
|
|
const handleViewChange = (nextView) => {
|
|
if (view === "mydashboard" && isEditable) {
|
|
const confirmed = window.confirm(
|
|
"You have unsaved changes. Discard them and continue?"
|
|
);
|
|
if (!confirmed) return;
|
|
onCancel(); // Discards the layout
|
|
}
|
|
setView(nextView);
|
|
};
|
|
|
|
const onLayoutChange = (newLayout) => setLayout(newLayout);
|
|
|
|
// Prop Forwarding
|
|
const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange,
|
|
onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray, setOriginalWidgets, beginEditIfNeeded
|
|
};
|
|
const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode };
|
|
const headerProps = { onChangeView: handleViewChange };
|
|
|
|
return (
|
|
<Grid css={styles}
|
|
templateRows="1fr 11fr"
|
|
// templateColumns="1fr 20fr"
|
|
templateColumns="auto 1fr"
|
|
height="100vh"
|
|
width="100vw"
|
|
>
|
|
<GridItem rowSpan={1} colSpan={2}>
|
|
<Header {...headerProps}/>
|
|
</GridItem>
|
|
<GridItem colSpan={1}>
|
|
<Sidebar {...sidebarProps}/>
|
|
</GridItem>
|
|
<GridItem colSpan={1} width="100%" overflow="auto">
|
|
<Canvas {...canvasProps}/>
|
|
</GridItem>
|
|
</Grid>
|
|
);
|
|
} |