dbviewer 0.3.1

data/app/views/dbviewer/tables/query.html.erb

@@ -0,0 +1,600 @@
+<% content_for :title do %>
+  Query: <%= @table_name %>
+<% end %>
+
+<% content_for :head do %>
+  <link href="https://cdn.jsdelivr.net/npm/vscode-codicons@0.0.17/dist/codicon.min.css" rel="stylesheet">
+  <style>
+    /* Monaco Editor styling */
+    #monaco-editor {
+      margin-bottom: 1rem;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    }
+    
+    .monaco-editor-container {
+      border: 1px solid #ced4da;
+      transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    }
+    
+    [data-bs-theme="dark"] .monaco-editor-container {
+      border: 1px solid #495057;
+    }
+    
+    [data-bs-theme="dark"] #monaco-editor {
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+    }
+    
+    .example-queries {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 5px;
+      margin-top: 8px;
+    }
+    
+    .example-query {
+      display: inline-block;
+      transition: all 0.2s ease;
+      cursor: pointer;
+      font-size: 0.85rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+    
+    [data-bs-theme="light"] .example-query {
+      border-color: #ced4da;
+    }
+    
+    [data-bs-theme="dark"] .example-query {
+      border-color: #495057;
+      color: #f8f9fa;
+    }
+    
+    /* Result table styling */
+    .results-table {
+      border-collapse: collapse;
+    }
+    
+    [data-bs-theme="dark"] .results-table {
+      border-color: #495057;
+    }
+    
+    .example-query:hover {
+      background-color: #0d6efd;
+      color: white;
+      border-color: #0d6efd;
+    }
+    
+    /* Keyboard shortcut helper */
+    .keyboard-hint {
+      font-size: 0.8rem;
+      margin-left: 8px;
+      opacity: 0.7;
+    }
+    
+    [data-bs-theme="light"] .shortcut-hints {
+      color: #6c757d;
+    }
+    
+    [data-bs-theme="dark"] .shortcut-hints {
+      color: #adb5bd;
+    }
+    
+    /* Monaco status bar */
+    .monaco-status-bar {
+      display: flex;
+      justify-content: space-between;
+      padding: 3px 8px;
+      font-size: 0.75rem;
+      border-top: none;
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+    
+    [data-bs-theme="light"] .monaco-status-bar {
+      background-color: #f8f9fa;
+      border: 1px solid #ced4da;
+      color: #6c757d;
+    }
+    
+    [data-bs-theme="dark"] .monaco-status-bar {
+      background-color: #343a40;
+      border: 1px solid #495057;
+      color: #adb5bd;
+    }
+    
+    .monaco-status-bar .column-info {
+      font-weight: 500;
+    }
+    
+    /* Table structure styles */
+    #tableStructureHeader .btn-link {
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      text-align: left;
+    }
+    
+    [data-bs-theme="light"] #tableStructureHeader .btn-link {
+      color: #212529;
+    }
+    
+    [data-bs-theme="dark"] #tableStructureHeader .btn-link {
+      color: #f8f9fa;
+    }
+    
+    [data-bs-theme="light"] .table-columns-count {
+      color: #6c757d;
+    }
+    
+    [data-bs-theme="dark"] .table-columns-count {
+      color: #adb5bd;
+    }
+    
+    #tableStructureHeader .btn-link:hover,
+    #tableStructureHeader .btn-link:focus {
+      text-decoration: none;
+      color: #0d6efd;
+    }
+    
+    #tableStructureHeader .btn-link i {
+      transition: transform 0.2s ease-in-out;
+    }
+    
+    /* Table style overrides for query page */
+    [data-bs-theme="dark"] .table-sm th,
+    [data-bs-theme="dark"] .table-sm td {
+      border-color: #495057;
+    }
+    
+    /* Results card styling */
+    [data-bs-theme="dark"] .card-header h5 {
+      color: #f8f9fa;
+    }
+    
+    /* Alert styling for dark mode */
+    [data-bs-theme="dark"] .alert-warning {
+      background-color: rgba(255, 193, 7, 0.15);
+      border-color: rgba(255, 193, 7, 0.4);
+      color: #ffc107;
+    }
+    
+    [data-bs-theme="dark"] .alert-danger {
+      background-color: rgba(220, 53, 69, 0.15);
+      border-color: rgba(220, 53, 69, 0.4);
+      color: #f8d7da;
+    }
+    
+    /* Make headings stand out in dark mode */
+    [data-bs-theme="dark"] h1, 
+    [data-bs-theme="dark"] h2, 
+    [data-bs-theme="dark"] h3, 
+    [data-bs-theme="dark"] h4, 
+    [data-bs-theme="dark"] h5, 
+    [data-bs-theme="dark"] h6 {
+      color: #f8f9fa;
+    }
+  </style>
+<% end %>
+
+<% content_for :sidebar_active do %>active<% end %>
+
+<% content_for :sidebar do %>
+  <%= render 'dbviewer/shared/sidebar' %>
+<% end %>
+
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1>Query: <%= @table_name %></h1>
+  <div>
+    <%= link_to table_path(@table_name), class: "btn btn-outline-primary" do %>
+      <i class="bi bi-arrow-left me-1"></i> Back to Table
+    <% end %>
+  </div>
+</div>
+  
+  <% if flash[:warning].present? %>
+    <div class="alert alert-warning alert-dismissible fade show" role="alert">
+      <%= flash[:warning] %>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+  <% end %>
+  
+  <div class="card mb-4">
+    <div class="card-header">
+      <h5>SQL Query (Read-Only)</h5>
+    </div>
+    <div class="card-body">
+      <%= form_with url: query_table_path(@table_name), method: :post, local: true, id: "sql-query-form" do |form| %>
+        <div class="mb-3">
+          <div id="monaco-editor" class="monaco-editor-container" style="min-height: 200px; border-radius: 4px; margin-bottom: 0rem;" 
+               data-initial-query="<%= CGI.escapeHTML(@query.to_s) %>"></div>
+          <%= form.hidden_field :query, id: "query-input", value: @query.to_s %>
+        </div>
+        
+        <div class="d-flex justify-content-between align-items-start">
+          <div class="form-text">
+            <strong>Examples:</strong><br>
+            <div class="example-queries">
+              <code class="example-query btn btn-sm btn-outline-secondary mb-1">SELECT * FROM <%= @table_name %> LIMIT 100</code>
+              <code class="example-query btn btn-sm btn-outline-secondary mb-1">SELECT 
+              <% 
+                # Display first 3 columns or all if less than 3
+                display_cols = @columns.present? ? @columns.first(3).map { |c| c[:name] }.join(", ") : "column1, column2"
+                # Get first non-ID column for WHERE example if available
+                where_col = @columns.present? ? (@columns.find { |c| !c[:name].to_s.downcase.include?("id") } || @columns.first)[:name] : "column_name"
+                # Get a numeric column for aggregation if available
+                num_col = @columns.present? ? (@columns.find { |c| c[:type].to_s.downcase.include?("int") || c[:type].to_s.downcase.include?("num") } || @columns.first)[:name] : "id"
+              %>
+              <%= display_cols %> FROM <%= @table_name %> WHERE <%= where_col %> = 'value'</code>
+              <code class="example-query btn btn-sm btn-outline-secondary mb-1">SELECT COUNT(*) FROM <%= @table_name %> GROUP BY <%= num_col %></code>
+            </div>
+          </div>
+          <div>
+            <%= form.submit "Run Query", class: "btn btn-primary" %>
+            <span class="keyboard-hint d-none d-md-inline">(or press Cmd+Enter / Ctrl+Enter)</span>
+            <div class="small mt-2 d-none d-md-block shortcut-hints">
+              <strong>Shortcuts:</strong> 
+              <span class="me-2">Cmd+Alt+T: Toggle table structure</span>
+              <span class="me-2">Cmd+Alt+S: Insert SELECT</span>
+              <span>Cmd+Alt+W: Insert WHERE</span>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <div class="card mb-3">
+    <div class="card-header" id="tableStructureHeader">
+      <h6 class="mb-0">
+        <button class="btn btn-link btn-sm text-decoration-none p-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tableStructureContent" aria-expanded="false" aria-controls="tableStructureContent">
+          <i class="bi bi-chevron-down me-1"></i>
+          Table Structure Reference
+          <small class="table-columns-count ms-2">(<%= @columns.present? ? @columns.size : 0 %> columns)</small>
+        </button>
+      </h6>
+    </div>
+    <div id="tableStructureContent" class="collapse" aria-labelledby="tableStructureHeader">
+      <div class="card-body p-2">
+        <% if @columns.present? %>
+          <div class="table-responsive">
+            <table class="table table-sm table-bordered mb-0">
+              <thead>
+                <tr>
+                  <th>Column</th>
+                  <th>Type</th>
+                </tr>
+              </thead>
+              <tbody>
+                <% @columns.each do |column| %>
+                  <tr>
+                    <td><code><%= column[:name] %><%= " (PK)" if column[:primary] %></code></td>
+                    <td><span class="badge bg-secondary"><%= column[:type] %></span></td>
+                  </tr>
+                <% end %>
+              </tbody>
+            </table>
+          </div>
+        <% else %>
+          <p class="mb-0">No column information available.</p>
+        <% end %>
+      </div>
+    </div>
+  </div>
+      
+  
+  <% if @error.present? %>
+    <div class="alert alert-danger" role="alert">
+      <strong>Error:</strong> <%= @error %>
+    </div>
+  <% end %>
+  
+  <% if @records.present? %>
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <h5>Results</h5>
+        <span class="badge bg-info">Rows: <%= @records.rows.count %></span>
+      </div>
+      <div class="card-body">
+        <div class="table-responsive">
+          <table class="table table-bordered table-striped">
+            <% if @records.columns.any? %>
+              <thead>
+                <tr>
+                  <% @records.columns.each do |column_name| %>
+                    <th><%= column_name %></th>
+                  <% end %>
+                </tr>
+              </thead>
+              <tbody>
+                <% if @records.rows.any? %>
+                  <% @records.rows.each do |row| %>
+                    <tr>
+                      <% row.each do |cell| %>
+                        <td><%= format_cell_value(cell) %></td>
+                      <% end %>
+                    </tr>
+                  <% end %>
+                <% else %>
+                  <tr>
+                    <td colspan="<%= @records.columns.count %>">Query executed successfully, but returned no rows.</td>
+                  </tr>
+                <% end %>
+              </tbody>
+            <% else %>
+              <tr>
+                <td>Query executed successfully, but returned no columns.</td>
+              </tr>
+            <% end %>
+          </table>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>
+
+<script type="module">
+  import * as monaco from 'https://cdn.jsdelivr.net/npm/monaco-editor@0.39.0/+esm';
+
+  // Helper function to decode HTML entities
+  function decodeHTMLEntities(text) {
+    const textarea = document.createElement('textarea');
+    textarea.innerHTML = text;
+    return textarea.value;
+  }
+
+  // Get initial query value from a data attribute to avoid string escaping issues
+  const initialQueryEncoded = document.getElementById('monaco-editor').getAttribute('data-initial-query');
+  const initialQuery = decodeHTMLEntities(initialQueryEncoded);
+  
+  // Determine initial theme based on document theme
+  const initialTheme = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'vs-dark' : 'vs';
+  
+  // Initialize Monaco Editor with SQL syntax highlighting
+  const editor = monaco.editor.create(document.getElementById('monaco-editor'), {
+    value: initialQuery || '',
+    language: 'sql',
+    theme: initialTheme,
+    automaticLayout: true, // Resize automatically
+    minimap: { enabled: true },
+    scrollBeyondLastLine: false,
+    lineNumbers: 'on',
+    renderLineHighlight: 'all',
+    tabSize: 2,
+    wordWrap: 'on',
+    formatOnPaste: true,
+    formatOnType: true,
+    autoIndent: 'full',
+    folding: true,
+    glyphMargin: false,
+    suggestOnTriggerCharacters: true,
+    fixedOverflowWidgets: true,
+    quickSuggestions: {
+      other: true,
+      comments: true,
+      strings: true
+    },
+    suggest: {
+      showKeywords: true,
+      showSnippets: true,
+      preview: true,
+      showIcons: true,
+      maxVisibleSuggestions: 12
+    }
+  });
+
+  // Theme change listener
+  document.addEventListener('dbviewerThemeChanged', (event) => {
+    const newTheme = event.detail.theme === 'dark' ? 'vs-dark' : 'vs';
+    monaco.editor.setTheme(newTheme);
+    
+    // Update editor container border color
+    const editorContainer = document.querySelector('.monaco-editor-container');
+    if (editorContainer) {
+      editorContainer.style.borderColor = event.detail.theme === 'dark' ? '#495057' : '#ced4da';
+    }
+    
+    // Update status bar styling based on theme
+    updateStatusBarTheme(event.detail.theme);
+    
+    // Update example query buttons
+    const exampleQueries = document.querySelectorAll('.example-query');
+    exampleQueries.forEach(query => {
+      if (event.detail.theme === 'dark') {
+        query.style.borderColor = '#495057';
+        if (!query.classList.contains('btn-primary')) {
+          query.style.color = '#f8f9fa';
+        }
+      } else {
+        query.style.borderColor = '#ced4da';
+        if (!query.classList.contains('btn-primary')) {
+          query.style.color = '';
+        }
+      }
+    });
+  });
+  
+  function updateStatusBarTheme(theme) {
+    const statusBar = document.querySelector('.monaco-status-bar');
+    if (!statusBar) return;
+    
+    if (theme === 'dark') {
+      statusBar.style.backgroundColor = '#343a40';
+      statusBar.style.borderColor = '#495057';
+      statusBar.style.color = '#adb5bd';
+    } else {
+      statusBar.style.backgroundColor = '#f8f9fa';
+      statusBar.style.borderColor = '#ced4da';
+      statusBar.style.color = '#6c757d';
+    }
+  }
+
+  // Set up SQL intellisense with table/column completions
+  const tableName = "<%= @table_name %>";
+  const columns = [
+    <% if @columns.present? %>
+      <% @columns.each do |column| %>
+        { name: "<%= column[:name] %>", type: "<%= column[:type] %>" },
+      <% end %>
+    <% end %>
+  ];
+
+  // Register SQL completion providers
+  monaco.languages.registerCompletionItemProvider('sql', {
+    provideCompletionItems: function(model, position) {
+      const textUntilPosition = model.getValueInRange({
+        startLineNumber: position.lineNumber,
+        startColumn: 1,
+        endLineNumber: position.lineNumber,
+        endColumn: position.column
+      });
+      
+      const suggestions = [];
+      
+      // Add table name suggestion
+      suggestions.push({
+        label: tableName,
+        kind: monaco.languages.CompletionItemKind.Class,
+        insertText: tableName,
+        detail: 'Table name'
+      });
+
+      // Add column name suggestions
+      columns.forEach(col => {
+        suggestions.push({
+          label: col.name,
+          kind: monaco.languages.CompletionItemKind.Field,
+          insertText: col.name,
+          detail: `Column (${col.type})`
+        });
+      });
+
+      // Add common SQL keywords
+      const keywords = [
+        { label: 'SELECT', insertText: 'SELECT ' },
+        { label: 'FROM', insertText: 'FROM ' },
+        { label: 'WHERE', insertText: 'WHERE ' },
+        { label: 'ORDER BY', insertText: 'ORDER BY ' },
+        { label: 'GROUP BY', insertText: 'GROUP BY ' },
+        { label: 'HAVING', insertText: 'HAVING ' },
+        { label: 'LIMIT', insertText: 'LIMIT ' },
+        { label: 'JOIN', insertText: 'JOIN ' },
+        { label: 'LEFT JOIN', insertText: 'LEFT JOIN ' },
+        { label: 'INNER JOIN', insertText: 'INNER JOIN ' }
+      ];
+      
+      keywords.forEach(kw => {
+        suggestions.push({
+          label: kw.label,
+          kind: monaco.languages.CompletionItemKind.Keyword,
+          insertText: kw.insertText
+        });
+      });
+      
+      return { suggestions };
+    }
+  });
+
+  // Handle form submission - transfer content to hidden input before submitting
+  document.getElementById('sql-query-form').addEventListener('submit', function(event) {
+    // Stop the form from submitting immediately
+    event.preventDefault();
+    
+    // Get the query value from the editor and set it to the hidden input
+    const queryValue = editor.getValue();
+    document.getElementById('query-input').value = queryValue;
+    
+    // Log for debugging
+    console.log('Submitting query:', queryValue);
+    
+    // Now manually submit the form
+    this.submit();
+  });
+
+  // Make example queries clickable
+  document.querySelectorAll('.example-query').forEach(example => {
+    example.style.cursor = 'pointer';
+    example.addEventListener('click', () => {
+      const query = decodeHTMLEntities(example.textContent);
+      editor.setValue(query);
+      editor.focus();
+    });
+  });
+
+  // Setup editor keybindings
+  editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function() {
+    // Get the query value from the editor and set it to the hidden input
+    const queryValue = editor.getValue();
+    document.getElementById('query-input').value = queryValue;
+    
+    // Log for debugging
+    console.log('Submitting query via keyboard shortcut:', queryValue);
+    
+    // Submit the form
+    document.getElementById('sql-query-form').submit();
+  });
+  
+  // Add keyboard shortcuts for common SQL statements
+  editor.addAction({
+    id: 'insert-select-all',
+    label: 'Insert SELECT * FROM statement',
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.KeyS],
+    run: function() {
+      editor.trigger('keyboard', 'type', { text: `SELECT * FROM ${tableName} LIMIT 100` });
+      return null;
+    }
+  });
+  
+  editor.addAction({
+    id: 'insert-where',
+    label: 'Insert WHERE clause',
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.KeyW],
+    run: function() {
+      editor.trigger('keyboard', 'type', { text: ' WHERE ' });
+      return null;
+    }
+  });
+  
+  editor.addAction({
+    id: 'toggle-table-structure',
+    label: 'Toggle Table Structure Reference',
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.KeyT],
+    run: function() {
+      // Use Bootstrap's collapse API to toggle
+      bootstrap.Collapse.getOrCreateInstance(document.getElementById('tableStructureContent')).toggle();
+      return null;
+    }
+  });
+  
+  // Create a status bar showing cursor position and columns info
+  const statusBarDiv = document.createElement('div');
+  statusBarDiv.className = 'monaco-status-bar';
+  statusBarDiv.innerHTML = `<div class="status-info">Ready</div>
+                          <div class="column-info">Table: ${tableName} (${columns.length} columns)</div>`;
+  document.getElementById('monaco-editor').after(statusBarDiv);
+  
+  // Apply initial theme to status bar
+  const currentTheme = document.documentElement.getAttribute('data-bs-theme') || 'light';
+  updateStatusBarTheme(currentTheme);
+  
+  // Update status bar with cursor position
+  editor.onDidChangeCursorPosition(e => {
+    const position = `Ln ${e.position.lineNumber}, Col ${e.position.column}`;
+    statusBarDiv.querySelector('.status-info').textContent = position;
+  });
+  
+  // Focus the editor when page loads
+  window.addEventListener('load', () => {
+    editor.focus();
+  });
+  
+  // Toggle icon when table structure collapses or expands
+  document.getElementById('tableStructureContent').addEventListener('show.bs.collapse', function() {
+    document.querySelector('#tableStructureHeader button i').classList.replace('bi-chevron-down', 'bi-chevron-up');
+  });
+  
+  document.getElementById('tableStructureContent').addEventListener('hide.bs.collapse', function() {
+    document.querySelector('#tableStructureHeader button i').classList.replace('bi-chevron-up', 'bi-chevron-down');
+  });
+</script>