sqlite_dashboard 1.0.1 → 1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b4be508c9964d5d3bc9e646bc297639297b468a52a3c38e9bae24d91579c63c0
-  data.tar.gz: 403c530bbcaacfc2d7eca3181a32386971d5b1bf5bd7348ce8e7e70668cc08c6
+  metadata.gz: 9b1922be7426fe6320e16ad206a78512a2d4c70ab16b5193def19470ce5db413
+  data.tar.gz: 2d32502f6e3eb01188b9bc9091bc80c3e5dc1bb2bbc10de717c9c3c74c4730e7
 SHA512:
-  metadata.gz: 85079f70645f372357282f1c5c506b261b8775f8d81e6b4284568ba1a8a1f294fcf789dc8162636815a20183b66b8b0056a5747b2574d94f9eec8f816fac6464
-  data.tar.gz: c6b9832a41c012ab642d1981dfce35f13554fac43271336e818c1778b106452432900f48953a33a93f1802e7f0aca8f3d5919c667f5cce5b03c80ef5b1122bbf
+  metadata.gz: 50368ebf1eaff776214f1c2602a1372b4d33d3ea660674a001d982091383562fc0eb0084ff46dfa11bbe7c5e61c83f215b96f678c22817ae827a8304abb3bd81
+  data.tar.gz: 4342fdd6a7043c89053ef5b004ca1726d1a4380d0f0cd93a81eff40a6fe347d2e7cbecd45cee1f056a04bddd248dc5a06d771a39e3f751dd88663917cf6749a4

data/README.md

@@ -5,7 +5,13 @@
 
 A beautiful, feature-rich SQLite database browser and query interface for Rails applications. Mount it as an engine in your Rails app to inspect and query your SQLite databases through a clean, modern interface.
 
-![SQLite Dashboard Screenshot](https://via.placeholder.com/800x400)
+## Screenshots
+
+### Database Selection
+![Database Dashboard](screenshots/dashboard.png)
+
+### Query Interface & Results
+![Query Details](screenshots/details.png)
 
 ## Features
 
@@ -416,7 +422,7 @@ The gem is available as open source under the terms of the [MIT License](https:/
 
 ## Credits
 
-Created by [Your Name](https://github.com/yourusername)
+Created by [Giovanni Panasiti](https://github.com/giovapanasiti)
 
 Special thanks to:
 - [CodeMirror](https://codemirror.net/) for the SQL editor
@@ -425,9 +431,7 @@ Special thanks to:
 
 ## Support
 
-- 🐛 [Report bugs](https://github.com/yourusername/sqlite_dashboard/issues)
-- 💡 [Request features](https://github.com/yourusername/sqlite_dashboard/issues)
-- 📧 [Email support](mailto:your.email@example.com)
+- 📧 [Email support](mailto:giova.panasiti@hey.com)
 
 ---
 

data/app/controllers/sqlite_dashboard/databases_controller.rb

@@ -5,15 +5,22 @@ require 'json'
 module SqliteDashboard
   class DatabasesController < ApplicationController
     before_action :set_database, only: [:show, :execute_query, :export_csv, :export_json, :tables, :table_schema]
+    before_action :set_saved_query, only: [:destroy_saved_query]
 
     def index
       @databases = SqliteDashboard.configuration.databases
+      @saved_queries = SavedQuery.recent.limit(10)
     end
 
     def show
       @tables = fetch_tables
     end
 
+    def worksheet
+      @databases = SqliteDashboard.configuration.databases
+      @saved_queries = SavedQuery.recent.limit(20)
+    end
+
     def execute_query
       @query = params[:query]
 
@@ -166,8 +173,52 @@ module SqliteDashboard
       end
     end
 
+    # Saved Queries actions
+    def saved_queries
+      @saved_queries = SavedQuery.recent
+      database_name = params[:database_name]
+      @saved_queries = @saved_queries.for_database(database_name) if database_name.present?
+
+      render json: @saved_queries
+    end
+
+    def create_saved_query
+      @saved_query = SavedQuery.new(saved_query_params)
+
+      if @saved_query.save
+        render json: @saved_query, status: :created
+      else
+        render json: { error: @saved_query.errors.full_messages.join(", ") }, status: :unprocessable_entity
+      end
+    end
+
+    def show_saved_query
+      @saved_query = SavedQuery.find(params[:id])
+      render json: @saved_query
+    rescue ActiveRecord::RecordNotFound
+      render json: { error: "Saved query not found" }, status: :not_found
+    end
+
+    def destroy_saved_query
+      if @saved_query.destroy
+        render json: { message: "Query deleted successfully" }
+      else
+        render json: { error: "Failed to delete query" }, status: :unprocessable_entity
+      end
+    end
+
     private
 
+    def set_saved_query
+      @saved_query = SavedQuery.find(params[:id])
+    rescue ActiveRecord::RecordNotFound
+      render json: { error: "Saved query not found" }, status: :not_found
+    end
+
+    def saved_query_params
+      params.require(:saved_query).permit(:name, :query, :database_name, :description)
+    end
+
     def set_database
       @database = SqliteDashboard.configuration.databases.find { |db| db[:id] == params[:id].to_i }
       redirect_to databases_path, alert: "Database not found" unless @database

data/app/javascript/controllers/saved_queries_controller.js

@@ -0,0 +1,379 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class 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='${JSON.stringify(query)}'>
+            <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, query, databaseId) {
+    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
+
+    // Get database name from selector
+    const databaseName = databaseId ?
+      this.databaseSelectorTarget.options[this.databaseSelectorTarget.selectedIndex].text :
+      null
+
+    if (!name) {
+      this.showSaveError('Query name 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) {
+        // Close modal
+        const modal = bootstrap.Modal.getInstance(document.getElementById('saveQueryModal'))
+        modal.hide()
+
+        // Clear form
+        this.queryNameTarget.value = ''
+        this.queryDescriptionTarget.value = ''
+        this.hideSaveError()
+
+        // Reload saved queries
+        await this.loadSavedQueries()
+
+        // Show success message
+        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 queryData = JSON.parse(event.currentTarget.dataset.query)
+
+    if (this.editor) {
+      this.editor.setValue(queryData.query)
+    } else {
+      this.queryInputTarget.value = queryData.query
+    }
+
+    // If database_name is present, try to select it
+    if (queryData.database_name && this.hasDatabaseSelectorTarget) {
+      const option = Array.from(this.databaseSelectorTarget.options)
+        .find(opt => opt.text === queryData.database_name)
+      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
+    }
+
+    // For CSV export, we'll make a form submission since we need to download a file
+    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
+    }
+
+    // For JSON export, we'll make a form submission since we need to download a file
+    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)
+  }
+}

data/app/models/sqlite_dashboard/application_record.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module SqliteDashboard
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/models/sqlite_dashboard/saved_query.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module SqliteDashboard
+  class SavedQuery < ApplicationRecord
+    self.table_name = "dashboard_saved_queries"
+
+    validates :name, presence: true, uniqueness: true
+    validates :query, presence: true
+    validates :description, presence: true
+
+    scope :recent, -> { order(created_at: :desc) }
+    scope :for_database, ->(database_name) { where(database_name: database_name) }
+  end
+end