lightweight/right-tree
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

Connect download pdf endpoint to frontend

Browse source
This commit is contained in:
Dana Lambert 2021-11-18 11:18:18 +13:00
parent c63dbeae61
commit 04b391ceb7
2 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/components/steps/results/ResultsStep.js
View file

@ -52,14 +52,24 @@ export default function ResultsStep(props) {
}) })
} }
const downloadCSV = () => { const download = (response, fileType, fileName) => {
PlantRepository.getPlantsCSV(props.filters).then(response => { const url = window.URL.createObjectURL(new Blob([response.data], {type : fileType }));
const url = window.URL.createObjectURL(new Blob([response.data], {type : 'text/csv'}));
const link = document.createElement('a'); const link = document.createElement('a');
link.href = url; link.href = url;
link.setAttribute('download', 'plants.csv'); link.setAttribute('download', fileName);
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
}
const downloadCSV = () => {
PlantRepository.getPlantsCSV(props.filters).then(response => {
download(response, "text/csv", "plants.csv")
})
}
const downloadPDF = () => {
PlantRepository.getPlantsPDF(props.filters).then(response => {
download(response, "application/pdf", "planting_guide.pdf")
}) })
} }
@ -68,7 +78,7 @@ export default function ResultsStep(props) {
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} className="pb-4"> <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} className="pb-4">
<Typography variant='h5'>Plant List Results</Typography> <Typography variant='h5'>Plant List Results</Typography>
<Stack spacing={2} direction="row" justifyContent="end"> <Stack spacing={2} direction="row" justifyContent="end">
<Button variant="contained">Download PDF</Button> <Button variant="contained" onClick={() => downloadPDF()}>Download PDF</Button>
<Button variant="contained" onClick={() => downloadCSV()}>Download CSV</Button> <Button variant="contained" onClick={() => downloadCSV()}>Download CSV</Button>
</Stack> </Stack>
</Box> </Box>

4
frontend/src/repository/PlantRepository.js
View file

@ -8,6 +8,10 @@ const PlantRepository = {
getPlantsCSV(filters) { getPlantsCSV(filters) {
return Repository.get('/download/csv/', { params: filters }) return Repository.get('/download/csv/', { params: filters })
},
getPlantsPDF(filters) {
return Repository.get('/download/pdf/', { params: filters, responseType: 'arraybuffer' })
} }
} }