dbviewer 0.3.15 → 0.3.16

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

@@ -7,6 +7,92 @@
   <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
   <!-- SVG-Pan-Zoom for interactive diagram navigation -->
   <script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
+  <style>
+    /* Column sorting styles */
+    .sortable-column {
+      cursor: pointer;
+      position: relative;
+      transition: background-color 0.2s ease;
+      background-color: inherit;
+    }
+    
+    .sortable-column:hover {
+      background-color: #f5f5f5;
+    }
+    
+    .sortable-column.sorted {
+      background-color: #f0f0f0;
+    }
+    
+    .sortable-column .column-sort-link {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 100%;
+      padding: 4px 0;
+    }
+    
+    .sortable-column .column-name {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .sortable-column .sort-icon-container {
+      flex: 0 0 auto;
+      width: 20px;
+      text-align: center;
+      margin-left: 4px;
+    }
+    
+    .sortable-column .sort-icon {
+      font-size: 0.8em;
+      opacity: 0.7;
+      transition: opacity 0.2s ease, color 0.2s ease;
+    }
+    
+    .sortable-column:hover .sort-icon.invisible {
+      visibility: visible !important;
+      opacity: 0.3;
+    }
+
+    /* Fix scrolling issues with sticky header */
+    .dbviewer-table-header {
+      position: sticky !important;
+      top: 0;
+      z-index: 10;
+      background-color: var(--bs-table-striped-bg, #f2f2f2) !important;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+    }
+    
+    [data-bs-theme="dark"] .dbviewer-table-header {
+      background-color: var(--bs-dark-bg-subtle, #343a40) !important;
+    }
+    
+    /* Improve mobile display for sort headers */
+    @media (max-width: 767.98px) {
+      .sortable-column .column-sort-link {
+        flex-direction: row;
+        align-items: center;
+      }
+      
+      .sortable-column .sort-icon-container {
+        width: 16px;
+      }
+    }
+    
+    /* Dark mode compatibility */
+    [data-bs-theme="dark"] .sortable-column:hover {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+    
+    [data-bs-theme="dark"] .sortable-column.sorted {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  </style>
+  
   <script>
     // Initialize mermaid when document is ready
     document.addEventListener('DOMContentLoaded', function() {
@@ -37,10 +123,11 @@
 
 <% content_for :sidebar do %>
   <%= render 'dbviewer/shared/sidebar' %>
-<% end %>
-
+<% end %>  
 <div class="d-flex justify-content-between align-items-center mb-4">
-  <h1>Table: <%= @table_name %></h1>
+  <div>
+    <h1>Table: <%= @table_name %></h1>
+  </div>
   <div class="d-flex gap-2">
     <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#miniErdModal">
       <i class="bi bi-diagram-3 me-1"></i> View Relationships
@@ -119,16 +206,50 @@
 <!-- Records Section -->
 <div class="dbviewer-card card mb-4">
   <div class="card-header d-flex justify-content-between align-items-center">
-    <h5 class="mb-0"><i class="bi bi-table me-2"></i>Records</h5>
-    <div class="d-flex align-items-center">
-      <div class="me-3">
-        <label for="per-page-select" class="me-2">Per page:</label>
-        <select id="per-page-select" class="form-select form-select-sm" onchange="window.location.href='<%= table_path(@table_name) %>?per_page=' + this.value + '&page=1&order_by=<%= @order_by %>&order_direction=<%= @order_direction %><%= @column_filters.reject { |_, v| v.blank? }.any? ? "&" + @column_filters.reject { |_, v| v.blank? }.map { |k, v| "column_filters[#{k}]=#{CGI.escape(v.to_s)}" }.join("&") : "" %>'">
-          <% Dbviewer::TablesController.per_page_options.each do |option| %>
-            <option value="<%= option %>" <%= 'selected' if @per_page == option %>><%= option %></option>
-          <% end %>
-        </select>
-      </div>
+    <h5 class="mb-0">
+      <% 
+        # Build the URL query parameters including creation filters
+        url_params = "per_page=' + this.value + '&page=1&order_by=#{@order_by}&order_direction=#{@order_direction}"
+        
+        # Add column filters
+        if @column_filters.reject { |_, v| v.blank? }.any?
+          url_params += "&" + @column_filters.reject { |_, v| v.blank? }.map { |k, v| "column_filters[#{k}]=#{CGI.escape(v.to_s)}" }.join("&")
+        end
+        
+        # Add creation filters
+        url_params += "&creation_filter_start=#{@creation_filter_start}" if @creation_filter_start.present?
+        url_params += "&creation_filter_end=#{@creation_filter_end}" if @creation_filter_end.present?
+      %>
+      <select id="per-page-select" class="form-select form-select-sm" onchange="window.location.href='<%= table_path(@table_name) %>?<%= url_params %>'">
+        <% Dbviewer::TablesController.per_page_options.each do |option| %>
+          <option value="<%= option %>" <%= 'selected' if @per_page == option %>><%= option %></option>
+        <% end %>
+      </select>
+    </h5>
+    <div class="d-flex align-items-center table-actions">
+      <% if @order_by.present? %>
+        <span class="badge bg-primary me-2" title="Sort order">
+          <i class="bi bi-sort-<%= @order_direction == "ASC" ? "up" : "down" %> me-1"></i>
+          <%= @order_by %> (<%= @order_direction == "ASC" ? "ascending" : "descending" %>)
+        </span>
+      <% end %>
+      
+      <% 
+        clear_sort_params = {
+          page: 1, 
+          per_page: @per_page, 
+          column_filters: @column_filters
+        }
+        
+        # Add creation filters if they exist
+        clear_sort_params[:creation_filter_start] = @creation_filter_start if @creation_filter_start.present?
+        clear_sort_params[:creation_filter_end] = @creation_filter_end if @creation_filter_end.present?
+      %>
+        <%= link_to "×", table_path(@table_name, clear_sort_params), 
+            class: "text-light ms-2", 
+            style: "text-decoration: none;",
+            title: "Clear sorting" %>
+      </span>
       <span class="badge bg-secondary">Total: <%= @total_count %> records</span>
       <% active_filters = @column_filters.reject { |_, v| v.blank? }.size %>
       <% if active_filters > 0 %>
@@ -150,8 +271,9 @@
                 <tr>
                   <% if @records && @records.columns %>
                     <% @records.columns.each do |column_name| %>
-                      <th class="pe-4">
-                        <%= column_name %>
+                      <% is_sorted = @order_by == column_name %>
+                      <th class="px-3 py-2 sortable-column <%= 'sorted' if is_sorted %>">
+                        <%= sortable_column_header(column_name, @order_by, @order_direction, @table_name, @current_page, @per_page, @column_filters) %>
                       </th>
                     <% end %>
                   <% else %>
@@ -162,11 +284,87 @@
                   <% if @records && @records.columns %>
                     <% @records.columns.each do |column_name| %>
                       <th class="p-0">
-                        <%= form.text_field "column_filters[#{column_name}]", 
-                            value: @column_filters[column_name], 
-                            placeholder: "",
-                            class: "form-control form-control-sm column-filter rounded-0",
-                            data: { column: column_name } %>
+                        <% 
+                          # Find column info to detect the type
+                          column_info = @columns.find { |c| c[:name].to_s == column_name.to_s } if @columns
+                          column_type = column_info ? column_info[:type].to_s.downcase : nil
+                        %>
+
+                        <div class="filter-input-group">
+                          <% 
+                            # Define the default operator and available operators based on column type
+                            default_operator = if column_type && column_type =~ /char|text|string|uuid|enum/i
+                              "contains"
+                            else
+                              "eq"
+                            end
+                            
+                            # Get previously selected operator or default
+                            selected_operator = @column_filters["#{column_name}_operator"]
+                            selected_operator = default_operator if selected_operator.nil? || selected_operator == "default"
+                            
+                            # Define operator options based on column type
+                            if column_type && (column_type =~ /datetime/ || column_type =~ /^date$/ || column_type =~ /^time$/)
+                              # Date/Time operators
+                              operator_options = [
+                                ["=", "eq"],
+                                ["≠", "neq"],
+                                ["<", "lt"],
+                                [">", "gt"],
+                                ["≤", "lte"],
+                                ["≥", "gte"]
+                              ]
+                            elsif column_type && column_type =~ /int|float|decimal|double|number|numeric|real|money|bigint|smallint|tinyint|mediumint|bit/i
+                              # Numeric operators
+                              operator_options = [
+                                ["=", "eq"],
+                                ["≠", "neq"],
+                                ["<", "lt"],
+                                [">", "gt"],
+                                ["≤", "lte"],
+                                ["≥", "gte"]
+                              ]
+                            else
+                              # Text operators
+                              operator_options = [
+                                ["contains", "contains"],
+                                ["not contains", "not_contains"],
+                                ["=", "eq"],
+                                ["≠", "neq"],
+                                ["starts with", "starts_with"],
+                                ["ends with", "ends_with"]
+                              ]
+                            end
+                          %>
+                          
+                          <%= form.select "column_filters[#{column_name}_operator]", 
+                              options_for_select(operator_options, selected_operator),
+                              { include_blank: false },
+                              { class: "form-select form-select-sm operator-select" } %>
+                          
+                          <% if column_type && column_type =~ /datetime/ %>
+                            <%= form.datetime_local_field "column_filters[#{column_name}]", 
+                                value: @column_filters[column_name], 
+                                class: "form-control form-control-sm column-filter rounded-0",
+                                data: { column: column_name } %>
+                          <% elsif column_type && column_type =~ /^date$/ %>
+                            <%= form.date_field "column_filters[#{column_name}]", 
+                                value: @column_filters[column_name], 
+                                class: "form-control form-control-sm column-filter rounded-0",
+                                data: { column: column_name } %>
+                          <% elsif column_type && column_type =~ /^time$/ %>
+                            <%= form.time_field "column_filters[#{column_name}]", 
+                                value: @column_filters[column_name], 
+                                class: "form-control form-control-sm column-filter rounded-0",
+                                data: { column: column_name } %>
+                          <% else %>
+                            <%= form.text_field "column_filters[#{column_name}]", 
+                                value: @column_filters[column_name], 
+                                placeholder: "",
+                                class: "form-control form-control-sm column-filter rounded-0",
+                                data: { column: column_name } %>
+                          <% end %>
+                        </div>
                       </th>
                     <% end %>
                   <% else %>
@@ -194,10 +392,17 @@
                                           nil
                           %>
                           <% if foreign_key && !cell.nil? %>
+                            <% 
+                              # Build params for foreign key links with creation filters
+                              fk_params = { column_filters: { foreign_key[:primary_key] => cell } }
+                              
+                              # Add creation filters if they exist
+                              fk_params[:creation_filter_start] = @creation_filter_start if @creation_filter_start.present?
+                              fk_params[:creation_filter_end] = @creation_filter_end if @creation_filter_end.present?
+                            %>
                             <td title="<%= cell_value %> (Click to view referenced record)">
                               <%= link_to cell_value, 
-                                  table_path(foreign_key[:to_table], 
-                                  column_filters: { foreign_key[:primary_key] => cell }), 
+                                  table_path(foreign_key[:to_table], fk_params), 
                                   class: "text-decoration-none foreign-key-link" %>
                               <i class="bi bi-link-45deg text-muted small"></i>
                             </td>
@@ -214,10 +419,23 @@
       </div>
       
       <% if @total_pages && @total_pages > 1 %>
+        <%
+          # Prepare common URL params including creation filters
+          common_params = {
+            order_by: @order_by, 
+            order_direction: @order_direction, 
+            per_page: @per_page, 
+            column_filters: @column_filters
+          }
+          
+          # Add creation filters if they exist
+          common_params[:creation_filter_start] = @creation_filter_start if @creation_filter_start.present?
+          common_params[:creation_filter_end] = @creation_filter_end if @creation_filter_end.present?
+        %>
         <nav aria-label="Page navigation">
           <ul class="pagination justify-content-center">
             <li class="page-item <%= 'disabled' if @current_page == 1 %>">
-              <%= link_to '«', table_path(@table_name, page: [@current_page - 1, 1].max, order_by: @order_by, order_direction: @order_direction, per_page: @per_page, column_filters: @column_filters), class: 'page-link' %>
+              <%= link_to '«', table_path(@table_name, common_params.merge(page: [@current_page - 1, 1].max)), class: 'page-link' %>
             </li>
             
             <% start_page = [1, @current_page - 2].max %>
@@ -226,12 +444,12 @@
             
             <% (start_page..end_page).each do |page_num| %>
               <li class="page-item <%= 'active' if page_num == @current_page %>">
-                <%= link_to page_num, table_path(@table_name, page: page_num, order_by: @order_by, order_direction: @order_direction, per_page: @per_page, column_filters: @column_filters), class: 'page-link' %>
+                <%= link_to page_num, table_path(@table_name, common_params.merge(page: page_num)), class: 'page-link' %>
               </li>
             <% end %>
             
             <li class="page-item <%= 'disabled' if @current_page == @total_pages %>">
-              <%= link_to '»', table_path(@table_name, page: [@current_page + 1, @total_pages].min, order_by: @order_by, order_direction: @order_direction, per_page: @per_page, column_filters: @column_filters), class: 'page-link' %>
+              <%= link_to '»', table_path(@table_name, common_params.merge(page: [@current_page + 1, @total_pages].min)), class: 'page-link' %>
             </li>
           </ul>
         </nav>
@@ -249,10 +467,23 @@
         <div class="card-header d-flex justify-content-between align-items-center">
           <h5 class="mb-0"><i class="bi bi-graph-up me-2"></i>Record Creation Timeline</h5>
           <div>
+            <% 
+              # Build common params for time grouping links
+              time_params = {
+                page: @current_page, 
+                order_by: @order_by, 
+                order_direction: @order_direction, 
+                per_page: @per_page
+              }
+              
+              # Add creation filters if they exist
+              time_params[:creation_filter_start] = @creation_filter_start if @creation_filter_start.present?
+              time_params[:creation_filter_end] = @creation_filter_end if @creation_filter_end.present?
+            %>
             <div class="btn-group btn-group-sm" role="group" aria-label="Time grouping">
-              <%= link_to "Hourly", table_path(@table_name, time_group: "hourly", page: @current_page, order_by: @order_by, order_direction: @order_direction, per_page: @per_page), class: "btn btn-outline-primary #{@time_grouping == 'hourly' ? 'active' : ''}" %>
-              <%= link_to "Daily", table_path(@table_name, time_group: "daily", page: @current_page, order_by: @order_by, order_direction: @order_direction, per_page: @per_page), class: "btn btn-outline-primary #{@time_grouping == 'daily' ? 'active' : ''}" %>
-              <%= link_to "Weekly", table_path(@table_name, time_group: "weekly", page: @current_page, order_by: @order_by, order_direction: @order_direction, per_page: @per_page), class: "btn btn-outline-primary #{@time_grouping == 'weekly' ? 'active' : ''}" %>
+              <%= link_to "Hourly", table_path(@table_name, time_params.merge(time_group: "hourly")), class: "btn btn-outline-primary #{@time_grouping == 'hourly' ? 'active' : ''}" %>
+              <%= link_to "Daily", table_path(@table_name, time_params.merge(time_group: "daily")), class: "btn btn-outline-primary #{@time_grouping == 'daily' ? 'active' : ''}" %>
+              <%= link_to "Weekly", table_path(@table_name, time_params.merge(time_group: "weekly")), class: "btn btn-outline-primary #{@time_grouping == 'weekly' ? 'active' : ''}" %>
             </div>
           </div>
         </div>
@@ -301,6 +532,7 @@
   document.addEventListener('DOMContentLoaded', function() {
     // Column filter functionality
     const columnFilters = document.querySelectorAll('.column-filter');
+    const operatorSelects = document.querySelectorAll('.operator-select');
     const filterForm = document.getElementById('column-filters-form');
     
     // Add debounce function to reduce form submissions
@@ -323,7 +555,18 @@
     
     // Add event listeners to all filter inputs
     columnFilters.forEach(function(filter) {
+      // For text fields use input event
       filter.addEventListener('input', submitForm);
+      
+      // For date/time fields also use change event since they have calendar/time pickers
+      if (filter.type === 'date' || filter.type === 'datetime-local' || filter.type === 'time') {
+        filter.addEventListener('change', submitForm);
+      }
+    });
+    
+    // Add event listeners to operator selects
+    operatorSelects.forEach(function(select) {
+      select.addEventListener('change', submitForm);
     });
     
     // Add clear button functionality if there are any filters applied
@@ -343,7 +586,17 @@
         paginationContainer.insertAdjacentHTML('afterend', clearButton.outerHTML);
         
         document.getElementById('clear-filters').addEventListener('click', function() {
+          // Reset all input values
           columnFilters.forEach(filter => filter.value = '');
+          
+          // Reset operator selects to their default values
+          operatorSelects.forEach(select => {
+            // Find the first option of the select (usually the default)
+            if (select.options.length > 0) {
+              select.selectedIndex = 0;
+            }
+          });
+          
           submitForm();
         });
       }
@@ -785,6 +1038,46 @@
     font-size: 0.85rem;
   }
   
+  /* Filter input group styling */
+  .filter-input-group {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .filter-input-group .operator-select {
+    font-size: 0.7rem;
+    padding: 0.1rem 0.5rem;
+    border-bottom: none;
+    border-radius: 0.2rem 0.2rem 0 0;
+    background-color: rgba(0,0,0,0.03);
+    font-weight: normal;
+    min-height: 22px; /* Ensure consistent height */
+  }
+  
+  .filter-input-group .operator-select option {
+    font-size: 0.8rem;
+    padding: 2px;
+  }
+  
+  [data-bs-theme="dark"] .filter-input-group .operator-select {
+    background-color: rgba(255,255,255,0.05);
+    color: rgba(255,255,255,0.9);
+    border-color: rgba(255,255,255,0.15);
+  }
+  
+  .filter-input-group .column-filter {
+    border-radius: 0 0 0.2rem 0.2rem;
+    border-top: none;
+  }
+  
+  /* Ensure consistent sizing for date/time inputs */
+  input[type="date"].column-filter,
+  input[type="datetime-local"].column-filter,
+  input[type="time"].column-filter {
+    padding: 0.2rem 0.5rem;
+  }
+  
   [data-bs-theme="dark"] .column-filters td {
     background-color: rgba(255,255,255,0.05);
   }
@@ -795,6 +1088,13 @@
     border-color: rgba(255,255,255,0.15);
   }
   
+  /* Special styling for date/time inputs in dark mode */
+  [data-bs-theme="dark"] input[type="datetime-local"].column-filter::-webkit-calendar-picker-indicator,
+  [data-bs-theme="dark"] input[type="date"].column-filter::-webkit-calendar-picker-indicator,
+  [data-bs-theme="dark"] input[type="time"].column-filter::-webkit-calendar-picker-indicator {
+    filter: invert(0.8);
+  }
+  
   /* Mini ERD modal styling */
   #miniErdModal .modal-dialog {
     max-width: 90%;
@@ -916,6 +1216,39 @@
         }
       }
     });
+    
+    // Column sorting enhancement
+    const sortableColumns = document.querySelectorAll('.sortable-column');
+    sortableColumns.forEach(column => {
+      const link = column.querySelector('.column-sort-link');
+      
+      // Mouse over effects
+      column.addEventListener('mouseenter', () => {
+        const sortIcon = column.querySelector('.sort-icon');
+        if (sortIcon && sortIcon.classList.contains('invisible')) {
+          sortIcon.style.visibility = 'visible';
+          sortIcon.style.opacity = '0.3';
+        }
+      });
+      
+      column.addEventListener('mouseleave', () => {
+        const sortIcon = column.querySelector('.sort-icon');
+        if (sortIcon && sortIcon.classList.contains('invisible')) {
+          sortIcon.style.visibility = 'hidden';
+          sortIcon.style.opacity = '0';
+        }
+      });
+      
+      // Keyboard accessibility
+      if (link) {
+        link.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            link.click();
+          }
+        });
+      }
+    });
   });
 </script>
 <% end %>