Luis/nextjs-python-web-template
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Added Metadata view with Grids to List for mobile

Browse Source
This commit is contained in:
Luis-Hebendanz
2023-08-14 19:39:26 +02:00
parent c020cce56b
commit 257e6c1d8e
2 changed files with 43 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
pkgs/ui/src/app/nodes/NodeList.tsx
View File

@@ -347,7 +347,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
return ( return (
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell id="dropdown" colSpan={1} /> <TableCell id="dropdown" colSpan={1} />
{headCells.map((headCell) => ( {headCells.map((headCell) => (
<TableCell <TableCell
key={headCell.id} key={headCell.id}
@@ -427,9 +427,23 @@ function Row(props: {
} }
}; };
const debug = true;
const debugSx = debug
? {
"--Grid-borderWidth": "1px",
borderTop: "var(--Grid-borderWidth) solid",
borderLeft: "var(--Grid-borderWidth) solid",
borderColor: "divider",
"& > div": {
borderRight: "var(--Grid-borderWidth) solid",
borderBottom: "var(--Grid-borderWidth) solid",
borderColor: "divider",
},
}
: {};
return ( return (
<React.Fragment> <React.Fragment>
{/* Rendered Row */} {/* Rendered Row */}
<TableRow <TableRow
hover hover
@@ -440,7 +454,7 @@ function Row(props: {
selected={isSelected} selected={isSelected}
sx={{ cursor: "pointer" }} sx={{ cursor: "pointer" }}
> >
<TableCell padding="none"> <TableCell padding="none">
<IconButton <IconButton
aria-label="expand row" aria-label="expand row"
size="small" size="small"
@@ -449,7 +463,11 @@ function Row(props: {
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />} {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton> </IconButton>
</TableCell> </TableCell>
<TableCell component="th" scope="row" onClick={(event) => handleClick(event, row.name)}> <TableCell
component="th"
scope="row"
onClick={(event) => handleClick(event, row.name)}
>
<Stack> <Stack>
<Typography component="div" align="left" variant="body1"> <Typography component="div" align="left" variant="body1">
{row.name} {row.name}
@@ -464,8 +482,16 @@ function Row(props: {
</Typography> </Typography>
</Stack> </Stack>
</TableCell> </TableCell>
<TableCell align="right" onClick={(event) => handleClick(event, row.name)}>{renderStatus(row.status)}</TableCell> <TableCell
<TableCell align="right" onClick={(event) => handleClick(event, row.name)}> align="right"
onClick={(event) => handleClick(event, row.name)}
>
{renderStatus(row.status)}
</TableCell>
<TableCell
align="right"
onClick={(event) => handleClick(event, row.name)}
>
<Typography component="div" align="left" variant="body1"> <Typography component="div" align="left" variant="body1">
{row.last_seen} days ago {row.last_seen} days ago
</Typography> </Typography>
@@ -478,26 +504,17 @@ function Row(props: {
<Collapse in={open} timeout="auto" unmountOnExit> <Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1 }}> <Box sx={{ margin: 1 }}>
<Typography variant="h6" gutterBottom component="div"> <Typography variant="h6" gutterBottom component="div">
History Metadata
</Typography> </Typography>
<Table size="small" aria-label="purchases"> <Grid2 container spacing={2} paddingLeft={0}>
<TableHead> <Grid2 xs={6} style={{ ...debugSx }} justifyContent="left" display="flex" paddingRight={3}>
<TableRow> <Box >Hello1</Box>
<TableCell>Date</TableCell> </Grid2>
<TableCell>Customer</TableCell> <Grid2 xs={6} style={{ ...debugSx }} paddingLeft={4}>
<TableCell align="right">Amount</TableCell> <Box>Hello2</Box>
<TableCell align="right">Total price ($)</TableCell> </Grid2>
</TableRow>
</TableHead> </Grid2>
<TableBody>
<TableRow key="test1">
<TableCell>Test1</TableCell>
<TableCell>Test2</TableCell>
<TableCell align="right">Test</TableCell>
<TableCell align="right">Test</TableCell>
</TableRow>
</TableBody>
</Table>
</Box> </Box>
</Collapse> </Collapse>
</TableCell> </TableCell>

2
pkgs/ui/src/app/nodes/NodePieChart.tsx
View File

@@ -37,7 +37,7 @@ export default function NodePieChart(props: Props) {
dataKey="value" dataKey="value"
nameKey="name" nameKey="name"
label={showLabels} label={showLabels}
legendType="circle" legendType="square"
cx="50%" cx="50%"
cy="50%" cy="50%"
startAngle={0} startAngle={0}