From 36cda707b6b03a7b2aa10e6b17ca780797916060 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 1 Apr 2019 19:45:15 +0200
Subject: test csv

---
 client/table/citations.table.js | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

(limited to 'client/table/citations.table.js')

diff --git a/client/table/citations.table.js b/client/table/citations.table.js
index f9599f5d..0092015f 100644
--- a/client/table/citations.table.js
+++ b/client/table/citations.table.js
@@ -2,10 +2,9 @@ import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { ReactTabulator } from 'react-tabulator'
-import MultiValueFormatter from "react-tabulator/lib/formatters/MultiValueFormatter"
 
 import { Loader } from '../common'
-import { toArray, toTuples } from '../util'
+import { toArray, toTuples, domainFromUrl } from '../util'
 
 export const citationsColumns = [
   { title: 'Title', field: 'title', sorter: 'string' },
@@ -42,13 +41,7 @@ class CitationsTable extends Component {
           : (citation.doi && citation.doi.length)
             ? citation.doi[0]
             : 'https://www.semanticscholar.org/paper/' + citation.id
-      let pdf_text
-      const pdf_partz = pdf_link.split('/')[2].split('.')
-      if (pdf_partz.length > 2 && pdf_partz[pdf_partz.length - 2].length == 2) {
-        pdf_text = pdf_partz.slice(-3).join('.')
-      } else {
-        pdf_text = pdf_partz.slice(-2).join('.')
-      }
+      let pdf_text = domainFromUrl(pdf_link)
       return {
         title: citation.title,
         institution: citation.addresses.map(a => a.name).sort().join('; '),
@@ -83,13 +76,16 @@ class CitationsTable extends Component {
     if (!formattedCitations.length) return <Loader />
     return (
       <div className='citationBrowser'>
-        <input
-          type="text"
-          value={this.state.q}
-          onChange={e => this.updateFilter(e.target.value)}
-          className='q'
-          placeholder='Enter text to search citations...'
-        />
+        <div className='citationHeader'>
+          <input
+            type="text"
+            value={this.state.q}
+            onChange={e => this.updateFilter(e.target.value)}
+            className='q'
+            placeholder='Enter text to search citations...'
+          />
+          <a href=
+        </div>
         <ReactTabulator
           columns={citationsColumns}
           data={filteredCitations}
-- 
cgit v1.2.3-70-g09d2


From 0168528fb74f0e82f1b7ae90686d99c941ef0cf8 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 1 Apr 2019 20:03:27 +0200
Subject: csv export

---
 client/table/citations.table.js | 29 ++++++++++++++++++++++++++++-
 client/table/tabulator.css      | 25 ++++++++++++++++++++++---
 2 files changed, 50 insertions(+), 4 deletions(-)

(limited to 'client/table/citations.table.js')

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
-- 
cgit v1.2.3-70-g09d2