dbviewer 0.3.1

data/app/views/dbviewer/shared/_sidebar.html.erb

@@ -0,0 +1,177 @@
+<div class="dbviewer-sidebar-top">
+  <div class="dbviewer-table-filter-container p-1 mb-0">
+    <i class="bi bi-search dbviewer-table-filter-icon"></i>
+    <input type="text" class="form-control form-control-sm dbviewer-table-filter mb-0" 
+           id="tableSearch" placeholder="Filter tables..." aria-label="Filter tables">
+  </div>
+  
+</div>
+
+<div class="dbviewer-sidebar-content">
+  <% if @tables.any? %>
+    <div class="list-group list-group-flush" id="tablesList">
+      <% @tables.each do |table| %>
+        <%= link_to table_path(table[:name]), title: table[:name],
+                    class: "list-group-item list-group-item-action d-flex align-items-center #{'active' if current_table?(table[:name])}", 
+                    tabindex: "0", 
+                    data: { table_name: table[:name] },
+                    onkeydown: "
+                      if(event.key === 'ArrowDown') { 
+                        event.preventDefault();
+                        let next = this.nextElementSibling;
+                        while(next && next.classList.contains('d-none')) {
+                          next = next.nextElementSibling;
+                        }
+                        if(next) next.focus();
+                      } else if(event.key === 'ArrowUp') { 
+                        event.preventDefault();
+                        let prev = this.previousElementSibling;
+                        while(prev && prev.classList.contains('d-none')) {
+                          prev = prev.previousElementSibling;
+                        }
+                        if(prev) prev.focus();
+                        else document.getElementById('tableSearch')?.focus();
+                      }" do %>
+          <div class="text-truncate">
+            <i class="bi bi-table me-2"></i>
+            <%= format_table_name(table[:name]) %>
+          </div>
+          <div class="ms-auto flex-shrink-0">
+            <span class="badge bg-info" title="Columns"><%= table[:columns_count] %></span>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  <% else %>
+    <div class="list-group-item text-muted">
+      <i class="bi bi-exclamation-circle me-2"></i>
+      No tables found
+    </div>
+  <% end %>
+</div>
+
+<div class="px-3 py-2 text-muted small">
+  <i class="bi bi-info-circle me-1"></i>
+  <span id="table-count"><%= @tables.size %></span> tables found
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const searchInput = document.getElementById('tableSearch');
+    
+    if (searchInput) {
+      // Debounce function to limit how often the filter runs
+      function debounce(func, wait) {
+        let timeout;
+        return function() {
+          const context = this;
+          const args = arguments;
+          clearTimeout(timeout);
+          timeout = setTimeout(function() {
+            func.apply(context, args);
+          }, wait);
+        };
+      }
+      
+      // Filter function
+      const filterTables = debounce(function() {
+        const query = searchInput.value.toLowerCase();
+        const tableItems = document.querySelectorAll('#tablesList .list-group-item-action');
+        let visibleCount = 0;
+        
+        tableItems.forEach(function(item) {
+          // Get the table name from the title attribute for more accurate matching
+          const tableName = (item.getAttribute('title') || item.textContent).trim().toLowerCase();
+          
+          // Also get the displayed text content for a broader match
+          const displayedText = item.textContent.trim().toLowerCase();
+          
+          if (tableName.includes(query) || displayedText.includes(query)) {
+            item.classList.remove('d-none');
+            visibleCount++;
+          } else {
+            item.classList.add('d-none');
+          }
+        });
+        
+        // Update the tables count in the sidebar
+        const tableCountElement = document.getElementById('table-count');
+        if (tableCountElement) {
+          tableCountElement.textContent = visibleCount;
+        }
+        
+        // Show/hide no results message
+        let noResultsEl = document.getElementById('dbviewer-no-filter-results');
+        if (visibleCount === 0 && query !== '') {
+          if (!noResultsEl) {
+            noResultsEl = document.createElement('div');
+            noResultsEl.id = 'dbviewer-no-filter-results';
+            noResultsEl.className = 'list-group-item text-muted text-center py-3';
+            noResultsEl.innerHTML = '<i class="bi bi-search me-1"></i> No tables match "<span class="fw-bold"></span>"';
+            document.getElementById('tablesList').appendChild(noResultsEl);
+          }
+          noResultsEl.querySelector('.fw-bold').textContent = query;
+          noResultsEl.style.display = 'block';
+        } else if (noResultsEl) {
+          noResultsEl.style.display = 'none';
+        }
+      }, 150); // Debounce for 150ms
+      
+      // Set up event listeners for the search input
+      searchInput.addEventListener('input', filterTables);
+      searchInput.addEventListener('keyup', function(e) {
+        filterTables();
+        
+        // Add keyboard navigation for the filtered list
+        if (e.key === 'Enter' || e.key === 'ArrowDown') {
+          e.preventDefault();
+          // Focus the first visible table item (not having d-none class)
+          const firstVisibleItem = document.querySelector('#tablesList .list-group-item-action:not(.d-none)');
+          if (firstVisibleItem) {
+            firstVisibleItem.focus();
+            // Make sure the item is visible in the scrollable area
+            firstVisibleItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+          }
+        }
+      });
+      searchInput.addEventListener('search', filterTables);  // For clearing via the "x" in some browsers
+      
+      // Clear the search box when clicking the X button
+      const clearButton = document.createElement('button');
+      clearButton.type = 'button';
+      clearButton.className = 'btn btn-sm btn-link position-absolute';
+      clearButton.style.right = '15px';
+      clearButton.style.top = '50%';
+      clearButton.style.transform = 'translateY(-50%)';
+      clearButton.style.display = 'none';
+      clearButton.style.color = '#6c757d';
+      clearButton.style.fontSize = '0.85rem';
+      clearButton.style.padding = '0.25rem';
+      clearButton.style.width = '1.5rem';
+      clearButton.style.textAlign = 'center';
+      clearButton.innerHTML = '<i class="bi bi-x-circle"></i>';
+      clearButton.addEventListener('click', function() {
+        searchInput.value = '';
+        // Call filter directly without debouncing for immediate feedback
+        filterTables();
+        this.style.display = 'none';
+      });
+      
+      const filterContainer = document.querySelector('.dbviewer-table-filter-container');
+      if (filterContainer) {
+        filterContainer.style.position = 'relative';
+        filterContainer.appendChild(clearButton);
+        
+        searchInput.addEventListener('input', function() {
+          clearButton.style.display = this.value ? 'block' : 'none';
+        });
+        
+        // Apply filter initially in case there's a value already (e.g., from browser autofill)
+        if (searchInput.value) {
+          filterTables();
+          clearButton.style.display = 'block';
+        }
+      }
+    }
+  });
+</script>

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

@@ -0,0 +1,102 @@
+<ul class="nav nav-tabs nav-fill mb-3" id="structureTabs" role="tablist">
+  <li class="nav-item" role="presentation">
+    <button class="nav-link active" id="columns-tab" data-bs-toggle="tab" data-bs-target="#columns" type="button" role="tab" aria-controls="columns" aria-selected="true">
+      <i class="bi bi-grid me-1"></i> Columns
+    </button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="indexes-tab" data-bs-toggle="tab" data-bs-target="#indexes" type="button" role="tab" aria-controls="indexes" aria-selected="false">
+      <i class="bi bi-search me-1"></i> Indexes
+    </button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="foreign-keys-tab" data-bs-toggle="tab" data-bs-target="#foreign-keys" type="button" role="tab" aria-controls="foreign-keys" aria-selected="false">
+      <i class="bi bi-link me-1"></i> Foreign Keys
+    </button>
+  </li>
+</ul>
+
+<div class="tab-content" id="structureTabContent">
+  <div class="tab-pane fade show active" id="columns" role="tabpanel" aria-labelledby="columns-tab">
+    <div class="table-responsive" style="max-height: 350px; overflow-y: auto;">
+      <table class="table table-sm table-striped">
+        <thead class="sticky-top bg-light">
+          <tr>
+            <th>Column</th>
+            <th>Type</th>
+            <th>Nullable</th>
+            <th>Default</th>
+            <th>Primary Key</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% @columns.each do |column| %>
+          <tr>
+            <td class="fw-medium"><%= column[:name] %></td>
+            <td><span class="badge bg-secondary"><%= column[:type] %></span></td>
+            <td><%= column[:null] ? '<span class="text-success">Yes</span>'.html_safe : '<span class="text-danger">No</span>'.html_safe %></td>
+            <td><code><%= column[:default].nil? ? 'NULL' : column[:default] %></code></td>
+            <td><%= column[:primary] ? '<i class="bi bi-key text-warning"></i> Yes'.html_safe : 'No' %></td>
+          </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  
+  <div class="tab-pane fade" id="indexes" role="tabpanel" aria-labelledby="indexes-tab">
+    <% if @metadata && @metadata[:indexes].present? %>
+      <div class="table-responsive">
+        <table class="table table-bordered table-striped">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Columns</th>
+              <th>Unique</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @metadata[:indexes].each do |index| %>
+            <tr>
+              <td><%= index[:name] %></td>
+              <td><%= index[:columns].join(", ") %></td>
+              <td><%= index[:unique] ? 'Yes' : 'No' %></td>
+            </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    <% else %>
+      <div class="alert alert-info">No indexes found or not supported by this database.</div>
+    <% end %>
+  </div>
+  
+  <div class="tab-pane fade" id="foreign-keys" role="tabpanel" aria-labelledby="foreign-keys-tab">
+    <% if @metadata && @metadata[:foreign_keys].present? %>
+      <div class="table-responsive">
+        <table class="table table-bordered table-striped">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>From Column</th>
+              <th>To Table</th>
+              <th>To Column</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @metadata[:foreign_keys].each do |fk| %>
+            <tr>
+              <td><%= fk[:name] %></td>
+              <td><%= fk[:column] %></td>
+              <td><%= link_to fk[:to_table], table_path(fk[:to_table]) %></td>
+              <td><%= fk[:primary_key] %></td>
+            </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    <% else %>
+      <div class="alert alert-info">No foreign keys found or not supported by this database.</div>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,128 @@
+<% content_for :title do %>
+  Database Tables
+<% end %>
+
+<% content_for :sidebar do %>
+  <%= render 'dbviewer/shared/sidebar' %>
+<% end %>
+
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1>Database Tables</h1>
+  <div>
+    <%= link_to dashboard_path, class: "btn btn-outline-primary me-2" do %>
+      <i class="bi bi-house-door me-1"></i> Dashboard
+    <% end %>
+    <%= link_to entity_relationship_diagrams_path, class: "btn btn-outline-primary" do %>
+      <i class="bi bi-diagram-3 me-1"></i> View ERD
+    <% end %>
+  </div>
+</div>
+
+<% if flash[:error] %>
+  <div class="alert alert-danger" role="alert">
+    <%= flash[:error] %>
+  </div>
+<% end %>
+
+<!-- Table Listing -->
+<div class="card shadow-sm mb-4">
+  <div class="card-header d-flex justify-content-between align-items-center">
+    <h5 class="mb-0">All Tables</h5>
+    <span class="badge bg-secondary"><%= @tables.size %> tables</span>
+  </div>
+  <div class="card-body p-0">
+    <div class="table-responsive">
+      <table class="table table-hover table-striped mb-0">
+        <thead>
+          <tr>
+            <th>Table Name</th>
+            <th class="text-center">Columns</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% @tables.each do |table| %>
+            <tr>
+              <td class="fw-medium">
+                <%= link_to table[:name], table_path(table[:name]), class: "text-decoration-none" %>
+              </td>
+              <td class="text-center">
+                <span class="badge bg-secondary-subtle"><%= table[:columns_count] %></span>
+              </td>
+              <td>
+                <%= link_to raw('<i class="bi bi-eye"></i>'), table_path(table[:name]), class: "btn btn-sm btn-outline-primary", title: "View" %>
+                <%= link_to raw('<i class="bi bi-search"></i>'), query_table_path(table[:name]), class: "btn btn-sm btn-outline-secondary", title: "Query" %>
+                <%= link_to raw('<i class="bi bi-download"></i>'), export_csv_table_path(table[:name]), class: "btn btn-sm btn-outline-success", title: "Export CSV" %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    // Table search functionality
+    const searchInput = document.getElementById('tableSearch');
+    if (searchInput) {
+      searchInput.addEventListener('keyup', function() {
+        const filter = this.value.toLowerCase();
+        const tableRows = document.querySelectorAll('tbody tr');
+        
+        tableRows.forEach(function(row) {
+          const tableName = row.querySelector('td:first-child').textContent.toLowerCase();
+          if (tableName.includes(filter)) {
+            row.style.display = '';
+          } else {
+            row.style.display = 'none';
+          }
+        });
+      });
+    }
+    
+    // Update table styling when theme changes
+    function updateTableStyling() {
+      const isDarkMode = document.documentElement.getAttribute('data-bs-theme') === 'dark';
+      const tables = document.querySelectorAll('.table');
+      
+      tables.forEach(table => {
+        if (isDarkMode) {
+          table.classList.add('table-dark');
+        } else {
+          table.classList.remove('table-dark');
+        }
+      });
+    }
+    
+    // Initial styling
+    updateTableStyling();
+    
+    // Listen for theme changes
+    document.addEventListener('dbviewerThemeChanged', function(event) {
+      updateTableStyling();
+    });
+  });
+</script>
+
+<style>
+  /* Dark mode table styles */
+  [data-bs-theme="dark"] .table {
+    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
+    --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
+  }
+  
+  /* Fix badge styling for dark mode */
+  [data-bs-theme="dark"] .bg-secondary-subtle {
+    background-color: rgba(255, 255, 255, 0.15) !important;
+    color: #e9ecef !important;
+  }
+  
+  [data-bs-theme="light"] .bg-secondary-subtle {
+    background-color: #e9ecef !important;
+    color: #212529 !important;
+  }
+</style>
+
+