Get xlsx back as JSON

5 files changed, 83 insertions, 0 deletions

diff --git a/app/assets/javascripts/blob/xlsx/index.js b/app/assets/javascripts/blob/xlsx/index.js
new file mode 100644
index 00000000000..fb823e639de
--- /dev/null
+++ b/app/assets/javascripts/blob/xlsx/index.js
@@ -0,0 +1,68 @@
+import xlsx from 'xlsx'
+
+export default class XlsxViewer {
+  constructor(el) {
+    this.el = el;
+    this.loadXlsxFile();
+  }
+
+  loadXlsxFile() {
+    var self = this;
+    var url = this.el.dataset.endpoint;
+    var oReq = new XMLHttpRequest();
+    oReq.open("GET", url, true);
+    oReq.responseType = "arraybuffer";
+
+    oReq.onload = function(e) {
+      var arraybuffer = oReq.response;
+
+      /* convert data to binary string */
+      var data = new Uint8Array(arraybuffer);
+      var arr = new Array();
+      for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
+      var bstr = arr.join("");
+
+      /* Call XLSX */
+      var workbook = xlsx.read(bstr, {type:"binary"});
+      self.processWorkbook(workbook);
+    }
+
+    oReq.send();
+  }
+
+
+  getColumns(sheet, type) {
+    var val, rowObject, range, columnHeaders, emptyRow, C;
+    if(!sheet['!ref']) return [];
+    range = xlsx.utils.decode_range(sheet["!ref"]);
+    columnHeaders = [];
+    for (C = range.s.c; C <= range.e.c; ++C) {
+      val = sheet[xlsx.utils.encode_cell({c: C, r: range.s.r})];
+      if(!val) continue;
+      columnHeaders[C] = val.v;
+    }
+    return columnHeaders;
+  }
+
+  toJson(wb) {
+    var result = {};
+    wb.SheetNames.forEach(function(sheetName) {
+      var roa = xlsx.utils.sheet_to_row_object_array(wb.Sheets[sheetName], {raw:true});
+      if(roa.length > 0) result[sheetName] = roa;
+    });
+    return result;
+  }
+
+  chooseSheet(sheetidx) {
+    this.processWorkbook(last_wb, sheetidx);
+  }
+
+  processWorkbook(wb, sheetidx) {
+    // opts.on.wb(wb, sheetidx);
+    var sheet = wb.SheetNames[sheetidx || 1];
+    var json = this.toJson(wb)[sheet], cols = this.getColumns(wb.Sheets[sheet]);
+    // opts.on.sheet(json, cols, wb.SheetNames, chooseSheet);
+    console.log(sheet)
+    console.log(json)
+  }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/blob/xlsx_viewer.js b/app/assets/javascripts/blob/xlsx_viewer.js
new file mode 100644
index 00000000000..69a72a9be7a
--- /dev/null
+++ b/app/assets/javascripts/blob/xlsx_viewer.js
@@ -0,0 +1,5 @@
+import XlsxViewer from './xlsx';
+
+document.addEventListener('DOMContentLoaded', () => {
+  new XlsxViewer(document.getElementById('js-xlsx-viewer'));
+});
\ No newline at end of file
diff --git a/app/assets/stylesheets/framework/xlsx.scss b/app/assets/stylesheets/framework/xlsx.scss
new file mode 100644
index 00000000000..e69de29bb2d
--- /dev/null
+++ b/app/assets/stylesheets/framework/xlsx.scss
diff --git a/app/models/blob.rb b/app/models/blob.rb
index 801d3442803..49a87370c61 100644
--- a/app/models/blob.rb
+++ b/app/models/blob.rb
@@ -50,6 +50,10 @@ class Blob < SimpleDelegator
     name && File.extname(name) == '.pdf'
   end
 
+  def xlsx?
+    binary? && name && File.extname(name) == '.xlsx'
+  end
+
   def ipython_notebook?
     text? && language&.name == 'Jupyter Notebook'
   end
@@ -89,6 +93,8 @@ class Blob < SimpleDelegator
       'stl'
     elsif text?
       'text'
+    elsif xlsx?
+      'xlsx'
     else
       'download'
     end
diff --git a/app/views/projects/blob/_xlsx.html.haml b/app/views/projects/blob/_xlsx.html.haml
new file mode 100644
index 00000000000..b06a9abf6b4
--- /dev/null
+++ b/app/views/projects/blob/_xlsx.html.haml
@@ -0,0 +1,4 @@
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('xlsx_viewer')
+
+.file-content#js-xlsx-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }
\ No newline at end of file