removing redundancies
This commit is contained in:
@@ -12,7 +12,7 @@ import SettingsCanvas from "./views/SettingsCanvas"
|
|||||||
import { DashboardCanvas } from "./views/DashboardCanvas";
|
import { DashboardCanvas } from "./views/DashboardCanvas";
|
||||||
import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
|
import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
|
||||||
|
|
||||||
export default function Canvas({ onCancel, isEditable, setIsEditable, isDelete, setIsDelete, view, setView, layout, setLayout, originalLayout, setOriginalLayout, onLayoutChange, onChangeView, darkMode }) {
|
export default function Canvas({ onCancel, isEditable, setIsEditable, isDelete, setIsDelete, view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView }) {
|
||||||
const recipe = useRecipe({ key: "canvas" });
|
const recipe = useRecipe({ key: "canvas" });
|
||||||
const styles = recipe();
|
const styles = recipe();
|
||||||
|
|
||||||
@@ -21,12 +21,9 @@ export default function Canvas({ onCancel, isEditable, setIsEditable, isDelete,
|
|||||||
{/* Check if view is a tab inside the Canvas Header */}
|
{/* Check if view is a tab inside the Canvas Header */}
|
||||||
{ DASHBOARD_VIEWS.includes(view) && (
|
{ DASHBOARD_VIEWS.includes(view) && (
|
||||||
<DashboardCanvas
|
<DashboardCanvas
|
||||||
darkMode={ darkMode }
|
|
||||||
view={ view }
|
view={ view }
|
||||||
setView={ setView }
|
|
||||||
layout={ layout }
|
layout={ layout }
|
||||||
setLayout={ setLayout }
|
setLayout={ setLayout }
|
||||||
originalLayout={ originalLayout }
|
|
||||||
setOriginalLayout={ setOriginalLayout }
|
setOriginalLayout={ setOriginalLayout }
|
||||||
onLayoutChange={ onLayoutChange }
|
onLayoutChange={ onLayoutChange }
|
||||||
onChangeView={ onChangeView }
|
onChangeView={ onChangeView }
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import AddWidgetMenu from "./AddWidgetMenu";
|
|||||||
|
|
||||||
export function SettingsButton({onAddWidget, onEditWidgets, onDeleteWidgets, widgetArray, setWidgetArray}) {
|
export function SettingsButton({onAddWidget, onEditWidgets, onDeleteWidgets, widgetArray, setWidgetArray}) {
|
||||||
return (
|
return (
|
||||||
// This uses Chakra's built in menu component
|
|
||||||
<Menu.Root>
|
<Menu.Root>
|
||||||
<Menu.Trigger asChild >
|
<Menu.Trigger asChild >
|
||||||
<IconButton variant="ghost" size="md" borderRadius="xl">
|
<IconButton variant="ghost" size="md" borderRadius="xl">
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { HStack, Flex, Tabs } from "@chakra-ui/react";
|
import { HStack, Flex, Tabs } from "@chakra-ui/react";
|
||||||
import { useState, useEffect } from "react";
|
import { useState } from "react";
|
||||||
import WidgetCanvas from "./DashboardCanvasNav/WidgetCanvas";
|
import WidgetCanvas from "./DashboardCanvasNav/WidgetCanvas";
|
||||||
import { SearchBar } from "../components/SearchBar";
|
import { SearchBar } from "../components/SearchBar";
|
||||||
import { SettingsButton } from "../components/SettingsButton";
|
import { SettingsButton } from "../components/SettingsButton";
|
||||||
@@ -11,10 +11,7 @@ import { CancelButton } from "../components/CancelButton";
|
|||||||
import { SaveButton } from "../components/SaveButton";
|
import { SaveButton } from "../components/SaveButton";
|
||||||
import DeleteAllButton from "../components/DeleteAllButton";
|
import DeleteAllButton from "../components/DeleteAllButton";
|
||||||
|
|
||||||
export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChange }) {
|
export function DashboardCanvas({ view, layout, setLayout, onLayoutChange, onCancel, isDelete, setIsDelete, isEditable, setIsEditable, onChangeView }) {
|
||||||
const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
|
|
||||||
const [isDelete, setIsDelete] = useState(false);
|
|
||||||
const [originalLayout, setOriginalLayout] = useState([]);
|
|
||||||
const [widgetArray, setWidgetArray] = useState([]);
|
const [widgetArray, setWidgetArray] = useState([]);
|
||||||
|
|
||||||
const onAddWidget = (ID) => {
|
const onAddWidget = (ID) => {
|
||||||
@@ -35,7 +32,6 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
|
|||||||
const onEditWidgets = () => {
|
const onEditWidgets = () => {
|
||||||
console.log("widgets are now editable");
|
console.log("widgets are now editable");
|
||||||
setOriginalLayout(layout); // Backup layout before editing
|
setOriginalLayout(layout); // Backup layout before editing
|
||||||
|
|
||||||
// Set all widgets to editable, static: false
|
// Set all widgets to editable, static: false
|
||||||
setLayout(prevLayout =>
|
setLayout(prevLayout =>
|
||||||
prevLayout.map(item => ({
|
prevLayout.map(item => ({
|
||||||
@@ -48,7 +44,6 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
|
|||||||
|
|
||||||
const onSave = () => {
|
const onSave = () => {
|
||||||
console.log("saving widgets...");
|
console.log("saving widgets...");
|
||||||
|
|
||||||
// Set all widgets back to static: true
|
// Set all widgets back to static: true
|
||||||
setLayout(prevLayout =>
|
setLayout(prevLayout =>
|
||||||
prevLayout.map(item => ({
|
prevLayout.map(item => ({
|
||||||
@@ -56,7 +51,6 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
|
|||||||
static: true
|
static: true
|
||||||
}))
|
}))
|
||||||
);
|
);
|
||||||
|
|
||||||
setIsEditable(false);
|
setIsEditable(false);
|
||||||
setIsDelete(false);
|
setIsDelete(false);
|
||||||
setOriginalLayout([]); // Clear backup layout
|
setOriginalLayout([]); // Clear backup layout
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import Header from './Header/Header.jsx';
|
|||||||
import Sidebar from './Sidebar/Sidebar.jsx';
|
import Sidebar from './Sidebar/Sidebar.jsx';
|
||||||
import Canvas from './Canvas/Canvas.jsx';
|
import Canvas from './Canvas/Canvas.jsx';
|
||||||
import { Grid, GridItem, useRecipe } from '@chakra-ui/react';
|
import { Grid, GridItem, useRecipe } from '@chakra-ui/react';
|
||||||
import AlertLevel from './Canvas/components/AlertLevelWidget.jsx';
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
@@ -68,12 +67,9 @@ export default function Dashboard() {
|
|||||||
</GridItem>
|
</GridItem>
|
||||||
<GridItem colSpan={1} width="100%" overflow="auto">
|
<GridItem colSpan={1} width="100%" overflow="auto">
|
||||||
<Canvas
|
<Canvas
|
||||||
darkMode={ darkMode }
|
|
||||||
view={ view }
|
view={ view }
|
||||||
setView={ setView }
|
|
||||||
layout={ layout }
|
layout={ layout }
|
||||||
setLayout={ setLayout }
|
setLayout={ setLayout }
|
||||||
originalLayout={ originalLayout }
|
|
||||||
setOriginalLayout={ setOriginalLayout }
|
setOriginalLayout={ setOriginalLayout }
|
||||||
onLayoutChange={( newLayout ) => setLayout( newLayout )}
|
onLayoutChange={( newLayout ) => setLayout( newLayout )}
|
||||||
onChangeView={ handleViewChange }
|
onChangeView={ handleViewChange }
|
||||||
|
|||||||
Reference in New Issue
Block a user