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

put back everything else minus the styling

Browse source
This commit is contained in:
csawatzky 2025-04-10 14:08:53 -06:00
parent 77405b36b0
commit a48145b25e
1 changed files with 121 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

242
src/common/ResponsiveTable.tsx
View file

@ -96,7 +96,7 @@ interface Props<T> {
export default function ResponsiveTable<T extends Object>(props: Props<T>) { export default function ResponsiveTable<T extends Object>(props: Props<T>) {
const { const {
// rows, rows,
total, total,
page, page,
pageSize, pageSize,
@ -136,7 +136,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
const filterKey = window.location.pathname.split('/').pop() + "-table-filter-list"; const filterKey = window.location.pathname.split('/').pop() + "-table-filter-list";
console.log("Most of the function and the table container") console.log("Put back everything minus the style classes")
const [filterList, setFilterList] = useState<string[]>(() => { const [filterList, setFilterList] = useState<string[]>(() => {
const saved = localStorage.getItem(filterKey); const saved = localStorage.getItem(filterKey);
@ -260,125 +260,125 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
return String(val).charAt(0).toUpperCase() + String(val).slice(1); return String(val).charAt(0).toUpperCase() + String(val).slice(1);
} }
// const renderMobileRow = (row: T) => { const renderMobileRow = (row: T) => {
// if (renderMobile) return ( if (renderMobile) return (
// renderMobile(row) renderMobile(row)
// ) )
// if (columns) { if (columns) {
// return ( return (
// <Grid2 container direction={"row"} spacing={1} > <Grid2 container direction={"row"} spacing={1} >
// {columns.map((column, index) => { {columns.map((column, index) => {
// return ( return (
// <React.Fragment key={"mobile-row-column-"+index}> <React.Fragment key={"mobile-row-column-"+index}>
// { !hideKeys && <Grid2 size={{ xs: 3 }} alignContent={"center"}> { !hideKeys && <Grid2 size={{ xs: 3 }} alignContent={"center"}>
// <Typography fontWeight={"bold"} > <Typography fontWeight={"bold"} >
// {column.title+": "} {column.title+": "}
// </Typography> </Typography>
// </Grid2>} </Grid2>}
// <Grid2 size={{ xs: hideKeys ? 12 : 9 }} alignContent={"center"} > <Grid2 size={{ xs: hideKeys ? 12 : 9 }} alignContent={"center"} >
// {column.render(row)} {column.render(row)}
// </Grid2> </Grid2>
// </React.Fragment> </React.Fragment>
// ) )
// })} })}
// </Grid2> </Grid2>
// ) )
// } }
// return ( return (
// Object.keys(row).map((key, index) => { Object.keys(row).map((key, index) => {
// let value = row[key as keyof typeof row] let value = row[key as keyof typeof row]
// return ( return (
// <Grid2 container direction={"row"} key={"mobile-list-"+index} spacing={1} padding={1}> <Grid2 container direction={"row"} key={"mobile-list-"+index} spacing={1} padding={1}>
// <Grid2 size={{ xs: 4 }} alignContent={"center"} > <Grid2 size={{ xs: 4 }} alignContent={"center"} >
// <Typography fontWeight={"bold"} > <Typography fontWeight={"bold"} >
// {capitalize(key)+": "} {capitalize(key)+": "}
// </Typography> </Typography>
// </Grid2> </Grid2>
// <Grid2 size={{ xs: 8 }}> <Grid2 size={{ xs: 8 }}>
// <Typography> <Typography>
// {value+""} {value+""}
// </Typography> </Typography>
// </Grid2> </Grid2>
// </Grid2> </Grid2>
// ) )
// }) })
// ) )
// } }
// if (isMobile || mobileView) return ( if (isMobile || mobileView) return (
// <Box> <Box>
// <Box className={classes.mobileTitleBox}> <Box /*className={classes.mobileTitleBox}*/>
// {renderTitle()} {renderTitle()}
// {renderSubtitle()} {renderSubtitle()}
// {setSearchText && searchBar()} {setSearchText && searchBar()}
// </Box> </Box>
// {rows.map((row, index) => { {rows.map((row, index) => {
// return ( return (
// <Card className={classNames(classes.card, onRowClick&&classes.rowHover)} key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}> <Card /*className={classNames(classes.card, onRowClick&&classes.rowHover)}*/ key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
// {renderMobileRow(row)} {renderMobileRow(row)}
// {renderGutter && {renderGutter &&
// <> <>
// <Divider/> <Divider/>
// <Collapse className={classes.gutter} in={openGutters.includes(index)} > <Collapse /*className={classes.gutter}*/ in={openGutters.includes(index)} >
// {renderGutter(row)} {renderGutter(row)}
// </Collapse> </Collapse>
// {openGutters.includes(index) && <Divider/>} {openGutters.includes(index) && <Divider/>}
// <ListItemButton <ListItemButton
// sx={{ sx={{
// width: "100%", width: "100%",
// display: "flex", display: "flex",
// justifyContent: "center", justifyContent: "center",
// padding: gutterPadding padding: gutterPadding
// }} }}
// onClick={(event) => handleCollapse(index, event)} onClick={(event) => handleCollapse(index, event)}
// // style={{pre}} // style={{pre}}
// > >
// <IconButton <IconButton
// sx={{ sx={{
// transform: openGutters.includes(index) ? transform: openGutters.includes(index) ?
// 'rotate(-90deg)' : 'rotate(90deg)', 'rotate(-90deg)' : 'rotate(90deg)',
// transition: 'transform 0.3s ease', transition: 'transform 0.3s ease',
// alignContent: "center" alignContent: "center"
// }} }}
// > >
// <ChevronRight/> <ChevronRight/>
// </IconButton> </IconButton>
// </ListItemButton> </ListItemButton>
// </> </>
// } }
// </Card> </Card>
// ) )
// })} })}
// {(rows && rows.length < 1) && {(rows && rows.length < 1) &&
// (!isLoading ? (!isLoading ?
// <Typography sx={{ textAlign: "center" }} color="textSecondary"> <Typography sx={{ textAlign: "center" }} color="textSecondary">
// { noDataMessage ? noDataMessage : "No data."} { noDataMessage ? noDataMessage : "No data."}
// </Typography> </Typography>
// : :
// <Box sx={{ width: "100%", textAlign: "center" }} > <Box sx={{ width: "100%", textAlign: "center" }} >
// <CircularProgress/> <CircularProgress/>
// </Box> </Box>
// ) )
// } }
// </Box> </Box>
// ) )
// const filter = (colName: string) => { const filter = (colName: string) => {
// let newFilterList = [...filterList] let newFilterList = [...filterList]
// if (filterList.includes(colName)) { if (filterList.includes(colName)) {
// newFilterList = newFilterList.filter(name => name !== colName) newFilterList = newFilterList.filter(name => name !== colName)
// } else { } else {
// newFilterList.push(colName) newFilterList.push(colName)
// } }
// setFilterList(newFilterList) setFilterList(newFilterList)
// } }
return ( return (
<TableContainer /*className={classes.tableContainer}*/ component={Paper}> <TableContainer /*className={classes.tableContainer}*/ component={Paper}>
{/* <Table> <Table>
<TableHead> <TableHead>
<TableRow sx={ !title && !setSearchText ? { display: "none" } : undefined}> <TableRow sx={ !title && !setSearchText ? { display: "none" } : undefined}>
@ -396,7 +396,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
{actions && actions} {actions && actions}
</Grid2> </Grid2>
<Grid2> <Grid2>
{setSearchText &&<Box className={classes.searchContainer}> {setSearchText &&<Box /*className={classes.searchContainer}*/>
{searchBar()} {searchBar()}
</Box>} </Box>}
</Grid2> </Grid2>
@ -459,7 +459,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
// if (filterList.includes()) return null // if (filterList.includes()) return null
return ( return (
<React.Fragment key={"row-"+index}> <React.Fragment key={"row-"+index}>
<TableRow onClick={() => onRowClick&&onRowClick(row)} className={onRowClick ? classes.rowHover : undefined}> <TableRow onClick={() => onRowClick&&onRowClick(row)} /*className={onRowClick ? classes.rowHover : undefined}*/>
{rowSelect && {rowSelect &&
<TableCell> <TableCell>
<Checkbox <Checkbox
@ -508,7 +508,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
} }
</TableRow> </TableRow>
{renderGutter && {renderGutter &&
<TableRow className={classes.gutter}> <TableRow /*className={classes.gutter}*/>
<TableCell colSpan={6} sx={{padding:0, margin: 0, border: "none"}}> <TableCell colSpan={6} sx={{padding:0, margin: 0, border: "none"}}>
<Collapse in={openGutters.includes(index)} timeout="auto" unmountOnExit> <Collapse in={openGutters.includes(index)} timeout="auto" unmountOnExit>
{renderGutter(row)} {renderGutter(row)}
@ -530,8 +530,8 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
</TableRow> </TableRow>
} }
</TableBody> </TableBody>
</Table> */} </Table>
{/* {!hidePagination && {!hidePagination &&
<TablePagination <TablePagination
rowsPerPageOptions={rowsPerPageOptions ? rowsPerPageOptions : [5, 10, 20]} rowsPerPageOptions={rowsPerPageOptions ? rowsPerPageOptions : [5, 10, 20]}
component="div" component="div"
@ -541,8 +541,8 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
onPageChange={(_event, page) => handlePageChange(page)} onPageChange={(_event, page) => handlePageChange(page)}
onRowsPerPageChange={handleRowsPerPageChange} onRowsPerPageChange={handleRowsPerPageChange}
/> />
} */} }
{/* <Menu <Menu
id="userMenu" id="userMenu"
anchorEl={columnAnchor} anchorEl={columnAnchor}
open={columnAnchor !== null} open={columnAnchor !== null}
@ -566,7 +566,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
</MenuItem> </MenuItem>
) )
})} })}
</Menu> */} </Menu>
</TableContainer> </TableContainer>
) )
} }