Add download button for csv and move plants request to results
This commit is contained in:
parent
35aa9cbe70
commit
2cacd25c16
2 changed files with 42 additions and 21 deletions
frontend/src
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -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} />
|
||||
|
|
Loading…
Reference in a new issue