changed accordion with table

master
Tudor Stanciu 2021-04-17 02:21:49 +03:00
parent e966a54833
commit 93fdc26886
6 changed files with 155 additions and 41 deletions

View File

@ -0,0 +1,63 @@
import React from "react";
import PropTypes from "prop-types";
import { TableCell, TableRow, IconButton } from "@material-ui/core";
import Collapse from "@material-ui/core/Collapse";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import { makeStyles } from "@material-ui/core/styles";
import MachineLog from "./MachineLog";
const useRowStyles = makeStyles({
root: {
"& > *": {
borderBottom: "unset"
}
}
});
const MachineItem = ({ machine }) => {
const [open, setOpen] = React.useState(false);
const classes = useRowStyles();
return (
<React.Fragment>
<TableRow className={classes.root}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
<TableCell component="th" scope="row">
{machine.fullMachineName}
</TableCell>
<TableCell>{machine.machineName}</TableCell>
<TableCell>{machine.iPv4Address}</TableCell>
<TableCell align="right">{"buttons"}</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<MachineLog />
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
};
MachineItem.propTypes = {
machine: PropTypes.shape({
machineId: PropTypes.number.isRequired,
machineName: PropTypes.string.isRequired,
fullMachineName: PropTypes.string.isRequired,
macAddress: PropTypes.string.isRequired,
iPv4Address: PropTypes.string,
description: PropTypes.string
}).isRequired
};
export default MachineItem;

View File

@ -0,0 +1,51 @@
import React from "react";
import PropTypes from "prop-types";
import {
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Typography
} from "@material-ui/core";
import Box from "@material-ui/core/Box";
const MachineLog = () => {
const history = [
{ date: "2020-01-05", customerId: "11091700", amount: 3 },
{ date: "2020-01-02", customerId: "Anonymous", amount: 1 }
];
return (
<Box margin={1}>
<Typography variant="h6" gutterBottom component="div">
History
</Typography>
<Table size="small" aria-label="purchases">
<TableHead>
<TableRow>
<TableCell>Date</TableCell>
<TableCell>Customer</TableCell>
<TableCell align="right">Amount</TableCell>
<TableCell align="right">Total price ($)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{history.map(historyRow => (
<TableRow key={historyRow.date}>
<TableCell component="th" scope="row">
{historyRow.date}
</TableCell>
<TableCell>{historyRow.customerId}</TableCell>
<TableCell align="right">{historyRow.amount}</TableCell>
<TableCell align="right">
{Math.round(historyRow.amount * 5 * 100) / 100}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
);
};
export default MachineLog;

View File

@ -1,46 +1,44 @@
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
const useStyles = makeStyles(theme => ({
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular
}
}));
const MachinesList = ({ machines }) => {
const classes = useStyles();
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow
} from "@material-ui/core";
import Paper from "@material-ui/core/Paper";
import MachineItem from "./MachineItem";
const MachinesList = ({ dense, machines }) => {
return (
<div>
{machines.map(m => (
<Accordion key={`machine-${m.machineId}`}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
id={`machine-${m.machineId}-summary`}
>
<Typography className={classes.heading}>{m.machineName}</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
eget.
</Typography>
</AccordionDetails>
</Accordion>
))}
</div>
<TableContainer component={Paper}>
<Table aria-label="collapsible table" size={dense ? "small" : "medium"}>
<TableHead>
<TableRow>
<TableCell />
<TableCell>Full machine name</TableCell>
<TableCell>Machine name</TableCell>
<TableCell>IP</TableCell>
<TableCell align="right">Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{machines.map(machine => (
<MachineItem
key={`machine-${machine.machineId}`}
machine={machine}
/>
))}
</TableBody>
</Table>
</TableContainer>
);
};
MachinesList.propTypes = {
dense: PropTypes.bool.isRequired,
machines: PropTypes.array.isRequired
};

View File

@ -12,7 +12,7 @@ const NetworkComponent = ({ network, onPropertyChange }) => {
return (
<div className={classes.root}>
<MachinesList machines={network.machines} />
<MachinesList dense={true} machines={network.machines} />
<br />
<TextField
id="ertet"

View File

@ -15,14 +15,16 @@ const NetworkContainer = () => {
};
const handleReadMachines = useCallback(async () => {
alert("rad");
const machines = await readMachines();
dispatchActions.onNetworkChange("machines", machines);
const data = Object.assign(machines, { loaded: true });
dispatchActions.onNetworkChange("machines", data);
}, [dispatchActions]);
useEffect(() => {
handleReadMachines();
}, [handleReadMachines]);
if (!state.network.machines.loaded) {
handleReadMachines();
}
}, [handleReadMachines, state.network.machines.loaded]);
return (
<NetworkComponent network={state.network} onPropertyChange={handleChange} />

View File

@ -15,7 +15,7 @@ export const initialState = {
}
},
network: {
machines: [],
machines: Object.assign([], { loaded: false }),
test: ""
}
};