FEATURE: Update post contents with edited table (WIP)

Known issue: overrides other content on the post and replaces the post with only the table

javascripts/discourse/api-initializers/table-editor.js

@@ -4,7 +4,8 @@ import { schedule } from "@ember/runloop";
 import I18n from "I18n";
 import { iconNode } from "discourse-common/lib/icon-library";
 import { create } from "virtual-dom";
-
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
 export default apiInitializer("0.11.1", (api) => {
   const site = api.container.lookup("site:main");
   const currentUser = api.getCurrentUser();
@@ -31,12 +32,16 @@ export default apiInitializer("0.11.1", (api) => {
     const table = event.target.parentNode.lastElementChild;
     const tempTable = table.cloneNode(true);
 
-    showModal("table-editor-modal", {
-      model: this,
-    }).setProperties({
-      tableHtml: tempTable,
-      submitOnEnter: false,
-    });
+    return ajax(`/posts/${this.id}`, { type: "GET" })
+      .then((post) => {
+        showModal("table-editor-modal", {
+          model: post,
+        }).setProperties({
+          tableHtml: tempTable,
+          submitOnEnter: false,
+        });
+      })
+      .catch(popupAjaxError);
   }
 
   function generatePopups(tables, attrs) {

javascripts/discourse/components/spreadsheet-editor.js

@@ -3,9 +3,12 @@ import { action } from "@ember/object";
 import loadScript from "discourse/lib/load-script";
 import { arrayToTable, tableToObj } from "../lib/utilities";
 import Component from "@ember/component";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
 
 export default Component.extend({
   tagName: "",
+  showEditReason: false,
 
   didInsertElement() {
     this._super(...arguments);
@@ -25,7 +28,7 @@ export default Component.extend({
     const tableObject = tableToObj(table);
     const headings = [];
     const tableData = [];
-    console.log(this.model.id);
+
     tableObject.forEach((object) => {
       // Build Headings
       if (!headings.includes(...Object.keys(object))) {
@@ -55,6 +58,15 @@ export default Component.extend({
     console.log("Original Data:", originalData);
   },
 
+  @action
+  showEditReasonField() {
+    if (this.showEditReason) {
+      return this.set("showEditReason", false);
+    } else {
+      return this.set("showEditReason", true);
+    }
+  },
+
   @action
   cancelTableEdit() {
     this.triggerModalClose();
@@ -67,7 +79,28 @@ export default Component.extend({
     const updatedData = this.spreadsheet.getData(); // values
 
     const markdownTable = this.buildTableMarkdown(updatedHeaders, updatedData);
-    this.triggerModalClose();
+    const postId = this.model.id;
+    const newRaw = markdownTable;
+    const editReason =
+      this.get("editReason") || "Update Table with Table Editor";
+
+    this.updateTable(postId, newRaw, editReason);
+  },
+
+  updateTable(postId, raw, edit_reason) {
+    return ajax(`/posts/${postId}.json`, {
+      type: "PUT",
+      data: {
+        post: {
+          raw,
+          edit_reason,
+        },
+      },
+    })
+      .catch(popupAjaxError)
+      .finally(() => {
+        this.triggerModalClose();
+      });
   },
 
   buildTableMarkdown(headers, data) {

javascripts/discourse/templates/components/spreadsheet-editor.hbs

@@ -2,9 +2,26 @@
   @title={{theme-prefix "discourse_table_builder.edit.modal.title"}}
   @class="table-editor-modal"
 >
-  {{! TODO: Parse .md to json and fill table }}
-  <div id="spreadsheet" tabindex="1" class="jexcel_container"></div>
 
+  <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>
+  <div id="spreadsheet" tabindex="1" class="jexcel_container"></div>
 </DModalBody>
 
 <div class="modal-footer">

locales/en.yml

@@ -23,5 +23,7 @@ en:
         title: "Edit Table"
         cancel: "cancel"
         create: "Update Table"
+        reason: "why are you editing?"
+        trigger_reason: "Add reason for edit"
   theme_metadata:
     description: "Adds a button to the composer to easily build tables in markdown"

scss/table-editor.scss

@@ -22,3 +22,16 @@
     }
   }
 }
+
+.table-editor-modal {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  .btn-edit-reason {
+    background: none;
+    .d-icon {
+      color: var(--primary-high);
+    }
+  }
+}