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.
This commit is contained in:
Keegan George 2022-07-14 08:56:11 -07:00
parent 414e7e6a84
commit 86af126978
5 changed files with 97 additions and 88 deletions

View File

@ -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.

View File

@ -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();
},
});

View File

@ -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");
}
}

View File

@ -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>

View File

@ -1,27 +1,6 @@
<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">
{{! 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>
<SpreadsheetEditor
@model={{this.model}}
@tableHtml={{this.tableHtml}}
@triggerModalClose={{action "closeEditModal"}}
@submitOnClose="false"
/>