Refactor making changes to home and how widgets are altered
This commit is contained in:
@@ -1,186 +1,64 @@
|
||||
import { HStack, Flex, Tabs, Button } from "@chakra-ui/react";
|
||||
import { useState } from "react";
|
||||
import MyDashboard from "./HomeTabs/MyDashboard";
|
||||
import { HStack, Flex, Box } from "@chakra-ui/react";
|
||||
import { NavLink, Outlet, useLocation } from "react-router-dom";
|
||||
import { SearchBar } from "../CanvasComponents/SearchBar";
|
||||
import { SettingsButton } from "../CanvasComponents/SettingsButton";
|
||||
import { DailyActivity } from "./HomeTabs/DailyActivity";
|
||||
import { Gas } from "./HomeTabs/Gas";
|
||||
import { Seismic } from "./HomeTabs/Seismic";
|
||||
import { RemoteSensing } from "./HomeTabs/RemoteSensing";
|
||||
import { CancelButton } from "../CanvasComponents/CancelButton";
|
||||
import { SaveButton } from "../CanvasComponents/SaveButton";
|
||||
import DeleteAllButton from "../CanvasComponents/DeleteAllButton";
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
|
||||
import { DASHBOARD_TABS } from "@/constants/viewKeys";
|
||||
|
||||
export default function Home() {
|
||||
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 [layout, setLayout] = useState([]);
|
||||
const [widgetArray, setWidgetArray] = useState([]);
|
||||
const location = useLocation();
|
||||
const isPersonalDashboard = location.pathname === "/home" || location.pathname === "/home/";
|
||||
|
||||
function appendWidget(name, w, h, min_w, minh, max_w, max_h) {
|
||||
saveLayoutState(); // Save state before anything else
|
||||
|
||||
const newID = uuid(); // could be replaced with something else like guid
|
||||
const COLS = 16;
|
||||
const W = w ?? 3;
|
||||
const H = h ?? 3;
|
||||
|
||||
setWidgetArray([ // updating widget array containing info on the types of widgets
|
||||
...widgetArray,
|
||||
{i: newID, widget: name }
|
||||
]);
|
||||
// onAddWidget(newID, w, h, min_w, minh, max_w, max_h); // updating array containing info on layout of widgets
|
||||
|
||||
setLayout(prev => [
|
||||
...prev,
|
||||
{
|
||||
i: newID,
|
||||
x: (prev.length * W) % COLS,
|
||||
y: 0,
|
||||
w: w,
|
||||
h: h,
|
||||
minW: min_w,
|
||||
minH: minh,
|
||||
maxW: max_w,
|
||||
maxH: max_h,
|
||||
static: false,
|
||||
resizeHandles: ['se']
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
const onSave = () => {
|
||||
console.log("saving widgets...");
|
||||
// Set all widgets back to static: true
|
||||
setLayout(prevLayout =>
|
||||
prevLayout.map(item => ({
|
||||
...item,
|
||||
static: true
|
||||
}))
|
||||
);
|
||||
setIsEditable(false);
|
||||
setIsDelete(false);
|
||||
setOriginalLayout([]); // Clear backup layout
|
||||
setOriginalWidgets([]);
|
||||
}
|
||||
|
||||
const onEditWidgets = () => {
|
||||
console.log("Start deleting widgets...");
|
||||
saveLayoutState(); // Save state before anything else
|
||||
setLayout(prevLayout =>
|
||||
prevLayout.map(item => ({
|
||||
...item,
|
||||
static: false
|
||||
}))
|
||||
);
|
||||
setIsEditable(true);
|
||||
setIsDelete(true);
|
||||
}
|
||||
|
||||
const DeleteWidget = (ID) => {
|
||||
console.log("Deleting widget with id: ", ID);
|
||||
setLayout(layout => layout.filter(w => w.i !== ID));
|
||||
setWidgetArray(widgetArray => widgetArray.filter(w => w.i !== ID));
|
||||
}
|
||||
|
||||
const DeleteAll = () => {
|
||||
const confirm = window.confirm(
|
||||
"Are you sure you want to delete all widgets?"
|
||||
);
|
||||
if (confirm) {
|
||||
setLayout([]);
|
||||
setWidgetArray([]);
|
||||
onSave();
|
||||
}
|
||||
else return;
|
||||
}
|
||||
|
||||
|
||||
const saveLayoutState = () => {
|
||||
if ( !isEditable ) {
|
||||
setOriginalLayout(layout);
|
||||
setOriginalWidgets(widgetArray);
|
||||
// 1. 🎨 CSS Magic: Replicates Chakra's `<Tabs variant="line">` exactly
|
||||
const tabStyles = {
|
||||
fontSize: "lg",
|
||||
fontWeight: "normal",
|
||||
color: "fg.muted",
|
||||
px: 4, // Horizontal padding
|
||||
py: 2, // Vertical padding
|
||||
borderBottom: "2px solid transparent",
|
||||
mb: "-2px", // 🔥 The trick: Pulls the active border down to overlap the container's line
|
||||
transition: "all 0.2s",
|
||||
_hover: { color: "fg" },
|
||||
_activeLink: {
|
||||
color: "color", // Or whatever your primary text color is
|
||||
borderColor: "currentColor", // The active underline
|
||||
}
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
console.log("canceling changes...");
|
||||
console.log(originalWidgets);
|
||||
if (originalLayout.length) {
|
||||
setLayout(originalLayout.map(item => ({
|
||||
...item,
|
||||
static: true
|
||||
})));
|
||||
}
|
||||
setWidgetArray(originalWidgets);
|
||||
setIsEditable(false);
|
||||
setIsDelete(false);
|
||||
setOriginalLayout([]);
|
||||
setOriginalWidgets([]);
|
||||
}
|
||||
|
||||
const onLayoutChange = (newLayout) => setLayout(newLayout);
|
||||
|
||||
|
||||
// Prop Forwarding
|
||||
const MyDashboardProps = { layout, onLayoutChange, isEditable, saveLayoutState, isDelete, DeleteWidget, widgetArray, appendWidget };
|
||||
const settingsButtonProps = { onEditWidgets, appendWidget };
|
||||
|
||||
return (
|
||||
/* SUB HEADER */
|
||||
<Tabs.Root width="100%" height="100%" lazyMount variant="line">
|
||||
<Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="base200" p={5} align="center" justify="space-between" width="100%">
|
||||
{/* TABS */}
|
||||
{/* <CanvasHeaderTabs tabs={DASHBOARD_TABS} />*/} {/* TODO: rename to SubHeaderTabs */}
|
||||
<Tabs.List>
|
||||
{DASHBOARD_TABS.map(({ value, label }) =>
|
||||
<Tabs.Trigger key={value} value={value} fontSize="lg">
|
||||
{ label }
|
||||
</Tabs.Trigger>
|
||||
)}
|
||||
</Tabs.List>
|
||||
<Flex direction="column" height="100%" width="100%">
|
||||
|
||||
{/* 2. 🛠️ SUB HEADER: Matches your original padding and background */}
|
||||
<Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="base200" p={5} align="center" justify="space-between" width="100%">
|
||||
|
||||
{/* TABS CONTAINER - Replicates the Tabs.List line container */}
|
||||
<Flex borderBottom="2px solid" borderColor="border.muted" gap={2}>
|
||||
<Box as={NavLink} to="/home" end css={tabStyles}>My Dashboard</Box>
|
||||
<Box as={NavLink} to="/home/gas" css={tabStyles}>Gas</Box>
|
||||
<Box as={NavLink} to="/home/seismic" css={tabStyles}>Seismic</Box>
|
||||
<Box as={NavLink} to="/home/remote" css={tabStyles}>Remote Sensing</Box>
|
||||
<Box as={NavLink} to="/home/daily" css={tabStyles}>Daily Activity</Box>
|
||||
</Flex>
|
||||
|
||||
{/* EDIT MODE BUTTONS & CONTROLS */}
|
||||
<HStack width="258px" justifyContent="flex-end">
|
||||
{isPersonalDashboard ? (
|
||||
<>
|
||||
<SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
|
||||
{/* This will eventually trigger your Zustand store's edit mode! */}
|
||||
<SettingsButton />
|
||||
</>
|
||||
) : (
|
||||
<SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
</Flex>
|
||||
|
||||
{/* 3. 🛠️ CANVAS AREA */}
|
||||
<Flex flex="1" overflow="auto">
|
||||
<Outlet />
|
||||
</Flex>
|
||||
|
||||
{/* EDIT MODE BUTTONS */}
|
||||
<HStack width="258px" justifyContent="flex-end">
|
||||
{isEditable ? (
|
||||
<>
|
||||
<Button onClick={onSave} borderRadius="md" bg="primary" _hover={{bg: "primaryLt"}}>Save</Button>
|
||||
<Button onClick={onCancel} borderRadius="md">Cancel</Button>
|
||||
{isDelete ? (
|
||||
<DeleteAllButton onDeleteAll={ DeleteAll } />
|
||||
):(null)
|
||||
}
|
||||
</>
|
||||
):(
|
||||
<>
|
||||
<SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
|
||||
<SettingsButton {...settingsButtonProps}/>
|
||||
</>
|
||||
)}
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
{/* CANVAS */}
|
||||
<Tabs.Content value="mydashboard">
|
||||
<MyDashboard {...MyDashboardProps}/>
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="gas">
|
||||
<Gas />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="seismic">
|
||||
<Seismic />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="remote">
|
||||
<RemoteSensing />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="daily">
|
||||
<DailyActivity />
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user