import React from "react"; import PropTypes from "prop-types"; import { makeStyles } from "@material-ui/core/styles"; import Table from "@material-ui/core/Table"; import TableBody from "@material-ui/core/TableBody"; import TableContainer from "@material-ui/core/TableContainer"; import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import Paper from "@material-ui/core/Paper"; import Spinner from "../../../components/common/Spinner"; import DonutLargeRoundedIcon from "@material-ui/icons/DonutLargeRounded"; import IconButton from "@material-ui/core/IconButton"; import Tooltip from "@material-ui/core/Tooltip"; import SessionForwardsHeaderComponent from "./SessionForwardsHeaderComponent"; import Typography from "@material-ui/core/Typography"; import { Grid } from "@material-ui/core"; import { useTranslation } from "react-i18next"; import styles from "../../../components/common/styles/tableStyles"; import { StyledTableCell, StyledTableRow } from "../../../components/common/MaterialTable"; const useStyles = makeStyles(styles); const SessionForwardsComponent = ({ session, forwards, openOptionsDialog }) => { const classes = useStyles(); const { t } = useTranslation(); return ( <Grid container> <Grid item xs={12} sm={12} md={12}> <Typography variant="h6">{t("Session.Forwards.Title")}</Typography> </Grid> <Grid item xs={12} sm={12} md={12}> {!forwards || forwards.loading ? ( <Spinner /> ) : ( forwards.loaded && ( <TableContainer component={Paper}> <Table className={classes.table} size="small" aria-label="customized table" > <TableHead> <TableRow> <StyledTableCell /> <StyledTableCell> {t("Session.Forwards.From")} </StyledTableCell> <StyledTableCell> {t("Session.Forwards.To")} </StyledTableCell> <StyledTableCell align="right"> {t("Session.Forwards.Options.Title")} </StyledTableCell> </TableRow> </TableHead> <TableBody> {forwards.map((row) => ( <StyledTableRow key={row.forwardId}> <StyledTableCell component="th" scope="row"> {forwards.indexOf(row) + 1} </StyledTableCell> <StyledTableCell>{row.from}</StyledTableCell> <StyledTableCell>{row.to}</StyledTableCell> <StyledTableCell align="right"> {row.options ? ( <Tooltip title={t("Session.Forwards.Options.Title")}> <IconButton aria-label="options" size="small" onClick={openOptionsDialog({ ...row.options, title: `${row.from} >>> ${row.to}` })} > <DonutLargeRoundedIcon color="primary" /> </IconButton> </Tooltip> ) : ( "" )} </StyledTableCell> </StyledTableRow> ))} </TableBody> </Table> </TableContainer> ) )} </Grid> <Grid item xs={12} sm={12} md={12}> <br /> </Grid> <Grid item xs={12} sm={12} md={12}> <SessionForwardsHeaderComponent session={session} /> </Grid> </Grid> ); }; SessionForwardsComponent.propTypes = { session: PropTypes.object.isRequired, forwards: PropTypes.array, openOptionsDialog: PropTypes.func.isRequired }; export default SessionForwardsComponent;