Discource-C
/
discourse-table-builder
mirror of https://github.com/discourse/discourse-table-builder.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Use new component based modal API and other modernizations (#60)

This commit is contained in:
Keegan George 2023-08-30 13:36:22 -07:00 committed by GitHub
parent 6d8015bd3e
commit 116bcb9c3a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 100 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
javascripts/discourse/api-initializers/table-builder.js
View File

@ -1,16 +1,20 @@
import { apiInitializer } from "discourse/lib/api";
import SpreadsheetEditor from "../components/spreadsheet-editor";
import { action } from "@ember/object";
import showModal from "discourse/lib/show-modal";
import { inject as service } from "@ember/service";
export default apiInitializer("0.11.1", (api) => {
api.modifyClass("controller:composer", {
pluginId: "discourse-table-builder",
modal: service(),
@action
showTableBuilder() {
showModal("insert-table-modal").setProperties({
this.modal.show(SpreadsheetEditor, {
model: {
toolbarEvent: this.toolbarEvent,
tableTokens: null,
},
});
},
});

11
javascripts/discourse/api-initializers/table-editor.js
View File

@ -1,5 +1,5 @@
import { apiInitializer } from "discourse/lib/api";
import showModal from "discourse/lib/show-modal";
import SpreadsheetEditor from "../components/spreadsheet-editor";
import { schedule } from "@ember/runloop";
import I18n from "I18n";
import { iconNode } from "discourse-common/lib/icon-library";
@ -10,6 +10,8 @@ import { parseAsync } from "discourse/lib/text";
import { tokenRange } from "../../discourse-table-builder/lib/utilities";
export default apiInitializer("0.11.1", (api) => {
const modal = api.container.lookup("service:modal");
function createButton() {
const openPopupBtn = document.createElement("button");
openPopupBtn.classList.add(
@ -39,11 +41,12 @@ export default apiInitializer("0.11.1", (api) => {
const allTables = tokenRange(tokens, "table_open", "table_close");
const tableTokens = allTables[tableIndex];
showModal("insert-table-modal", {
model: post,
}).setProperties({
modal.show(SpreadsheetEditor, {
model: {
post,
tableIndex,
tableTokens,
},
});
})
)

74
javascripts/discourse/components/spreadsheet-editor.hbs Normal file
View File

@ -0,0 +1,74 @@
<DModal
@title={{i18n this.modalAttributes.title}}
@closeModal={{@closeModal}}
class="insert-table-modal"
>
<:body>
{{#if this.isEditingTable}}
<div class="edit-reason">
<DButton
@icon="info-circle"
@title={{theme-prefix
"discourse_table_builder.edit.modal.trigger_reason"
}}
@action={{this.showEditReasonField}}
@class="btn btn-icon btn-flat no-text btn-edit-reason"
/>
{{#if this.showEditReason}}
<TextField
@value={{this.editReason}}
@placeholderKey={{theme-prefix
"discourse_table_builder.edit.modal.reason"
}}
/>
{{/if}}
</div>
{{/if}}
<ConditionalLoadingSpinner @condition={{this.loading}}>
<div
{{did-insert this.createSpreadsheet}}
tabindex="1"
class="jexcel_container"
></div>
</ConditionalLoadingSpinner>
</:body>
<:footer>
<div class="primary-actions">
<DButton
@class="btn-insert-table"
@label={{this.modalAttributes.insertTable.title}}
@icon={{this.modalAttributes.insertTable.icon}}
@action={{this.insertTable}}
/>
<DButton
@class="btn-flat"
@label={{theme-prefix "discourse_table_builder.edit.modal.cancel"}}
@action={{@closeModal}}
/>
</div>
<div class="secondary-actions">
<DPopover>
<DButton class="trigger" @icon="question" />
<ul>
<h4>{{theme-i18n "discourse_table_builder.modal.help.title"}}</h4>
<li>
<kbd>
{{theme-i18n "discourse_table_builder.modal.help.enter_key"}}
</kbd>
{{theme-i18n "discourse_table_builder.modal.help.new_row"}}
</li>
<li>
<kbd>
{{theme-i18n "discourse_table_builder.modal.help.tab_key"}}
</kbd>
{{theme-i18n "discourse_table_builder.modal.help.new_col"}}
</li>
<li>{{theme-i18n "discourse_table_builder.modal.help.options"}}</li>
</ul>
</DPopover>
</div>
</:footer>
</DModal>

21
javascripts/discourse/components/spreadsheet-editor.js
View File

@ -19,7 +19,7 @@ export default class SpreadsheetEditor extends Component {
@tracked loading = null;
spreadsheet = null;
defaultColWidth = 150;
isEditingTable = !!this.args.tableTokens;
isEditingTable = !!this.args.model.tableTokens;
// Getters:
get modalAttributes() {
@ -50,7 +50,7 @@ export default class SpreadsheetEditor extends Component {
schedule("afterRender", () => {
this.loadLibraries().then(() => {
if (this.isEditingTable) {
this.buildPopulatedTable(this.args.tableTokens);
this.buildPopulatedTable(this.args.model.tableTokens);
} else {
this.buildNewTable();
}
@ -67,11 +67,6 @@ export default class SpreadsheetEditor extends Component {
}
}
@action
cancelTableInsertion() {
this.args.triggerModalClose();
}
@action
insertTable() {
const updatedHeaders = this.spreadsheet.getHeaders().split(","); // keys
@ -79,8 +74,8 @@ export default class SpreadsheetEditor extends Component {
const markdownTable = this.buildTableMarkdown(updatedHeaders, updatedData);
if (!this.isEditingTable) {
this.args.toolbarEvent.addText(markdownTable);
return this.args.triggerModalClose();
this.args.model.toolbarEvent.addText(markdownTable);
return this.args.closeModal();
} else {
return this.updateTable(markdownTable);
}
@ -205,14 +200,14 @@ export default class SpreadsheetEditor extends Component {
}
updateTable(markdownTable) {
const tableIndex = this.args.tableIndex;
const postId = this.args.model.id;
const tableIndex = this.args.model.tableIndex;
const postId = this.args.model.post.id;
const newRaw = markdownTable;
const editReason =
this.editReason ||
I18n.t(themePrefix("discourse_table_builder.edit.default_edit_reason"));
const raw = this.args.model.raw;
const raw = this.args.model.post.raw;
const newPostRaw = this.buildUpdatedPost(tableIndex, raw, newRaw);
return this.sendTableUpdate(postId, newPostRaw, editReason);
@ -230,7 +225,7 @@ export default class SpreadsheetEditor extends Component {
})
.catch(popupAjaxError)
.finally(() => {
this.args.triggerModalClose();
this.args.closeModal();
});
}

9
javascripts/discourse/controllers/insert-table-modal.js
View File

@ -1,9 +0,0 @@
import Controller from "@ember/controller";
import { action } from "@ember/object";
export default class extends Controller {
@action
closeEditModal() {
this.send("closeModal");
}
}

68
javascripts/discourse/templates/components/spreadsheet-editor.hbs
View File

@ -1,68 +0,0 @@
<DModalBody @title={{this.modalAttributes.title}} @class="insert-table-modal">
{{#if this.isEditingTable}}
<div class="edit-reason">
<DButton
@icon="info-circle"
@title={{theme-prefix
"discourse_table_builder.edit.modal.trigger_reason"
}}
@action={{action "showEditReasonField"}}
@class="btn btn-icon btn-flat no-text btn-edit-reason"
/>
{{#if showEditReason}}
<TextField
@value={{this.editReason}}
@placeholderKey={{theme-prefix
"discourse_table_builder.edit.modal.reason"
}}
/>
{{/if}}
</div>
{{/if}}
<ConditionalLoadingSpinner @condition={{this.loading}}>
<div
{{did-insert this.createSpreadsheet}}
tabindex="1"
class="jexcel_container"
></div>
</ConditionalLoadingSpinner>
</DModalBody>
<div class="modal-footer">
<div class="primary-actions">
<DButton
@class="btn-insert-table"
@label={{this.modalAttributes.insertTable.title}}
@icon={{this.modalAttributes.insertTable.icon}}
@action={{action "insertTable"}}
/>
<DButton
@class="btn-flat"
@label={{theme-prefix "discourse_table_builder.edit.modal.cancel"}}
@action={{action "cancelTableInsertion"}}
/>
</div>
<div class="secondary-actions">
<DPopover>
<DButton class="trigger" @icon="question" />
<ul>
<h4>{{theme-i18n "discourse_table_builder.modal.help.title"}}</h4>
<li>
<kbd>
{{theme-i18n "discourse_table_builder.modal.help.enter_key"}}
</kbd>
{{theme-i18n "discourse_table_builder.modal.help.new_row"}}
</li>
<li>
<kbd>
{{theme-i18n "discourse_table_builder.modal.help.tab_key"}}
</kbd>
{{theme-i18n "discourse_table_builder.modal.help.new_col"}}
</li>
<li>{{theme-i18n "discourse_table_builder.modal.help.options"}}</li>
</ul>
</DPopover>
</div>
</div>

7
javascripts/discourse/templates/modal/insert-table-modal.hbs
View File

@ -1,7 +0,0 @@
<SpreadsheetEditor
@model={{this.model}}
@tableTokens={{this.tableTokens}}
@tableIndex={{this.tableIndex}}
@triggerModalClose={{action "closeEditModal"}}
@toolbarEvent={{this.toolbarEvent}}
/>

2
scss/modal/insert-table-modal.scss
View File

@ -18,7 +18,7 @@
}
}
.insert-table-modal-modal {
.insert-table-modal {
display: flex;
flex-direction: column;
align-items: flex-start;