diff --git a/assets/controllers/challenge_executor_controller.ts b/assets/controllers/challenge_executor_controller.ts index 1af30c4..c43d3ca 100644 --- a/assets/controllers/challenge_executor_controller.ts +++ b/assets/controllers/challenge_executor_controller.ts @@ -16,7 +16,7 @@ export default class extends Controller { async connect() { const component = await getComponent(this.element); - const lastQuery = this.element.dataset["lastQuery"]; + let lastQuery = this.element.dataset["lastQuery"]; const $editor = this.element.querySelector(this.editorSelectorValue); if (!$editor) { @@ -35,15 +35,10 @@ export default class extends Controller { basicSetup, sql(), EditorView.updateListener.of(() => { - const doc = editorView.state.doc.toString(); + const query = editorView.state.doc.toString(); - if (doc.trim() === "" || doc === lastQuery) { - // Disable the button if the user does not query something new. - $submitButton.disabled = true; - } else { - // Enable the button if the user types something. - $submitButton.disabled = false; - } + // Enable the submit button only if the query is not empty and different from the last one. + $submitButton.disabled = query.trim() === "" || query === lastQuery; }), ], parent: $editor, @@ -52,12 +47,17 @@ export default class extends Controller { // If the user presses the submit button, we'll send the query to the server. $submitButton.addEventListener("click", async () => { + // Disable the submit button while the query is being executed + $submitButton.disabled = true; + const query = editorView.state.doc.toString(); console.debug("Executing query", { query }); await component.action("execute", { query, }); + + lastQuery = query; }); }