dbdoc_engine 0.1.0

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

@@ -0,0 +1,245 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Table Details Controller
+ * Handles the interaction for the table details page including field toggling,
+ * navigation between tables and groups, and type description tooltips.
+ */
+export default class extends Controller {
+  // Define controller targets
+  static targets = ['fieldsToggle', 'fieldsContent', 'infoIcon'];
+  
+  connect() {
+    // Initialize tooltips if Bootstrap is available
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+      this.initTooltips();
+    }
+    
+    // Add click event listener to document to close tooltips
+    document.addEventListener('click', this.handleDocumentClick.bind(this));
+
+    this.setConstraintTooltips();
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+      this.initTooltips();
+      this.initConstraintBadgeTooltips();
+    }
+    document.addEventListener('click', this.handleDocumentClick.bind(this));
+  }
+  
+  initConstraintBadgeTooltips() {
+    document.querySelectorAll('.constraint-badge').forEach(badge => {
+      new bootstrap.Tooltip(badge);
+    });
+  }
+
+  /**
+   * Toggles the visibility of the fields content section
+   * @param {Event} event - The click event from the toggle button
+   */
+  toggleFields(event) {
+    const viewButton = event.currentTarget;
+    // Find the closest .group-section (or .main-content-body if that's your outer div)
+    const groupSection = viewButton.closest('.main-content-body, .group-section');
+    if (!groupSection) return;
+  
+    // Find the .group-content inside this section
+    const fieldsContent = groupSection.querySelector('.group-content');
+    if (!fieldsContent) return;
+  
+    // Toggle active class on view button
+    viewButton.classList.toggle('active');
+  
+    // Toggle visibility of fields content based on button state
+    if (viewButton.classList.contains('active')) {
+      fieldsContent.classList.add('active');
+    } else {
+      fieldsContent.classList.remove('active');
+    }
+  
+    event.stopPropagation();
+  }  
+
+  /**
+   * Toggles the fields content when the header is clicked
+   * @param {Event} event - The click event triggered by the user.
+   */
+  toggleFieldsHeader(event) {
+    // Find the header that was clicked
+    const header = event.currentTarget;
+    // Find the closest section (div with .main-content-body or .group-section)
+    const section = header.closest('.main-content-body, .group-section');
+    if (!section) return;
+  
+    // Find the view button and group-content inside this section
+    const viewButton = section.querySelector('.view-button');
+    const fieldsContent = section.querySelector('.group-content');
+    if (!viewButton || !fieldsContent) return;
+  
+    // Toggle active class on view button
+    viewButton.classList.toggle('active');
+    // Toggle content
+    if (viewButton.classList.contains('active')) {
+      fieldsContent.classList.add('active');
+    } else {
+      fieldsContent.classList.remove('active');
+    }
+  }  
+
+  // Initialize tooltips for info icons
+  initTooltips() {
+    this.infoIconTargets.forEach(icon => {
+      const type = icon.dataset.type;
+      const description = this.getTypeDescription(type);
+      
+      const tooltipContent = `
+  <div class="type-tooltip-content">
+    <div class="type-tooltip-heading">${type}</div>
+    <div class="type-tooltip-desc">${description.en}</div>
+    <div class="type-tooltip-desc">${description.ja}</div>
+  </div>
+`;
+      
+      icon.setAttribute('title', tooltipContent);
+      
+      new bootstrap.Tooltip(icon, {
+        html: true,
+        trigger: 'manual',
+        placement: 'right',
+        customClass: 'custom-tooltip', // Bootstrap 5.2+ supports this
+        template: `
+          <div class="tooltip custom-tooltip" role="tooltip">
+            <div class="tooltip-arrow"></div>
+            <div class="tooltip-inner"></div>
+          </div>
+        `
+      });
+    });
+  }
+
+  // Toggle tooltip on info icon click
+  toggleTooltip(event) {
+    const icon = event.currentTarget;
+    const tooltip = bootstrap.Tooltip.getInstance(icon);
+    if (!tooltip) return;
+    
+    // Hide all other tooltips
+    this.infoIconTargets.forEach(otherIcon => {
+      if (otherIcon !== icon) {
+        const otherTooltip = bootstrap.Tooltip.getInstance(otherIcon);
+        if (otherTooltip) otherTooltip.hide();
+      }
+    });
+    
+    tooltip.toggle();
+    event.stopPropagation();
+  }
+
+  // Handle document clicks to close tooltips
+  handleDocumentClick(event) {
+    if (!event.target.classList.contains('info-icon')) {
+      this.infoIconTargets.forEach(icon => {
+        const tooltip = bootstrap.Tooltip.getInstance(icon);
+        if (tooltip) tooltip.hide();
+      });
+    }
+  }
+
+  // Get type description from existing data
+  getTypeDescription(type) {
+    const typeDescriptions = {
+      integer: { en: 'A whole number (e.g., 1, 2, 3).', ja: '整数（例：1、2、3）。' },
+      smallint: { en: 'A smaller range of whole numbers.', ja: '小さな範囲の整数。' },
+      bigint: { en: 'A larger range of whole numbers.', ja: '大きな範囲の整数。' },
+      numeric: { en: 'A number with precision and scale.', ja: '精度とスケールを持つ数値。' },
+      real: { en: 'A single-precision floating-point number.', ja: '単精度浮動小数点数。' },
+      double_precision: { en: 'A double-precision floating-point number.', ja: '倍精度浮動小数点数。' },
+      varchar: { en: 'A variable-length string of characters.', ja: '可変長の文字列。' },
+      character: { en: 'A fixed-length string of characters.', ja: '固定長の文字列。' },
+      text: { en: 'A long string of characters.', ja: '長い文字列。' },
+      char: { en: 'A single character.', ja: '単一の文字。' },
+      boolean: { en: 'A true or false value.', ja: '真または偽の値。' },
+      date: { en: 'A calendar date (e.g., YYYY-MM-DD).', ja: 'カレンダーの日付（例：YYYY-MM-DD）。' },
+      timestamp: { en: 'A precise point in time (e.g., YYYY-MM-DD HH:mm:ss).', ja: '正確な時点（例：YYYY-MM-DD HH:mm:ss）。' },
+      timestamptz: { en: 'A timestamp with time zone information.', ja: 'タイムゾーン情報を含むタイムスタンプ。' },
+      time: { en: 'A time without date information.', ja: '日付情報を含まない時間。' },
+      timetz: { en: 'A time with time zone information.', ja: 'タイムゾーン情報を含む時間。' },
+      interval: { en: 'A duration of time.', ja: '時間の期間。' },
+      uuid: { en: 'A universally unique identifier.', ja: 'ユニバーサル一意識別子。' }
+    };
+
+    return typeDescriptions[type] || { en: 'Description not available.', ja: '説明がありません。' };
+  }
+
+  /**
+   * Navigates back to the main ecommerce page
+   * Used for breadcrumb navigation
+   */
+  navigateToEcommerce() {
+    window.location.href = '/dbdoc/';
+  }
+
+  /**
+   * Navigates to a specific group details page
+   * @param {Event} event - The click event containing the group ID
+   */
+  navigateToGroup(event) {
+    const groupId = event.currentTarget.dataset.groupId;
+    if (groupId) {
+      window.location.href = '/dbdoc/group_details/' + groupId;
+    }
+  }
+
+  // Clean up when controller disconnects
+  disconnect() {
+    document.removeEventListener('click', this.handleDocumentClick.bind(this));
+    
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+      this.infoIconTargets.forEach(icon => {
+        const tooltip = bootstrap.Tooltip.getInstance(icon);
+        if (tooltip) tooltip.dispose();
+      });
+    }
+  }
+  setConstraintTooltips() {
+    // Simple, short explanations (EN/JA)
+    const badgeTexts = {
+      'NOT_NULL': {
+        en: "This column cannot be empty.",
+        ja: "このカラムは必ず値が必要です。"
+      },
+      'FK': {
+        en: "Links to another table (foreign key).",
+        ja: "他のテーブルへの参照（外部キー）。"
+      },
+      'PK': {
+        en: "Uniquely identifies each row (primary key).",
+        ja: "各行を一意に識別する主キー。"
+      },
+      'CANDIDATE': {
+        en: "Can uniquely identify rows (candidate key).",
+        ja: "行を一意に識別できる候補キー。"
+      },
+      'INDEXED': {
+        en: "Speeds up searches (indexed column).",
+        ja: "検索を高速化するインデックス付きカラム。"
+      }
+    };
+    // Detect current locale
+    let locale = document.documentElement.lang || document.body.dataset.locale || 'en';
+    document.querySelectorAll('.constraint-badge').forEach(badge => {
+      const key = badge.getAttribute('data-badge');
+      if (badgeTexts[key]) {
+        badge.setAttribute('data-tooltip',
+          badgeTexts[key].en + "\n" + badgeTexts[key].ja
+        );
+      }
+      // Remove any previous inner arrow
+      const prev = badge.querySelector('.tooltip-arrow-inner');
+      if (prev) prev.remove();
+      // Add inner arrow element
+      const arrow = document.createElement('span');
+      arrow.className = 'tooltip-arrow-inner';
+      badge.appendChild(arrow);
+    });
+  }  
+}

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

@@ -0,0 +1,148 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["groupName", "groupColor", "createdBy", "updatedBy"]
+  
+  // Optional: array to store existing group names for uniqueness check
+  existingGroupNames = []
+
+  connect() {
+    // Fetch existing group names when the controller connects
+    // this.fetchExistingGroupNames()
+    
+    // If creating a new record (both targets exist), set up the event listener to copy values
+    if (this.hasCreatedByTarget && this.hasUpdatedByTarget) {
+      this.createdByTarget.addEventListener('input', this.copyCreatedByToUpdatedBy.bind(this))
+    }
+  }
+  
+  // Copy the created_by value to updated_by field
+  copyCreatedByToUpdatedBy() {
+    this.updatedByTarget.value = this.createdByTarget.value
+  }
+
+  // Fetch existing group names from the server
+  async fetchExistingGroupNames() {
+    try {
+      const tableGroupId = this.element.dataset.tableGroupId || ""; // Get the group ID (empty if creating)
+      const response = await fetch(`/admin/db_design_table_groups/existing_names?id=${tableGroupId}`);
+  
+      if (response.ok) {
+        this.existingGroupNames = await response.json();
+      }
+    } catch (error) {
+      console.error("Error fetching existing group names:", error);
+    }
+  }
+  
+  async validate(event) {
+    event.preventDefault(); // Prevent submission unless valid
+  
+    let isValid = true;
+    this.clearErrors(); // Reset previous errors
+  
+    // Ensure we have the latest existing group names before validation
+    await this.fetchExistingGroupNames();
+  
+    // Validate group name
+    const groupName = this.groupNameTarget.value.trim();
+    if (!groupName) {
+      this.showError(this.groupNameTarget, "group_name_required");
+      isValid = false;
+    } else if (this.isGroupNameTaken(groupName)) {
+      this.showError(this.groupNameTarget, "group_name_unique");
+      isValid = false;
+    }
+    
+    // For new records: validate created_by and automatically copy to updated_by
+    if (this.hasCreatedByTarget) {
+      const createdBy = this.createdByTarget.value.trim();
+      if (!createdBy) {
+        this.showError(this.createdByTarget, "created_by_required");
+        isValid = false;
+      } else if (this.hasUpdatedByTarget) {
+        // Ensure updated_by has the same value as created_by before submitting
+        this.updatedByTarget.value = createdBy;
+      }
+    }
+    
+    // For editing existing records: validate updated_by
+    if (this.hasUpdatedByTarget && !this.hasCreatedByTarget) {
+      const updatedBy = this.updatedByTarget.value.trim();
+      if (!updatedBy) {
+        this.showError(this.updatedByTarget, "updated_by_required");
+        isValid = false;
+      }
+    }
+
+    // Validate group color
+    const groupColor = this.groupColorTarget.value.trim();
+    if (!groupColor) {
+      this.showError(this.groupColorTarget, "group_color_required");
+      isValid = false;
+    }
+  
+    if (isValid) {
+      event.target.submit(); // Only submit if valid
+    }
+  }
+
+  // Check if group name already exists
+  isGroupNameTaken(name) {
+    // Get the current table group ID (if editing)
+    const currentId = this.element.dataset.tableGroupId;
+    
+    // If we're editing an existing record and the name hasn't changed,
+    // it's not considered "taken"
+    if (currentId) {
+      const currentName = this.element.dataset.originalGroupName;
+      if (currentName && currentName.toLowerCase() === name.toLowerCase()) {
+        return false;
+      }
+    }
+    
+    return this.existingGroupNames.some(
+      existingName => existingName.toLowerCase() === name.toLowerCase()
+    );
+  }
+
+  showError(element, messageKey) {
+    if (!element) return;
+
+    // Add 'is-invalid' class to input field
+    element.classList.add('is-invalid');
+
+    // Get translated message from the hidden translations div
+    const translatedMessage = this.getTranslation(messageKey);
+
+    // Check if error message already exists
+    let errorElement = element.nextElementSibling;
+    if (!errorElement || !errorElement.classList.contains('invalid-feedback')) {
+      errorElement = document.createElement('div');
+      errorElement.classList.add('invalid-feedback', 'd-block');
+      element.parentNode.appendChild(errorElement);
+    }
+
+    // Set error message
+    errorElement.textContent = translatedMessage;
+  }
+
+  getTranslation(key) {
+    // Use the global Translations object
+    if (window.Translations && window.Translations[key]) {
+      return window.Translations[key];
+    }
+    return key;
+  }
+
+  clearErrors() {
+    // Remove 'is-invalid' class and error messages
+    this.element.querySelectorAll('.is-invalid').forEach(el => {
+      el.classList.remove('is-invalid');
+      const errorEl = el.nextElementSibling;
+      if (errorEl && errorEl.classList.contains('invalid-feedback')) {
+        errorEl.remove();
+      }
+    });
+  }
+}