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",
"isomorphic-fetch": "^2.2.1",
"js-sha3": "^0.5.2",
"json2csv": "^3.7.1",
"lodash": "^4.11.1",
"marked": "^0.3.6",
"material-ui": "^0.16.1",

View File

@ -15,7 +15,11 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import FileSaver from 'file-saver';
import json2csv from 'json2csv';
import FileDownloadIcon from 'material-ui/svg-icons/file/file-download';
import { Button } from '../../';
@ -30,27 +34,87 @@ class ActionbarExport extends Component {
className: PropTypes.string
}
state = {
menuOpen: false
}
render () {
const { className } = this.props;
return (
<Button
className={ className }
icon={ <FileDownloadIcon /> }
label='export'
onClick={ this.onDownloadBackup } />
<IconMenu
iconButtonElement={
<Button
className={ className }
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 text = (typeof content === 'string')
? content
: JSON.stringify(content, null, 4);
const text = this.contentAsString(content, filetype);
const extension = this.getExtension(filetype);
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
key='exportAccounts'
content={ accounts }
filename='accounts.json' />,
filename='accounts' />,
this.renderSearchButton(),
this.renderSortButton()

View File

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