dbwatcher 1.0.0 → 1.1.0

data/app/assets/javascripts/dbwatcher/core/alpine_store.js

@@ -0,0 +1,138 @@
+// Alpine.js Global Store for DBWatcher
+// Provides centralized state management for sessions UI
+
+document.addEventListener('alpine:init', () => {
+  Alpine.store('dbwatcher', {
+    // Session state
+    currentSession: null,
+    sessions: [],
+
+    // UI state
+    activeTab: 'changes',
+    loading: false,
+    error: null,
+
+    // Cache for API responses
+    cache: {
+      changes: new Map(),
+      summary: new Map(),
+      diagrams: new Map()
+    },
+
+    // Cache TTL in milliseconds (5 minutes)
+    cacheTtl: 5 * 60 * 1000,
+
+    // Initialize store
+    init() {
+      console.log('DBWatcher Alpine store initialized');
+    },
+
+    // Session management
+    setCurrentSession(session) {
+      this.currentSession = session;
+    },
+
+    // Tab navigation
+    setActiveTab(tab) {
+      this.activeTab = tab;
+      this.updateUrl(tab);
+    },
+
+    updateUrl(tab) {
+      if (typeof window !== 'undefined') {
+        const url = new URL(window.location);
+        url.searchParams.set('tab', tab);
+        window.history.pushState({}, '', url);
+      }
+    },
+
+    // Cache management
+    getCacheKey(type, sessionId, params = {}) {
+      const paramString = Object.keys(params)
+        .sort()
+        .map(key => `${key}=${params[key]}`)
+        .join('&');
+      return `${type}_${sessionId}_${paramString}`;
+    },
+
+    setCache(type, key, data) {
+      this.cache[type].set(key, {
+        data: data,
+        timestamp: Date.now()
+      });
+    },
+
+    getCache(type, key) {
+      const cached = this.cache[type].get(key);
+      if (!cached) return null;
+
+      // Check if cache is still valid
+      if (Date.now() - cached.timestamp > this.cacheTtl) {
+        this.cache[type].delete(key);
+        return null;
+      }
+
+      return cached.data;
+    },
+
+    clearCache(type = null) {
+      if (type) {
+        this.cache[type].clear();
+      } else {
+        Object.keys(this.cache).forEach(key => {
+          this.cache[key].clear();
+        });
+      }
+    },
+
+    // Error handling
+    setError(error) {
+      this.error = error;
+      console.error('DBWatcher error:', error);
+    },
+
+    clearError() {
+      this.error = null;
+    },
+
+    // Loading state
+    setLoading(loading) {
+      this.loading = loading;
+    }
+  });
+});
+
+// Session navigation component
+function sessionNavigation(sessionId) {
+  return {
+    sessionId: sessionId,
+
+    init() {
+      // Set current session in store
+      Alpine.store('dbwatcher').setCurrentSession({ id: this.sessionId });
+
+      // Handle browser navigation
+      window.addEventListener('popstate', () => {
+        const params = new URLSearchParams(window.location.search);
+        const tab = params.get('tab') || 'changes';
+        Alpine.store('dbwatcher').setActiveTab(tab);
+      });
+    },
+
+    navigateToTab(tab) {
+      Alpine.store('dbwatcher').setActiveTab(tab);
+    },
+
+    get activeTab() {
+      return Alpine.store('dbwatcher').activeTab;
+    },
+
+    get loading() {
+      return Alpine.store('dbwatcher').loading;
+    },
+
+    get error() {
+      return Alpine.store('dbwatcher').error;
+    }
+  };
+}

data/app/assets/javascripts/dbwatcher/core/api_client.js

@@ -0,0 +1,162 @@
+/**
+ * API Client for DBWatcher
+ *
+ * Centralized API communication with error handling,
+ * authentication, and response processing.
+ */
+
+const ApiClient = {
+  // Base configuration
+  baseURL: '/dbwatcher/api/v1',
+  timeout: 30000,
+
+  // Default headers
+  defaultHeaders: {
+    'Content-Type': 'application/json',
+    'Accept': 'application/json',
+    'X-Requested-With': 'XMLHttpRequest'
+  },
+
+  // Add CSRF token if available
+  getHeaders(additionalHeaders = {}) {
+    const headers = { ...this.defaultHeaders, ...additionalHeaders };
+
+    // Add CSRF token for Rails
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+    if (csrfToken) {
+      headers['X-CSRF-Token'] = csrfToken;
+    }
+
+    return headers;
+  },
+
+  // Build full URL
+  buildURL(endpoint) {
+    if (endpoint.startsWith('http') || endpoint.startsWith('/')) {
+      return endpoint;
+    }
+
+    return `${this.baseURL}/${endpoint}`;
+  },
+
+  // Generic request method
+  async request(method, endpoint, options = {}) {
+    const {
+      body,
+      headers = {},
+      params = {},
+      timeout = this.timeout,
+      ...fetchOptions
+    } = options;
+
+    const url = new URL(this.buildURL(endpoint), window.location.origin);
+
+    // Add query parameters
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== null && value !== undefined) {
+        url.searchParams.append(key, value);
+      }
+    });
+
+    const config = {
+      method,
+      headers: this.getHeaders(headers),
+      ...fetchOptions
+    };
+
+    // Add body for non-GET requests
+    if (body && method !== 'GET') {
+      config.body = typeof body === 'string' ? body : JSON.stringify(body);
+    }
+
+    // Create timeout promise
+    const timeoutPromise = new Promise((_, reject) => {
+      setTimeout(() => reject(new Error('Request timeout')), timeout);
+    });
+
+    try {
+      const response = await Promise.race([
+        fetch(url, config),
+        timeoutPromise
+      ]);
+
+      return await this.handleResponse(response);
+    } catch (error) {
+      return this.handleError(error);
+    }
+  },
+
+  // Handle response processing
+  async handleResponse(response) {
+    if (!response.ok) {
+      const error = new Error(`HTTP error ${response.status}: ${response.statusText}`);
+      error.status = response.status;
+      error.statusText = response.statusText;
+
+      try {
+        error.data = await response.json();
+      } catch (e) {
+        error.data = null;
+      }
+
+      throw error;
+    }
+
+    // Handle different content types
+    const contentType = response.headers.get('content-type');
+
+    if (contentType?.includes('application/json')) {
+      return await response.json();
+    } else if (contentType?.includes('text/')) {
+      return await response.text();
+    } else {
+      return response;
+    }
+  },
+
+  // Handle errors consistently
+  handleError(error) {
+    if (error.name === 'AbortError') {
+      console.error('Request aborted');
+    }
+
+    if (error.message === 'Request timeout') {
+      console.error('Request timeout');
+    }
+
+    if (error.status) {
+      console.error(`HTTP error: ${error.status} ${error.statusText}`);
+    }
+
+    throw error;
+  },
+
+  // Convenience methods
+  get(endpoint, params = {}, options = {}) {
+    return this.request('GET', endpoint, { params, ...options });
+  },
+
+  post(endpoint, body = {}, options = {}) {
+    return this.request('POST', endpoint, { body, ...options });
+  },
+
+  put(endpoint, body = {}, options = {}) {
+    return this.request('PUT', endpoint, { body, ...options });
+  },
+
+  patch(endpoint, body = {}, options = {}) {
+    return this.request('PATCH', endpoint, { body, ...options });
+  },
+
+  delete(endpoint, options = {}) {
+    return this.request('DELETE', endpoint, options);
+  }
+};
+
+// Register with DBWatcher if available
+if (window.DBWatcher) {
+  window.DBWatcher.ApiClient = ApiClient;
+}
+
+// Make available globally
+window.ApiClient = ApiClient;

data/app/assets/javascripts/dbwatcher/core/component_loader.js

@@ -0,0 +1,70 @@
+/**
+ * DBWatcher Component Loader
+ * Handles component initialization and dependencies
+ */
+
+window.DBWatcher = window.DBWatcher || {};
+
+DBWatcher.ComponentLoader = {
+  // Track loaded components to prevent duplicates
+  loadedComponents: new Set(),
+
+  // Map of component dependencies
+  componentDependencies: {
+    'diagrams': ['mermaid_service'],
+    'changes_table': [],
+    'summary': []
+  },
+
+  // Load a component and its dependencies
+  async load(componentName) {
+    if (this.loadedComponents.has(componentName)) {
+      console.log(`Component ${componentName} already loaded`);
+      return true;
+    }
+
+    // Check for dependencies
+    const dependencies = this.componentDependencies[componentName] || [];
+
+    // Load dependencies first
+    for (const dependency of dependencies) {
+      await this.load(dependency);
+    }
+
+    // Mark as loaded
+    this.loadedComponents.add(componentName);
+    console.log(`Loaded component: ${componentName}`);
+    return true;
+  },
+
+  // Initialize the component system
+  init(config = {}) {
+    // Setup auto-loading for Alpine.js components
+    document.addEventListener('alpine:init', () => {
+      // Register loader directive for on-demand loading
+      window.Alpine.directive('dbcomponent', (el, { value, expression }, { evaluate }) => {
+        const componentName = evaluate(expression);
+        this.load(componentName).then(() => {
+          console.log(`Component ${componentName} loaded via directive`);
+        });
+      });
+
+      // Auto-load components from data attributes
+      document.querySelectorAll('[data-component]').forEach(el => {
+        const componentName = el.dataset.component;
+        if (componentName) {
+          this.load(componentName);
+        }
+      });
+    });
+
+    return this;
+  }
+};
+
+// Auto-init if DBWatcher is available
+if (window.DBWatcher && window.DBWatcher.init) {
+  document.addEventListener('DOMContentLoaded', () => {
+    DBWatcher.ComponentLoader.init();
+  });
+}

data/app/assets/javascripts/dbwatcher/core/component_registry.js

@@ -0,0 +1,94 @@
+/**
+ * DBWatcher Component Registry
+ * Centralized system for component registration, initialization, and lifecycle management
+ */
+
+// Component Registry - Single source of truth for all components
+window.DBWatcher = window.DBWatcher || {};
+DBWatcher.ComponentRegistry = {
+  // Component storage
+  _components: {},
+
+  // Default configuration that applies to all components
+  defaultConfig: {
+    debugMode: false
+  },
+
+  // Register a component
+  register(name, factory) {
+    if (!name || typeof name !== 'string') {
+      console.error('Component name must be a non-empty string');
+      return false;
+    }
+
+    if (typeof factory !== 'function') {
+      console.error(`Component factory for '${name}' must be a function`);
+      return false;
+    }
+
+    this._components[name] = factory;
+
+    // Also store in DBWatcher.components for backward compatibility
+    if (window.DBWatcher) {
+      window.DBWatcher.components = window.DBWatcher.components || {};
+      window.DBWatcher.components[name] = factory;
+    }
+
+    // Auto-register with Alpine if available
+    if (window.Alpine && window.Alpine.data) {
+      this._registerWithAlpine(name, factory);
+    }
+
+    return true;
+  },
+
+  // Get component factory by name
+  get(name) {
+    return this._components[name] || null;
+  },
+
+  // Initialize all components
+  initAll(globalConfig = {}) {
+    if (!window.Alpine) {
+      console.warn('Alpine.js not found, components will not be initialized');
+      return;
+    }
+
+    // Register all components with Alpine
+    Object.keys(this._components).forEach(name => {
+      this._registerWithAlpine(name, this._components[name], globalConfig);
+    });
+
+    console.log(`Initialized ${Object.keys(this._components).length} components`);
+  },
+
+  // Private: Register component with Alpine.js
+  _registerWithAlpine(name, factory, globalConfig = {}) {
+    // Safety check
+    if (!window.Alpine || !window.Alpine.data) return;
+
+    try {
+      // Create Alpine data function that wraps our component factory
+      window.Alpine.data(name, (config = {}) => {
+        // Merge global config, default config, and instance config
+        const mergedConfig = {
+          ...this.defaultConfig,
+          ...globalConfig,
+          ...config
+        };
+
+        // Create component instance
+        return factory(mergedConfig);
+      });
+
+      console.log(`✅ Registered ${name} with Alpine.js`);
+    } catch (error) {
+      console.error(`Failed to register ${name} with Alpine.js:`, error);
+    }
+  }
+};
+
+// Export for module systems
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = DBWatcher.ComponentRegistry;
+}

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

@@ -0,0 +1,120 @@
+/**
+ * DBWatcher - Main Entry Point
+ * Single entry point for the entire library with auto-binding functionality
+ * Version 2.0.0 - Optimized architecture
+ */
+window.DBWatcher = {
+  // Basic information
+  version: "2.0.0",
+  initialized: false,
+  debug: false,
+
+  // Dependencies and configuration
+  dependencies: {
+    required: ['alpine', 'alpine-collapse'],
+    optional: ['lodash', 'dateFns', 'mermaid', 'svgPanZoom']
+  },
+
+  // Component registry - will be initialized from core/component_registry.js
+  ComponentRegistry: null,
+
+  // Base Component - will be initialized from components/base.js
+  BaseComponent: null,
+
+  // Initialize the entire system
+  init(config = {}) {
+    if (this.initialized) {
+      console.warn('DBWatcher already initialized');
+      return this;
+    }
+
+    // Set debug mode
+    this.debug = config.debug || false;
+
+    // Validate dependencies
+    this._validateDependencies();
+
+    // Ensure critical parts are loaded
+    if (!this.ComponentRegistry) {
+      console.error('ComponentRegistry not loaded! Make sure core/component_registry.js is included before initialization.');
+      return this;
+    }
+
+    // Initialize component registry with global config
+    this.ComponentRegistry.initAll(config);
+
+    // Mark as initialized
+    this.initialized = true;
+    console.log(`DBWatcher ${this.version} initialized`);
+
+    // Setup auto-initialization for Alpine
+    document.addEventListener('alpine:initialized', () => {
+      console.log('Alpine.js initialized, binding components...');
+      this.ComponentRegistry.initAll(config);
+    });
+
+    return this;
+  },
+
+  // Shorthand for component registration
+  register(name, factory) {
+    if (this.ComponentRegistry) {
+      return this.ComponentRegistry.register(name, factory);
+    } else {
+      console.error('Cannot register component: ComponentRegistry not loaded');
+      return false;
+    }
+  },
+
+  // Validate that required dependencies are loaded
+  _validateDependencies() {
+    const missing = [];
+
+    // Check for Alpine.js
+    if (!window.Alpine) {
+      missing.push('Alpine.js');
+    } else if (!window.Alpine.directive('collapse')) {
+      missing.push('Alpine.js collapse plugin');
+    }
+
+    // Log warnings for missing dependencies
+    if (missing.length > 0) {
+      console.warn(`DBWatcher missing dependencies: ${missing.join(', ')}`);
+    }
+
+    return missing.length === 0;
+  },
+
+  // Create a new component instance
+  createComponent(name, config = {}) {
+    if (!this.ComponentRegistry) {
+      console.error('ComponentRegistry not loaded');
+      return null;
+    }
+
+    const factory = this.ComponentRegistry.get(name);
+    if (!factory) {
+      console.error(`Component '${name}' not registered`);
+      return null;
+    }
+
+    return factory(config);
+  },
+
+  // Register a component using the ComponentRegistry
+  register(name, factory) {
+    if (!this.ComponentRegistry) {
+      console.error('ComponentRegistry not loaded');
+      return false;
+    }
+    return this.ComponentRegistry.register(name, factory);
+  },
+
+  // Legacy support for old API
+  registerComponent(name, factory) {
+    return this.register(name, factory);
+  },
+
+  // Maintain compatibility with existing components
+  components: {}
+};