Add exporting to CSV (#2147)

This commit is contained in:
Nicolas Gotchac 2016-10-25 18:26:47 +02:00
parent 92bdfb1234
commit 61f41cdbe2
4 changed files with 77 additions and 12 deletions

View File

@ -115,6 +115,7 @@
"geopattern": "^1.2.3", "geopattern": "^1.2.3",
"isomorphic-fetch": "^2.2.1", "isomorphic-fetch": "^2.2.1",
"js-sha3": "^0.5.2", "js-sha3": "^0.5.2",
"json2csv": "^3.7.1",
"lodash": "^4.11.1", "lodash": "^4.11.1",
"marked": "^0.3.6", "marked": "^0.3.6",
"material-ui": "^0.16.1", "material-ui": "^0.16.1",

View File

@ -15,7 +15,11 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import FileSaver from 'file-saver'; import FileSaver from 'file-saver';
import json2csv from 'json2csv';
import FileDownloadIcon from 'material-ui/svg-icons/file/file-download'; import FileDownloadIcon from 'material-ui/svg-icons/file/file-download';
import { Button } from '../../'; import { Button } from '../../';
@ -30,27 +34,87 @@ class ActionbarExport extends Component {
className: PropTypes.string className: PropTypes.string
} }
state = {
menuOpen: false
}
render () { render () {
const { className } = this.props; const { className } = this.props;
return ( return (
<Button <IconMenu
className={ className } iconButtonElement={
icon={ <FileDownloadIcon /> } <Button
label='export' className={ className }
onClick={ this.onDownloadBackup } /> icon={ <FileDownloadIcon /> }
label='export'
onClick={ this.handleMenuOpen }
/>
}
open={ this.state.menuOpen }
onRequestChange={ this.handleMenuChange }
onItemTouchTap={ this.handleExport }
targetOrigin={ { horizontal: 'right', vertical: 'top' } }
anchorOrigin={ { horizontal: 'right', vertical: 'top' } }
>
<MenuItem value='json' primaryText='Export to JSON' />
<MenuItem value='csv' primaryText='Export to CSV' />
</IconMenu>
); );
} }
onDownloadBackup = () => { onDownloadBackup = (filetype) => {
const { filename, content } = this.props; const { filename, content } = this.props;
const text = (typeof content === 'string') const text = this.contentAsString(content, filetype);
? content const extension = this.getExtension(filetype);
: JSON.stringify(content, null, 4);
const blob = new Blob([ text ], { type: 'text/plain;charset=utf-8' }); const blob = new Blob([ text ], { type: 'text/plain;charset=utf-8' });
FileSaver.saveAs(blob, filename); FileSaver.saveAs(blob, `${filename}.${extension}`);
}
getExtension = (filetype) => {
switch (filetype) {
case 'json':
case 'csv':
return filetype;
default:
return 'txt';
}
}
contentAsString = (data, filetype) => {
if (typeof data === 'string') {
return data;
}
switch (filetype) {
case 'json':
return JSON.stringify(data, null, 4);
case 'csv':
return this.toCSV(data);
default:
return data.toString();
}
}
toCSV = (data) => {
const json = Object.values(data);
console.log(json);
return json2csv({ data: json });
}
handleExport = (event, child) => {
const type = child.props.value;
this.onDownloadBackup(type);
}
handleMenuOpen = () => {
this.setState({ menuOpen: true });
}
handleMenuChange = (open) => {
this.setState({ menuOpen: open });
} }
} }

View File

@ -108,7 +108,7 @@ class Accounts extends Component {
<ActionbarExport <ActionbarExport
key='exportAccounts' key='exportAccounts'
content={ accounts } content={ accounts }
filename='accounts.json' />, filename='accounts' />,
this.renderSearchButton(), this.renderSearchButton(),
this.renderSortButton() this.renderSortButton()

View File

@ -105,7 +105,7 @@ class Addresses extends Component {
<ActionbarExport <ActionbarExport
key='exportAddressbook' key='exportAddressbook'
content={ contacts } content={ contacts }
filename='addressbook.json' />, filename='addressbook' />,
this.renderSearchButton(), this.renderSearchButton(),
this.renderSortButton() this.renderSortButton()