DEV: Use new component based modal API and other modernizations (#60)
This commit is contained in:
parent
6d8015bd3e
commit
116bcb9c3a
|
@ -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({
|
||||
toolbarEvent: this.toolbarEvent,
|
||||
tableTokens: null,
|
||||
this.modal.show(SpreadsheetEditor, {
|
||||
model: {
|
||||
toolbarEvent: this.toolbarEvent,
|
||||
tableTokens: null,
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
|
|
@ -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({
|
||||
tableIndex,
|
||||
tableTokens,
|
||||
modal.show(SpreadsheetEditor, {
|
||||
model: {
|
||||
post,
|
||||
tableIndex,
|
||||
tableTokens,
|
||||
},
|
||||
});
|
||||
})
|
||||
)
|
||||
|
|
|
@ -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>
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -1,9 +0,0 @@
|
|||
import Controller from "@ember/controller";
|
||||
import { action } from "@ember/object";
|
||||
|
||||
export default class extends Controller {
|
||||
@action
|
||||
closeEditModal() {
|
||||
this.send("closeModal");
|
||||
}
|
||||
}
|
|
@ -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>
|
|
@ -1,7 +0,0 @@
|
|||
<SpreadsheetEditor
|
||||
@model={{this.model}}
|
||||
@tableTokens={{this.tableTokens}}
|
||||
@tableIndex={{this.tableIndex}}
|
||||
@triggerModalClose={{action "closeEditModal"}}
|
||||
@toolbarEvent={{this.toolbarEvent}}
|
||||
/>
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.insert-table-modal-modal {
|
||||
.insert-table-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
|
Loading…
Reference in New Issue