sqlite_dashboard 1.0.1 → 1.0.2

data/app/views/layouts/sqlite_dashboard/application.html.erb

@@ -400,6 +400,33 @@
         color: #93c5fd;
       }
 
+      .saved-query-item {
+        padding: 0.75rem;
+        margin-bottom: 0.5rem;
+        background-color: #334155;
+        border-radius: 0.375rem;
+        border: 1px solid #475569;
+        transition: all 0.2s ease;
+      }
+
+      .saved-query-item:hover {
+        background-color: #475569;
+        border-color: #64748b;
+      }
+
+      .saved-query-item .fw-bold {
+        color: var(--sidebar-text);
+        margin-bottom: 0.25rem;
+      }
+
+      .saved-query-item .text-muted {
+        color: #94a3b8;
+      }
+
+      .saved-query-item .text-info {
+        color: #60a5fa;
+      }
+
       .error-message {
         background-color: var(--error-bg);
         border: 2px solid var(--error-border);
@@ -656,6 +683,83 @@
         transform: translateX(4px);
       }
 
+      /* Saved Queries Grid */
+      .saved-queries-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+        gap: 1.5rem;
+      }
+
+      .saved-query-card {
+        background-color: var(--card-bg);
+        border: 2px solid var(--border-color);
+        border-radius: 0.75rem;
+        padding: 1.25rem;
+        transition: all 0.2s ease;
+        box-shadow: var(--shadow-sm);
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+      }
+
+      .saved-query-card:hover {
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-md);
+        border-color: #94a3b8;
+      }
+
+      .saved-query-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: start;
+        gap: 0.75rem;
+      }
+
+      .saved-query-title {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--text-primary);
+        margin: 0;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .saved-query-title i {
+        color: var(--primary-color);
+        font-size: 0.875rem;
+      }
+
+      .saved-query-description {
+        color: var(--text-secondary);
+        font-size: 0.875rem;
+        margin: 0;
+        line-height: 1.5;
+      }
+
+      .saved-query-sql {
+        background-color: #f8fafc;
+        border: 1px solid var(--border-color);
+        border-radius: 0.375rem;
+        padding: 0.75rem;
+        font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+        font-size: 0.75rem;
+        overflow-x: auto;
+      }
+
+      .saved-query-sql code {
+        color: #1e293b;
+        background: none;
+      }
+
+      .saved-query-meta {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-top: 0.75rem;
+        border-top: 1px solid var(--border-color);
+      }
+
       /* Empty state */
       .empty-state-modern {
         max-width: 700px;
@@ -819,7 +923,7 @@
 
       // Query Executor Controller
       class QueryExecutorController extends Controller {
-        static targets = ["queryInput"]
+        static targets = ["queryInput", "queryName", "queryDescription", "saveError"]
 
         initialize() {
           this.currentPage = 1
@@ -858,7 +962,7 @@
         }
 
         executeQuery() {
-          const form = this.element
+          const form = this.element.querySelector('form') || this.element
           const query = this.editor ? this.editor.getValue() : this.queryInputTarget.value
           const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content
 
@@ -1133,7 +1237,7 @@
           const separator = document.getElementById('csv-separator').value
           const includeHeaders = document.getElementById('csv-headers').checked
           const query = this.editor ? this.editor.getValue() : this.queryInputTarget.value
-          const form = this.element
+          const form = this.element.querySelector('form') || this.element
           const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content
 
           const formData = new FormData()
@@ -1177,7 +1281,7 @@
           const format = document.getElementById('json-format').value
           const prettyPrint = document.getElementById('json-pretty').checked
           const query = this.editor ? this.editor.getValue() : this.queryInputTarget.value
-          const form = this.element
+          const form = this.element.querySelector('form') || this.element
           const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content
 
           const formData = new FormData()
@@ -1216,6 +1320,75 @@
             alert('Export error: ' + error.message)
           })
         }
+
+        async saveQuery() {
+          const name = this.queryNameTarget.value.trim()
+          const description = this.queryDescriptionTarget.value.trim()
+          const query = this.editor ? this.editor.getValue() : this.queryInputTarget.value
+          const databaseName = this.element.dataset.databaseName
+
+          if (!name) {
+            this.showSaveError('Query name is required')
+            return
+          }
+
+          if (!description) {
+            this.showSaveError('Description is required')
+            return
+          }
+
+          if (!query.trim()) {
+            this.showSaveError('Query cannot be empty')
+            return
+          }
+
+          try {
+            const response = await fetch('/sqlite_dashboard/saved_queries', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
+              },
+              body: JSON.stringify({
+                saved_query: {
+                  name: name,
+                  description: description,
+                  query: query,
+                  database_name: databaseName
+                }
+              })
+            })
+
+            const data = await response.json()
+
+            if (response.ok) {
+              const modal = bootstrap.Modal.getInstance(document.getElementById('saveQueryModal'))
+              modal.hide()
+              this.queryNameTarget.value = ''
+              this.queryDescriptionTarget.value = ''
+              this.hideSaveError()
+              alert('Query saved successfully!')
+            } else {
+              this.showSaveError(data.error || 'Failed to save query')
+            }
+          } catch (error) {
+            console.error('Error saving query:', error)
+            this.showSaveError(error.message)
+          }
+        }
+
+        showSaveError(message) {
+          if (this.hasSaveErrorTarget) {
+            this.saveErrorTarget.textContent = message
+            this.saveErrorTarget.classList.remove('d-none')
+          }
+        }
+
+        hideSaveError() {
+          if (this.hasSaveErrorTarget) {
+            this.saveErrorTarget.classList.add('d-none')
+          }
+        }
       }
 
       // Table Selector Controller
@@ -1257,10 +1430,345 @@
         }
       }
 
+      // Saved Queries Controller
+      class SavedQueriesController extends Controller {
+        static targets = ["queryInput", "queryName", "queryDescription", "databaseSelector", "list", "saveError"]
+
+        connect() {
+          console.log("SavedQueries controller connected")
+          this.loadSavedQueries()
+          this.initializeCodeMirror()
+        }
+
+        initializeCodeMirror() {
+          if (typeof CodeMirror !== 'undefined' && this.hasQueryInputTarget) {
+            this.editor = CodeMirror.fromTextArea(this.queryInputTarget, {
+              mode: 'text/x-sql',
+              theme: 'default',
+              lineNumbers: true,
+              lineWrapping: true,
+              autoCloseBrackets: true,
+              matchBrackets: true,
+              indentWithTabs: true,
+              smartIndent: true,
+              extraKeys: {
+                "Ctrl-Enter": () => this.execute(),
+                "Cmd-Enter": () => this.execute(),
+                "Ctrl-Space": "autocomplete"
+              }
+            })
+          }
+        }
+
+        async loadSavedQueries() {
+          try {
+            const response = await fetch('/sqlite_dashboard/saved_queries')
+            const queries = await response.json()
+            this.renderSavedQueries(queries)
+          } catch (error) {
+            console.error('Error loading saved queries:', error)
+            if (this.hasListTarget) {
+              this.listTarget.innerHTML = `<div class="text-danger small text-center py-3"><i class="fas fa-exclamation-triangle"></i> Error loading queries</div>`
+            }
+          }
+        }
+
+        renderSavedQueries(queries) {
+          if (!this.hasListTarget) return
+
+          if (queries.length === 0) {
+            this.listTarget.innerHTML = `<div class="text-muted small text-center py-3">No saved queries</div>`
+            return
+          }
+
+          const html = queries.map(query => `
+            <div class="saved-query-item" data-query-id="${query.id}">
+              <div class="d-flex justify-content-between align-items-start">
+                <div class="flex-grow-1" style="cursor: pointer;"
+                     data-action="click->saved-queries#loadQuery"
+                     data-query-id="${query.id}"
+                     data-query-name="${this.escapeHtml(query.name)}"
+                     data-query-sql="${this.escapeHtml(query.query)}"
+                     data-query-database="${query.database_name || ''}">
+                  <div class="fw-bold small">${this.escapeHtml(query.name)}</div>
+                  ${query.description ? `<div class="text-muted" style="font-size: 0.75rem;">${this.escapeHtml(query.description)}</div>` : ''}
+                  ${query.database_name ? `<div class="text-info" style="font-size: 0.7rem;"><i class="fas fa-database"></i> ${this.escapeHtml(query.database_name)}</div>` : ''}
+                </div>
+                <button class="btn btn-sm btn-link text-danger p-0" data-action="click->saved-queries#deleteQuery" data-query-id="${query.id}">
+                  <i class="fas fa-trash"></i>
+                </button>
+              </div>
+            </div>
+          `).join('')
+
+          this.listTarget.innerHTML = html
+        }
+
+        escapeHtml(text) {
+          const div = document.createElement('div')
+          div.textContent = text
+          return div.innerHTML
+        }
+
+        async execute() {
+          const databaseId = this.databaseSelectorTarget.value
+          if (!databaseId) {
+            alert('Please select a database first')
+            return
+          }
+
+          const query = this.editor ? this.editor.getValue() : this.queryInputTarget.value
+          if (!query.trim()) {
+            alert('Please enter a query')
+            return
+          }
+
+          try {
+            const response = await fetch(`/sqlite_dashboard/databases/${databaseId}/execute_query`, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
+              },
+              body: JSON.stringify({ query })
+            })
+
+            const data = await response.json()
+
+            if (data.error) {
+              this.renderError(data.error)
+            } else {
+              this.renderResults(data, query, databaseId)
+            }
+          } catch (error) {
+            console.error('Error executing query:', error)
+            this.renderError(error.message)
+          }
+        }
+
+        renderResults(data) {
+          const resultsContainer = document.getElementById('worksheet-results')
+
+          if (data.message) {
+            resultsContainer.innerHTML = `<div class="alert alert-success"><i class="fas fa-check-circle"></i> ${data.message}</div>`
+            return
+          }
+
+          const { columns, rows } = data
+
+          let html = `
+            <div class="results-header">
+              <h6>Query Results</h6>
+              <div class="text-muted small">${rows.length} row(s) returned</div>
+            </div>
+            <div class="table-responsive">
+              <table class="table table-striped table-hover">
+                <thead><tr>${columns.map(col => `<th>${this.escapeHtml(col)}</th>`).join('')}</tr></thead>
+                <tbody>
+                  ${rows.map(row => `<tr>${row.map(cell => `<td>${cell !== null ? this.escapeHtml(String(cell)) : '<span class="text-muted">NULL</span>'}</td>`).join('')}</tr>`).join('')}
+                </tbody>
+              </table>
+            </div>
+          `
+
+          resultsContainer.innerHTML = html
+        }
+
+        renderError(error) {
+          const resultsContainer = document.getElementById('worksheet-results')
+          resultsContainer.innerHTML = `<div class="alert alert-danger"><i class="fas fa-exclamation-circle"></i> <strong>Error:</strong> ${this.escapeHtml(error)}</div>`
+        }
+
+        clear() {
+          if (this.editor) {
+            this.editor.setValue('')
+          } else {
+            this.queryInputTarget.value = ''
+          }
+          document.getElementById('worksheet-results').innerHTML = `<div class="text-muted text-center py-5"><i class="fas fa-database fa-3x mb-3"></i><p>Select a database and execute a query to see results</p></div>`
+        }
+
+        async saveQuery() {
+          const name = this.queryNameTarget.value.trim()
+          const description = this.queryDescriptionTarget.value.trim()
+          const query = this.editor ? this.editor.getValue() : this.queryInputTarget.value
+          const databaseId = this.databaseSelectorTarget.value
+          const databaseName = databaseId ? this.databaseSelectorTarget.options[this.databaseSelectorTarget.selectedIndex].text : null
+
+          if (!name) {
+            this.showSaveError('Query name is required')
+            return
+          }
+
+          if (!description) {
+            this.showSaveError('Description is required')
+            return
+          }
+
+          if (!query.trim()) {
+            this.showSaveError('Query cannot be empty')
+            return
+          }
+
+          try {
+            const response = await fetch('/sqlite_dashboard/saved_queries', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
+              },
+              body: JSON.stringify({
+                saved_query: { name, description, query, database_name: databaseName }
+              })
+            })
+
+            const data = await response.json()
+
+            if (response.ok) {
+              const modal = bootstrap.Modal.getInstance(document.getElementById('saveQueryModal'))
+              modal.hide()
+              this.queryNameTarget.value = ''
+              this.queryDescriptionTarget.value = ''
+              this.hideSaveError()
+              await this.loadSavedQueries()
+              alert('Query saved successfully!')
+            } else {
+              this.showSaveError(data.error || 'Failed to save query')
+            }
+          } catch (error) {
+            console.error('Error saving query:', error)
+            this.showSaveError(error.message)
+          }
+        }
+
+        showSaveError(message) {
+          if (this.hasSaveErrorTarget) {
+            this.saveErrorTarget.textContent = message
+            this.saveErrorTarget.classList.remove('d-none')
+          }
+        }
+
+        hideSaveError() {
+          if (this.hasSaveErrorTarget) {
+            this.saveErrorTarget.classList.add('d-none')
+          }
+        }
+
+        loadQuery(event) {
+          const element = event.currentTarget
+          const queryName = element.dataset.queryName
+          const querySql = element.dataset.querySql
+          const queryDatabase = element.dataset.queryDatabase
+
+          if (!confirm(`Load query "${queryName}" into the editor?`)) {
+            return
+          }
+
+          if (this.editor) {
+            this.editor.setValue(querySql)
+          } else {
+            this.queryInputTarget.value = querySql
+          }
+
+          if (queryDatabase && this.hasDatabaseSelectorTarget) {
+            const option = Array.from(this.databaseSelectorTarget.options).find(opt => opt.text === queryDatabase)
+            if (option) {
+              this.databaseSelectorTarget.value = option.value
+            }
+          }
+        }
+
+        async deleteQuery(event) {
+          event.stopPropagation()
+          const queryId = event.currentTarget.dataset.queryId
+
+          if (!confirm('Are you sure you want to delete this saved query?')) {
+            return
+          }
+
+          try {
+            const response = await fetch(`/sqlite_dashboard/saved_queries/${queryId}`, {
+              method: 'DELETE',
+              headers: { 'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content }
+            })
+
+            if (response.ok) {
+              await this.loadSavedQueries()
+            } else {
+              const data = await response.json()
+              alert(data.error || 'Failed to delete query')
+            }
+          } catch (error) {
+            console.error('Error deleting query:', error)
+            alert('Failed to delete query')
+          }
+        }
+
+        refresh() {
+          this.loadSavedQueries()
+        }
+
+        async exportCSV() {
+          const databaseId = this.databaseSelectorTarget.value
+          if (!databaseId) {
+            alert('Please select a database first')
+            return
+          }
+
+          const query = this.editor ? this.editor.getValue() : this.queryInputTarget.value
+          if (!query.trim()) {
+            alert('Please enter a query')
+            return
+          }
+
+          const form = document.createElement('form')
+          form.method = 'POST'
+          form.action = `/sqlite_dashboard/databases/${databaseId}/export_csv`
+          const csrfToken = document.querySelector('[name="csrf-token"]').content
+          form.innerHTML = `
+            <input type="hidden" name="authenticity_token" value="${csrfToken}">
+            <input type="hidden" name="query" value="${this.escapeHtml(query)}">
+            <input type="hidden" name="include_headers" value="true">
+          `
+          document.body.appendChild(form)
+          form.submit()
+          document.body.removeChild(form)
+        }
+
+        async exportJSON() {
+          const databaseId = this.databaseSelectorTarget.value
+          if (!databaseId) {
+            alert('Please select a database first')
+            return
+          }
+
+          const query = this.editor ? this.editor.getValue() : this.queryInputTarget.value
+          if (!query.trim()) {
+            alert('Please enter a query')
+            return
+          }
+
+          const form = document.createElement('form')
+          form.method = 'POST'
+          form.action = `/sqlite_dashboard/databases/${databaseId}/export_json`
+          const csrfToken = document.querySelector('[name="csrf-token"]').content
+          form.innerHTML = `
+            <input type="hidden" name="authenticity_token" value="${csrfToken}">
+            <input type="hidden" name="query" value="${this.escapeHtml(query)}">
+            <input type="hidden" name="format" value="array">
+            <input type="hidden" name="pretty_print" value="true">
+          `
+          document.body.appendChild(form)
+          form.submit()
+          document.body.removeChild(form)
+        }
+      }
+
       // Initialize Stimulus
       window.Stimulus = Application.start()
       Stimulus.register("query-executor", QueryExecutorController)
       Stimulus.register("table-selector", TableSelectorController)
+      Stimulus.register("saved-queries", SavedQueriesController)
     </script>
   </head>
 

data/app/views/sqlite_dashboard/databases/index.html.erb

@@ -44,10 +44,19 @@
     <div class="col-md-10" style="background-color: var(--main-bg); min-height: 100vh;">
       <div class="index-main-content">
         <div class="content-header">
-          <h1 class="page-title">
-            <i class="fas fa-server"></i>
-            Your Databases
-          </h1>
+          <div class="d-flex justify-content-between align-items-center mb-3">
+            <div>
+              <h1 class="page-title mb-0">
+                <i class="fas fa-server"></i>
+                Your Databases
+              </h1>
+            </div>
+            <div>
+              <%= link_to worksheet_path, class: "btn btn-success" do %>
+                <i class="fas fa-file-code"></i> SQL Worksheet
+              <% end %>
+            </div>
+          </div>
           <p class="page-subtitle">Select a database to explore and manage</p>
         </div>
 
@@ -74,6 +83,46 @@
               </div>
             <% end %>
           </div>
+
+          <!-- Saved Queries Section -->
+          <% if @saved_queries.any? %>
+            <div class="mt-5">
+              <div class="d-flex justify-content-between align-items-center mb-3">
+                <h2 class="h4">
+                  <i class="fas fa-bookmark"></i> Recent Saved Queries
+                </h2>
+                <%= link_to worksheet_path, class: "btn btn-sm btn-outline-primary" do %>
+                  <i class="fas fa-eye"></i> View All
+                <% end %>
+              </div>
+              <div class="saved-queries-grid">
+                <% @saved_queries.each do |query| %>
+                  <div class="saved-query-card">
+                    <div class="saved-query-header">
+                      <h5 class="saved-query-title">
+                        <i class="fas fa-code"></i> <%= query.name %>
+                      </h5>
+                      <% if query.database_name.present? %>
+                        <span class="badge bg-info"><%= query.database_name %></span>
+                      <% end %>
+                    </div>
+                    <p class="saved-query-description"><%= query.description %></p>
+                    <div class="saved-query-sql">
+                      <code><%= truncate(query.query, length: 100) %></code>
+                    </div>
+                    <div class="saved-query-meta">
+                      <small class="text-muted">
+                        <i class="fas fa-clock"></i> <%= time_ago_in_words(query.created_at) %> ago
+                      </small>
+                      <%= link_to worksheet_path, class: "btn btn-sm btn-outline-success" do %>
+                        <i class="fas fa-play"></i> Load in Worksheet
+                      <% end %>
+                    </div>
+                  </div>
+                <% end %>
+              </div>
+            </div>
+          <% end %>
         <% else %>
           <div class="empty-state-modern">
             <div class="empty-state-icon">