From 9311893c57900f2c8b9ff93bac52606959f51912 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Wed, 3 Dec 2025 16:09:31 +1100
Subject: [PATCH] Fix for database query editor not loading when route is
 loaded via htmx

---
 .../dashboard/settings/database_schema.html   | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/templates/dashboard/settings/database_schema.html b/templates/dashboard/settings/database_schema.html
index 01e6496..4be5a8a 100644
--- a/templates/dashboard/settings/database_schema.html
+++ b/templates/dashboard/settings/database_schema.html
@@ -23,8 +23,7 @@
                 class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
                 Login History
             </a>
-                    <a hx-get="{{ url_for('settings.account') }}" hx-target="#container" hx-swap="innerHTML"
-                hx-push-url="true"
+            <a hx-get="{{ url_for('settings.account') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
                 class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
                 Account
             </a>
@@ -160,14 +159,20 @@ erDiagram
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.0/ace.js"></script>
 <script>
-    const sqlEditor = ace.edit("sql-editor");
-    sqlEditor.setTheme("ace/theme/monokai");
-    sqlEditor.session.setMode("ace/mode/sql");
-    sqlEditor.setOptions({ fontSize: "14px", showPrintMargin: false, showGutter: true, highlightActiveLine: true, enableLiveAutocompletion: true });
-    sqlEditor.setValue(`SELECT * FROM http_functions`, -1);
+    // Clean up existing editor if it exists (for HTMX reloads)
+    if (window.sqlEditor) {
+        window.sqlEditor.destroy();
+        window.sqlEditor.container.remove();
+    }
+
+    window.sqlEditor = ace.edit("sql-editor");
+    window.sqlEditor.setTheme("ace/theme/monokai");
+    window.sqlEditor.session.setMode("ace/mode/sql");
+    window.sqlEditor.setOptions({ fontSize: "14px", showPrintMargin: false, showGutter: true, highlightActiveLine: true, enableLiveAutocompletion: true });
+    window.sqlEditor.setValue(`SELECT * FROM http_functions`, -1);
 
     document.getElementById('run-query-btn').addEventListener('click', async () => {
-        const query = sqlEditor.getValue().trim();
+        const query = window.sqlEditor.getValue().trim();
         const runBtn = document.getElementById('run-query-btn');
         if (!query) { showMessage('Please enter a SQL query', 'error'); return; }
         runBtn.disabled = true;
@@ -182,7 +187,7 @@ erDiagram
     });
 
     document.getElementById('clear-query-btn').addEventListener('click', () => {
-        sqlEditor.setValue('', -1);
+        window.sqlEditor.setValue('', -1);
         document.getElementById('query-message').classList.add('hidden');
         document.getElementById('query-results').classList.add('hidden');
     });
@@ -238,4 +243,4 @@ erDiagram
         document.getElementById('mermaid-diagram').innerHTML = '<div class="text-amber-600 dark:text-amber-400 p-6 text-center"><svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg><p class="font-medium mb-2">Unable to render ERD</p><p class="text-sm">View the tables overview below for schema information.</p></div>';
     }
 </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file