From b62f595eebcc2f78144d437eed5bd18f3ea57023 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Mon, 11 Jul 2022 15:05:50 -0700
Subject: [PATCH] DEV: Trigger modal from Edit Table Button

Triggers modal after clicking Edit Table from selection. Data from post is then passed to the modal.
---
 common/common.scss                            |  5 +++
 .../quote-button-after/edit-table-button.hbs  |  9 ++++++
 .../quote-button-after/edit-table-button.js   | 32 +++++++++++++++++++
 .../controllers/table-editor-modal.js         | 18 +++++++++++
 .../templates/modal/table-editor-modal.hbs    | 23 +++++++++++++
 locales/en.yml                                |  6 ++++
 6 files changed, 93 insertions(+)
 create mode 100644 javascripts/discourse/connectors/quote-button-after/edit-table-button.hbs
 create mode 100644 javascripts/discourse/connectors/quote-button-after/edit-table-button.js
 create mode 100644 javascripts/discourse/controllers/table-editor-modal.js
 create mode 100644 javascripts/discourse/templates/modal/table-editor-modal.hbs

diff --git a/common/common.scss b/common/common.scss
index d8bd9d3..1f2bf64 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -75,3 +75,8 @@
     }
   }
 }
+
+// EDIT BUTTON RELATED (TODO move to partials)
+.quote-button {
+  flex-direction: row;
+}
diff --git a/javascripts/discourse/connectors/quote-button-after/edit-table-button.hbs b/javascripts/discourse/connectors/quote-button-after/edit-table-button.hbs
new file mode 100644
index 0000000..e50eafa
--- /dev/null
+++ b/javascripts/discourse/connectors/quote-button-after/edit-table-button.hbs
@@ -0,0 +1,9 @@
+{{#if context._canEditPost}}
+  <DButton
+    @class="btn-flat"
+    @title={{theme-prefix "discourse_table_builder.edit.btn_edit"}}
+    @label={{theme-prefix "discourse_table_builder.edit.btn_edit"}}
+    @icon="pencil-alt"
+    @action={{action "showEditTableModal"}}
+  />
+{{/if}}
\ No newline at end of file
diff --git a/javascripts/discourse/connectors/quote-button-after/edit-table-button.js b/javascripts/discourse/connectors/quote-button-after/edit-table-button.js
new file mode 100644
index 0000000..71d474b
--- /dev/null
+++ b/javascripts/discourse/connectors/quote-button-after/edit-table-button.js
@@ -0,0 +1,32 @@
+import { action } from "@ember/object";
+import showModal from "discourse/lib/show-modal";
+
+export default {
+  setupComponent(args, component) {
+    console.log(args, component, this);
+  },
+
+  @action
+  showEditTableModal() {
+    const selection = window.getSelection();
+    const selectedTable = selection.focusNode;
+    const { context } = this.args;
+
+    // TODO: Improve table checking logic AND change so it only shows button when selected content is a table
+    if (
+      selectedTable.nodeName === "DIV" &&
+      selectedTable.classList.contains("md-table")
+    ) {
+      // ? TODO: simply pass quoteState object only?
+      const attrs = {
+        table: context.quoteState.buffer,
+        postId: context.quoteState.postId,
+      };
+      showModal("table-editor-modal", {
+        model: attrs,
+      });
+    } else {
+      console.warn("This is not a table:", selection);
+    }
+  },
+};
diff --git a/javascripts/discourse/controllers/table-editor-modal.js b/javascripts/discourse/controllers/table-editor-modal.js
new file mode 100644
index 0000000..aa05053
--- /dev/null
+++ b/javascripts/discourse/controllers/table-editor-modal.js
@@ -0,0 +1,18 @@
+import Controller from "@ember/controller";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+import { A } from "@ember/array";
+
+export default class extends Controller {
+  @action
+  cancelTableEdit() {
+    this.send("closeModal");
+  }
+
+  @action
+  editTable() {
+    // TODO: insert table edit submission logic
+    console.log("Table has been successfully edited");
+    this.send("closeModal");
+  }
+}
diff --git a/javascripts/discourse/templates/modal/table-editor-modal.hbs b/javascripts/discourse/templates/modal/table-editor-modal.hbs
new file mode 100644
index 0000000..ba5e9bf
--- /dev/null
+++ b/javascripts/discourse/templates/modal/table-editor-modal.hbs
@@ -0,0 +1,23 @@
+<DModalBody
+  @title={{theme-prefix "discourse_table_builder.edit.modal.title"}}
+  @class="table-editor-modal"
+>
+  {{! TODO: Parse .md to json and fill table }}
+  {{model.table}}
+
+</DModalBody>
+
+<div class="modal-footer">
+  <DButton
+    @class="btn-primary btn-edit-table"
+    @label={{theme-prefix "discourse_table_builder.edit.modal.create"}}
+    @icon="plus"
+    @action={{action "editTable"}}
+  />
+
+  <DButton
+    @class="btn-flat"
+    @label={{theme-prefix "discourse_table_builder.edit.modal.cancel"}}
+    @action={{action "cancelTableEdit"}}
+  />
+</div>
\ No newline at end of file
diff --git a/locales/en.yml b/locales/en.yml
index 1db2d72..4e37c3c 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -17,5 +17,11 @@ en:
         align_left: "Align Left"
         align_center: "Align Center"
         align_right: "Align Right"
+    edit:
+      btn_edit: "Edit Table"
+      modal:
+        title: "Edit Table"
+        cancel: "cancel"
+        create: "Edit Table"
   theme_metadata:
     description: "Adds a button to the composer to easily build tables in markdown"