peterstockings/workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Peter Stockings
2024-11-08 23:09:19 +11:00
parent 90cb1c1451
commit 23def088bb
4 changed files with 175 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
templates/partials/sql_explorer/sql_query.html
View File

@@ -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>

2
templates/sql_explorer.html
View File

@@ -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>