dbviewer 0.5.6 → 0.5.8

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

@@ -23,6 +23,8 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   <!-- Bootstrap Icons -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+  <!-- Flatpickr CSS for Date Range Picker -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
   <!-- Google Fonts -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
   <!-- Chart.js for Data Visualization -->
@@ -1407,6 +1409,8 @@
 
   <!-- Bootstrap JS -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- Flatpickr JS for Date Range Picker -->
+  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
   
   <!-- Dark Mode Toggle Script -->
   <script>

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

@@ -4,95 +4,7 @@
            id="tableSearch" placeholder="Filter tables..." aria-label="Filter tables">
   </div>
   
-  <div class="p-2">
-    <div class="accordion accordion-flush" id="creationFilterAccordion">
-      <div class="accordion-item border-0">
-        <h2 class="accordion-header" id="creationFilterHeading">
-          <button class="accordion-button p-2 collapsed" type="button" data-bs-toggle="collapse" 
-                  data-bs-target="#creationFilterCollapse" aria-expanded="false" 
-                  aria-controls="creationFilterCollapse">
-            <i class="bi bi-calendar-range me-2"></i> Creation Filter
-            <% if @creation_filter_start.present? || @creation_filter_end.present? %>
-              <% if @table_name.present? && has_timestamp_column?(@table_name) %>
-                <span class="badge bg-success ms-2">Active</span>
-              <% else %>
-                <span class="badge bg-secondary ms-2">Set</span>
-              <% end %>
-            <% end %>
-          </button>
-        </h2>
-        <div id="creationFilterCollapse" class="accordion-collapse collapse" aria-labelledby="creationFilterHeading">
-          <div class="accordion-body p-2">
-            <form id="creationFilterForm" action="<%= request.path %>" method="get" class="mb-0">
-              <!-- Preserve existing query parameters -->
-              <input type="hidden" name="page" value="<%= @current_page %>">
-              <input type="hidden" name="per_page" value="<%= @per_page %>">
-              <input type="hidden" name="order_by" value="<%= @order_by %>">
-              <input type="hidden" name="order_direction" value="<%= @order_direction %>">
-              
-              <!-- Datetime range fields -->
-              <div class="mb-2">
-                <label for="creationFilterStart" class="form-label mb-1 small">Start Date/Time</label>
-                <input type="datetime-local" id="creationFilterStart" name="creation_filter_start" 
-                       class="form-control form-control-sm" value="<%= @creation_filter_start %>">
-              </div>
-              <div class="mb-2">
-                <label for="creationFilterEnd" class="form-label mb-1 small">End Date/Time</label>
-                <input type="datetime-local" id="creationFilterEnd" name="creation_filter_end" 
-                       class="form-control form-control-sm" value="<%= @creation_filter_end %>">
-              </div>
-              
-              <div class="d-flex justify-content-between">
-                <button type="submit" class="btn btn-primary btn-sm">Apply</button>
-                <% if @creation_filter_start.present? || @creation_filter_end.present? %>
-                  <% 
-                    # Preserve other query params when clearing creation filter
-                    clear_params = {
-                      clear_creation_filter: true,
-                      page: @current_page,
-                      per_page: @per_page,
-                      order_by: @order_by,
-                      order_direction: @order_direction
-                    }
-                  %>
-                  <a href="<%= request.path %>?<%= clear_params.to_query %>" class="btn btn-outline-secondary btn-sm">Clear</a>
-                <% end %>
-              </div>
-              <div class="mt-2 small">
-                <% if @table_name.present? && has_timestamp_column?(@table_name) && (@creation_filter_start.present? || @creation_filter_end.present?) %>
-                  <div class="text-success">
-                    <i class="bi bi-check-circle-fill"></i>
-                    Filter active on this table.
-                    <% if @current_page == 1 && @records && @records.rows && @records.rows.empty? %>
-                      <div class="alert alert-warning p-1 mt-2 small">
-                        <i class="bi bi-exclamation-triangle-fill"></i>
-                        No records match the filter criteria.
-                      </div>
-                    <% end %>
-                  </div>
-                <% elsif @table_name.present? && (@creation_filter_start.present? || @creation_filter_end.present?) %>
-                  <div class="text-warning">
-                    <i class="bi bi-exclamation-circle-fill"></i>
-                    This table has no <code>created_at</code> column.
-                  </div>
-                <% elsif !@table_name.present? && (@creation_filter_start.present? || @creation_filter_end.present?) %>
-                  <div class="text-info">
-                    <i class="bi bi-info-circle-fill"></i>
-                    Filter will be applied on tables with <code>created_at</code> column.
-                  </div>
-                <% else %>
-                  <div class="text-muted">
-                    <i class="bi bi-info-circle-fill"></i>
-                    Filters apply to tables with a <code>created_at</code> column.
-                  </div>
-                <% end %>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+
   
   <!-- Add custom styling for datetime inputs -->
   <style>
@@ -207,6 +119,13 @@
 <script>
   document.addEventListener('DOMContentLoaded', function() {
     const searchInput = document.getElementById('tableSearch');
+    const sidebarContent = document.querySelector('.dbviewer-sidebar-content');
+    
+    // Storage keys for persistence
+    const STORAGE_KEYS = {
+      searchFilter: 'dbviewer_sidebar_search_filter',
+      scrollPosition: 'dbviewer_sidebar_scroll_position'
+    };
     
     if (searchInput) {
       // Debounce function to limit how often the filter runs
@@ -228,6 +147,9 @@
         const tableItems = document.querySelectorAll('#tablesList .list-group-item-action');
         let visibleCount = 0;
         
+        // Save the current search filter to localStorage
+        localStorage.setItem(STORAGE_KEYS.searchFilter, searchInput.value);
+        
         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();
@@ -266,26 +188,7 @@
         }
       }, 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
+      // Set up clear button first
       const clearButton = document.createElement('button');
       clearButton.type = 'button';
       clearButton.className = 'btn btn-sm btn-link position-absolute';
@@ -301,6 +204,8 @@
       clearButton.innerHTML = '<i class="bi bi-x-circle"></i>';
       clearButton.addEventListener('click', function() {
         searchInput.value = '';
+        // Clear the saved filter from localStorage
+        localStorage.removeItem(STORAGE_KEYS.searchFilter);
         // Call filter directly without debouncing for immediate feedback
         filterTables();
         this.style.display = 'none';
@@ -314,13 +219,90 @@
         searchInput.addEventListener('input', function() {
           clearButton.style.display = this.value ? 'block' : 'none';
         });
+      }
+      
+      // Restore saved search filter on page load and apply it immediately
+      const savedFilter = localStorage.getItem(STORAGE_KEYS.searchFilter);
+      if (savedFilter) {
+        searchInput.value = savedFilter;
+        // Show clear button immediately when filter is restored
+        clearButton.style.display = 'block';
+        // Apply filter immediately without debouncing to prevent blinking
+        const query = savedFilter.toLowerCase();
+        const tableItems = document.querySelectorAll('#tablesList .list-group-item-action');
+        let visibleCount = 0;
         
-        // Apply filter initially in case there's a value already (e.g., from browser autofill)
-        if (searchInput.value) {
-          filterTables();
-          clearButton.style.display = 'block';
+        tableItems.forEach(function(item) {
+          const tableName = (item.getAttribute('title') || item.textContent).trim().toLowerCase();
+          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 immediately
+        const tableCountElement = document.getElementById('table-count');
+        if (tableCountElement) {
+          tableCountElement.textContent = visibleCount;
+        }
+        
+        // Handle no results message immediately
+        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';
         }
       }
+      
+      // Restore saved scroll position on page load
+      if (sidebarContent) {
+        const savedScrollPosition = localStorage.getItem(STORAGE_KEYS.scrollPosition);
+        if (savedScrollPosition) {
+          // Use requestAnimationFrame to ensure DOM is fully rendered
+          requestAnimationFrame(() => {
+            sidebarContent.scrollTop = parseInt(savedScrollPosition, 10);
+          });
+        }
+        
+        // Save scroll position on scroll
+        const saveScrollPosition = debounce(function() {
+          localStorage.setItem(STORAGE_KEYS.scrollPosition, sidebarContent.scrollTop);
+        }, 100);
+        
+        sidebarContent.addEventListener('scroll', saveScrollPosition);
+      }
+      
+      // 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
     }
   });
 </script>

data/config/routes.rb

@@ -25,6 +25,9 @@ Dbviewer::Engine.routes.draw do
         get "records"
         get "relationships_count"
       end
+      member do
+        get "relationship_counts"
+      end
     end
 
     resources :entity_relationship_diagrams, only: [] do

data/lib/dbviewer/version.rb

@@ -1,3 +1,3 @@
 module Dbviewer
-  VERSION = "0.5.6"
+  VERSION = "0.5.8"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dbviewer
 version: !ruby/object:Gem::Version
-  version: 0.5.6
+  version: 0.5.8
 platform: ruby
 authors:
 - Wailan Tirajoh