dbviewer 0.6.2 → 0.6.3

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

@@ -131,8 +131,8 @@
     
     /* Action column styling */
     .action-column {
-      width: 60px;
-      min-width: 60px; /* Ensure minimum width */
+      width: 100px;  /* Increased from 60px to accommodate two buttons */
+      min-width: 100px; /* Ensure minimum width */
       white-space: nowrap;
       position: sticky;
       left: 0;
@@ -141,6 +141,16 @@
       box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
     }
     
+    .copy-factory-btn {
+      padding: 0.1rem 0.4rem;
+      width: 32px;
+    }
+    
+    .copy-factory-btn:hover {
+      opacity: 0.85;
+      transform: translateY(-1px);
+    }
+    
     /* Ensure proper background color for actions column in dark mode */
     [data-bs-theme="dark"] .action-column {
       background-color: var(--bs-dark-bg-subtle, #343a40);
@@ -522,8 +532,8 @@
   
   /* Action column styling */
   .action-column {
-    width: 60px;
-    min-width: 60px; /* Ensure minimum width */
+    width: 100px;  /* Increased from 60px to accommodate two buttons */
+    min-width: 100px; /* Ensure minimum width */
     white-space: nowrap;
     position: sticky;
     left: 0;
@@ -533,6 +543,16 @@
     border-right: 1px solid var(--bs-border-color);
   }
   
+  .copy-factory-btn {
+    padding: 0.1rem 0.4rem;
+    width: 32px;
+  }
+  
+  .copy-factory-btn:hover {
+    opacity: 0.85;
+    transform: translateY(-1px);
+  }
+  
   /* Ensure proper background color for actions column in dark mode */
   [data-bs-theme="dark"] .action-column {
     background-color: var(--bs-body-bg, #212529); /* Use body background in dark mode */
@@ -1493,154 +1513,220 @@
         }
       });
     }
-  });
-  
-  // Helper function to create relationship sections
-  // Function to fetch relationship counts from API
-  async function fetchRelationshipCounts(tableName, recordId, relationships, hasManySection) {
-    try {
-      const response = await fetch(`/dbviewer/api/tables/${tableName}/relationship_counts?record_id=${recordId}`);
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-      
-      const data = await response.json();
-      
-      // Update each count in the UI
-      const countSpans = hasManySection.querySelectorAll('.relationship-count');
-      
-      relationships.forEach((relationship, index) => {
-        const countSpan = countSpans[index];
-        if (countSpan) {
-          const relationshipData = data.relationships.find(r => 
-            r.table === relationship.from_table && r.foreign_key === relationship.column
-          );
+    
+    // Function to copy FactoryBot code
+    window.copyToJson = function(button) {
+      try {
+        // Get record data from data attribute
+        const recordData = JSON.parse(button.dataset.recordData);
+        
+        // Generate formatted JSON string
+        const jsonString = JSON.stringify(recordData, null, 2);
+        
+        // Copy to clipboard
+        navigator.clipboard.writeText(jsonString).then(() => {
+          // Show a temporary success message on the button
+          const originalTitle = button.getAttribute('title');
+          button.setAttribute('title', 'Copied!');
+          button.classList.remove('btn-outline-secondary');
+          button.classList.add('btn-success');
           
-          if (relationshipData) {
-            const count = relationshipData.count;
-            let badgeClass = 'bg-secondary';
-            let badgeText = `${count} record${count !== 1 ? 's' : ''}`;
-            
-            // Use different colors based on count
-            if (count > 0) {
-              badgeClass = count > 10 ? 'bg-warning' : 'bg-success';
-            }
-            
-            countSpan.innerHTML = `<span class="badge ${badgeClass}">${badgeText}</span>`;
+          // Show a toast notification
+          if (typeof Toastify === 'function') {
+            Toastify({
+              text: `<span class="toast-icon"><i class="bi bi-clipboard-check"></i></span> JSON data copied to clipboard!`,
+              className: "toast-factory-bot",
+              duration: 3000,
+              gravity: "bottom",
+              position: "right",
+              escapeMarkup: false,
+              style: {
+                animation: "slideInRight 0.3s ease-out, slideOutRight 0.3s ease-out 2.7s"
+              },
+              onClick: function() { /* Dismiss toast on click */ }
+            }).showToast();
+          }
+          
+          setTimeout(() => {
+            button.setAttribute('title', originalTitle);
+            button.classList.remove('btn-success');
+            button.classList.add('btn-outline-secondary');
+          }, 2000);
+        }).catch(err => {
+          console.error('Failed to copy text: ', err);
+          
+          // Show error toast
+          if (typeof Toastify === 'function') {
+            Toastify({
+              text: '<span class="toast-icon"><i class="bi bi-exclamation-triangle"></i></span> Failed to copy to clipboard',
+              className: "bg-danger",
+              duration: 3000,
+              gravity: "bottom",
+              position: "right",
+              escapeMarkup: false,
+              style: {
+                background: "linear-gradient(135deg, #dc3545, #c82333)",
+                animation: "slideInRight 0.3s ease-out"
+              }
+            }).showToast();
           } else {
-            // Fallback if no data found
-            countSpan.innerHTML = '<span class="badge bg-danger">Error</span>';
+            alert('Failed to copy to clipboard. See console for details.');
           }
+        });
+      } catch (error) {
+        console.error('Error generating JSON:', error);
+        alert('Error generating JSON. See console for details.');
+      }
+    };
+    
+    // Helper function to create relationship sections
+    // Function to fetch relationship counts from API
+    async function fetchRelationshipCounts(tableName, recordId, relationships, hasManySection) {
+      try {
+        const response = await fetch(`/dbviewer/api/tables/${tableName}/relationship_counts?record_id=${recordId}`);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
         }
-      });
-      
-    } catch (error) {
-      console.error('Error fetching relationship counts:', error);
-      
-      // Show error state in UI
-      const countSpans = hasManySection.querySelectorAll('.relationship-count');
-      countSpans.forEach(span => {
-        span.innerHTML = '<span class="badge bg-danger">Error</span>';
-      });
-    }
-  }
+        
+        const data = await response.json();
+        
+        // Update each count in the UI
+        const countSpans = hasManySection.querySelectorAll('.relationship-count');
+        
+        relationships.forEach((relationship, index) => {
+          const countSpan = countSpans[index];
+          if (countSpan) {
+            const relationshipData = data.relationships.find(r => 
+              r.table === relationship.from_table && r.foreign_key === relationship.column
+            );
+            
+            if (relationshipData) {
+              const count = relationshipData.count;
+              let badgeClass = 'bg-secondary';
+              let badgeText = `${count} record${count !== 1 ? 's' : ''}`;
+              
+              // Use different colors based on count
+              if (count > 0) {
+                badgeClass = count > 10 ? 'bg-warning' : 'bg-success';
+              }
+              
+              countSpan.innerHTML = `<span class="badge ${badgeClass}">${badgeText}</span>`;
+            } else {
+              // Fallback if no data found
+              countSpan.innerHTML = '<span class="badge bg-danger">Error</span>';
 
-  function createRelationshipSection(title, relationships, recordData, type, primaryKeyValue = null) {
-    const section = document.createElement('div');
-    section.className = 'relationship-section mb-4';
-    
-    // Create section header
-    const header = document.createElement('h6');
-    header.className = 'mb-3';
-    const icon = type === 'belongs_to' ? 'bi-arrow-up-right' : 'bi-arrow-down-left';
-    header.innerHTML = `<i class="bi ${icon} me-2"></i>${title}`;
-    section.appendChild(header);
-    
-    const tableContainer = document.createElement('div');
-    tableContainer.className = 'table-responsive';
-    
-    const table = document.createElement('table');
-    table.className = 'table table-sm table-bordered';
-    
-    // Create header based on relationship type
-    const thead = document.createElement('thead');
-    if (type === 'belongs_to') {
-      thead.innerHTML = `
-        <tr>
-          <th width="25%">Column</th>
-          <th width="25%">Value</th>
-          <th width="25%">References</th>
-          <th width="25%">Action</th>
-        </tr>
-      `;
-    } else {
-      thead.innerHTML = `
-        <tr>
-          <th width="30%">Related Table</th>
-          <th width="25%">Foreign Key</th>
-          <th width="20%">Count</th>
-          <th width="25%">Action</th>
-        </tr>
-      `;
+            }
+          }
+        });
+        
+      } catch (error) {
+        console.error('Error fetching relationship counts:', error);
+        
+        // Show error state in UI
+        const countSpans = hasManySection.querySelectorAll('.relationship-count');
+        countSpans.forEach(span => {
+          span.innerHTML = '<span class="badge bg-danger">Error</span>';
+        });
+      }
     }
-    table.appendChild(thead);
-    
-    // Create body
-    const tbody = document.createElement('tbody');
-    
-    relationships.forEach(fk => {
-      const row = document.createElement('tr');
+
+    function createRelationshipSection(title, relationships, recordData, type, primaryKeyValue = null) {
+      const section = document.createElement('div');
+      section.className = 'relationship-section mb-4';
+      
+      // Create section header
+      const header = document.createElement('h6');
+      header.className = 'mb-3';
+      const icon = type === 'belongs_to' ? 'bi-arrow-up-right' : 'bi-arrow-down-left';
+      header.innerHTML = `<i class="bi ${icon} me-2"></i>${title}`;
+      section.appendChild(header);
+      
+      const tableContainer = document.createElement('div');
+      tableContainer.className = 'table-responsive';
+      
+      const table = document.createElement('table');
+      table.className = 'table table-sm table-bordered';
       
+      // Create header based on relationship type
+      const thead = document.createElement('thead');
       if (type === 'belongs_to') {
-        const columnValue = recordData[fk.column];
-        row.innerHTML = `
-          <td class="fw-medium">${fk.column}</td>
-          <td><code>${columnValue}</code></td>
-          <td>
-            <span class="text-muted">${fk.to_table}.</span><strong>${fk.primary_key}</strong>
-          </td>
-          <td>
-            <a href="/dbviewer/tables/${fk.to_table}?column_filters[${fk.primary_key}]=${encodeURIComponent(columnValue)}" 
-               class="btn btn-sm btn-outline-primary" 
-               title="View referenced record in ${fk.to_table}">
-              <i class="bi bi-arrow-right me-1"></i>View
-            </a>
-          </td>
+        thead.innerHTML = `
+          <tr>
+            <th width="25%">Column</th>
+            <th width="25%">Value</th>
+            <th width="25%">References</th>
+            <th width="25%">Action</th>
+          </tr>
         `;
       } else {
-        // For has_many relationships
-        row.innerHTML = `
-          <td class="fw-medium">${fk.from_table}</td>
-          <td>
-            <span class="text-muted">${fk.from_table}.</span><strong>${fk.column}</strong>
-          </td>
-          <td>
-            <span class="relationship-count">
-              <span class="badge bg-secondary">
-                <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
-                Loading...
-              </span>
-            </span>
-          </td>
-          <td>
-            <a href="/dbviewer/tables/${fk.from_table}?column_filters[${fk.column}]=${encodeURIComponent(primaryKeyValue)}" 
-               class="btn btn-sm btn-outline-success" 
-               title="View all ${fk.from_table} records that reference this record">
-              <i class="bi bi-list me-1"></i>View Related
-            </a>
-          </td>
+        thead.innerHTML = `
+          <tr>
+            <th width="30%">Related Table</th>
+            <th width="25%">Foreign Key</th>
+            <th width="20%">Count</th>
+            <th width="25%">Action</th>
+          </tr>
         `;
       }
+      table.appendChild(thead);
       
-      tbody.appendChild(row);
-    });
-    
-    table.appendChild(tbody);
-    tableContainer.appendChild(table);
-    section.appendChild(tableContainer);
-    
-    return section;
-  }
+      // Create body
+      const tbody = document.createElement('tbody');
+      
+      relationships.forEach(fk => {
+        const row = document.createElement('tr');
+        
+        if (type === 'belongs_to') {
+          const columnValue = recordData[fk.column];
+          row.innerHTML = `
+            <td class="fw-medium">${fk.column}</td>
+            <td><code>${columnValue}</code></td>
+            <td>
+              <span class="text-muted">${fk.to_table}.</span><strong>${fk.primary_key}</strong>
+            </td>
+            <td>
+              <a href="/dbviewer/tables/${fk.to_table}?column_filters[${fk.primary_key}]=${encodeURIComponent(columnValue)}" 
+                class="btn btn-sm btn-outline-primary" 
+                title="View referenced record in ${fk.to_table}">
+                <i class="bi bi-arrow-right me-1"></i>View
+              </a>
+            </td>
+          `;
+        } else {
+          // For has_many relationships
+          row.innerHTML = `
+            <td class="fw-medium">${fk.from_table}</td>
+            <td>
+              <span class="text-muted">${fk.from_table}.</span><strong>${fk.column}</strong>
+            </td>
+            <td>
+              <span class="relationship-count">
+                <span class="badge bg-secondary">
+                  <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+                  Loading...
+                </span>
+              </span>
+            </td>
+            <td>
+              <a href="/dbviewer/tables/${fk.from_table}?column_filters[${fk.column}]=${encodeURIComponent(primaryKeyValue)}" 
+                class="btn btn-sm btn-outline-success" 
+                title="View all ${fk.from_table} records that reference this record">
+                <i class="bi bi-list me-1"></i>View Related
+              </a>
+            </td>
+          `;
+        }
+        
+        tbody.appendChild(row);
+      });
+      
+      table.appendChild(tbody);
+      tableContainer.appendChild(table);
+      section.appendChild(tableContainer);
+      
+      return section;
+    }
+  });
 </script>
 
 <!-- Floating Creation Filter - Only visible on desktop and on table details page -->

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

@@ -29,6 +29,10 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
   <!-- Chart.js for Data Visualization -->
   <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
+
+  <!-- Toastify JS for notifications -->
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
   
   <style>
     /* Base styles and typography */
@@ -1330,6 +1334,57 @@
     }
     
     /* Add this right above the style closing tag */
+
+    /* Toast styling customizations */
+    .toastify {
+      padding: 12px 20px;
+      color: white;
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-family: var(--bs-body-font-family);
+      font-size: 0.95rem;
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+      max-width: 350px;
+    }
+
+    .toast-factory-bot {
+      background: linear-gradient(135deg, #28a745, #20c997);
+    }
+
+    .toast-icon {
+      margin-right: 10px;
+      font-size: 1.25em;
+    }
+
+    /* Dark mode toast styling */
+    [data-bs-theme="dark"] .toast-factory-bot {
+      background: linear-gradient(135deg, #157347, #13795b);
+    }
+
+    /* Toast animations */
+    @keyframes slideInRight {
+      from {
+        transform: translateX(100%);
+        opacity: 0;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+
+    @keyframes slideOutRight {
+      from {
+        transform: translateX(0);
+        opacity: 1;
+      }
+      to {
+        transform: translateX(100%);
+        opacity: 0;
+      }
+    }
   </style>
 </head>
 <body>

data/lib/dbviewer/database/dynamic_model_factory.rb

@@ -28,7 +28,46 @@ module Dbviewer
       # @param table_name [String] Name of the table
       # @return [Class] ActiveRecord model class for the table
       def create_model_for(table_name)
-        model = Dbviewer.const_set(table_name.classify, Class.new(ActiveRecord::Base) do
+        class_name = table_name.classify
+
+        # Check if we can reuse an existing constant
+        existing_model = handle_existing_constant(class_name, table_name)
+        return existing_model if existing_model
+
+        model = create_active_record_model(class_name, table_name)
+        model.establish_connection(@connection.instance_variable_get(:@config))
+        model
+      end
+
+      # Handle existing constant - check if we can reuse it or need to remove it
+      # @param class_name [String] The constant name to check
+      # @param table_name [String] The table name this model should represent
+      # @return [Class, nil] Existing model if reusable, nil otherwise
+      def handle_existing_constant(class_name, table_name)
+        return nil unless Dbviewer.const_defined?(class_name, false)
+
+        existing_model = Dbviewer.const_get(class_name)
+        return existing_model if valid_model_for_table?(existing_model, table_name)
+
+        # If it exists but isn't the right model, remove it first
+        Dbviewer.send(:remove_const, class_name)
+        nil
+      end
+
+      # Check if an existing model is valid for the given table
+      # @param model [Class] The model class to validate
+      # @param table_name [String] The expected table name
+      # @return [Boolean] true if the model is valid for the table, false otherwise
+      def valid_model_for_table?(model, table_name)
+        model.respond_to?(:table_name) && model.table_name == table_name
+      end
+
+      # Create a new ActiveRecord model class for a table
+      # @param class_name [String] The constant name for the model
+      # @param table_name [String] The table name this model should represent
+      # @return [Class] New ActiveRecord model class
+      def create_active_record_model(class_name, table_name)
+        Dbviewer.const_set(class_name, Class.new(ActiveRecord::Base) do
           self.table_name = table_name
 
           # Some tables might not have primary keys, so we handle that
@@ -45,10 +84,6 @@ module Dbviewer
           # Disable timestamps for better compatibility
           self.record_timestamps = false
         end)
-
-        model.establish_connection(@connection.instance_variable_get(:@config))
-
-        model
       end
     end
   end