chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into 'dashboardCanvas/Widget/add-widgets-menu'

Browse Source 
# Conflicts:
#   client/src/components/layout/Canvas/views/DashboardCanvas.jsx
This commit is contained in:
vkuchenik
2025-08-04 19:20:13 +00:00
parent 1f83dcf9bb eca6bc2405
commit 6f41df3f88
9 changed files with 97 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.jsx
+2
View File
@@ -1,4 +1,6 @@
import Dashboard from './components/layout/Dashboard.jsx'
import 'leaflet/dist/leaflet.css';
function App() {
return (
client/src/components/layout/Canvas/Canvas.jsx
+10 -1
View File
@@ -12,7 +12,7 @@ import SettingsCanvas from "./views/SettingsCanvas"
import { DashboardCanvas } from "./views/DashboardCanvas";
import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
export default function Canvas({ view, setView, layout, setLayout, onLayoutChange, darkMode }) {
export default function Canvas({ onCancel, isEditable, setIsEditable, isDelete, setIsDelete, view, setView, layout, setLayout, originalLayout, setOriginalLayout, onLayoutChange, onChangeView, darkMode }) {
const recipe = useRecipe({ key: "canvas" });
const styles = recipe();
@@ -21,11 +21,20 @@ export default function Canvas({ view, setView, layout, setLayout, onLayoutChang
{/* Check if view is a tab inside the Canvas Header */}
{ DASHBOARD_VIEWS.includes(view) && (
<DashboardCanvas
darkMode={ darkMode }
view={ view }
setView={ setView }
layout={ layout }
setLayout={ setLayout }
originalLayout={ originalLayout }
setOriginalLayout={ setOriginalLayout }
onLayoutChange={ onLayoutChange }
onChangeView={ onChangeView }
onCancel={ onCancel }
isEditable={ isEditable }
setIsEditable={ setIsEditable }
isDelete={ isDelete }
setIsDelete={ setIsDelete }
/>
)}
{view === "global" && <GlobalMapCanvas />}
client/src/components/layout/Canvas/views/DashboardCanvas.jsx
+17 -30
View File
@@ -29,42 +29,37 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
static: false
}
]);
onEditWidgets();
};
useEffect(() => {
console.log("static change effect");
setLayout(prevLayout =>
prevLayout.map(item => ({
...item,
static: !isEditable // static false means resizable/editable
}))
);
}, [isEditable]);
const onEditWidgets = () => {
console.log("widgets are now editable");
setOriginalLayout(layout); // Backup layout before editing
// Set all widgets to editable, static: false
setLayout(prevLayout =>
prevLayout.map(item => ({
...item,
static: false
}))
);
setIsEditable(true); // Enable edit mode
}
const onSave = () => {
console.log("saving widgets...");
setIsEditable(false);
setIsDelete(false);
setOriginalLayout([]) // Clear backup layout
}
const onCancel = () => {
console.log("canceling changes...");
if (originalLayout.length) {
setLayout(originalLayout.map(item => ({
// Set all widgets back to static: true
setLayout(prevLayout =>
prevLayout.map(item => ({
...item,
static: true
})));
};
}))
);
setIsEditable(false);
setIsDelete(false);
setOriginalLayout([]);
setOriginalLayout([]); // Clear backup layout
}
const onDeleteWidgets = () => {
@@ -101,15 +96,7 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
// Prevent navigation away from 'My Dashboard' while in Edit mode
onValueChange={(e) => {
const nextView = e.value;
if (view === "widget" && isEditable && nextView !== "widget") {
const confirmed = window.confirm(
"You have unsaved changes. Do you wish to discard them and continue?"
);
if (!confirmed) return;
onCancel();
}
setView(nextView);
onChangeView(nextView);
}}
>
<Flex
client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
+1 -2
View File
@@ -1,11 +1,10 @@
import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import 'leaflet/dist/leaflet.css';
export default function GlobalMapCanvas() {
const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]
return (
<MapContainer center={position} zoom={13} style={{ height: "100%", width: "100%" }}>
<MapContainer center={position} zoom={3} style={{ height: "100%", width: "100%" }}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy; OpenStreetMap contributors'
client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx
+17 -22
View File
@@ -1,24 +1,19 @@
import { Box, Text } from '@chakra-ui/react';
import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
export default function RegionalMapCanvas() {
return (
<Box p={8} mt={4} ml="auto" mr="auto" width="600px">
<Box
bg="bg"
shadow="md"
borderRadius="md"
p={8}
width="600px"
height="100px"
textAlign="center"
display="flex"
alignItems="center"
justifyContent="center"
>
<Text fontsize="2xl" fontWeight="bold" color="gray.700">
Regional Map Canvas coming soon!
</Text>
</Box>
</Box>
);
export default function GlobalMapCanvas() {
const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]
return (
<MapContainer center={position} zoom={13} style={{ height: "100%", width: "100%" }}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy; OpenStreetMap contributors'
/>
<Marker position={position}>
<Popup>
CVO — Home of the volcanoligists
</Popup>
</Marker>
</MapContainer>
);
}
client/src/components/layout/Dashboard.jsx
+41 -3
View File
@@ -10,15 +10,43 @@ export default function Dashboard() {
const styles = recipe();
const [darkMode, setDarkMode] = useState(false);
// Lifted State - defaults to widget dashboard
const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
const [isDelete, setIsDelete] = useState(false);
const [originalLayout, setOriginalLayout] = useState([]);
const [view, setView] = useState("widget");
const [layout, setLayout] = useState([]);
const onCancel = () => {
console.log("canceling changes...");
if (originalLayout.length) {
setLayout(originalLayout.map(item => ({
...item,
static: true
})));
};
setIsEditable(false);
setIsDelete(false);
setOriginalLayout([]);
}
// Prevent navigation while in Edit mode without saving or cancelling
const handleViewChange = (nextView) => {
if (view === "widget" && isEditable) {
const confirmed = window.confirm(
"You have unsaved changes. Discard them and continue?"
);
if (!confirmed) return;
onCancel(); // Discards the layout
}
setView(nextView);
};
return (
<>
<Grid css={styles}
templateRows="1fr 11fr"
templateColumns="1fr 20fr"
// templateColumns="1fr 20fr"
templateColumns="auto 1fr"
height="100vh"
width="100vw"
>
@@ -26,6 +54,7 @@ export default function Dashboard() {
<Header
view={ view }
setView={ setView }
onChangeView={ handleViewChange }
/>
</GridItem>
<GridItem colSpan={1}>
@@ -33,7 +62,8 @@ export default function Dashboard() {
darkMode={ darkMode }
setDarkMode={ setDarkMode }
view={ view }
onChangeView={ setView }
onChangeView={ handleViewChange }
isEditabe={ isEditable }
/>
</GridItem>
<GridItem colSpan={1} width="100%" overflow="auto">
@@ -43,7 +73,15 @@ export default function Dashboard() {
setView={ setView }
layout={ layout }
setLayout={ setLayout }
originalLayout={ originalLayout }
setOriginalLayout={ setOriginalLayout }
onLayoutChange={( newLayout ) => setLayout( newLayout )}
onChangeView={ handleViewChange }
onCancel={ onCancel }
isEditable={ isEditable }
setIsEditable={ setIsEditable }
isDelete={ isDelete }
setIsDelete={ setIsDelete }
/>
</GridItem>
</Grid>
client/src/components/layout/Header/Header.jsx
+2 -3
View File
@@ -8,7 +8,7 @@ const user = {
// avatar: "src\\assets\\user_profile.svg"
}
export default function Header({ view, setView }) {
export default function Header({ onChangeView }) {
const recipe = useRecipe({ key: "header" });
const styles = recipe();
@@ -23,8 +23,7 @@ export default function Header({ view, setView }) {
<UserAvatarMenu
name={user.name}
avatar={user.avatar}
view={ view }
setView={ setView }
onChangeView={ onChangeView }
/>
</Flex>
</chakra.div>
client/src/components/layout/Header/UserAvatarMenu.jsx
+3 -3
View File
@@ -1,7 +1,7 @@
import { Avatar, Menu, Portal, Box } from "@chakra-ui/react"
export default function UserAvatarMenu({ view, setView, name, avatar }) {
export default function UserAvatarMenu({ onChangeView, name, avatar }) {
return (
<Menu.Root>
<Menu.Trigger focusRing="none">
@@ -21,10 +21,10 @@ export default function UserAvatarMenu({ view, setView, name, avatar }) {
{/* zIndex: overlay = 1300 */}
<Menu.Positioner zIndex="overlay">
<Menu.Content>
<Menu.Item value="account" onClick={() => setView("account")}>
<Menu.Item value="account" onClick={() => onChangeView("account")}>
Account
</Menu.Item>
<Menu.Item value="settings" onClick={() => setView("settings")}>
<Menu.Item value="settings" onClick={() => onChangeView("settings")}>
Settings
</Menu.Item>
<Menu.Item value="logout" onClick={() => console.log("Log out triggered")}>
client/src/components/layout/Sidebar/Sidebar.jsx
+2 -7
View File
@@ -1,6 +1,5 @@
import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
import { ColorModeButton, useColorMode } from "@/components/ui/color-mode";
// import { Tooltip } from "@/components/ui/tooltip";
import Tooltip from "../Canvas/components/Tooltip.jsx";
import { FaVolcano } from "react-icons/fa6";
import { FaHome } from "react-icons/fa";
@@ -9,7 +8,6 @@ import { FaMapMarkerAlt } from "react-icons/fa";
import { HiUsers } from "react-icons/hi2";
import { VscThreeBars } from "react-icons/vsc";
import { useState, useEffect } from "react";
import { Seismic } from "../Canvas/views/DashboardCanvasNav/Seismic";
import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
@@ -35,14 +33,13 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
// Track currrent view from both Sidebar and Canvas when 'view' changes
useEffect(() => {
// console.log("typeof view =", typeof view);
console.log("Current view = ", view);
const newIndex = buttons.findIndex((btn) => {
if (btn.view === "widget") {
return DASHBOARD_VIEWS.includes(view); // Group match
return DASHBOARD_VIEWS.includes(view);
}
return btn.view === view; // Exact match
return btn.view === view;
});
if (newIndex !== -1 ) {
@@ -52,7 +49,6 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
return (
<Box
// key={button.name}
css={styles.root}
width={isOpen ? "210px" : "71px"}
transition="width 0.4s ease"
@@ -76,7 +72,6 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
key={button.name}
css={styles.buttons}
onClick={() => {
// setActiveButton(idx);
onChangeView(button.view); // Trigger state change in Dashboard
}}
bg={activeButton === idx ? "primary":undefined}