Add ability to save and edit queries, still need to add ability to edit queries

app.py

@@ -471,17 +471,53 @@ def delete_exercise(exercise_id):
 
 @app.route("/sql_explorer", methods=['GET'])
 def sql_explorer():
+    saved_queries = db.sql_explorer.list_saved_queries()
     if htmx:
-        return render_block(app.jinja_env, 'sql_explorer.html', 'content')
-    return render_template('sql_explorer.html')
+        return render_block(app.jinja_env, 'sql_explorer.html', 'content', saved_queries=saved_queries)
+    return render_template('sql_explorer.html', saved_queries=saved_queries)
 
 @app.route("/sql_query", methods=['POST'])
 def sql_query():
     query = request.form.get('query')
-    (results, columns, error) = db.sql_explorer.execute_sql(query)
+    action = request.form.get('action')
+    title = request.form.get('title')
 
-    return render_template('partials/sql_explorer/sql_query.html', query=query, results=results, columns=columns, error=error)
+    if action == 'execute':
+        (results, columns, error) = db.sql_explorer.execute_sql(query)
+        saved_queries = db.sql_explorer.list_saved_queries()
+        return render_template('partials/sql_explorer/sql_query.html', 
+            title=title,
+            query=query, 
+            results=results, 
+            columns=columns, 
+            error=error,
+            saved_queries=saved_queries)
+    else:
+        error = db.sql_explorer.save_query(title, query)
+        saved_queries = db.sql_explorer.list_saved_queries()
+        return render_template('partials/sql_explorer/sql_query.html',
+            title=title, 
+            query=query, 
+            error=error,
+            saved_queries=saved_queries)
 
+@app.route('/load_sql_query/<int:query_id>', methods=['GET'])
+def load_sql_query(query_id):
+    (title, query) = db.sql_explorer.get_saved_query(query_id)
+    saved_queries = db.sql_explorer.list_saved_queries()
+    return render_template('partials/sql_explorer/sql_query.html',
+        title=title, 
+        query=query, 
+        saved_queries=saved_queries)
+
+@app.route('/delete_sql_query/<int:query_id>', methods=['DELETE'])
+def delete_sql_query(query_id):
+    db.sql_explorer.delete_saved_query(query_id)
+    saved_queries = db.sql_explorer.list_saved_queries()
+    return render_template('partials/sql_explorer/sql_query.html',
+        title="", 
+        query="", 
+        saved_queries=saved_queries)
 
 
 @ app.route("/sql_schema", methods=['GET'])

features/sql_explorer.py

@@ -108,4 +108,30 @@ class SQLExplorer:
         
         return (results, columns, error)
     
+    def save_query(self, title, query):
+        error = None
+
+        if not title:
+            return "Must provide title"
+        
+        try:
+            self.execute("""
+                INSERT INTO saved_query (title, query)
+                VALUES (%s, %s)""",[title, query], commit=True)
+        except Exception as e:
+            error = str(e)
+        
+        return error
+    
+    def list_saved_queries(self):
+        queries = self.execute("SELECT id, title, query FROM saved_query")
+        return queries
+    
+    def get_saved_query(self, query_id):
+        result = self.execute("SELECT title, query FROM saved_query where id=%s", [query_id], one=True)
+        return (result['title'], result['query'])
+    
+    def delete_saved_query(self, query_id):
+        self.execute("DELETE FROM saved_query where id=%s", [query_id], commit=True)
+
 

templates/partials/sql_explorer/sql_query.html

@@ -6,10 +6,50 @@
     {% endif %}
 
     <form method="POST" hx-post="{{ url_for('sql_query') }}" hx-target="#sql-query">
-        <textarea name="query" spellcheck="false"
-            class="w-full h-48 p-4 font-mono text-sm text-gray-800 bg-gray-100 border border-gray-300 rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            placeholder="Enter your SQL query here..." required>{{ query }}</textarea>
-        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Execute</button>
+        <!-- Title Input -->
+        <div>
+            <label for="query-title" class="block text-sm font-medium text-gray-700">Title</label>
+            <input type="text" id="query-title" name="title"
+                class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="Enter a title for your query" {% if title %} value="{{ title }}" {% endif %}>
+        </div>
+
+        <div class=" pt-2">
+            <label for="query" class="block text-sm font-medium text-gray-700 pb-1">Query</label>
+            <textarea name="query" spellcheck="false" id="query"
+                class="w-full h-48 p-4 font-mono text-sm text-gray-800 bg-gray-100 border border-gray-300 rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="Enter your SQL query here..." required>{{ query }}</textarea>
+        </div>
+
+        <!-- Buttons -->
+        <div class="flex space-x-2 pt-1">
+            <!-- Execute Button -->
+            <button type="submit" name="action" value="execute"
+                class="flex items-center bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <!-- Execute Icon (Heroicon: Play) -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M14.752 11.168l-5.197-2.132A1 1 0 008 9.868v4.264a1 1 0 001.555.832l5.197-2.132a1 1 0 000-1.664z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                Execute
+            </button>
+
+            <!-- Save Button -->
+            <button type="submit" name="action" value="save"
+                class="flex items-center bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500">
+                <!-- Save Icon (Heroicon: Save) -->
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h7a2 2 0 012 2v1" />
+                </svg>
+                Save
+            </button>
+        </div>
+
     </form>
 
     <div class="mt-6">
@@ -35,4 +75,67 @@
         {% endif %}
     </div>
 
+    <!-- Saved Queries Section -->
+    <div class="mt-8">
+        <h2 class="text-xl font-semibold mb-4">Saved Queries</h2>
+        {% if saved_queries %}
+        <div class="overflow-x-auto">
+            <table class="min-w-full bg-white shadow-md rounded-lg overflow-hidden">
+                <thead>
+                    <tr>
+                        <th
+                            class="py-3 px-6 bg-gray-200 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
+                            Title</th>
+                        <th
+                            class="py-3 px-6 bg-gray-200 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
+                            Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for saved in saved_queries %}
+                    <tr class="hover:bg-gray-100 transition-colors duration-200">
+                        <td class="py-4 px-6 border-b">{{ saved.title }}</td>
+                        <td class="py-4 px-6 border-b">
+                            <div class="flex space-x-4">
+                                <!-- Load Action -->
+                                <a href="#" hx-get="{{ url_for('load_sql_query', query_id=saved.id) }}"
+                                    hx-target="#sql-query"
+                                    class="flex items-center text-blue-500 hover:text-blue-700 cursor-pointer">
+                                    <!-- Load Icon (Heroicon: Eye) -->
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none"
+                                        viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                                    </svg>
+                                    Load
+                                </a>
+
+                                <!-- Delete Action -->
+                                <a href="#" hx-delete="{{ url_for('delete_sql_query', query_id=saved.id) }}"
+                                    hx-target="#sql-query"
+                                    class="flex items-center text-red-500 hover:text-red-700 cursor-pointer"
+                                    hx-confirm="Are you sure you want to delete the query titled '{{ saved.title }}'?">
+                                    <!-- Delete Icon (Heroicon: Trash) -->
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none"
+                                        viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5-4h4a2 2 0 012 2v1H7V5a2 2 0 012-2z" />
+                                    </svg>
+                                    Delete
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% else %}
+        <p class="text-gray-600">No saved queries found.</p>
+        {% endif %}
+    </div>
+
+
 </div>

templates/sql_explorer.html

@@ -11,7 +11,7 @@
 
     <div hx-get="{{ url_for('sql_schema') }}" hx-trigger="load"></div>
 
-    {{ render_partial('partials/sql_explorer/sql_query.html') }}
+    {{ render_partial('partials/sql_explorer/sql_query.html', saved_queries=saved_queries) }}
 
 </div>