Add results table

frontend/src/assets/styles/step.scss

@@ -15,3 +15,14 @@
 .step-overlay .row {
     flex-grow: 1;
 }
+
+// This is not ideal - it adjusts margin that bootstrap overrides from MUI
+.MuiTablePagination-toolbar {
+    .MuiTablePagination-displayedRows  {
+        margin-top: 1rem;
+    }
+
+    .MuiTablePagination-selectLabel {
+        margin-top: 1rem;
+    }
+}

frontend/src/components/steps/results/PlantList.js

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableFooter from '@mui/material/TableFooter';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import TableHead from '@mui/material/TableHead';
+import Paper from '@mui/material/Paper';
+import IconButton from '@mui/material/IconButton';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import LastPageIcon from '@mui/icons-material/LastPage';
+
+function TablePaginationActions(props) {
+  const theme = useTheme();
+  const { count, page, rowsPerPage, onPageChange } = props;
+
+  const handleFirstPageButtonClick = (event) => {
+    onPageChange(event, 0);
+  };
+
+  const handleBackButtonClick = (event) => {
+    onPageChange(event, page - 1);
+  };
+
+  const handleNextButtonClick = (event) => {
+    onPageChange(event, page + 1);
+  };
+
+  const handleLastPageButtonClick = (event) => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+
+  return (
+    <Box sx={{ flexShrink: 0, ml: 2.5 }}>
+      <IconButton
+        onClick={handleFirstPageButtonClick}
+        disabled={page === 0}
+        aria-label="first page"
+      >
+        {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
+      </IconButton>
+      <IconButton
+        onClick={handleBackButtonClick}
+        disabled={page === 0}
+        aria-label="previous page"
+      >
+        {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
+      </IconButton>
+      <IconButton
+        onClick={handleNextButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="next page"
+      >
+        {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
+      </IconButton>
+      <IconButton
+        onClick={handleLastPageButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="last page"
+      >
+        {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
+      </IconButton>
+    </Box>
+  );
+}
+
+TablePaginationActions.propTypes = {
+  count: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func.isRequired,
+  page: PropTypes.number.isRequired,
+  rowsPerPage: PropTypes.number.isRequired,
+};
+
+export default function CustomPaginationActionsTable(props) {
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+
+  // Avoid a layout jump when reaching the last page with empty rows.
+  const emptyRows =
+    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - props.rows.length) : 0;
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  return (
+    <TableContainer component={Paper}>
+      <Table size="small" stickyHeader aria-label="Plant table">
+      <TableHead>
+          <TableRow>
+            <TableCell>Names</TableCell>
+            <TableCell align="right">Growth form/max height&nbsp;(m)/spacing&nbsp;(m)</TableCell>
+            <TableCell align="right">Preferred&nbsp;moisture&nbsp;regime</TableCell>
+            <TableCell align="right">Tolerances</TableCell>
+            <TableCell align="right">Ecosystem&nbsp;services</TableCell>
+            <TableCell align="right">Carbon Sequestration Rate</TableCell>
+            <TableCell align="right">Planting Stage</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+        {(rowsPerPage > 0
+            ? props.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+            : props.rows
+          ).map((row) => (
+            <TableRow key={row.name}>
+              <TableCell component="th" scope="row">{row.name}</TableCell>
+              <TableCell align="right">{row.growthForm}</TableCell>
+              <TableCell align="right">{row.moisturePreferences}</TableCell>
+              <TableCell align="right">{row.plantTolerances}</TableCell>
+              <TableCell align="right">{row.ecosystemServices}</TableCell>
+              <TableCell align="right">{row.carbonSequestration}</TableCell>
+              <TableCell align="right">{row.plantingStage}</TableCell>
+            </TableRow>
+          ))}
+
+          {emptyRows > 0 && (
+            <TableRow style={{ height: 53 * emptyRows }}>
+              <TableCell colSpan={6} />
+            </TableRow>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              className="plant-list-pagination"
+              rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+              colSpan={7}
+              count={props.rows.length}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+              rows={props.rows}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
+  );
+}

frontend/src/components/steps/results/ResultsStep.js

@@ -1,17 +1,46 @@
 import Step from '../Step';
-import { ListGroup, ListGroupItem } from 'reactstrap';
+import PlantList from './PlantList'
 
 export default function ResultsStep(props) {
+
+    function createData(name, growthForm, moisturePreferences, plantTolerances, ecosystemServices, carbonSequestration, plantingStage) {
+        return {
+            name,
+            growthForm,
+            moisturePreferences,
+            plantTolerances,
+            ecosystemServices,
+            carbonSequestration,
+            plantingStage
+        };
+    }
+
+    const getTableRows = () => {
+        return props.plants.map((plant) => {
+
+            const name = `${plant.name}/${plant.commonname}/${plant.synonym}`;
+            const growthForm = `${plant.growth_form}/${plant.maxheight}/${plant.spacing}`;
+            const moisturePreferences = `${plant.soil_variants.map((variant) => variant.name).join(', ')}`;
+            const plantTolerances = `${plant.water_tolerance.level}/${plant.drought_tolerance.level}/${plant.frost_tolerance.level}/${plant.salinity_tolerance.level}`;;
+            const ecosystemServices = `${plant.purpose}`;
+            const carbonSequestration = ``
+            const plantingStage = `${plant.stage}`
+
+            return createData(
+                name,
+                growthForm,
+                moisturePreferences,
+                plantTolerances,
+                ecosystemServices,
+                carbonSequestration,
+                plantingStage
+            );
+        })
+    }
+
     const stepContent = (
-        <div>
+        <div className="pt-4">
-        <h5 className="pt-4">Plant List</h5>
+            <PlantList rows={getTableRows()}/>
-            <div>
-            <ListGroup>
-                {props.plants.map(function (plant, i) {
-                    return <ListGroupItem key={i} >{plant.name}</ListGroupItem>;
-                })}
-            </ListGroup>
-            </div>
         </div>
     )