csv export

2 files changed, 50 insertions, 4 deletions

diff --git a/client/table/citations.table.js b/client/table/citations.table.js
index 0092015f..bbc55047 100644
--- a/client/table/citations.table.js
+++ b/client/table/citations.table.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { ReactTabulator } from 'react-tabulator'
+import { saveAs } from 'file-saver'
 
 import { Loader } from '../common'
 import { toArray, toTuples, domainFromUrl } from '../util'
@@ -71,6 +72,32 @@ class CitationsTable extends Component {
     }
   }
 
+  download() {
+    const { formattedCitations } = this.state
+    const fn = this.props.payload.data.paper.key + '.csv'
+    const titles = citationsColumns.map(c => c.title)
+    const fields = citationsColumns.map(c => c.formatterParams ? c.formatterParams.urlField : c.field)
+    const rows = formattedCitations.map(citation => {
+      const row = fields.map(field => citation[field]).map(data => {
+        switch (typeof data) {
+          case 'number':
+            return String(data)
+          default:
+            return '\"' + String(data) + '\"'
+        }
+      })
+      return row.join(",")
+    })
+
+    const blob = new Blob([
+      [
+        titles.join(','),
+        ...rows,
+      ].join('\n')
+    ], {type: "text/csv;charset=utf-8"});
+    saveAs(blob, fn);
+  }
+
   render() {
     const { formattedCitations, filteredCitations } = this.state
     if (!formattedCitations.length) return <Loader />
@@ -84,7 +111,7 @@ class CitationsTable extends Component {
             className='q'
             placeholder='Enter text to search citations...'
           />
-          <a href=
+          <span className='download' onClick={() => this.download()}>Download CSV</span>
         </div>
         <ReactTabulator
           columns={citationsColumns}
diff --git a/client/table/tabulator.css b/client/table/tabulator.css
index c08ad580..465d4839 100644
--- a/client/table/tabulator.css
+++ b/client/table/tabulator.css
@@ -30,9 +30,6 @@
 }
 
 .citationBrowser {
-  padding: 10px;
-  border-radius: 4px;
-  background: #666;
 }
 .citationBrowser .q {
   max-width: 400px;
@@ -42,4 +39,26 @@
   background-repeat: no-repeat;
   box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
   border: 0;
+}
+
+.citationHeader {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+span.download {
+  display: block;
+  font-size: 13px;
+  color: #ddd;
+  cursor: pointer;
+  background: #333;
+  padding: 5px 8px;
+  border-radius: 5px;
+  transition: all 0.2s;
+}
+.desktop span.download:hover {
+  color: #fff;
+  background: #000;
 }
\ No newline at end of file