diff --git a/.eslintrc.json b/.eslintrc.json index ebe7c87b16ab7110433c2e94b58f1e23e5b0d912..eececbf2a6d6e5ac336fda7d9e029c5a52b3691a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -12,7 +12,7 @@ "ecmaFeatures": { "jsx": true }, - "ecmaVersion": 13, + "ecmaVersion": 12, "sourceType": "module" }, "plugins": [ diff --git a/src/components/ResourceExportButton.js b/src/components/ResourceExportButton.js new file mode 100644 index 0000000000000000000000000000000000000000..5b325c0b0a2b6f013dd7d8751840803581d625b3 --- /dev/null +++ b/src/components/ResourceExportButton.js @@ -0,0 +1,49 @@ +import GetAppIcon from '@material-ui/icons/GetApp'; +import PropTypes from 'prop-types'; +import * as React from 'react'; +import { Button, useDataProvider, useNotify } from 'react-admin'; + +const download = (data, filename, type) => { + let file = new Blob([data], { type: type }); + let a = document.createElement('a'), + url = URL.createObjectURL(file); + a.href = url; + a.download = filename; + document.body.appendChild(a); + a.click(); + setTimeout(function () { + document.body.removeChild(a); + window.URL.revokeObjectURL(url); + }, 0); +}; + +const ResourceExportButton = ({ record, mime, file, ...rest }) => { + const dataProvider = useDataProvider(); + const notify = useNotify(); + + const onClick = () => { + dataProvider.export('people', { id: record.id }).then((response) => { + download(JSON.stringify(response), file, mime); + notify('ra.notification.exported'); + }); + }; + + return ( + <Button label="Exporter" {...rest} onClick={onClick}> + <GetAppIcon /> + </Button> + ); +}; + +ResourceExportButton.propTypes = { + record: PropTypes.any, + mime: PropTypes.string, + file: PropTypes.string +}; + +ResourceExportButton.defaulProps = { + mime: 'application/json', + file: 'export.json' +}; + +export default ResourceExportButton; diff --git a/src/resources/Events.js b/src/resources/Events.js index 5e7f6253d2783d451d8cd0963d3d33a135f829c3..e37853014ef20eebf7305555d44700c96cf727f2 100644 --- a/src/resources/Events.js +++ b/src/resources/Events.js @@ -19,6 +19,7 @@ import { DateTimeInput } from '../components/DateTimeInput'; import { CreateDialog, ShowDialog } from '../components/DialogForm'; import MoneyField from '../components/MoneyField'; import MoneyInput from '../components/MoneyInput'; +import ResourceExportButton from '../components/ResourceExportButton'; const EventsFilters = [ <TextInput key={0} source="name" />, @@ -40,6 +41,7 @@ const Events = (props) => { <TextField source="location" /> <DateField source="start" /> <ShowButton /> + <ResourceExportButton file="export.csv" mime="text/csv" /> </Datagrid> ) : ( <SimpleList diff --git a/src/resources/People.js b/src/resources/People.js index e4e02e489f4bdbb1b2c30021c3209849f4db2565..40abbd11466a6d3c68138068510ba20d49ce3b66 100644 --- a/src/resources/People.js +++ b/src/resources/People.js @@ -1,46 +1,13 @@ import { useMediaQuery } from '@material-ui/core'; -import GetAppIcon from '@material-ui/icons/GetApp'; -import PropTypes from 'prop-types'; import * as React from 'react'; -import { Button, Datagrid, EditButton, List, SimpleForm, SimpleList, SimpleShowLayout, TextField, TextInput, useDataProvider, useNotify } from 'react-admin'; +import { Datagrid, EditButton, List, SimpleForm, SimpleList, SimpleShowLayout, TextField, TextInput } from 'react-admin'; import DateField from '../components/DateField'; import DateInput from '../components/DateInput'; import { CreateDialog, EditDialog, ShowDialog } from '../components/DialogForm'; +import ResourceExportButton from '../components/ResourceExportButton'; const PeopleFilters = [<TextInput key={0} source="firstname" />, <TextInput key={1} source="lastname" />, <TextInput key={2} source="discord_id" />]; -const download = (data, filename, type) => { - let file = new Blob([data], { type: type }); - let a = document.createElement('a'), - url = URL.createObjectURL(file); - a.href = url; - a.download = filename; - document.body.appendChild(a); - a.click(); - setTimeout(function () { - document.body.removeChild(a); - window.URL.revokeObjectURL(url); - }, 0); -}; - -const PeopleExportButton = ({ record, ...rest }) => { - const dataProvider = useDataProvider(); - const notify = useNotify(); - - const onClick = () => { - dataProvider.export('people', { id: record.id }).then((response) => { - download(JSON.stringify(response), 'export.json', 'application/json'); - notify('ra.notification.exported'); - }); - }; - - return ( - <Button label="Exporter" {...rest} onClick={onClick}> - <GetAppIcon /> - </Button> - ); -}; - const People = (props) => { const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md')); return ( @@ -53,7 +20,7 @@ const People = (props) => { <TextField source="lastname" /> <TextField source="discord_id" /> <EditButton /> - <PeopleExportButton /> + <ResourceExportButton /> </Datagrid> ) : ( <SimpleList @@ -94,10 +61,6 @@ const People = (props) => { ); }; -PeopleExportButton.propTypes = { - record: PropTypes.any -}; - const people = { list: People, create: People,