dbdoc_engine 0.1.0

data/app/javascript/dbdoc_engine/controllers/column-type_controller.js

@@ -0,0 +1,149 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ 
+    "dataType", 
+    "length", 
+    "lengthSuggestion", 
+    "decimalPrecision",  // New target for decimal precision field
+    "decimalPrecisionContainer", // Container to show/hide
+    "columnNameInput", 
+    "destroyInput", 
+    "columnFields", 
+    "removeButton" 
+  ]
+  
+  // Flag to track if length has been manually set
+  manualLengthSet = false
+
+  // Types that need decimal precision
+  decimalTypes = ['real', 'double precision', 'numeric', 'decimal']
+
+  // PostgreSQL default lengths for specific data types
+  dataTypeLengths = {
+    'smallint': { default: 16, description: 'Suggested: 16-bit integer' },
+    'integer': { default: 32, description: 'Suggested: 32-bit integer' },
+    'bigint': { default: 64, description: 'Suggested: 64-bit integer' },
+    'numeric': { default: 10, description: 'Suggested: Default precision' },
+    'real': { default: 32, description: 'Suggested: 32-bit floating point' },
+    'double precision': { default: 64, description: 'Suggested: 64-bit floating point' },
+    'varchar': { default: 255, description: 'Suggested: Max length 255' },
+    'character': { default: 1, description: 'Suggested: Single character' },
+    'char': { default: 1, description: 'Suggested: Single character' },
+    'timestamp': { default: 6, description: 'Suggested: Timestamp precision' },
+    'timestamptz': { default: 6, description: 'Suggested: Timestamp with timezone precision' },
+    'time': { default: 6, description: 'Suggested: Time precision' },
+    'timetz': { default: 6, description: 'Suggested: Time with timezone precision' }
+  }
+
+  // Default decimal precisions
+  defaultDecimalPrecisions = {
+    'real': 6,
+    'double precision': 15,
+    'numeric': 2,
+    'decimal': 2
+  }
+
+  connect() {
+    // Only set the default length if this is a new field or the length is empty
+    if (!this.lengthTarget.value) {
+      this.updateLength()
+    }
+    
+    // Add event listener for data type changes
+    this.dataTypeTarget.addEventListener('change', this.handleDataTypeChange.bind(this))
+    
+    // Add event listener for manual length changes
+    this.lengthTarget.addEventListener('input', this.handleManualLengthChange.bind(this))
+    
+    // Initialize decimal precision field visibility
+    this.toggleDecimalPrecisionField()
+  }
+  
+  disconnect() {
+    // Remove event listeners when controller disconnects
+    this.dataTypeTarget.removeEventListener('change', this.handleDataTypeChange.bind(this))
+    this.lengthTarget.removeEventListener('input', this.handleManualLengthChange.bind(this))
+  }
+
+  handleDataTypeChange() {
+    // Only update length automatically if it hasn't been manually set
+    // or if the field is empty
+    if (!this.manualLengthSet || !this.lengthTarget.value) {
+      this.updateLength()
+    } else {
+      // Just update the suggestion text based on the data type
+      this.updateSuggestionOnly()
+    }
+    
+    // Toggle decimal precision field visibility
+    this.toggleDecimalPrecisionField()
+  }
+  
+  handleManualLengthChange() {
+    // If user typed something, mark as manually set
+    if (this.lengthTarget.value !== '') {
+      this.manualLengthSet = true
+      this.clearSuggestion()
+    } else {
+      // If field was cleared, reset the flag
+      this.manualLengthSet = false
+    }
+  }
+
+  updateLength() {
+    const selectedType = this.dataTypeTarget.value
+    
+    // Reset suggested length text
+    this.lengthSuggestionTarget.textContent = ''
+
+    // If the selected type has a default length
+    if (this.dataTypeLengths.hasOwnProperty(selectedType)) {
+      // Set a default value and show suggested length
+      this.lengthTarget.value = this.dataTypeLengths[selectedType].default
+      this.lengthSuggestionTarget.textContent = this.dataTypeLengths[selectedType].description
+    } else {
+      // Clear the value for types without specific length
+      this.lengthTarget.value = ''
+    }
+    
+    // Reset the manual flag when automatically setting length
+    this.manualLengthSet = false
+  }
+  
+  updateSuggestionOnly() {
+    const selectedType = this.dataTypeTarget.value
+    
+    // Only update the suggestion text, not the value
+    if (this.dataTypeLengths.hasOwnProperty(selectedType)) {
+      this.lengthSuggestionTarget.textContent = this.dataTypeLengths[selectedType].description
+    } else {
+      this.lengthSuggestionTarget.textContent = ''
+    }
+  }
+
+  clearSuggestion() {
+    this.lengthSuggestionTarget.textContent = ''
+  }
+  
+  toggleDecimalPrecisionField() {
+    const selectedType = this.dataTypeTarget.value
+    
+    // Check if this data type needs decimal precision
+    if (this.decimalTypes.includes(selectedType)) {
+      // Show the decimal precision field
+      this.decimalPrecisionContainerTarget.classList.remove('d-none')
+      
+      // Set default value if empty
+      if (!this.decimalPrecisionTarget.value && this.defaultDecimalPrecisions[selectedType]) {
+        this.decimalPrecisionTarget.value = this.defaultDecimalPrecisions[selectedType]
+      }
+    } else {
+      // Hide the decimal precision field
+      this.decimalPrecisionContainerTarget.classList.add('d-none')
+      
+      // Clear the value when not needed
+      this.decimalPrecisionTarget.value = ''
+    }
+  }
+}

data/app/javascript/dbdoc_engine/controllers/column_controller.js

@@ -0,0 +1,362 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Stimulus Controller for managing database columns in a table design interface
+ * Handles column addition, removal, foreign key relationships, dependency checks,
+ * and dynamic UI updates for column management
+ */
+export default class extends Controller {
+  static targets = ["columns", "destroyField", "searchInput"]
+
+  get adminPath() {
+    const match = window.location.pathname.match(/(.+?)\/admin/);
+    return match ? `${match[1]}/admin` : "/admin";
+  }
+
+  /**
+   * Lifecycle method called when the controller connects to the DOM
+   * Initializes existing foreign key relationships and checks dependencies
+   */
+  connect() {
+    // Initialize any existing foreign key checkboxes - show foreign key fields if checked
+    document.querySelectorAll('.foreign-key-checkbox').forEach(checkbox => {
+      if (checkbox.checked) {
+        this.showForeignKeyFields(checkbox);
+      }
+    });
+
+    // For existing foreign tables, load their columns
+    this.element.querySelectorAll('.foreign-table-dropdown').forEach(select => {
+      const selectedTable = select.dataset.columnExistingForeignTable;
+      if (selectedTable) {
+        this.loadColumns({ target: select }, true);
+      }
+    });
+
+    // Check column dependencies on page load to disable removal of referenced columns
+    this.checkAllColumnDependencies();
+  }
+
+  /**
+   * Filters the column list based on search input
+   * Shows/hides columns based on whether they match the search text
+   * 
+   * @param {Event} event - Input event from the search field
+   */
+  filterColumns(event) {
+    const searchText = event.target.value.toLowerCase().trim();
+    
+    this.columnsTarget.querySelectorAll('.column-fields').forEach(columnField => {
+      const columnNameInput = columnField.querySelector('[name*="[column_name]"]');
+      const columnName = columnNameInput ? columnNameInput.value.toLowerCase() : '';
+      
+      if (searchText === '' || columnName.includes(searchText)) {
+        // Show the column if it matches or search is empty
+        columnField.style.display = '';
+      } else {
+        // Hide the column if it doesn't match the search
+        columnField.style.display = 'none';
+      }
+    });
+  }
+
+  /**
+   * Checks dependencies for all columns in the table
+   * Disables remove buttons for columns that are referenced as foreign keys in other tables
+   */
+  checkAllColumnDependencies() {
+    document.querySelectorAll('.column-fields').forEach(columnField => {
+      const columnInput = columnField.querySelector('[name*="[column_name]"]');
+      const tableInput = document.querySelector('[name="db_design_dynamic_table[id]"]');
+      const removeButton = columnField.querySelector('button[data-action="column#remove"]');
+      
+      const columnName = columnInput ? columnInput.value.trim() : "";
+      const tableId = tableInput ? tableInput.value : null;
+
+      if (!columnName || !tableId) {
+        return;
+      }
+
+      this.checkColumnDependency(columnName, tableId, removeButton);
+    });
+  }
+
+  /**
+   * Checks if a specific column is referenced by foreign keys in other tables
+   * Disables the remove button if the column is referenced
+   * 
+   * @param {string} columnName - Name of the column to check
+   * @param {string|number} tableId - ID of the table containing the column
+   * @param {HTMLElement} removeButton - Button element for removing the column
+   */
+  checkColumnDependency(columnName, tableId, removeButton) {
+    fetch(`${this.adminPath}/db_design_dynamic_tables/check_column_dependency?column_name=${columnName}&table_id=${tableId}`)
+      .then(response => response.json())
+      .then(data => {
+        if (data.is_referenced) {
+          removeButton.disabled = true;
+          removeButton.classList.replace('btn-danger', 'btn-secondary');
+          removeButton.setAttribute('title', `Cannot delete column '${columnName}' because it is referenced as a foreign key in another table.`);
+        }
+      })
+      .catch(error => {
+        console.error("Error checking column dependencies:", error);
+      });
+  }
+
+  /**
+   * Adds a new column to the table by fetching the column template HTML
+   * Inserts the new column at the beginning of the columns container
+   * 
+   * @param {Event} event - Click event from the add column button
+   */
+  add(event) {
+    event.preventDefault();
+    
+    // Get current locale from URL or document
+    const currentLocale = new URLSearchParams(window.location.search).get('locale') || 
+                          document.documentElement.lang || 'en';
+    
+    // Add locale to the fetch URL
+    fetch(`${this.adminPath}/db_design_dynamic_tables/render_column_fields?locale=${currentLocale}`)
+      .then(response => response.text())
+      .then(html => {
+        // Insert the new column at the beginning of the columns container
+        this.columnsTarget.insertAdjacentHTML('afterbegin', html);
+        
+        // Find the newly added column
+        const newColumn = this.columnsTarget.firstElementChild;
+        
+        // For the new column, we want to expand it on initial add
+        // All existing columns remain collapsed
+        if (typeof bootstrap !== 'undefined' && bootstrap.Collapse) {
+          // Find the collapse element in the new column
+          const collapseElement = newColumn.querySelector('.accordion-collapse');
+          if (collapseElement) {
+            // Initialize and show the new column's accordion
+            const bsCollapse = new bootstrap.Collapse(collapseElement, {
+              toggle: false
+            });
+            bsCollapse.show();
+            
+            // Update the button state
+            const accordionButton = newColumn.querySelector('.accordion-button');
+            if (accordionButton) {
+              accordionButton.classList.remove('collapsed');
+              accordionButton.setAttribute('aria-expanded', 'true');
+            }
+          }
+        }
+        
+        // Scroll to the new column
+        newColumn.scrollIntoView({ behavior: 'smooth' });
+      });
+  }
+
+  /**
+   * Updates the accordion title with column metadata when column properties change
+   * Displays column name, data type, length, and badges for PK, FK, and NOT NULL constraints
+   * 
+   * @param {Event} event - Change event from column property fields
+   */
+  updateAccordionTitle(event) {
+    const columnField = event.target.closest('.column-fields');
+    const accordionButton = columnField.querySelector('.accordion-button');
+    
+    // Get values for the accordion header
+    const nameInput = columnField.querySelector('[name*="[column_name]"]');
+    const dataTypeSelect = columnField.querySelector('[name*="[data_type]"]');
+    const lengthInput = columnField.querySelector('[name*="[length]"]');
+    const isPrimaryKey = columnField.querySelector('[name*="[is_primary_key]"]').checked;
+    const isForeignKey = columnField.querySelector('[name*="[is_foreign_key]"]').checked;
+    const isNotNull = columnField.querySelector('[name*="[not_null]"]').checked;
+    
+    // Build the header content
+    let headerContent = '';
+    if (nameInput.value.trim()) {
+      headerContent = `<strong>${nameInput.value.trim()}</strong>`;
+      
+      if (dataTypeSelect.value) {
+        headerContent += `<span class="ms-2 text-muted">(${dataTypeSelect.value}`;
+        if (lengthInput.value && ['varchar', 'char', 'character'].includes(dataTypeSelect.value)) {
+          headerContent += `(${lengthInput.value})`;
+        }
+        headerContent += ')</span>';
+      }
+      
+      // Add badges for key constraints
+      if (isPrimaryKey) headerContent += '<span class="badge bg-primary ms-2">PK</span>';
+      if (isForeignKey) headerContent += '<span class="badge bg-info ms-2">FK</span>';
+      if (isNotNull) headerContent += '<span class="badge bg-warning ms-2">NOT NULL</span>';
+    } else {
+      headerContent = '<em>New Column</em>';
+    }
+    
+    accordionButton.innerHTML = headerContent;
+  }
+
+  /**
+   * Handles column removal after checking for dependencies
+   * Prevents removal of columns that are referenced by foreign keys in other tables
+   * 
+   * @param {Event} event - Click event from the remove column button
+   */
+  remove(event) {
+    event.preventDefault();
+    const columnField = event.target.closest('.column-fields');
+    
+    // Get table ID from data attribute
+    const tableId = columnField.dataset.tableId;
+    
+    // Get column name
+    const columnInput = columnField.querySelector('[name*="[column_name]"]');
+    const columnName = columnInput ? columnInput.value.trim() : "";
+    if (!columnName || !tableId) {
+        console.error("Missing column name or table ID");
+        this.markForRemoval(columnField, true);
+        return;
+    }
+
+    // Check if the column can be safely removed
+    fetch(`${this.adminPath}/db_design_dynamic_tables/check_column_dependency?column_name=${columnName}&table_id=${tableId}`)
+        .then(response => response.json())
+        .then(data => {
+            if (data.is_referenced) {
+                Swal.fire({
+                    icon: "error",
+                    title: "Cannot Delete",
+                    text: `Column '${columnName}' is referenced as a foreign key in another table.`,
+                    confirmButtonColor: "#364380"
+                });
+            } else {
+                this.markForRemoval(columnField, true);
+            }
+        })
+        .catch(error => {
+            console.error("Error checking column dependencies:", error);
+            Swal.fire({
+                icon: "warning",
+                title: "Dependency Check Failed",
+                text: "Error checking column dependencies. Please try again.",
+                confirmButtonColor: "#364380"
+            });
+        });
+  }
+
+  /**
+   * Marks a column for removal by setting the _destroy field to 1
+   * For existing columns, this flags them for deletion on form submission
+   * For new columns, they are immediately removed from the DOM
+   * 
+   * @param {HTMLElement} columnField - The column container element
+   * @param {boolean} allowDeletion - Whether deletion is allowed
+   */
+  markForRemoval(columnField, allowDeletion) {
+    if (!allowDeletion) return;
+
+    const destroyInput = columnField.querySelector('[data-column-target="destroyField"]');
+    if (destroyInput) {
+        // For existing columns, set _destroy=1 to mark for deletion and hide the column
+        destroyInput.value = "1";
+        columnField.style.display = "none";
+    } else {
+        // For new columns that haven't been saved yet, just remove from DOM
+        columnField.remove();
+    }
+  }
+  
+  /**
+   * Toggles the visibility of foreign key fields based on checkbox state
+   * 
+   * @param {Event} event - Change event from the foreign key checkbox
+   */
+  toggleForeignKeyFields(event) {
+    const checkbox = event.target;
+    if (checkbox.checked) {
+      this.showForeignKeyFields(checkbox);
+    } else {
+      this.hideForeignKeyFields(checkbox);
+    }
+  }
+
+  /**
+   * Shows the foreign key fields when foreign key checkbox is checked
+   * 
+   * @param {HTMLElement} checkbox - The foreign key checkbox element
+   */
+  showForeignKeyFields(checkbox) {
+    const columnField = checkbox.closest('.column-fields');
+    const foreignKeyFields = columnField.querySelector('.foreign-key-fields');
+    if (foreignKeyFields) {
+      foreignKeyFields.classList.remove('hidden'); // Remove hidden class
+    }
+  }
+
+  /**
+   * Hides the foreign key fields when foreign key checkbox is unchecked
+   * 
+   * @param {HTMLElement} checkbox - The foreign key checkbox element
+   */
+  hideForeignKeyFields(checkbox) {
+    const columnField = checkbox.closest('.column-fields');
+    const foreignKeyFields = columnField.querySelector('.foreign-key-fields');
+    if (foreignKeyFields) {
+      foreignKeyFields.classList.add('hidden'); // Add hidden class
+    }
+  }
+
+  /**
+   * Loads available columns from a selected referenced table for foreign key selection
+   * Populates the column dropdown with columns from the selected table
+   * 
+   * @param {Event} event - Change event from the table dropdown
+   * @param {boolean} isInitialLoad - Whether this is the initial load (to select existing values)
+   */
+  loadColumns(event, isInitialLoad = false) {
+    const tableSelect = event.target;
+    const columnField = tableSelect.closest('.column-fields');
+    const columnSelect = columnField.querySelector('.foreign-column-dropdown');
+    const tableName = tableSelect.value; // Using table name instead of ID
+    const existingColumn = tableSelect.dataset.columnExistingForeignColumn;
+    
+    // Get the select-search controller for the column dropdown
+    const selectSearchController = window.Stimulus.getControllerForElementAndIdentifier(
+      columnSelect.closest('[data-controller="select-search"]'),
+      'select-search'
+    );
+  
+    if (tableName) {
+      // Fetch columns for the selected table
+      fetch(`${this.adminPath}/db_design_dynamic_tables/columns?table_name=${encodeURIComponent(tableName)}`)
+        .then(response => response.json())
+        .then(columns => {
+          // Reset and populate the column dropdown
+          columnSelect.innerHTML = '<option value="">Select Column</option>';
+          columns.forEach(column => {
+            const option = document.createElement('option');
+            option.value = column.column_name;
+            option.textContent = column.column_name;
+            // Select the existing column if initializing
+            if (isInitialLoad && column.column_name === existingColumn) {
+              option.selected = true;
+            }
+            columnSelect.appendChild(option);
+          });
+            
+          // Refresh the select-search to capture the new options
+          if (selectSearchController) {
+            selectSearchController.refreshOptions();
+          }
+        })
+        .catch(error => console.error("Error fetching columns:", error));
+    } else {
+      // Reset column dropdown if no table selected
+      columnSelect.innerHTML = '<option value="">Select Column</option>';
+      
+      // Refresh the select-search
+      if (selectSearchController) {
+        selectSearchController.refreshOptions();
+      }
+    }
+  }
+}

data/app/javascript/dbdoc_engine/controllers/column_search_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    // Store all table rows for quick access
+    this.tableRows = document.querySelectorAll('table tbody tr');
+  }
+  
+  filter() {
+    const query = this.element.value.toLowerCase().trim();
+    
+    // If search is empty, show all rows
+    if (!query) {
+      this.tableRows.forEach(row => {
+        row.style.display = '';
+      });
+      return;
+    }
+    
+    // Filter rows based on search query
+    this.tableRows.forEach(row => {
+      const columnName = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
+      const physicalName = row.querySelector('td:nth-child(3)').textContent.toLowerCase();
+      const dataType = row.querySelector('td:nth-child(4)').textContent.toLowerCase();
+      const constraints = row.querySelector('td:nth-child(5)').textContent.toLowerCase();
+      const defaultValue = row.querySelector('td:nth-child(6)').textContent.toLowerCase();
+      const description = row.querySelector('td:nth-child(7)').textContent.toLowerCase();
+      
+      // Show row if any field contains the query
+      if (columnName.includes(query) || 
+          physicalName.includes(query) || 
+          dataType.includes(query) ||
+          constraints.includes(query) ||
+          defaultValue.includes(query) ||
+          description.includes(query)) {
+        row.style.display = '';
+      } else {
+        row.style.display = 'none';
+      }
+    });
+  }
+}

data/app/javascript/dbdoc_engine/controllers/dbdoc_accordion_controller.js

@@ -0,0 +1,42 @@
+// app/javascript/controllers/dbdoc_accordion_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["button", "content"]
+
+  connect() {
+    this.ensureClosedState()
+  }
+
+  ensureClosedState() {
+    // Always start closed
+    this.contentTarget.classList.remove("show")
+    this.buttonTarget.setAttribute("aria-expanded", "false")
+    this.buttonTarget.classList.add("collapsed")
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const isCurrentlyOpen = this.contentTarget.classList.contains("show")
+    
+    if (isCurrentlyOpen) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    this.contentTarget.classList.add("show")
+    this.buttonTarget.setAttribute("aria-expanded", "true")
+    this.buttonTarget.classList.remove("collapsed")
+  }
+
+  close() {
+    this.contentTarget.classList.remove("show")
+    this.buttonTarget.setAttribute("aria-expanded", "false")
+    this.buttonTarget.classList.add("collapsed")
+  }
+}

data/app/javascript/dbdoc_engine/controllers/ecommerce_controller.js

@@ -0,0 +1,73 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['groupContent', 'viewButton', 'tableGroups'];
+
+  connect() {
+    // Initialize clickable rows when the controller connects
+    this.initializeClickableRows();
+  }
+
+  /**
+   * Toggles the visibility of the group content when the view button is clicked.
+   * @param {Event} event - The click event triggered by the user.
+   */
+  toggleGroupContent(event) {
+    // Get the button that was clicked
+    const viewButton = event.currentTarget;
+    
+    // Find the closest group section to the clicked button
+    const groupSection = viewButton.closest('.group-section');
+    
+    // Find the associated group content using the Stimulus target
+    const groupContent = groupSection.querySelector('[data-ecommerce-target="groupContent"]');
+    
+    // Toggle the 'active' class on the view button
+    viewButton.classList.toggle('active');
+    
+    // Toggle the visibility of the group content based on the button state
+    if (viewButton.classList.contains('active')) {
+      groupContent.classList.add('active');
+    } else {
+      groupContent.classList.remove('active');
+    }
+    
+    // Prevent the event from bubbling up to the header
+    event.stopPropagation();
+  }
+  
+  /**
+   * Toggles the group content when the header is clicked
+   * @param {Event} event - The click event triggered by the user.
+   */
+  toggleGroupContentHeader(event) {
+    // Find the closest group section to the clicked header
+    const groupSection = event.currentTarget.closest('.group-section');
+    
+    // Find the view button and group content
+    const viewButton = groupSection.querySelector('[data-ecommerce-target="viewButton"]');
+    const groupContent = groupSection.querySelector('[data-ecommerce-target="groupContent"]');
+    
+    // Toggle the 'active' class on the view button
+    viewButton.classList.toggle('active');
+    
+    // Toggle the visibility of the group content based on the button state
+    if (viewButton.classList.contains('active')) {
+      groupContent.classList.add('active');
+    } else {
+      groupContent.classList.remove('active');
+    }
+  }
+  
+  /**
+   * Initialize clickable table rows
+   */
+  initializeClickableRows() {
+    document.addEventListener('click', (event) => {
+      const row = event.target.closest('.group-table-row');
+      if (row && row.dataset.tableLink && !event.target.closest('.table-link')) {
+        window.location.href = row.dataset.tableLink;
+      }
+    });
+  }
+}