From 646cd1490f2763e77f3abdbd89984993e335e6be Mon Sep 17 00:00:00 2001
From: robyngit <thiessenbock@nceas.ucsb.edu>
Date: Thu, 12 Sep 2024 11:40:37 -0400
Subject: [PATCH] Add a View for getting & displaying Data Objects

- MVP, shows CSVs in a table (no other file types yet, no loading spinner, or error handling)
- Ensure TableEditorView returns the view from render()

Issue #1758
---
 src/js/views/DataObjectView.js  | 85 +++++++++++++++++++++++++++++++++
 src/js/views/TableEditorView.js |  5 +-
 2 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 src/js/views/DataObjectView.js

diff --git a/src/js/views/DataObjectView.js b/src/js/views/DataObjectView.js
new file mode 100644
index 000000000..569d0cb6d
--- /dev/null
+++ b/src/js/views/DataObjectView.js
@@ -0,0 +1,85 @@
+"use strict";
+
+define(["backbone", "views/TableEditorView"], (Backbone, TableEditorView) => {
+  // The base class for the view
+  const BASE_CLASS = "object-view";
+
+  /**
+   * @class DataObjectView
+   * @classdesc A view that downloads and displays a DataONE object. Currently
+   * there is support for displaying CSV files as a table.
+   * @classcategory Views
+   * @augments Backbone.View
+   * @class
+   * @since 0.0.0
+   * @screenshot views/DataObjectView.png //TODO
+   */
+  const DataObjectView = Backbone.View.extend(
+    /** @lends DataObjectView.prototype */
+    {
+      /** @inheritdoc */
+      type: "DataObjectView",
+
+      /** @inheritdoc */
+      className: BASE_CLASS,
+
+      /** @inheritdoc */
+      tagName: "div",
+
+      /**
+       * Initializes the DataObjectView
+       * @param {object} options - Options for the view
+       * @param {SolrResult} options.model - A SolrResult model
+       */
+      initialize(options) {
+        this.model = options.model;
+        // TODO: We get format from the response headers, should we compare it,
+        // or prevent downloading the object if it's not a supported type?
+        // this.format = this.model.get("formatId") ||
+        // this.model.get("mediaType");
+      },
+
+      /** @inheritdoc */
+      render() {
+        this.$el.empty();
+        this.downloadObject().then((response) => this.renderObject(response));
+        return this;
+      },
+
+      /**
+       * With the already fetched DataONE object, check the format and render
+       * the object accordingly.
+       * @param {Response} response - The response from the DataONE object API
+       */
+      renderObject(response) {
+        const format = response.headers.get("Content-Type");
+        if (format === "text/csv") {
+          response.text().then((text) => {
+            this.csv = text;
+            this.showTable();
+          });
+        }
+      },
+
+      /**
+       * Downloads the DataONE object
+       * @returns {Promise} Promise that resolves with the Response from DataONE
+       */
+      downloadObject() {
+        return this.model.fetchDataObjectWithCredentials();
+      },
+
+      /** Shows the CSV file as a table */
+      showTable() {
+        this.table = new TableEditorView({
+          viewMode: true,
+          csv: this.csv,
+        });
+        this.el.innerHTML = "";
+        this.el.appendChild(this.table.render().el);
+      },
+    },
+  );
+
+  return DataObjectView;
+});
diff --git a/src/js/views/TableEditorView.js b/src/js/views/TableEditorView.js
index 17924cf1a..aa80e2526 100644
--- a/src/js/views/TableEditorView.js
+++ b/src/js/views/TableEditorView.js
@@ -125,9 +125,7 @@ define([
         });
       },
 
-      /**
-       * Renders the tableEditor - add UI for creating and editing tables
-       */
+      /** @inheritdoc */
       render() {
         // Insert the template into the view
         this.$el
@@ -150,6 +148,7 @@ define([
           // defaults to empty table
           this.createSpreadsheet();
         }
+        return this;
       },
 
       /**