brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'devices_websocket' into dev_environment

Browse source
This commit is contained in:
Carter 2026-03-13 15:37:49 -06:00
commit 9e921cb39d
1 changed files with 122 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

180
src/common/ResponsiveTable.tsx
View file

@ -1,11 +1,11 @@
import { Box, Button, Card, Checkbox, CircularProgress, Collapse, darken, Divider, Grid2, IconButton, InputAdornment, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
import { alpha } from "@mui/system/colorManipulator";
import { makeStyles } from "@mui/styles";
import { ArrowDownward, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material"
import { useEffect, useRef, useState } from "react";
import React from "react";
import { useMobile } from "hooks";
import classNames from "classnames";
import { getThemeType } from "theme";
const useStyles = makeStyles((theme: Theme) => {
//const isMobile = useMobile()
@ -15,11 +15,10 @@ const useStyles = makeStyles((theme: Theme) => {
border: "none"
},
tableContainer: {
// margin: theme.spacing(1),
// [theme.breakpoints.up("sm")]: {
// margin: theme.spacing(2)
// },
// width: "auto"
width: "100%",
maxWidth: "100%",
overflow: "hidden",
minWidth: 0,
},
title: {
padding: theme.spacing(1),
@ -59,10 +58,14 @@ const useStyles = makeStyles((theme: Theme) => {
},
stickyHeader: {
position: "sticky",
backgroundColor: getThemeType() === "light" ? "rgb(245, 245, 245)" : "rgb(40, 40, 40)",
backgroundColor: theme.palette.background.paper,
// Match Paper's elevation overlay so header matches search bar area
backgroundImage: theme.palette.mode === "dark"
? `linear-gradient(${alpha("#fff", 0.05)}, ${alpha("#fff", 0.05)})`
: undefined,
top: 0,
zIndex: 300 //giving a really high z-index to make sure nothing is in front of it
}
},
})},
);
@ -75,6 +78,53 @@ export interface Column<T> {
disableSort?: boolean;
}
function ResizableHeaderTitle<T>(props: {
column: Column<T>;
index: number;
columnsLength: number;
resizeable: boolean;
onColumnClick: (column: Column<T>) => void;
showOrderIcon: (column: Column<T>) => React.ReactNode;
}) {
const { column, index, columnsLength, resizeable, onColumnClick, showOrderIcon } = props;
const titleRef = useRef<HTMLDivElement>(null);
const [isOverflowing, setIsOverflowing] = useState(false);
useEffect(() => {
const el = titleRef.current;
if (!el) return;
const checkOverflow = () => setIsOverflowing(el.scrollWidth > el.clientWidth);
checkOverflow();
const ro = new ResizeObserver(checkOverflow);
ro.observe(el);
return () => ro.disconnect();
}, []);
return (
<Grid2
ref={titleRef}
alignItems="center"
display="flex"
onClick={() => !column.disableSort && onColumnClick(column)}
sx={{
cursor: column.disableSort ? "default" : "pointer",
minWidth: 0,
overflow: "hidden",
...(isOverflowing && resizeable && index < columnsLength - 1
? {
maskImage: "linear-gradient(to right, black 75%, transparent 100%)",
WebkitMaskImage: "linear-gradient(to right, black 75%, transparent 100%)",
}
: {}),
}}
>
<Box component="span" sx={{ whiteSpace: "nowrap" }}>
{column.title} {showOrderIcon(column)}
</Box>
</Grid2>
);
}
interface Props<T> {
rows: T[],
columns?: Column<T>[] | (() => Column<T>[]),
@ -450,13 +500,11 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
}
const resizeClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
let newWidths: number[] = []
event.currentTarget.parentElement?.parentElement?.parentElement?.childNodes.forEach(node => {
if (node instanceof HTMLElement) {
newWidths.push(node.clientWidth)
}
})
const row = event.currentTarget.closest("tr")
if (!row) return
const cells = Array.from(row.querySelectorAll("th, td"))
const offset = (rowSelect ? 1 : 0) + (renderGutter ? 1 : 0)
const newWidths = cells.slice(offset).map((cell) => cell.clientWidth)
rowWidthsRef.current = newWidths
dragIndexRef.current = index;
@ -483,11 +531,15 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
if (!dragStart) return
let newWidths: number[] = [...rowWidths]
newWidths[index] = newWidths[index] - (dragStart - e.clientX)
const delta = dragStart - e.clientX
const newWidthForIndex = newWidths[index] - delta
const clampedWidth = Math.max(MIN_COLUMN_WIDTH, newWidthForIndex)
const actualDelta = newWidths[index] - clampedWidth
newWidths[index] = clampedWidth
newWidths.every((width, j) => {
if (j <= index || width === 0) return true
else if (newWidths[j] !== undefined) {
newWidths[j] = newWidths[j] + (dragStart - e.clientX)
newWidths[j] = newWidths[j] + actualDelta
return false
}
})
@ -495,45 +547,49 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
}
const MIN_COLUMN_WIDTH = 24;
return (
<Box className={classes.tableContainer} component={Paper}>
<Table>
<TableHead className={stickyHeader ? classes.stickyHeader : undefined}>
<TableRow sx={ !title && !setSearchText ? { display: "none" } : undefined}>
<TableCell colSpan={10000} sx={{ border: "none" }}>
<Grid2 container justifyContent="space-between">
{(title || setSearchText) && (
<Box>
<Grid2 container justifyContent="space-between" alignItems="center" sx={{ padding: 1 }}>
<Grid2>
<Box sx={{ marginTop: -1 }}>
{renderTitle()}
{renderSubtitle()}
</Box>
</Grid2>
<Grid2 size={{ xs: "grow" }} sx={{ minWidth: 0, display: "flex", justifyContent: "flex-end" }}>
<Grid2 container alignItems="center" spacing={1} wrap="nowrap">
<Grid2>
<Box sx={{ marginTop: -1 }}>
{renderTitle()}
{renderSubtitle()}
</Box>
{actions && actions}
</Grid2>
<Grid2>
<Grid2 container alignItems={"center"} spacing={1}>
<Grid2>
{actions && actions}
</Grid2>
<Grid2>
{endTitleElement}
</Grid2>
<Grid2>
{setSearchText &&<Box className={classes.searchContainer}>
{searchBar()}
</Box>}
</Grid2>
<Grid2>
{ columns && !hideKeys &&
<IconButton onClick={openColumnMenu} >
<ViewColumn />
</IconButton>
}
</Grid2>
</Grid2>
{endTitleElement}
</Grid2>
<Grid2 sx={{ minWidth: 200, maxWidth: 320 }}>
{setSearchText && (
<Box className={classes.searchContainer} sx={{ width: "100%" }}>
{searchBar()}
</Box>
)}
</Grid2>
<Grid2>
{ columns && !hideKeys &&
<IconButton onClick={openColumnMenu} >
<ViewColumn />
</IconButton>
}
</Grid2>
</Grid2>
</TableCell>
</TableRow>
</Grid2>
</Grid2>
</Box>
)}
<TableContainer sx={{ overflowX: "auto", paddingBottom: 1 }}>
<Table>
<TableHead className={stickyHeader ? classes.stickyHeader : undefined}>
{customElement &&
<TableRow>
<TableCell colSpan={10000} sx={{ border: "none" }}>
@ -552,18 +608,23 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
)
return (
<TableCell key={"header-cell-"+index} width={rowWidths[index] ? rowWidths[index] : undefined}>
<Grid2 container spacing={1} justifyContent={"space-between"}>
<Grid2
alignItems="center"
display="flex"
onClick={() => !column.disableSort && columnClick(column)}
sx={{ cursor: column.disableSort ? "default" : "pointer" }}
>
{column.title} {showOrderIcon(column)}
</Grid2>
<Grid2
container
spacing={1}
justifyContent={"space-between"}
flexWrap="nowrap"
>
<ResizableHeaderTitle
column={column}
index={index}
columnsLength={columns.length}
resizeable={!!resizeable}
onColumnClick={columnClick}
showOrderIcon={showOrderIcon}
/>
{index < columns.length-1 && resizeable &&
<Grid2
sx={{ cursor: "col-resize", userSelect: "none" }}
sx={{ cursor: "col-resize", userSelect: "none", flexShrink: 0 }}
onMouseDown={event => resizeClick(event, index)}
>
|
@ -672,6 +733,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
}
</TableBody>
</Table>
</TableContainer>
{!hidePagination &&
<TablePagination
rowsPerPageOptions={rowsPerPageOptions ? rowsPerPageOptions : [5, 10, 20]}