Add download button for csv and move plants request to results

This commit is contained in:
Dana Lambert 2021-11-08 17:10:12 +13:00
parent 35aa9cbe70
commit 2cacd25c16
2 changed files with 42 additions and 21 deletions
frontend/src
components/steps/results
pages

View file

@ -1,7 +1,29 @@
import { useEffect, useState } from 'react';
import Step from '../Step';
import PlantList from './PlantList'
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import PlantRepository from '../../../repository/PlantRepository'
import { Typography, Box } from '@mui/material';
export default function ResultsStep(props) {
const [plants, setPlants] = useState([]);
useEffect(() => {
const updatePlants = () => {
PlantRepository.getFilteredPlants(props.filters).then(response => {
if (response.status === 200) {
setPlants(response.data)
}
}).catch(e => {
this.setState({ plants: ["No plants found."] });
})
}
updatePlants()},
[props.filters]);
function createData(name, growthForm, moisturePreferences, plantTolerances, ecosystemServices, carbonSequestration, plantingStage) {
return {
@ -16,7 +38,7 @@ export default function ResultsStep(props) {
}
const getTableRows = () => {
return props.plants.map((plant) => {
return plants.map((plant) => {
return createData(
plant.display_name,
plant.display_growth_form,
@ -29,8 +51,26 @@ export default function ResultsStep(props) {
})
}
const downloadCSV = () => {
PlantRepository.getPlantsCSV(props.filters).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data], {type : 'text/csv'}));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'plants.csv');
document.body.appendChild(link);
link.click();
})
}
const stepContent = (
<div className="pt-4">
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} className="pb-4">
<Typography variant='h5'>Plant List Results</Typography>
<Stack spacing={2} direction="row" justifyContent="end">
<Button variant="contained">Download PDF</Button>
<Button variant="contained" onClick={() => downloadCSV()}>Download CSV</Button>
</Stack>
</Box>
<PlantList rows={getTableRows()}/>
</div>
)

View file

@ -2,16 +2,12 @@ import React from 'react'
import { Container } from 'reactstrap';
import Stepper from '../components/Stepper'
import Header from '../components/Header'
import PlantRepository from '../repository/PlantRepository'
export default class MainPage extends React.Component {
constructor(props) {
super(props);
this.state = {
plants: [],
filters: {}
}
@ -19,35 +15,20 @@ export default class MainPage extends React.Component {
this.resetFilterState = this.resetFilterState.bind(this);
}
updatePlants() {
PlantRepository.getFilteredPlants(this.state.filters).then(response => {
if (response.status === 200) {
this.setState({ plants: response.data });
}
}).catch(e => {
this.setState({ plants: ["No plants found."] });
})
}
updateFilterState(newFilter) {
this.setState({ filters: Object.assign(this.state.filters, newFilter) })
this.updatePlants()
}
resetFilterState() {
this.setState({ filters: {} })
}
componentDidMount() {
this.updatePlants()
}
render() {
return (
<Container fluid className='main-container p-0'>
<Header/>
<Stepper
plants={this.state.plants}
filters={this.state.filters}
updateFilterState={this.updateFilterState}
resetFilterState={this.resetFilterState} />