Merge pull request #688 from KelvinTegelaar/dev

[pull] dev from KelvinTegelaar:dev

Author: pull[bot]

src/components/CippComponents/CippOffCanvas.jsx

@@ -4,6 +4,8 @@ import { getCippTranslation } from "../../utils/get-cipp-translation";
 import { getCippFormatting } from "../../utils/get-cipp-formatting";
 import { useMediaQuery, Grid } from "@mui/system";
 import CloseIcon from "@mui/icons-material/Close";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 
 export const CippOffCanvas = (props) => {
   const {
@@ -17,6 +19,10 @@ export const CippOffCanvas = (props) => {
     children,
     size = "sm",
     footer,
+    onNavigateUp,
+    onNavigateDown,
+    canNavigateUp = false,
+    canNavigateDown = false,
   } = props;
 
   const mdDown = useMediaQuery((theme) => theme.breakpoints.down("md"));
@@ -84,9 +90,31 @@ export const CippOffCanvas = (props) => {
           sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", p: 1.5 }}
         >
           <Typography variant="h5">{title}</Typography>
-          <IconButton onClick={onClose}>
-            <CloseIcon />
-          </IconButton>
+          <Box sx={{ display: "flex", gap: 0.5 }}>
+            {(canNavigateUp || canNavigateDown) && (
+              <>
+                <IconButton
+                  onClick={onNavigateUp}
+                  disabled={!canNavigateUp}
+                  size="small"
+                  title="Previous row"
+                >
+                  <KeyboardArrowUpIcon />
+                </IconButton>
+                <IconButton
+                  onClick={onNavigateDown}
+                  disabled={!canNavigateDown}
+                  size="small"
+                  title="Next row"
+                >
+                  <KeyboardArrowDownIcon />
+                </IconButton>
+              </>
+            )}
+            <IconButton onClick={onClose}>
+              <CloseIcon />
+            </IconButton>
+          </Box>
         </Box>
         <Divider />
         <Box

src/components/CippTable/CippDataTable.js

@@ -115,6 +115,7 @@ export const CippDataTable = (props) => {
   const [usedColumns, setUsedColumns] = useState([]);
   const [offcanvasVisible, setOffcanvasVisible] = useState(false);
   const [offCanvasData, setOffCanvasData] = useState({});
+  const [offCanvasRowIndex, setOffCanvasRowIndex] = useState(0);
   const [customComponentData, setCustomComponentData] = useState({});
   const [customComponentVisible, setCustomComponentVisible] = useState(false);
   const [actionData, setActionData] = useState({ data: {}, action: {}, ready: false });
@@ -292,6 +293,7 @@ export const CippDataTable = (props) => {
         ? ({ row }) => ({
             onClick: () => {
               setOffCanvasData(row.original);
+              setOffCanvasRowIndex(row.index);
               setOffcanvasVisible(true);
             },
             sx: {
@@ -453,6 +455,7 @@ export const CippDataTable = (props) => {
               onClick={() => {
                 closeMenu();
                 setOffCanvasData(row.original);
+                setOffCanvasRowIndex(row.index);
                 setOffcanvasVisible(true);
               }}
             >
@@ -468,6 +471,7 @@ export const CippDataTable = (props) => {
             onClick={() => {
               closeMenu();
               setOffCanvasData(row.original);
+              setOffCanvasRowIndex(row.index);
               setOffcanvasVisible(true);
             }}
           >
@@ -758,8 +762,27 @@ export const CippDataTable = (props) => {
         extendedData={offCanvasData}
         extendedInfoFields={offCanvas?.extendedInfoFields}
         actions={actions}
-        children={offCanvas?.children}
+        title={offCanvasData?.Name || offCanvas?.title || "Extended Info"}
+        children={
+          offCanvas?.children ? (row) => offCanvas.children(row, offCanvasRowIndex) : undefined
+        }
         customComponent={offCanvas?.customComponent}
+        onNavigateUp={() => {
+          const newIndex = offCanvasRowIndex - 1;
+          if (newIndex >= 0 && memoizedData && memoizedData[newIndex]) {
+            setOffCanvasRowIndex(newIndex);
+            setOffCanvasData(memoizedData[newIndex]);
+          }
+        }}
+        onNavigateDown={() => {
+          const newIndex = offCanvasRowIndex + 1;
+          if (memoizedData && newIndex < memoizedData.length) {
+            setOffCanvasRowIndex(newIndex);
+            setOffCanvasData(memoizedData[newIndex]);
+          }
+        }}
+        canNavigateUp={offCanvasRowIndex > 0}
+        canNavigateDown={memoizedData && offCanvasRowIndex < memoizedData.length - 1}
         {...offCanvas}
       />
       {/* Render custom component */}

src/pages/dashboardv2/devices/index.js

@@ -1,3 +1,4 @@
+import React from "react";
 import {
   Container,
   Typography,

src/pages/dashboardv2/identity/index.js

@@ -1,3 +1,4 @@
+import React from "react";
 import {
   Container,
   Typography,