#11: Download csv done.

web/src/components/Datatable/ProteinDataTable.vue

@@ -27,6 +27,7 @@ export default {
       rows: [],
       header: [],
       total: 0,
+      downloadUrl: '',
       isDev: process.env.NODE_ENV === 'development',
     };
   },
@@ -157,14 +158,9 @@ export default {
       table = $(tableId).DataTable(nTableOptions);
 
       $('#download').html('<div style="text-align: right;"><div class="dropdown">\n' +
-        '  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n' +
-        '    Download\n' +
+        '  <button class="btn btn-primary" type="button" id="dropdownMenuButton">\n' +
+        '    Download CSV\n' +
         '  </button>\n' +
-        '  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">\n' +
-        '    <a class="dropdown-item" href="#" ref="csv">CSV</a>\n' +
-        '    <a class="dropdown-item" href="#" ref="tsv">TSV</a>\n' +
-        '    <a class="dropdown-item" href="#" ref="json">JSON</a>\n' +
-        '  </div>\n' +
         '</div></div>');
 
       const tableBody = `${tableId} tbody`;
@@ -176,16 +172,9 @@ export default {
         vm.moveDetailPage(row.data().uniprot_id);
       });
 
-      $('#download').on('click', 'a.dropdown-item', (e) => {
+      $('#download').on('click', (e) => {
         e.preventDefault()
-        switch ($(e.target).text()) {
-          case 'CSV':
-            vm.downloadCsv(); break;
-          case 'TSV':
-            vm.downloadTsv(); break;
-          case 'JSON':
-            vm.downloadJson(); break;
-        }
+        vm.downloadCsv();
       });
     },
     async fetchCallback (data, aoData, fnCallback) {
@@ -197,7 +186,7 @@ export default {
       let lengthItem = aoData.find(x => x.name === 'length')
       let searchItem = aoData.find(x => x.name === 'search')
       let functionalType = aoData.find(x => x.name === 'columns').value[3]
-      console.log(functionalType.search.value)
+      // console.log(functionalType.search.value)
 
 
       // console.log(`length = ${lengthItem.value}, offset = ${startItem.value}`)
@@ -226,6 +215,11 @@ export default {
         host = require('../js/const').devHost;
       }
 
+      vm.downloadUrl = `${host}/proteins?fields=ensembl_gene_id,ensembl_id,functional_type,gene_name,name,species_name,species_tax_id,uniprot_id,uniprot_readable_id&size=50000`
+        + (order.length > 0 ? `&sort=${order.join(',')}`:'')
+        + (search ? `&query=${search}` : '')
+        + (functionalType.search.value ? `&functional_type=${functionalType.search.value}` : '');
+
       let url = `${host}/proteins?fields=ensembl_gene_id,ensembl_id,functional_type,gene_name,name,species_name,species_tax_id,uniprot_id,uniprot_readable_id&size=10&page=${page}`
         + (order.length > 0 ? `&sort=${order.join(',')}`:'')
         + (search ? `&query=${search}` : '')
@@ -256,94 +250,44 @@ export default {
         this.errorMsg = 'You are not authorized to access this item.'
       }
     },
-    downloadCsv() {
-      const vm = this;
-      let exports = [];
-
-      let header = ['Gene', 'GO Terms', 'Description', 'Phenotypic Top Matches'];
-      exports.push(header.join(', '));
-
-      _.forEach(vm.data, item => {
-        let goTerms = [];
-        _.each(item.gos, (i) => {
-          goTerms.push(`${i[1]}(${i[0]})`)
-        })
-
-        let tophits = [];
-        _.each(item.em_tophits, (i) => {
-          tophits.push(`${i}`)
-        })
-        _.each(item.ee_tophits, (i) => {
-          tophits.push(`${i}`)
-        })
-        _.each(item.gm_tophits, (i) => {
-          tophits.push(`${i}`)
-        })
-
-        exports.push([item.locusName, `"${goTerms.join('\t')}"`, `"${item.description}"`, tophits.join('\t')].join(','));
-      })
-
-      let blob = new Blob([exports.join('\n')], {type: 'text/csv'})
-
-      let contentDisposition = 'Content-Disposition: attachment; filename="download-data.csv"'
-      let filename = contentDisposition.split('filename=')[1]
-      filename = filename.replace(/"/g, '')
-
-      let link = vm.$refs.download
-      link.href = window.URL.createObjectURL(blob)
-      link.download = filename
-      link.click()
-    },
-    downloadTsv() {
+    async downloadCsv() {
       const vm = this;
-      let exports = [];
-
-      let header = ['Gene', 'GO Terms', 'Description', 'Phenotypic Top Matches'];
-      exports.push(header.join('\t'));
+      try {
+        const res = await this.axios.get(vm.downloadUrl, {
+          headers: {
+            Authorization: `Bearer ${apikey}`
+          }
+        });
 
-      _.forEach(vm.data, item => {
-        let goTerms = [];
-        _.each(item.gos, (i) => {
-          goTerms.push(`${i[1]}(${i[0]})`)
-        })
+        if (res.data) {
+          const data = res.data.data;
 
-        let tophits = [];
-        _.each(item.em_tophits, (i) => {
-          tophits.push(`${i}`)
-        })
-        _.each(item.ee_tophits, (i) => {
-          tophits.push(`${i}`)
-        })
-        _.each(item.gm_tophits, (i) => {
-          tophits.push(`${i}`)
-        })
+          let exports = [];
 
-        exports.push([item.locusName, goTerms.join(', '), item.description, tophits.join(', ')].join('\t'));
-      })
+          let header = ['Uniprot', 'Gene Name', 'Name', 'Functional Type', 'Species'];
+          exports.push(header.join(', '));
 
-      let blob = new Blob([exports.join('\n')], {type: 'text/tsv'})
+          _.forEach(data, item => {
+            exports.push([item.uniprot_id, item.gene_name, `"${item.name}"`, item.functional_type, item.species_name].join(','));
+          })
 
-      let contentDisposition = 'Content-Disposition: attachment; filename="download-data.tsv"'
-      let filename = contentDisposition.split('filename=')[1]
-      filename = filename.replace(/"/g, '')
+          let blob = new Blob([exports.join('\n')], {type: 'text/csv'})
 
-      let link = vm.$refs.download
-      link.href = window.URL.createObjectURL(blob)
-      link.download = filename
-      link.click()
-    },
-    downloadJson() {
-      const vm = this;
-      let blob = new Blob([JSON.stringify(vm.data, null, 2)], {type: 'application/json'})
+          let contentDisposition = 'Content-Disposition: attachment; filename="download-data.csv"'
+          let filename = contentDisposition.split('filename=')[1]
+          filename = filename.replace(/"/g, '')
 
-      let contentDisposition = 'Content-Disposition: attachment; filename="download-data.json"'
-      let filename = contentDisposition.split('filename=')[1]
-      filename = filename.replace(/"/g, '')
+          let link = vm.$refs.download
+          link.href = window.URL.createObjectURL(blob)
+          link.download = filename
+          link.click()
 
-      let link = vm.$refs.download
-      link.href = window.URL.createObjectURL(blob)
-      link.download = filename
-      link.click()
+        }
+      } catch(error) {
+        // console.error(error)
+        this.error = true
+        this.errorMsg = 'You are not authorized to access this item.'
+      }
     },
   },
 };