dbdoc_engine 0.1.0

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

@@ -0,0 +1,88 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['groupContent', 'viewButton'];
+
+  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-group-details-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-group-details-target="viewButton"]');
+    const groupContent = groupSection.querySelector('[data-group-details-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) => {
+      // Find the closest table row to the clicked element
+      const row = event.target.closest('.group-table-row');
+      
+      // If a row was found and the click wasn't on an existing link
+      if (row && !event.target.closest('.table-link')) {
+        // Find the link within the row
+        const link = row.querySelector('.table-link');
+        if (link) {
+          // Navigate to the link's href
+          window.location.href = link.getAttribute('href');
+        }
+      }
+    });
+  }
+
+  /**
+   * Navigates the user to the ecommerce homepage.
+   */
+  navigateToEcommerce() {
+    window.location.href = '/dbdoc/';
+  }
+}

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

@@ -0,0 +1,200 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["dropZone", "fileInput", "schemaDropZone", "schemaFileInput"];
+  static values = { basePath: String };
+
+  get adminPath() {
+    return `${this.basePathValue.split("?")[0].replace(/\/+$/, "")}/admin`;
+  }
+
+  export(event) {
+    event.preventDefault();
+    fetch(`${this.adminPath}/export_data.json`)
+      .then(r => r.json())
+      .then(data => {
+        const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "dbdoc_engine_export.json";
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+      })
+      .catch(() => this.showError("Export failed!"));
+  }
+
+  showImport(event) {
+    event.preventDefault();
+    if (!this.hasDropZoneTarget) return;
+    this.dropZoneTarget.style.display = "block";
+    document.addEventListener("click", this.handleDocumentClick);
+  }
+
+  handleDocumentClick = (e) => {
+    if (this.hasDropZoneTarget && this.dropZoneTarget.contains(e.target)) return;
+    if (e.target.closest('[data-action="click->import-export#showImport"]')) return;
+    if (this.hasDropZoneTarget) this.dropZoneTarget.style.display = "none";
+    document.removeEventListener("click", this.handleDocumentClick);
+  }
+
+  handleFileChange(event) {
+    if (event.target.files.length) this.handleImportFile(event.target.files[0]);
+  }
+
+  handleDrop(event) {
+    event.preventDefault();
+    if (this.hasDropZoneTarget) this.dropZoneTarget.style.borderColor = "#ccc";
+    if (event.dataTransfer.files.length) this.handleImportFile(event.dataTransfer.files[0]);
+  }
+
+  handleDragOver(event) {
+    event.preventDefault();
+    const zone = event.currentTarget;
+    zone.style.borderColor = "#0d6efd";
+  }
+
+  handleDragLeave(event) {
+    event.preventDefault();
+    const zone = event.currentTarget;
+    zone.style.borderColor = "#ccc";
+  }
+
+  handleImportFile(file) {
+    if (!file.name.endsWith(".json")) {
+      this.showWarning("Please select a valid JSON file.");
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      fetch(`${this.adminPath}/import_data`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-CSRF-Token": this.csrfToken },
+        body: e.target.result
+      })
+      .then(r => r.json())
+      .then(data => {
+        if (data.status === "ok") {
+          this.showSuccess("Import successful!").then(() => window.location.reload());
+        } else {
+          this.showError("Import failed: " + (data.error || "Unknown error"));
+        }
+      })
+      .catch(() => this.showError("Import failed!"));
+    };
+    reader.readAsText(file);
+  }
+
+  async importProjectSchema(event) {
+    event.preventDefault();
+
+    const confirmed = await this.showConfirm(
+      "Import Project Schema",
+      "This will replace all existing documentation with tables from this project's schema.rb. Continue?"
+    );
+    if (!confirmed) return;
+
+    fetch(`${this.adminPath}/import_schema?source=project`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", "X-CSRF-Token": this.csrfToken }
+    })
+    .then(r => r.json())
+    .then(data => {
+      if (data.status === "ok") {
+        this.showSuccess(`Schema import successful! ${data.tables_count} tables imported.`)
+          .then(() => window.location.reload());
+      } else {
+        this.showError("Schema import failed: " + (data.error || "Unknown error"));
+      }
+    })
+    .catch(() => this.showError("Schema import failed!"));
+  }
+
+  showSchemaUpload(event) {
+    event.preventDefault();
+    if (!this.hasSchemaDropZoneTarget) return;
+    this.schemaDropZoneTarget.style.display = "block";
+    document.addEventListener("click", this.handleSchemaDocumentClick);
+  }
+
+  handleSchemaDocumentClick = (e) => {
+    if (this.hasSchemaDropZoneTarget && this.schemaDropZoneTarget.contains(e.target)) return;
+    if (e.target.closest('[data-action="click->import-export#showSchemaUpload"]')) return;
+    if (this.hasSchemaDropZoneTarget) this.schemaDropZoneTarget.style.display = "none";
+    document.removeEventListener("click", this.handleSchemaDocumentClick);
+  }
+
+  handleSchemaFileChange(event) {
+    if (event.target.files.length) this.handleSchemaImportFile(event.target.files[0]);
+  }
+
+  handleSchemaDrop(event) {
+    event.preventDefault();
+    if (this.hasSchemaDropZoneTarget) this.schemaDropZoneTarget.style.borderColor = "#ccc";
+    if (event.dataTransfer.files.length) this.handleSchemaImportFile(event.dataTransfer.files[0]);
+  }
+
+  async handleSchemaImportFile(file) {
+    if (!file.name.endsWith(".rb")) {
+      this.showWarning("Please select a valid Ruby schema file (.rb).");
+      return;
+    }
+
+    const confirmed = await this.showConfirm(
+      "Import Schema File",
+      "This will replace all existing documentation with tables from the uploaded schema.rb. Continue?"
+    );
+    if (!confirmed) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      fetch(`${this.adminPath}/import_schema`, {
+        method: "POST",
+        headers: { "Content-Type": "text/plain", "X-CSRF-Token": this.csrfToken },
+        body: e.target.result
+      })
+      .then(r => r.json())
+      .then(data => {
+        if (data.status === "ok") {
+          this.showSuccess(`Schema import successful! ${data.tables_count} tables imported.`)
+            .then(() => window.location.reload());
+        } else {
+          this.showError("Schema import failed: " + (data.error || "Unknown error"));
+        }
+      })
+      .catch(() => this.showError("Schema import failed!"));
+    };
+    reader.readAsText(file);
+  }
+
+  get csrfToken() {
+    const meta = document.querySelector('meta[name="csrf-token"]');
+    return meta ? meta.content : "";
+  }
+
+  showSuccess(message) {
+    return Swal.fire({ icon: "success", title: "Success", text: message, confirmButtonColor: "#364380" });
+  }
+
+  showError(message) {
+    return Swal.fire({ icon: "error", title: "Error", text: message, confirmButtonColor: "#364380" });
+  }
+
+  showWarning(message) {
+    return Swal.fire({ icon: "warning", title: "Warning", text: message, confirmButtonColor: "#364380" });
+  }
+
+  showConfirm(title, text) {
+    return Swal.fire({
+      icon: "warning",
+      title: title,
+      text: text,
+      showCancelButton: true,
+      confirmButtonColor: "#364380",
+      cancelButtonColor: "#6c757d",
+      confirmButtonText: "Yes, proceed",
+      cancelButtonText: "Cancel"
+    }).then(result => result.isConfirmed);
+  }
+}

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

@@ -0,0 +1,9 @@
+import { dbdoc_engine } from "controllers/application";
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading";
+import ChartController from "./chart_controller"
+import DbdocAccordionController from "./dbdoc_accordion_controller"
+
+dbdoc_engine.register("chart", ChartController)
+dbdoc_engine.register("dbdoc-accordion", DbdocAccordionController)
+
+eagerLoadControllersFrom("controllers", dbdoc_engine);

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

@@ -0,0 +1,100 @@
+// app/javascript/controllers/language_controller.js
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['button'];
+
+  connect() {
+    this.updateButtonDisplay();
+    this.checkActiveButton();
+  }
+
+  toggleLanguage(event) {
+    event.preventDefault();
+    
+    // Get current locale from HTML lang attribute or body data attribute
+    const currentLocale = document.documentElement.lang || 
+                          document.body.dataset.locale ||
+                          'en';
+    
+    // Toggle between English and Japanese
+    const newLocale = currentLocale === 'ja' ? 'en' : 'ja';
+    
+    // Add locale to URL and redirect
+    const url = new URL(window.location.href);
+    url.searchParams.set('locale', newLocale);
+    
+    // Store in localStorage for immediate visual feedback before page reloads
+    localStorage.setItem('userLocale', newLocale);
+    
+    // Navigate to the new URL
+    window.location.href = url.toString();
+  }
+
+  /**
+   * Updates the language button display based on the current locale.
+   */
+  updateButtonDisplay() {
+    if (!this.hasButtonTarget) return;
+  
+    const currentLocale = document.documentElement.lang ||
+                          document.body.dataset.locale ||
+                          localStorage.getItem('userLocale') ||
+                          'en';
+  
+    // Set the flag image based on the current locale
+    if (currentLocale === 'ja') {
+      this.buttonTarget.innerHTML = '<img src="/dbdoc_engine_assets/images/japan_circle.png" alt="日本語" class="language-japan-flag">';
+      this.buttonTarget.title = '日本語'; 
+    } else {
+      this.buttonTarget.innerHTML = '<img src="/dbdoc_engine_assets/images/uk_circle_transparent.png" alt="English" class="language-flag">';
+      this.buttonTarget.title = 'English';
+    }
+  }
+
+  checkActiveButton() {
+    const navButtons = document.querySelectorAll('.nav-button');
+    
+    // Remove 'active' class from all navigation buttons
+    navButtons.forEach(button => {
+      button.classList.remove('active');
+    });
+  
+    // Get the current page path (without query parameters)
+    const currentPath = window.location.pathname;
+    
+    // Find the navigation buttons
+    const wikiButton = document.querySelector('.wiki-button');
+    const changelogButton = document.querySelector('.changelog-button');
+    const diagramButton = document.querySelector('.diagram-button');
+    
+    // Define routes where each button should be active
+    const wikiActiveRoutes = ['/dbdoc/', '/dbdoc/group_details', '/dbdoc/table_details'];
+    const changelogRoutes = ['/dbdoc/changelogs'];
+    const diagramRoutes = ['/dbdoc/schema_diagram'];
+    
+    // Check if the current path matches diagram routes first (highest priority)
+    const isDiagramActivePath = diagramRoutes.some(route => 
+      currentPath === route || currentPath.startsWith(route + '/')
+    );
+    
+    // Check if the current path matches changelog routes
+    const isChangelogActivePath = changelogRoutes.some(route => 
+      currentPath === route || currentPath.startsWith(route + '/')
+    );
+    
+    // Check if the current path matches wiki routes
+    const isWikiActivePath = wikiActiveRoutes.some(route => 
+      currentPath === route || currentPath.startsWith(route + '/')
+    );
+    
+    // Set active class based on path, with proper prioritization
+    if (isDiagramActivePath && diagramButton) {
+      diagramButton.classList.add('active');
+    } else if (isChangelogActivePath && changelogButton) {
+      changelogButton.classList.add('active');
+    } else if (isWikiActivePath && wikiButton) {
+      wikiButton.classList.add('active');
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.boundShow = this.show.bind(this);
+    this.boundHide = this.hide.bind(this);
+
+    document.addEventListener("turbo:before-visit", this.boundShow);
+    document.addEventListener("turbo:before-fetch-request", this.boundShow);
+    document.addEventListener("turbo:load", this.boundHide);
+    document.addEventListener("turbo:frame-load", this.boundHide);
+    document.addEventListener("turbo:fetch-request-error", this.boundHide);
+
+    if (document.readyState !== "complete") {
+      this.show();
+      window.addEventListener("load", this.boundHide, { once: true });
+    }
+  }
+
+  disconnect() {
+    document.removeEventListener("turbo:before-visit", this.boundShow);
+    document.removeEventListener("turbo:before-fetch-request", this.boundShow);
+    document.removeEventListener("turbo:load", this.boundHide);
+    document.removeEventListener("turbo:frame-load", this.boundHide);
+    document.removeEventListener("turbo:fetch-request-error", this.boundHide);
+    window.removeEventListener("load", this.boundHide);
+    this.clearSafetyTimeout();
+  }
+
+  show() {
+    this.clearSafetyTimeout();
+    this.element.setAttribute("data-loading-spinner-visible", "true");
+
+    this.safetyTimeout = setTimeout(() => this.hide(), 8000);
+  }
+
+  hide() {
+    this.clearSafetyTimeout();
+    this.element.setAttribute("data-loading-spinner-visible", "false");
+  }
+
+  clearSafetyTimeout() {
+    if (this.safetyTimeout) {
+      clearTimeout(this.safetyTimeout);
+      this.safetyTimeout = null;
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+import { Controller } from "@hotwired/stimulus" // Import the Stimulus Controller base class
+
+export default class extends Controller {
+  static targets = ["username", "password"] // Define the form fields that we want to target
+
+  connect() {
+    // Initialize the controller when it connects to the DOM
+    this.clearErrors() // Clear any existing error messages when the controller connects
+  }
+
+  validate(event) {
+    event.preventDefault() // Stop the form from submitting normally so we can validate first
+
+    let isValid = true // Assume the form is valid until we find errors
+    this.clearErrors() // Remove any previous error messages
+
+    // Validate username
+    const username = this.usernameTarget.value.trim() // Get the trimmed username value
+    if (!username) {
+      this.showError(this.usernameTarget, "username_required") // Display username error message
+      isValid = false // Mark the form as invalid
+    }
+
+    // Validate password
+    const password = this.passwordTarget.value.trim() // Get the trimmed password value
+    if (!password) {
+      this.showError(this.passwordTarget, "password_required") // Display password error message
+      isValid = false // Mark the form as invalid
+    }
+
+    if (isValid) {
+      event.target.submit() // Submit the form if all validations pass
+    }
+  }
+
+  showError(element, messageKey) {
+    if (!element) return // Guard clause if element is undefined
+
+    // Add 'is-invalid' class to highlight the input field in red
+    element.classList.add('is-invalid')
+
+    // Get translated error message from translations
+    const translatedMessage = this.getTranslation(messageKey)
+
+    // Check if error message element already exists
+    let errorElement = element.nextElementSibling
+    if (!errorElement || !errorElement.classList.contains('invalid-feedback')) {
+      errorElement = document.createElement('div') // Create a new error message container
+      errorElement.classList.add('invalid-feedback', 'd-block') // Style it as Bootstrap error message
+      element.parentNode.appendChild(errorElement) // Add it after the input field
+    }
+
+    // Set the error message text
+    errorElement.textContent = translatedMessage
+  }
+
+  getTranslation(key) {
+    // Look for the error message in the global Translations object
+    if (window.Translations && window.Translations[key]) {
+      return window.Translations[key] // Return the translated message if found
+    }
+    return key // Fall back to the key itself if translation not found
+  }
+
+  clearErrors() {
+    // Find all inputs with error styling
+    this.element.querySelectorAll('.is-invalid').forEach(el => {
+      el.classList.remove('is-invalid') // Remove the error styling class
+      const errorEl = el.nextElementSibling // Get the error message element
+      if (errorEl && errorEl.classList.contains('invalid-feedback')) {
+        errorEl.remove() // Remove the error message element from the DOM
+      }
+    })
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["sidebar"];
+
+  openSidebar() {
+    this.sidebarTarget.classList.add("open");
+    document.body.classList.add("notification-sidebar-open");
+  }
+
+  closeSidebar() {
+    this.sidebarTarget.classList.remove("open");
+    document.body.classList.remove("notification-sidebar-open");
+  }
+}