diff --git a/README.md b/README.md
index 92a4071..bea91c7 100644
--- a/README.md
+++ b/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.
diff --git a/javascripts/discourse/components/spreadsheet-editor.js b/javascripts/discourse/components/spreadsheet-editor.js
new file mode 100644
index 0000000..736a1c2
--- /dev/null
+++ b/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();
+ },
+});
diff --git a/javascripts/discourse/controllers/table-editor-modal.js b/javascripts/discourse/controllers/table-editor-modal.js
index 7742d7f..cd53603 100644
--- a/javascripts/discourse/controllers/table-editor-modal.js
+++ b/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");
}
}
diff --git a/javascripts/discourse/templates/components/spreadsheet-editor.hbs b/javascripts/discourse/templates/components/spreadsheet-editor.hbs
new file mode 100644
index 0000000..e56290c
--- /dev/null
+++ b/javascripts/discourse/templates/components/spreadsheet-editor.hbs
@@ -0,0 +1,26 @@
+
+ {{! TODO: Parse .md to json and fill table }}
+ {{! TODO: Fix instances where multiple tables in a single post }}
+
+ {{! TODO better id name }}
+
+
+
+
+
\ No newline at end of file
diff --git a/javascripts/discourse/templates/modal/table-editor-modal.hbs b/javascripts/discourse/templates/modal/table-editor-modal.hbs
index b27dbe5..489a951 100644
--- a/javascripts/discourse/templates/modal/table-editor-modal.hbs
+++ b/javascripts/discourse/templates/modal/table-editor-modal.hbs
@@ -1,27 +1,6 @@
-
- {{! TODO: Parse .md to json and fill table }}
- {{! TODO: Fix instances where multiple tables in a single post }}
-
- {{! TODO better id name }}
-
-
-
-
-
\ No newline at end of file
+
\ No newline at end of file