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

Merge branch 'add/widgets/conditional-editing' into 'main'

Browse Source 
widgets only edited on btn click

See merge request vkuchenik/website-framework!25
This commit is contained in:
vkuchenik
2025-07-24 23:06:37 +00:00
parent 4cdc335cad 552b1bd16a
commit 9575cd8d21
3 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/layout/Canvas/components/SettingsButton.jsx
+3 -3
View File
@@ -5,7 +5,7 @@
import { Button, IconButton, Menu, Portal } from "@chakra-ui/react";
import { FiSettings } from "react-icons/fi";
export function SettingsButton({onAddWidget, onEditWidgdets, onRemoveWidgets}) {
export function SettingsButton({onAddWidget, onEditWidgets, onDeleteWidgets}) {
return (
// This uses Chakra's built in menu component
<Menu.Root>
@@ -18,9 +18,9 @@ export function SettingsButton({onAddWidget, onEditWidgdets, onRemoveWidgets}) {
<Menu.Positioner>
<Menu.Content>
<Menu.Item onClick={onAddWidget} value="addwidget">Add Widget</Menu.Item>
<Menu.Item onClick={onEditWidgdets} value ="editwidget">Edit Widgets</Menu.Item>
<Menu.Item onClick={onEditWidgets} value ="editwidget">Edit Widgets</Menu.Item>
<Menu.Item
onClick={onRemoveWidgets}
onClick={onDeleteWidgets}
color="fg.error"
_hover={{ bg: "bg.error", color: "fg.error "}}
>
client/src/components/layout/Canvas/views/DashboardCanvas.jsx
+23 -9
View File
@@ -6,16 +6,25 @@ import { DailyActivity } from "./DashboardCanvasNav/DailyActivity";
import { Gas } from "./DashboardCanvasNav/Gas";
import { Seismic } from "./DashboardCanvasNav/Seismic";
import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing";
import { useState } from "react";
import { useState, useEffect } from "react";
export function DashboardCanvas() {
const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
const [newCounter, setNewCounter] = useState(3);
const [layout, setLayout] = useState([
{ i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
{ i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
{ i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false }
{ i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable },
{ i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable },
{ i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable }
]);
const [newCounter, setNewCounter] = useState(3);
useEffect(() => {
setLayout(prevLayout =>
prevLayout.map(item => ({
...item,
static: !isEditable // static false means resizable/editable
}))
);
}, [isEditable]);
const onAddWidget = () => {
const newId = newCounter.toString();
@@ -32,7 +41,12 @@ export function DashboardCanvas() {
setNewCounter(prev => prev + 1);
};
const onRemoveWidget = (id) => {
const onEditWidgets = () => {
console.log("widgets are now editable")
setIsEditable(true);
}
const onDeleteWidgets = (id) => {
setLayout(prev => prev.filter(w => w.i !== id));
}
@@ -75,10 +89,10 @@ export function DashboardCanvas() {
<HStack >
<SearchBar />
<SettingsButton
<SettingsButton visible={isEditable}
onAddWidget={ onAddWidget }
// onEditWidgets={ onEditWidgets }
onDeleteWidgets={ onRemoveWidget }
onEditWidgets={ onEditWidgets }
onDeleteWidgets={ onDeleteWidgets }
/>
</HStack>
</Flex>