dbwatcher 1.1.1 → 1.1.3

data/app/assets/javascripts/dbwatcher/components/changes_table_hybrid.js

@@ -18,7 +18,8 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
     filters: {
       search: '',
       operation: '',
-      table: ''
+      table: '',
+      selectedTables: []
     },
     showColumnSelector: null,
     expandedRows: {},
@@ -57,46 +58,55 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
 
     // Apply filters directly to Tabulator (no server reload needed)
     applyTabulatorFilters() {
-      if (!this.tabulator) return;
-
-      // Clear existing filters
-      this.tabulator.clearFilter();
-
-      // Apply filters based on current state
-      const filters = [];
+      // Apply filters to all tabulator instances
+      Object.keys(this.tabulators).forEach(tableName => {
+        const tabulator = this.tabulators[tableName];
+        if (!tabulator) return;
+
+        // Clear existing filters
+        tabulator.clearFilter();
+
+        // Create a combined filter function that handles all filters
+        const hasSearch = this.filters.search && this.filters.search.trim();
+        const hasOperation = this.filters.operation;
+        const hasTable = this.filters.table;
+
+        if (hasSearch || hasOperation || hasTable) {
+          const searchTerm = hasSearch ? this.filters.search.trim().toLowerCase() : '';
+
+          // Apply combined custom filter
+          tabulator.setFilter((data) => {
+            // Search filter
+            if (hasSearch) {
+              const searchableContent = [
+                data.table_name,
+                data.operation,
+                data.timestamp,
+                data.index,
+                ...Object.values(data).filter(val => val !== null && val !== undefined)
+              ].join(' ').toLowerCase();
+
+              if (!searchableContent.includes(searchTerm)) {
+                return false;
+              }
+            }
 
-      // Search filter (searches across multiple fields)
-      if (this.filters.search && this.filters.search.trim()) {
-        const searchTerm = this.filters.search.trim().toLowerCase();
-        filters.push({
-          field: 'searchable_content',
-          type: 'like',
-          value: searchTerm
-        });
-      }
+            // Operation filter
+            if (hasOperation && data.operation !== this.filters.operation) {
+              return false;
+            }
 
-      // Operation filter
-      if (this.filters.operation) {
-        filters.push({
-          field: 'operation',
-          type: '=',
-          value: this.filters.operation
-        });
-      }
+            // Table filter
+            if (hasTable && data.table_name !== this.filters.table) {
+              return false;
+            }
 
-      // Table filter
-      if (this.filters.table) {
-        filters.push({
-          field: 'table_name',
-          type: '=',
-          value: this.filters.table
-        });
-      }
+            return true;
+          });
+        }
 
-      // Apply all filters
-      if (filters.length > 0) {
-        this.tabulator.setFilter(filters);
-      }
+        // Note: Multi-table filtering is handled at the template level via x-show
+      });
     },
 
     // Load data from API
@@ -117,11 +127,18 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
         if (this.filters.operation) params.append('operation', this.filters.operation);
         if (this.filters.search) params.append('search', this.filters.search);
 
-        const url = `/dbwatcher/api/v1/sessions/${this.sessionId}/changes_data?${params.toString()}`;
+        const url = `/dbwatcher/api/v1/sessions/${this.sessionId}/tables_data?${params.toString()}`;
         const data = await this.fetchData(url);
 
         if (data.tables_summary) {
           this.tableData = data.tables_summary;
+          
+          // Debug: Log the table data structure to verify model_class is included
+          console.log('Table data received:', Object.keys(this.tableData));
+          Object.entries(this.tableData).forEach(([tableName, tableInfo]) => {
+            console.log(`Table ${tableName} model_class:`, tableInfo.model_class);
+          });
+          
           this.initializeColumnVisibility();
           this.initializeTabulators();
         } else {
@@ -166,30 +183,30 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
 
       // Transform data for this specific table
       const tabulatorData = this.transformTableDataForTabulator(tableName, tableInfo);
-      
+
       // Create Tabulator instance for this table
       this.tabulators[tableName] = new Tabulator(container, {
         data: tabulatorData,
         layout: 'fitDataFill',
         responsiveLayout: false,
         height: Math.max(200, Math.min(400, (tabulatorData.length * 35) + 80)),  // Minimum 200px, expand based on content
-        
-        // Force Tabulator to use our custom ID field
-        index: 'id',  // Tell Tabulator to use the 'id' field as the row identifier
-        
+
+        // Force Tabulator to use our custom rowId field
+        index: 'rowId',  // Tell Tabulator to use the 'rowId' field as the row identifier
+
         // Performance optimizations - disable virtual DOM to ensure all rows render
         virtualDom: false,
         pagination: false,  // Ensure no pagination
-        
+
         // Column configuration for this table
         columns: this.buildColumnsForTable(tableName, tableInfo),
-        
+
         // Row formatting
         rowFormatter: this.customRowFormatter.bind(this),
-        
+
         // No initial sorting - data should be in correct order from API
         // initialSort: [],
-        
+
         // Enable header sorting
         headerSortTristate: true,
 
@@ -204,33 +221,23 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
     transformTableDataForTabulator(tableName, tableInfo) {
       const rows = [];
       const changes = tableInfo.changes || [];
-      
+
       changes.forEach((change, index) => {
         const columnData = this.extractColumnData(change, tableInfo.columns);
-        
-        // Create truly unique row ID using table name and index only (more reliable)
-        const uniqueId = `${tableName}_row_${index}`;
-        
-        // Clean column data to remove any 'id' field that might conflict
-        const cleanColumnData = { ...columnData };
-        delete cleanColumnData.id;  // Remove any id field from column data
-        
+
+        // Create truly unique row ID using table name and index only (for Tabulator internal use)
+        const uniqueRowId = `${tableName}_row_${index}`;
+
         const row = {
-          id: uniqueId,  // Force this to be the ID used by Tabulator
+          rowId: uniqueRowId,  // Tabulator's internal row identifier
           index: index + 1,  // Display index (1-based) - should maintain API order
           operation: change.operation,
           timestamp: change.timestamp,
           table_name: tableName,
           change_data: change,  // Keep original change data with ID intact
-          original_change_id: change.id,  // Store original ID separately
-          ...cleanColumnData  // Use cleaned column data
+          ...columnData  // Include all column data including actual record ID
         };
-        
-        // Ensure ID is correct
-        if (row.id !== uniqueId) {
-          row.id = uniqueId;  // Force it back
-        }
-        
+
         rows.push(row);
       });
 
@@ -251,8 +258,8 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
           formatter: (cell) => {
             const rowData = cell.getRow().getData();
             return `<div class="flex items-center justify-center gap-1">
-                      <button class="expand-btn text-gray-400 hover:text-gray-600 transition-colors p-1 rounded hover:bg-gray-100" 
-                             data-row-id="${rowData.id}">
+                      <button class="expand-btn text-gray-400 hover:text-gray-600 transition-colors p-1 rounded hover:bg-gray-100"
+                             data-row-id="${rowData.rowId}">
                         <svg class="w-3 h-3 transition-transform" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 5.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                         </svg>
@@ -312,7 +319,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
                 const value = cell.getValue();
                 const rowData = cell.getRow().getData();
                 const change = rowData.change_data;
-                
+
                 // Handle different operations with appropriate styling
                 if (change.operation === 'UPDATE' && change.changes) {
                   const columnChange = change.changes.find(c => c.column === col);
@@ -344,7 +351,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
     // Extract column data from change record
     extractColumnData(change, columns) {
       const data = {};
-      
+
       columns.forEach(col => {
         // Get value from record snapshot or change data
         if (change.record_snapshot && change.record_snapshot[col] !== undefined) {
@@ -374,8 +381,8 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
           formatter: (cell) => {
             const rowData = cell.getRow().getData();
             return `<div class="flex items-center justify-center gap-1">
-                      <button class="expand-btn text-gray-400 hover:text-gray-600 transition-colors p-1 rounded hover:bg-gray-100" 
-                             data-row-id="${rowData.id}">
+                      <button class="expand-btn text-gray-400 hover:text-gray-600 transition-colors p-1 rounded hover:bg-gray-100"
+                             data-row-id="${rowData.rowId}">
                         <svg class="w-3 h-3 transition-transform" fill="currentColor" viewBox="0 0 20 20">
                           <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 5.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                         </svg>
@@ -441,7 +448,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
             const value = cell.getValue();
             const rowData = cell.getRow().getData();
             const change = rowData.change_data;
-            
+
             // Handle different operations with appropriate styling
             if (change.operation === 'UPDATE' && change.changes) {
               const columnChange = change.changes.find(c => c.column === col);
@@ -473,15 +480,15 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
       if (columnName.toLowerCase().includes('id') || columnName.toLowerCase().includes('uuid')) {
         return 'string';
       }
-      
+
       // Timestamp columns - use string sorting to avoid Luxon dependency
-      if (columnName.toLowerCase().includes('time') || 
+      if (columnName.toLowerCase().includes('time') ||
           columnName.toLowerCase().includes('date') ||
           columnName.toLowerCase().includes('created') ||
           columnName.toLowerCase().includes('updated')) {
         return 'string';  // Changed from 'datetime' to 'string'
       }
-      
+
       // Numeric columns
       if (columnName.toLowerCase().includes('count') ||
           columnName.toLowerCase().includes('amount') ||
@@ -489,7 +496,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
           columnName.toLowerCase().includes('quantity')) {
         return 'number';
       }
-      
+
       // Default to alphanum for mixed content
       return 'alphanum';
     },
@@ -498,11 +505,11 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
     applyHeaderClasses(tableName) {
       const tabulator = this.tabulators[tableName];
       if (!tabulator) return;
-      
+
       const headers = tabulator.getHeaderElements();
       headers.forEach((header) => {
         const field = header.getAttribute('tabulator-field');
-        
+
         if (field === 'index') {
           header.classList.add('sticky-left-0');
         } else if (field === 'operation') {
@@ -517,10 +524,10 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
     applyRowClasses(tableName, row) {
       const element = row.getElement();
       const cells = element.querySelectorAll('.tabulator-cell');
-      
+
       cells.forEach((cell) => {
         const field = cell.getAttribute('tabulator-field');
-        
+
         if (field === 'index') {
           cell.classList.add('sticky-left-0');
         } else if (field === 'operation') {
@@ -535,7 +542,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
     customRowFormatter(row) {
       const rowData = row.getData();
       const element = row.getElement();
-      
+
       // Add classes based on operation
       const operation = rowData.operation;
       if (operation) {
@@ -546,7 +553,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
       element.addEventListener('mouseenter', () => {
         element.style.backgroundColor = '#f3f4f6';
       });
-      
+
       element.addEventListener('mouseleave', () => {
         element.style.backgroundColor = '';
       });
@@ -556,11 +563,11 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
     // Toggle row expansion
     toggleRowExpansion(rowId) {
       this.expandedRows[rowId] = !this.expandedRows[rowId];
-      
+
       // Find the row across all tabulator instances
       let targetRow = null;
       let foundInTable = null;
-      
+
       Object.keys(this.tabulators).forEach(tableName => {
         const tabulator = this.tabulators[tableName];
         if (tabulator && !targetRow) {
@@ -576,7 +583,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
             // Try searching through data if direct lookup fails
             try {
               const data = tabulator.getData();
-              const matchingData = data.find(d => d.id === rowId);
+              const matchingData = data.find(d => d.rowId === rowId);
               if (matchingData) {
                 targetRow = tabulator.getRow(rowId);
                 foundInTable = tableName;
@@ -587,7 +594,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
           }
         }
       });
-      
+
       if (targetRow) {
         if (this.expandedRows[rowId]) {
           this.showRowDetails(targetRow);
@@ -603,34 +610,34 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
     showRowDetails(row) {
       const rowData = row.getData();
       const element = row.getElement();
-      
-      
+
+
       // Check if detail row already exists
       const existingDetail = element.nextElementSibling;
       if (existingDetail && existingDetail.classList.contains('row-detail')) {
         return; // Already expanded
       }
-      
+
       // Create detail row as a proper table row
       const detailRow = document.createElement('tr');
       detailRow.className = 'row-detail bg-gray-50';
-      detailRow.setAttribute('data-parent-id', rowData.id);
-      
+      detailRow.setAttribute('data-parent-id', rowData.rowId);
+
       // Create full-width cell
       const detailCell = document.createElement('td');
       detailCell.colSpan = 1000; // Span all columns
       detailCell.className = 'p-0 border-t border-gray-200';
-      
+
       try {
         detailCell.innerHTML = this.generateExpandedContent(rowData);
         detailRow.appendChild(detailCell);
-        
+
         // Insert after the current row
         element.parentNode.insertBefore(detailRow, element.nextSibling);
-        
+
         // Update expand button
         this.updateExpandButton(element, true);
-        
+
         // Dynamically increase table height when expanded
         const tabulator = this.findTabulatorForRow(rowData.table_name);
         if (tabulator) {
@@ -641,26 +648,26 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
           }, 50);
         }
       } catch (error) {
-        console.error(`Error creating detail row for ${rowData.id}:`, error);
+        console.error(`Error creating detail row for ${rowData.rowId}:`, error);
       }
     },
 
-    // Hide row details  
+    // Hide row details
     hideRowDetails(row) {
       const element = row.getElement();
       const rowData = row.getData();
-      
-      
+
+
       // Find and remove the detail row
-      const detailRow = element.parentNode.querySelector(`tr.row-detail[data-parent-id="${rowData.id}"]`);
+      const detailRow = element.parentNode.querySelector(`tr.row-detail[data-parent-id="${rowData.rowId}"]`);
       if (detailRow) {
         detailRow.remove();
       } else {
       }
-      
+
       // Update expand button
       this.updateExpandButton(element, false);
-      
+
       // Shrink table height back when collapsed
       const tabulator = this.findTabulatorForRow(rowData.table_name);
       if (tabulator) {
@@ -685,12 +692,12 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
       }
     },
 
-    // Generate expanded content for a row - inline table format 
+    // Generate expanded content for a row - inline table format
     generateExpandedContent(rowData) {
       const change = rowData.change_data;
       const tableInfo = this.tableData[rowData.table_name];
       const columns = tableInfo ? tableInfo.columns : [];
-      
+
       // Create a table row that matches the column structure
       let content = `
         <div class="bg-gray-50 border-t border-gray-200">
@@ -710,21 +717,21 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
                       <div class="text-gray-500 mt-1">${rowData.table_name}</div>
                     </div>
       `;
-      
+
       if (change.operation === 'UPDATE' && change.changes) {
         content += `<div class="text-blue-600 font-medium">${change.changes.length} columns modified</div>`;
       }
-      
+
       if (change.record_snapshot && (change.record_snapshot.id || change.record_snapshot.uuid)) {
         const fullId = change.record_snapshot.id || change.record_snapshot.uuid;
         content += `<div class="text-gray-500 font-mono text-xs bg-gray-200 p-1 rounded truncate" title="${fullId}">ID: ${String(fullId).substring(0, 12)}...</div>`;
       }
-      
+
       content += `
                   </div>
                 </td>
       `;
-      
+
       // Add detail cells for each column that matches the table structure
       columns.forEach(col => {
         // Only show if column is visible in the main table
@@ -734,7 +741,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
               <div class="text-xs font-medium text-gray-600 mb-1">${col}</div>
               <div class="text-xs">
           `;
-          
+
           if (change.operation === 'UPDATE' && change.changes) {
             const columnChange = change.changes.find(c => c.column === col);
             if (columnChange) {
@@ -789,21 +796,21 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
               </div>
             `;
           }
-          
+
           content += `
               </div>
             </td>
           `;
         }
       });
-      
+
       content += `
               </tr>
             </tbody>
           </table>
         </div>
       `;
-      
+
       return content;
     },
 
@@ -812,7 +819,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
       if (value === null || value === undefined) {
         return '<span class="text-gray-400 italic">NULL</span>';
       }
-      
+
       if (typeof value === 'string' && this.isJsonValue(value)) {
         try {
           const parsed = JSON.parse(value);
@@ -821,7 +828,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
           return String(value);
         }
       }
-      
+
       return String(value);
     },
 
@@ -841,11 +848,11 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
       if (value === null || value === undefined) {
         return '<span class="text-gray-400">NULL</span>';
       }
-      
+
       if (typeof value === 'string' && value.length > 50) {
         return `<span title="${value}">${value.substring(0, 50)}...</span>`;
       }
-      
+
       return String(value);
     },
 
@@ -898,7 +905,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
     // Initialize column visibility state (per table)
     initializeColumnVisibility() {
       this.tableColumns = {};
-      
+
       Object.keys(this.tableData).forEach(tableName => {
         const tableInfo = this.tableData[tableName];
         if (tableInfo && tableInfo.columns) {
@@ -926,7 +933,7 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
       // Rebuild columns for this table
       const tableInfo = this.tableData[tableName];
       const newColumns = this.buildColumnsForTable(tableName, tableInfo);
-      
+
       // Update the tabulator columns
       tabulator.setColumns(newColumns);
     },
@@ -994,6 +1001,76 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
       });
     },
 
+    // Get available operations for filtering
+    getAvailableOperations() {
+      const operations = new Set();
+      Object.values(this.tableData).forEach(tableInfo => {
+        if (tableInfo.operations) {
+          Object.keys(tableInfo.operations).forEach(op => operations.add(op));
+        }
+      });
+      return Array.from(operations).sort();
+    },
+
+    // Get available tables for filtering
+    getAvailableTables() {
+      return Object.keys(this.tableData).sort();
+    },
+
+    // Select all tables
+    selectAllTables() {
+      this.filters.selectedTables = this.getAvailableTables();
+      this.applyFilters();
+    },
+
+    // Clear table filters
+    clearTableFilters() {
+      this.filters.selectedTables = [];
+      this.applyFilters();
+    },
+
+    // Clear all filters
+    clearAllFilters() {
+      this.filters = {
+        search: '',
+        operation: '',
+        table: '',
+        selectedTables: []
+      };
+      this.applyFilters();
+    },
+
+    // Get active filter count
+    getActiveFilterCount() {
+      let count = 0;
+      if (this.filters.search) count++;
+      if (this.filters.operation) count++;
+      if (this.filters.table) count++;
+      if (this.filters.selectedTables.length > 0) count++;
+      return count;
+    },
+
+    // Get filtered row count
+    getFilteredRowCount() {
+      let count = 0;
+      Object.values(this.tabulators).forEach(tabulator => {
+        if (tabulator) {
+          count += tabulator.getDataCount('active');
+        }
+      });
+      return count;
+    },
+
+    // Get total row count
+    getTotalRowCount() {
+      let count = 0;
+      Object.values(this.tabulators).forEach(tabulator => {
+        if (tabulator) {
+          count += tabulator.getDataCount();
+        }
+      });
+      return count;
+    },
 
     // Component cleanup
     componentDestroy() {
@@ -1005,4 +1082,4 @@ DBWatcher.registerComponent('changesTableHybrid', function(config) {
       this.tabulators = {};
     }
   };
-});
+});