dbviewer 0.3.1

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

@@ -0,0 +1,271 @@
+<% content_for :title do %>
+  Table: <%= @table_name %>
+<% 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>Table: <%= @table_name %></h1>
+  <div class="d-flex gap-2">
+    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#csvExportModal">
+      <i class="bi bi-file-earmark-spreadsheet me-1"></i> Export CSV
+    </button>
+    <%= link_to query_table_path(@table_name), class: "btn btn-primary" do %>
+      <i class="bi bi-code-square me-1"></i> Run SQL Query
+    <% end %>
+  </div>
+</div>
+
+<!-- CSV Export Modal -->
+<div class="modal fade" id="csvExportModal" tabindex="-1" aria-labelledby="csvExportModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="csvExportModalLabel">Export <strong><%= @table_name %></strong> to CSV</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <%= form_with url: export_csv_table_path(@table_name), method: :get, id: "csvExportForm" do |form| %>
+          <div class="mb-3">
+            <label for="limit" class="form-label">Maximum number of records</label>
+            <input type="number" class="form-control" id="limit" name="limit" value="10000" min="1" max="100000">
+            <div class="form-text">Limit the number of records to export. Large exports may take some time.</div>
+          </div>
+          
+          <% if @total_count > 10000 %>
+            <div class="alert alert-warning">
+              <i class="bi bi-exclamation-triangle-fill me-2"></i>
+              This table has <%= number_with_delimiter(@total_count) %> records. Exporting all records may be slow.
+            </div>
+          <% end %>
+          
+          <div class="mb-3 form-check">
+            <input type="checkbox" class="form-check-input" id="includeHeaders" name="include_headers" checked>
+            <label class="form-check-label" for="includeHeaders">Include column headers</label>
+          </div>
+        <% end %>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button type="submit" form="csvExportForm" class="btn btn-success">
+          <i class="bi bi-download me-1"></i> Export CSV
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 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 %>'">
+          <% Dbviewer::TablesController.per_page_options.each do |option| %>
+            <option value="<%= option %>" <%= 'selected' if @per_page == option %>><%= option %></option>
+          <% end %>
+        </select>
+      </div>
+      <span class="badge bg-secondary">Total: <%= @total_count %> records</span>
+    </div>
+  </div>
+    <div class="card-body p-0">
+      <div class="table-responsive dbviewer-scrollable">
+        <table class="table table-bordered table-striped rounded-none">
+          <% if @records.present? && @records.columns.any? %>
+            <thead class="dbviewer-table-header">
+              <tr>
+                <% @records.columns.each do |column_name| %>
+                  <th>
+                    <%= column_name %>
+                  </th>
+                <% end %>
+              </tr>
+            </thead>
+            <tbody>
+              <% @records.rows.each do |row| %>
+                <tr>
+                  <% row.each do |cell| %>
+                    <% cell_value = format_cell_value(cell) %>
+                    <td title="<%= cell_value %>"><%= cell_value %></td>
+                  <% end %>
+                </tr>
+              <% end %>
+            </tbody>
+          <% else %>
+            <tr>
+              <td colspan="100%">No records found or table is empty.</td>
+            </tr>
+          <% end %>
+        </table>
+      </div>
+      
+      <% if @total_pages > 1 %>
+        <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), class: 'page-link' %>
+            </li>
+            
+            <% start_page = [1, @current_page - 2].max %>
+            <% end_page = [start_page + 4, @total_pages].min %>
+            <% start_page = [1, end_page - 4].max %>
+            
+            <% (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), 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), class: 'page-link' %>
+            </li>
+          </ul>
+        </nav>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<!-- Two-column layout for Timeline and Structure -->
+<div class="row two-column-layout">
+  <!-- Timeline Column -->
+  <div class="col-md-6 mb-4">
+    <% if @timestamp_data.present? %>
+      <div class="dbviewer-card card h-100">
+        <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>
+            <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' : ''}" %>
+            </div>
+          </div>
+        </div>
+        <div class="card-body">
+          <div class="chart-container">
+            <canvas id="timestampChart"></canvas>
+          </div>
+          <div class="mt-3 text-center">
+            <small class="text-muted">
+              <i class="bi bi-info-circle"></i> 
+              Timeline shows <%= @time_grouping %> record creation patterns based on <code>created_at</code> column.
+            </small>
+          </div>
+        </div>
+      </div>
+    <% else %>
+      <div class="dbviewer-card card h-100">
+        <div class="card-header">
+          <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Creation Timeline</h5>
+        </div>
+        <div class="card-body d-flex justify-content-center align-items-center text-center text-muted">
+          <div>
+            <i class="bi bi-calendar-x display-4 mb-3"></i>
+            <p>No creation timestamp data available for this table.</p>
+            <small>Timeline visualization is only available for tables with a <code>created_at</code> column.</small>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+  
+  <!-- Structure Column -->
+  <div class="col-md-6 mb-4">
+    <div class="dbviewer-card card h-100">
+      <div class="card-header">
+        <h5 class="mb-0"><i class="bi bi-diagram-3 me-2"></i>Table Structure</h5>
+      </div>
+      <div class="card-body structure-container">
+        <%= render 'table_structure' %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<% if @timestamp_data.present? %>
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const timeGrouping = '<%= @time_grouping %>';
+    const chartData = <%= raw @timestamp_data.to_json %>;
+    
+    // Reverse the data so it's chronological
+    const labels = chartData.map(item => item.label).reverse();
+    const values = chartData.map(item => item.value).reverse();
+    
+    // Chart colors based on time grouping
+    let chartColor;
+    let chartTitle;
+    
+    switch(timeGrouping) {
+      case 'hourly':
+        chartColor = 'rgba(75, 192, 192, 0.7)';
+        chartTitle = 'Hourly Record Creation';
+        break;
+      case 'weekly':
+        chartColor = 'rgba(153, 102, 255, 0.7)';
+        chartTitle = 'Weekly Record Creation';
+        break;
+      default:
+        chartColor = 'rgba(54, 162, 235, 0.7)';
+        chartTitle = 'Daily Record Creation';
+    }
+    
+    const ctx = document.getElementById('timestampChart').getContext('2d');
+    new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: labels,
+        datasets: [{
+          label: 'Records Created',
+          data: values,
+          backgroundColor: chartColor,
+          borderColor: chartColor.replace('0.7', '1.0'),
+          borderWidth: 1
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: false
+          },
+          title: {
+            display: true,
+            text: chartTitle,
+            font: {
+              size: 16
+            }
+          }
+        },
+        scales: {
+          y: {
+            beginAtZero: true,
+            title: {
+              display: true,
+              text: 'Number of Records'
+            },
+            ticks: {
+              precision: 0
+            }
+          },
+          x: {
+            title: {
+              display: true,
+              text: timeGrouping.charAt(0).toUpperCase() + timeGrouping.slice(1)
+            }
+          }
+        }
+      }
+    });
+  });
+</script>
+<% end %>