FIX: Spreadsheet only loading for one instance

This commit moves spreadsheet logic to a component which resolves the issue where the spreadsheet only loads the first time the edit modal appears.

javascripts/discourse/controllers/table-editor-modal.js

@@ -1,57 +1,9 @@
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
-import loadScript from "discourse/lib/load-script";
-import { tableToObj } from "../lib/utilities";
 
 export default class extends Controller {
-  onShow() {
-    // ? TODO move to component (read about not allowing Controllers to do DOM manipulation)
-    this._super(...arguments);
-
-    loadScript(settings.theme_uploads.jspreadsheet).then(() => {
-      this.buildTable(this.tableHtml);
-    });
-  }
-
-  buildTable(table) {
-    const tableObject = tableToObj(table);
-    const headings = [];
-    const tableData = [];
-    tableObject.forEach((object) => {
-      // Build Headings
-      if (!headings.includes(...Object.keys(object))) {
-        headings.push(...Object.keys(object));
-      }
-
-      // Build Table Data
-      tableData.push([...Object.values(object)]);
-    });
-
-    const columns = headings.map((heading) => {
-      return {
-        title: heading,
-        width: "100", // TODO make based on string length?
-      };
-    });
-
-    this.spreadsheet = jspreadsheet(document.getElementById("spreadsheet"), {
-      data: tableData,
-      columns,
-    });
-
-    const originalData = this.spreadsheet.getData();
-    console.log("Original Data:", originalData);
-  }
-
   @action
-  cancelTableEdit() {
-    this.send("closeModal");
-  }
-
-  @action
-  editTable() {
-    // TODO: insert table edit submission logic
-    console.log("New Data:", this.spreadsheet.getData());
+  closeEditModal() {
     this.send("closeModal");
   }
 }