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.

README.md

@@ -9,15 +9,3 @@ A theme component that adds a button to the composer tools to easily build table
 - [X] Add table builder functionality
 - [ ] Possibly add the ability to edit tables
 - [X] Add front-end tests
-
-## Edit Table Functionality (WIP)
-
-Known Issues:
-
-- After viewing an edit table modal once, a reload is required for it to work again or with another table, otherwise the following error appears:
-  
-```js
- You need to pass a node argument to Importabular, like this : new Importabular({node: document.body})
-```
-
-This is possibly due to not having a unique id? Perhaps moving functionality to a component will resolve this.

javascripts/discourse/components/spreadsheet-editor.js

@@ -0,0 +1,64 @@
+// import Controller from "@ember/controller";
+import { action } from "@ember/object";
+import loadScript from "discourse/lib/load-script";
+import { tableToObj } from "../lib/utilities";
+import Component from "@ember/component";
+
+export default Component.extend({
+  tagName: "",
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    // ? 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?
+      };
+    });
+
+    const spreadsheetContainer = document.querySelector("#spreadsheet");
+
+    this.spreadsheet = jspreadsheet(spreadsheetContainer, {
+      data: tableData,
+      columns,
+    });
+
+    const originalData = this.spreadsheet.getData();
+    console.log("Original Data:", originalData);
+  },
+
+  @action
+  cancelTableEdit() {
+    this.triggerModalClose();
+  },
+
+  @action
+  editTable() {
+    // TODO: insert table edit submission logic
+    console.log("New Data:", this.spreadsheet.getData());
+    this.triggerModalClose();
+  },
+});

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() {
+  closeEditModal() {
-    this.send("closeModal");
-  }
-
-  @action
-  editTable() {
-    // TODO: insert table edit submission logic
-    console.log("New Data:", this.spreadsheet.getData());
     this.send("closeModal");
   }
 }

javascripts/discourse/templates/components/spreadsheet-editor.hbs

@@ -0,0 +1,26 @@
+<DModalBody
+  @title={{theme-prefix "discourse_table_builder.edit.modal.title"}}
+  @class="table-editor-modal"
+>
+  {{! TODO: Parse .md to json and fill table }}
+  {{! TODO: Fix instances where multiple tables in a single post }}
+
+  {{! TODO better id name }}
+  <div id="spreadsheet" tabindex="1" class="jexcel_container"></div>
+
+</DModalBody>
+
+<div class="modal-footer">
+  <DButton
+    @class="btn-edit-table"
+    @label={{theme-prefix "discourse_table_builder.edit.modal.create"}}
+    @icon="pencil-alt"
+    @action={{action "editTable"}}
+  />
+
+  <DButton
+    @class="btn-flat"
+    @label={{theme-prefix "discourse_table_builder.edit.modal.cancel"}}
+    @action={{action "cancelTableEdit"}}
+  />
+</div>

javascripts/discourse/templates/modal/table-editor-modal.hbs

@@ -1,27 +1,6 @@
-<DModalBody
+<SpreadsheetEditor
-  @title={{theme-prefix "discourse_table_builder.edit.modal.title"}}
+  @model={{this.model}}
-  @class="table-editor-modal"
+  @tableHtml={{this.tableHtml}}
->
+  @triggerModalClose={{action "closeEditModal"}}
-  {{! TODO: Parse .md to json and fill table }}
+  @submitOnClose="false"
-  {{! TODO: Fix instances where multiple tables in a single post }}
-
-  {{! TODO better id name }}
-  <div id="spreadsheet" tabindex="1" class="jexcel_container"></div>
-
-</DModalBody>
-
-<div class="modal-footer">
-  {{! TODO Fix submitOnEnter property always true before adding back "btn-primary" class to edit button}}
-  <DButton
-    @class="btn btn-edit-table"
-    @label={{theme-prefix "discourse_table_builder.edit.modal.create"}}
-    @icon="pencil-alt"
-    @action={{action "editTable"}}
 />
-
-  <DButton
-    @class="btn-flat"
-    @label={{theme-prefix "discourse_table_builder.edit.modal.cancel"}}
-    @action={{action "cancelTableEdit"}}
-  />
-</div>