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:
parent
414e7e6a84
commit
86af126978
12
README.md
12
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.
|
||||
|
|
|
@ -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();
|
||||
},
|
||||
});
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
|
@ -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"
|
||||
/>
|
Loading…
Reference in New Issue