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

Merge branch 'fix/edit-mode-scope2' into 'main'

Browse Source 
Fix/edit mode scope2

See merge request vkuchenik/website-framework!39
This commit is contained in:
Dan Hansen
2025-07-31 19:45:28 +00:00
parent 90704879e1 80a0515bb1
commit fb096b403f
5 changed files with 82 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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
+26 -25
View File
@@ -11,11 +11,11 @@ import { CancelButton } from "../components/CancelButton";
import { SaveButton } from "../components/SaveButton";
import DeleteAllButton from "../components/DeleteAllButton";
export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChange }) {
const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
const [isDelete, setIsDelete] = useState(false);
export function DashboardCanvas({ onCancel, isEditable, setIsEditable, isDelete, setIsDelete, view, setView, layout, setLayout, originalLayout, setOriginalLayout, onLayoutChange, onChangeView }) {
// const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
// const [isDelete, setIsDelete] = useState(false);
const [newCounter, setNewCounter] = useState(3);
const [originalLayout, setOriginalLayout] = useState([]);
// const [originalLayout, setOriginalLayout] = useState([]);
const onAddWidget = () => {
const newId = newCounter.toString();
@@ -55,18 +55,19 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
setOriginalLayout([]) // Clear backup layout
}
const onCancel = () => {
console.log("canceling changes...");
if (originalLayout.length) {
setLayout(originalLayout.map(item => ({
...item,
static: true
})));
};
setIsEditable(false);
setIsDelete(false);
setOriginalLayout([]);
}
// Lifting up to Dashboard.jsx for prop drilling
// const onCancel = () => {
// console.log("canceling changes...");
// if (originalLayout.length) {
// setLayout(originalLayout.map(item => ({
// ...item,
// static: true
// })));
// };
// setIsEditable(false);
// setIsDelete(false);
// setOriginalLayout([]);
// }
const onDeleteWidgets = () => {
console.log("Start deleting widgets...");
@@ -100,15 +101,15 @@ 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);
// 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);
}}
>
<Flex
client/src/components/layout/Dashboard.jsx
+40 -2
View File
@@ -10,7 +10,9 @@ 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([
{ i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true },
@@ -18,6 +20,31 @@ export default function Dashboard() {
{ i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true }
]);
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}
@@ -30,6 +57,7 @@ export default function Dashboard() {
<Header
view={ view }
setView={ setView }
onChangeView={ handleViewChange }
/>
</GridItem>
<GridItem colSpan={1}>
@@ -37,7 +65,9 @@ export default function Dashboard() {
darkMode={ darkMode }
setDarkMode={ setDarkMode }
view={ view }
onChangeView={ setView }
onChangeView={ handleViewChange }
isEditabe={ isEditable }
// onChangeView={ setView }
/>
</GridItem>
<GridItem colSpan={1} width="100%" overflow="auto">
@@ -47,7 +77,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 -1
View File
@@ -8,7 +8,7 @@ const user = {
// avatar: "src\\assets\\user_profile.svg"
}
export default function Header({ view, setView }) {
export default function Header({ view, setView, onChangeView }) {
const recipe = useRecipe({ key: "header" });
const styles = recipe();
@@ -25,6 +25,7 @@ export default function Header({ view, setView }) {
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({ view, setView, 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")}>