dbviewer 0.4.7 → 0.4.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 61c23f612495654e7fba0280fd361cf872d668ea21618c74c95d05f4ea7fdb6a
-  data.tar.gz: eeea9728edb2716f44e66eb1851767a7e77cf38c53f3ee4c676fd3d1d9e3608d
+  metadata.gz: 03dfb13567e8cf7a2eaf2977e421fec7a2117ff12a6462515399a4b7cfb056d1
+  data.tar.gz: 77ae23ada80eabbc1a5744376a96c0d5df4f20f0cb3723be4c0f9c9967994716
 SHA512:
-  metadata.gz: 6674c2063fb577a3468ded6ffab856bcc8092f5a6fa46a28eb727f3e6a140556401c05777a7bc4ab7dd9e2a78c90b4576800db5a6b724f31d6a1e8f649cc1392
-  data.tar.gz: 1714aa447da6c73754b4702e2114e63dca6c1dce5be4be790bd0b7ae89aa7972f9bbbfc54de588da5237f45ca69066f2fde1b50ae15017e0a52842c954ee9372
+  metadata.gz: 35d69706133dc764c081a6bc172dc0d99f39c2eaa7d62db9c17664c5a1fe05b78255932bd14a3f9a9542e99cb74020cb2926d69c9d21d9a339776fc4023098e9
+  data.tar.gz: b3a4e2029d81da79e922fb5ee0e889fc9e1f66e66129136333f6820d66dbc1dd7648da63a4ab99d3ed822e8cc64c77e9815a1c1bd34b4d0a11b208118d2eb72c

data/app/controllers/dbviewer/tables_controller.rb

@@ -103,11 +103,9 @@ module Dbviewer
       @current_page = [ 1, params[:page].to_i ].max
       @per_page = params[:per_page] ? params[:per_page].to_i : self.class.default_per_page
       @per_page = self.class.default_per_page unless self.class.per_page_options.include?(@per_page)
-      @order_by = params[:order_by].presence ||
-                  database_manager.primary_key(@table_name).presence ||
-                  (@columns.first ? @columns.first[:name] : nil)
+      @order_by = params[:order_by].presence || determine_default_order_column
       @order_direction = params[:order_direction].upcase if params[:order_direction].present?
-      @order_direction = "ASC" unless self.class::VALID_SORT_DIRECTIONS.include?(@order_direction)
+      @order_direction = "DESC" unless self.class::VALID_SORT_DIRECTIONS.include?(@order_direction)
       @column_filters = params[:column_filters].presence ? params[:column_filters].to_enum.to_h : {}
     end
 
@@ -158,5 +156,23 @@ module Dbviewer
         end
       end
     end
+
+    # Determine the default order column using configurable ordering logic
+    def determine_default_order_column
+      # Get the table columns to check what's available
+      columns = @columns || fetch_table_columns(@table_name)
+      column_names = columns.map { |col| col[:name] }
+
+      # Try the configured default order column first
+      default_column = Dbviewer.configuration.default_order_column
+      return default_column if default_column && column_names.include?(default_column)
+
+      # Fall back to primary key
+      primary_key = database_manager.primary_key(@table_name)
+      return primary_key if primary_key.present?
+
+      # Final fallback to first column
+      columns.first ? columns.first[:name] : nil
+    end
   end
 end

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

@@ -400,73 +400,173 @@ document.addEventListener('DOMContentLoaded', function() {
 </script>
 
 <style>
+  /* ================================================
+     CSS Custom Properties (CSS Variables)
+     ================================================ */
+  :root {
+    /* Colors */
+    --dbviewer-code-bg: rgba(0, 0, 0, 0.05);
+    --dbviewer-code-border: rgba(0, 0, 0, 0.1);
+    --dbviewer-muted-color: #6c757d;
+    --dbviewer-success-color: #28a745;
+    --dbviewer-danger-color: #dc3545;
+    --dbviewer-warning-color: #ffc107;
+    
+    /* Skeleton loader colors */
+    --skeleton-base-color: #f0f0f0;
+    --skeleton-highlight-color: #e0e0e0;
+    
+    /* Typography */
+    --dbviewer-monospace-font: 'Courier New', Courier, monospace;
+    --dbviewer-code-font-size: 0.85rem;
+    
+    /* Spacing and sizing */
+    --dbviewer-border-radius: 4px;
+    --dbviewer-border-radius-sm: 3px;
+    --dbviewer-padding-sm: 2px 4px;
+  }
+
+  /* ================================================
+     Dark Mode Support
+     ================================================ */
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --dbviewer-code-bg: rgba(255, 255, 255, 0.1);
+      --dbviewer-code-border: rgba(255, 255, 255, 0.15);
+      --dbviewer-muted-color: #adb5bd;
+      --skeleton-base-color: #2a2a2a;
+      --skeleton-highlight-color: #404040;
+    }
+  }
+
+  /* Bootstrap dark mode support */
+  [data-bs-theme="dark"] {
+    --dbviewer-code-bg: rgba(255, 255, 255, 0.1);
+    --dbviewer-code-border: rgba(255, 255, 255, 0.15);
+    --dbviewer-muted-color: #adb5bd;
+    --skeleton-base-color: #2a2a2a;
+    --skeleton-highlight-color: #404040;
+  }
+
+  /* ================================================
+     SQL Query Styling
+     ================================================ */
   .sql-query-code {
-    font-family: 'Courier New', Courier, monospace;
-    font-size: 0.85rem;
-    background-color: rgba(0, 0, 0, 0.05);
-    padding: 2px 4px;
-    border-radius: 3px;
+    font-family: var(--dbviewer-monospace-font);
+    font-size: var(--dbviewer-code-font-size);
+    background-color: var(--dbviewer-code-bg);
+    padding: var(--dbviewer-padding-sm);
+    border-radius: var(--dbviewer-border-radius-sm);
+    border: 1px solid var(--dbviewer-code-border);
+    transition: background-color 0.2s ease, border-color 0.2s ease;
   }
-  
+
+  .sql-query-code:hover {
+    background-color: var(--dbviewer-code-bg);
+    filter: brightness(0.95);
+  }
+
+  /* ================================================
+     Query Performance Indicators
+     ================================================ */
   .query-duration {
-    color: #28a745;
+    color: var(--dbviewer-success-color);
     font-weight: 500;
+    font-variant-numeric: tabular-nums;
+    transition: color 0.2s ease;
   }
   
   .query-duration-slow {
-    color: #dc3545;
+    color: var(--dbviewer-danger-color);
     font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    transition: color 0.2s ease;
   }
   
   .query-timestamp {
-    color: #6c757d;
+    color: var(--dbviewer-muted-color);
+    font-variant-numeric: tabular-nums;
+    transition: color 0.2s ease;
   }
-  
+
+  /* ================================================
+     Empty States and Messages
+     ================================================ */
   .empty-data-message {
-    color: #6c757d;
+    color: var(--dbviewer-muted-color);
+    transition: color 0.2s ease;
   }
-  
-  /* Loading animations */
+
+  .empty-data-message p {
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+  }
+
+  .empty-data-message small {
+    opacity: 0.8;
+  }
+
+  /* ================================================
+     Loading States
+     ================================================ */
   .spinner-border-sm {
     width: 1rem;
     height: 1rem;
   }
-  
-  /* Skeleton loader styles */
+
+  /* ================================================
+     Skeleton Loader System
+     ================================================ */
   .skeleton-loader {
     display: inline-block;
     height: 1.2em;
     width: 100%;
-    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
+    background: linear-gradient(
+      90deg, 
+      var(--skeleton-base-color) 25%, 
+      var(--skeleton-highlight-color) 37%, 
+      var(--skeleton-base-color) 63%
+    );
     background-size: 400% 100%;
     animation: skeleton-loading 1.2s ease-in-out infinite;
-    border-radius: 4px;
+    border-radius: var(--dbviewer-border-radius);
   }
-  .number-loader {
+
+  /* Skeleton loader variants */
+  .skeleton-loader.number-loader {
     width: 2.5em;
     height: 1.5em;
     margin-bottom: 0.2em;
   }
-  .table-cell-loader {
+
+  .skeleton-loader.table-cell-loader {
     width: 6em;
     height: 1.2em;
   }
-  .records-loader {
+
+  .skeleton-loader.records-loader {
     width: 3em;
     height: 1.2em;
   }
-  .query-cell-loader {
+
+  .skeleton-loader.query-cell-loader {
     width: 12em;
     height: 1.2em;
   }
-  .duration-cell-loader {
+
+  .skeleton-loader.duration-cell-loader {
     width: 4em;
     height: 1.2em;
   }
-  .time-cell-loader {
+
+  .skeleton-loader.time-cell-loader {
     width: 7em;
     height: 1.2em;
   }
+
+  /* ================================================
+     Animations
+     ================================================ */
   @keyframes skeleton-loading {
     0% {
       background-position: 100% 50%;
@@ -475,4 +575,58 @@ document.addEventListener('DOMContentLoaded', function() {
       background-position: 0 50%;
     }
   }
+
+  /* ================================================
+     Table Enhancements
+     ================================================ */
+  .table-hover tbody tr:hover .sql-query-code {
+    background-color: var(--dbviewer-code-bg);
+    filter: brightness(0.9);
+  }
+
+  /* ================================================
+     Responsive Design
+     ================================================ */
+  @media (max-width: 768px) {
+    .sql-query-code {
+      font-size: 0.75rem;
+      padding: 1px 3px;
+    }
+    
+    .query-cell-loader {
+      width: 8em;
+    }
+    
+    .duration-cell-loader {
+      width: 3em;
+    }
+    
+    .time-cell-loader {
+      width: 5em;
+    }
+  }
+
+  /* ================================================
+     Accessibility Improvements
+     ================================================ */
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton-loader {
+      animation: none;
+      background: var(--skeleton-base-color);
+    }
+    
+    .sql-query-code,
+    .query-duration,
+    .query-duration-slow,
+    .query-timestamp,
+    .empty-data-message {
+      transition: none;
+    }
+  }
+
+  /* Focus states for better keyboard navigation */
+  .sql-query-code:focus-visible {
+    outline: 2px solid var(--dbviewer-success-color);
+    outline-offset: 2px;
+  }
 </style>

data/lib/dbviewer/configuration.rb

@@ -38,6 +38,9 @@ module Dbviewer
     # @example { username: 'admin', password: 'secret' }
     attr_accessor :admin_credentials
 
+    # Default column to order table details by (e.g., 'updated_at')
+    attr_accessor :default_order_column
+
     def initialize
       @per_page_options = [ 10, 20, 50, 100 ]
       @default_per_page = 20
@@ -51,6 +54,7 @@ module Dbviewer
       @max_memory_queries = 1000
       @enable_query_logging = true
       @admin_credentials = nil
+      @default_order_column = "updated_at"
     end
   end
 end

data/lib/dbviewer/version.rb

@@ -1,3 +1,3 @@
 module Dbviewer
-  VERSION = "0.4.7"
+  VERSION = "0.4.8"
 end

data/lib/generators/dbviewer/templates/initializer.rb

@@ -15,4 +15,7 @@ Dbviewer.configure do |config|
 
   # Authentication options
   # config.admin_credentials = { username: "admin", password: "your_secure_password" } # Basic HTTP auth credentials
+
+  # Default table ordering options
+  config.default_order_column = "updated_at"  # Primary column to order by
 end

metadata

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