dbviewer 0.7.10 → 0.7.11

data/app/assets/javascripts/dbviewer/sidebar.js

@@ -1,4 +1,14 @@
 document.addEventListener("DOMContentLoaded", function () {
+  // Validate that required utility scripts have loaded
+  if (!window.DBViewer || !DBViewer.Utility) {
+    console.error(
+      "Required DBViewer utility scripts not loaded. Please check utility.js."
+    );
+    return;
+  }
+
+  // Get debounce from the global namespace
+  const { debounce } = DBViewer.Utility;
   const searchInput = document.getElementById("tableSearch");
   const sidebarContent = document.querySelector(".dbviewer-sidebar-content");
 
@@ -8,203 +18,180 @@ document.addEventListener("DOMContentLoaded", function () {
     scrollPosition: "dbviewer_sidebar_scroll_position",
   };
 
-  if (searchInput) {
-    // Debounce function to limit how often the filter runs
-    function debounce(func, wait) {
-      let timeout;
-      return function () {
-        const context = this;
-        const args = arguments;
-        clearTimeout(timeout);
-        timeout = setTimeout(function () {
-          func.apply(context, args);
-        }, wait);
-      };
-    }
+  // Filter function
+  const filterTables = debounce(function () {
+    const query = searchInput.value.toLowerCase();
+    const tableItems = document.querySelectorAll(
+      "#tablesList .list-group-item-action"
+    );
+    let visibleCount = 0;
 
-    // Filter function
-    const filterTables = debounce(function () {
-      const query = searchInput.value.toLowerCase();
-      const tableItems = document.querySelectorAll(
-        "#tablesList .list-group-item-action"
-      );
-      let visibleCount = 0;
-
-      // Save the current search filter to localStorage
-      localStorage.setItem(STORAGE_KEYS.searchFilter, searchInput.value);
-
-      tableItems.forEach(function (item) {
-        // Get the table name from the title attribute for more accurate matching
-        const tableName = (item.getAttribute("title") || item.textContent)
-          .trim()
-          .toLowerCase();
-
-        // Also get the displayed text content for a broader match
-        const displayedText = item.textContent.trim().toLowerCase();
-
-        if (tableName.includes(query) || displayedText.includes(query)) {
-          item.classList.remove("d-none");
-          visibleCount++;
-        } else {
-          item.classList.add("d-none");
-        }
-      });
-
-      // Update the tables count in the sidebar
-      const tableCountElement = document.getElementById("table-count");
-      if (tableCountElement) {
-        tableCountElement.textContent = visibleCount;
-      }
+    // Save the current search filter to localStorage
+    localStorage.setItem(STORAGE_KEYS.searchFilter, searchInput.value);
+
+    tableItems.forEach(function (item) {
+      // Get the table name from the title attribute for more accurate matching
+      const tableName = (item.getAttribute("title") || item.textContent)
+        .trim()
+        .toLowerCase();
 
-      // Show/hide no results message
-      let noResultsEl = document.getElementById("dbviewer-no-filter-results");
-      if (visibleCount === 0 && query !== "") {
-        if (!noResultsEl) {
-          noResultsEl = document.createElement("div");
-          noResultsEl.id = "dbviewer-no-filter-results";
-          noResultsEl.className = "list-group-item text-muted text-center py-3";
-          noResultsEl.innerHTML =
-            '<i class="bi bi-search me-1"></i> No tables match "<span class="fw-bold"></span>"';
-          document.getElementById("tablesList").appendChild(noResultsEl);
-        }
-        noResultsEl.querySelector(".fw-bold").textContent = query;
-        noResultsEl.style.display = "block";
-      } else if (noResultsEl) {
-        noResultsEl.style.display = "none";
+      // Also get the displayed text content for a broader match
+      const displayedText = item.textContent.trim().toLowerCase();
+
+      if (tableName.includes(query) || displayedText.includes(query)) {
+        item.classList.remove("d-none");
+        visibleCount++;
+      } else {
+        item.classList.add("d-none");
       }
-    }, 150); // Debounce for 150ms
-
-    // Set up clear button first
-    const clearButton = document.createElement("button");
-    clearButton.type = "button";
-    clearButton.className = "btn btn-sm btn-link position-absolute";
-    clearButton.style.right = "15px";
-    clearButton.style.top = "50%";
-    clearButton.style.transform = "translateY(-50%)";
-    clearButton.style.display = "none";
-    clearButton.style.color = "#6c757d";
-    clearButton.style.fontSize = "0.85rem";
-    clearButton.style.padding = "0.25rem";
-    clearButton.style.width = "1.5rem";
-    clearButton.style.textAlign = "center";
-    clearButton.innerHTML = '<i class="bi bi-x-circle"></i>';
-    clearButton.addEventListener("click", function () {
-      searchInput.value = "";
-      // Clear the saved filter from localStorage
-      localStorage.removeItem(STORAGE_KEYS.searchFilter);
-      // Call filter directly without debouncing for immediate feedback
-      filterTables();
-      this.style.display = "none";
     });
 
-    const filterContainer = document.querySelector(
-      ".dbviewer-table-filter-container"
-    );
-    if (filterContainer) {
-      filterContainer.style.position = "relative";
-      filterContainer.appendChild(clearButton);
-
-      searchInput.addEventListener("input", function () {
-        clearButton.style.display = this.value ? "block" : "none";
-      });
+    // Update the tables count in the sidebar
+    const tableCountElement = document.getElementById("table-count");
+    if (tableCountElement) {
+      tableCountElement.textContent = visibleCount;
     }
 
-    // Restore saved search filter on page load and apply it immediately
-    const savedFilter = localStorage.getItem(STORAGE_KEYS.searchFilter);
-    if (savedFilter) {
-      searchInput.value = savedFilter;
-      // Show clear button immediately when filter is restored
-      clearButton.style.display = "block";
-      // Apply filter immediately without debouncing to prevent blinking
-      const query = savedFilter.toLowerCase();
-      const tableItems = document.querySelectorAll(
-        "#tablesList .list-group-item-action"
-      );
-      let visibleCount = 0;
-
-      tableItems.forEach(function (item) {
-        const tableName = (item.getAttribute("title") || item.textContent)
-          .trim()
-          .toLowerCase();
-        const displayedText = item.textContent.trim().toLowerCase();
-
-        if (tableName.includes(query) || displayedText.includes(query)) {
-          item.classList.remove("d-none");
-          visibleCount++;
-        } else {
-          item.classList.add("d-none");
-        }
-      });
-
-      // Update the tables count immediately
-      const tableCountElement = document.getElementById("table-count");
-      if (tableCountElement) {
-        tableCountElement.textContent = visibleCount;
-      }
-
-      // Handle no results message immediately
-      let noResultsEl = document.getElementById("dbviewer-no-filter-results");
-      if (visibleCount === 0 && query !== "") {
-        if (!noResultsEl) {
-          noResultsEl = document.createElement("div");
-          noResultsEl.id = "dbviewer-no-filter-results";
-          noResultsEl.className = "list-group-item text-muted text-center py-3";
-          noResultsEl.innerHTML =
-            '<i class="bi bi-search me-1"></i> No tables match "<span class="fw-bold"></span>"';
-          document.getElementById("tablesList").appendChild(noResultsEl);
-        }
-        noResultsEl.querySelector(".fw-bold").textContent = query;
-        noResultsEl.style.display = "block";
-      } else if (noResultsEl) {
-        noResultsEl.style.display = "none";
+    // Show/hide no results message
+    let noResultsEl = document.getElementById("dbviewer-no-filter-results");
+    if (visibleCount === 0 && query !== "") {
+      if (!noResultsEl) {
+        noResultsEl = document.createElement("div");
+        noResultsEl.id = "dbviewer-no-filter-results";
+        noResultsEl.className = "list-group-item text-muted text-center py-3";
+        noResultsEl.innerHTML =
+          '<i class="bi bi-search me-1"></i> No tables match "<span class="fw-bold"></span>"';
+        document.getElementById("tablesList").appendChild(noResultsEl);
       }
+      noResultsEl.querySelector(".fw-bold").textContent = query;
+      noResultsEl.style.display = "block";
+    } else if (noResultsEl) {
+      noResultsEl.style.display = "none";
     }
+  }, 150); // Debounce for 150ms
+
+  // Set up clear button first
+  const clearButton = document.createElement("button");
+  clearButton.type = "button";
+  clearButton.className = "btn btn-sm btn-link position-absolute";
+  clearButton.style.right = "15px";
+  clearButton.style.top = "50%";
+  clearButton.style.transform = "translateY(-50%)";
+  clearButton.style.display = "none";
+  clearButton.style.color = "#6c757d";
+  clearButton.style.fontSize = "0.85rem";
+  clearButton.style.padding = "0.25rem";
+  clearButton.style.width = "1.5rem";
+  clearButton.style.textAlign = "center";
+  clearButton.innerHTML = '<i class="bi bi-x-circle"></i>';
+  clearButton.addEventListener("click", function () {
+    searchInput.value = "";
+    // Clear the saved filter from localStorage
+    localStorage.removeItem(STORAGE_KEYS.searchFilter);
+    // Call filter directly without debouncing for immediate feedback
+    filterTables();
+    this.style.display = "none";
+  });
+
+  const filterContainer = document.querySelector(
+    ".dbviewer-table-filter-container"
+  );
+  if (filterContainer) {
+    filterContainer.style.position = "relative";
+    filterContainer.appendChild(clearButton);
+
+    searchInput.addEventListener("input", function () {
+      clearButton.style.display = this.value ? "block" : "none";
+    });
+  }
 
-    // Restore saved scroll position on page load
-    if (sidebarContent) {
-      const savedScrollPosition = localStorage.getItem(
-        STORAGE_KEYS.scrollPosition
-      );
-      if (savedScrollPosition) {
-        // Use requestAnimationFrame to ensure DOM is fully rendered
-        requestAnimationFrame(() => {
-          sidebarContent.scrollTop = parseInt(savedScrollPosition, 10);
-        });
-      }
+  // Restore saved search filter on page load and apply it immediately
+  const savedFilter = localStorage.getItem(STORAGE_KEYS.searchFilter);
+  searchInput.value = savedFilter;
+  // Show clear button immediately when filter is restored
+  clearButton.style.display = "block";
+  // Apply filter immediately without debouncing to prevent blinking
+  const query = savedFilter.toLowerCase();
+  const tableItems = document.querySelectorAll(
+    "#tablesList .list-group-item-action"
+  );
+  let visibleCount = 0;
+
+  tableItems.forEach(function (item) {
+    const tableName = (item.getAttribute("title") || item.textContent)
+      .trim()
+      .toLowerCase();
+    const displayedText = item.textContent.trim().toLowerCase();
+
+    if (tableName.includes(query) || displayedText.includes(query)) {
+      item.classList.remove("d-none");
+      visibleCount++;
+    } else {
+      item.classList.add("d-none");
+    }
+  });
 
-      // Save scroll position on scroll
-      const saveScrollPosition = debounce(function () {
-        localStorage.setItem(
-          STORAGE_KEYS.scrollPosition,
-          sidebarContent.scrollTop
-        );
-      }, 100);
+  // Update the tables count immediately
+  const tableCountElement = document.getElementById("table-count");
+  if (tableCountElement) {
+    tableCountElement.textContent = visibleCount;
+  }
 
-      sidebarContent.addEventListener("scroll", saveScrollPosition);
+  // Handle no results message immediately
+  let noResultsEl = document.getElementById("dbviewer-no-filter-results");
+  if (visibleCount === 0 && query !== "") {
+    if (!noResultsEl) {
+      noResultsEl = document.createElement("div");
+      noResultsEl.id = "dbviewer-no-filter-results";
+      noResultsEl.className = "list-group-item text-muted text-center py-3";
+      noResultsEl.innerHTML =
+        '<i class="bi bi-search me-1"></i> No tables match "<span class="fw-bold"></span>"';
+      document.getElementById("tablesList").appendChild(noResultsEl);
     }
+    noResultsEl.querySelector(".fw-bold").textContent = query;
+    noResultsEl.style.display = "block";
+  } else if (noResultsEl) {
+    noResultsEl.style.display = "none";
+  }
 
-    // Set up event listeners for the search input
-    searchInput.addEventListener("input", filterTables);
-    searchInput.addEventListener("keyup", function (e) {
-      filterTables();
-
-      // Add keyboard navigation for the filtered list
-      if (e.key === "Enter" || e.key === "ArrowDown") {
-        e.preventDefault();
-        // Focus the first visible table item (not having d-none class)
-        const firstVisibleItem = document.querySelector(
-          "#tablesList .list-group-item-action:not(.d-none)"
-        );
-        if (firstVisibleItem) {
-          firstVisibleItem.focus();
-          // Make sure the item is visible in the scrollable area
-          firstVisibleItem.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-          });
-        }
-      }
+  // Restore saved scroll position on page load
+  const savedScrollPosition = localStorage.getItem(STORAGE_KEYS.scrollPosition);
+  if (savedScrollPosition) {
+    // Use requestAnimationFrame to ensure DOM is fully rendered
+    requestAnimationFrame(() => {
+      sidebarContent.scrollTop = parseInt(savedScrollPosition, 10);
     });
-    searchInput.addEventListener("search", filterTables); // For clearing via the "x" in some browsers
   }
+
+  // Save scroll position on scroll
+  const saveScrollPosition = debounce(function () {
+    localStorage.setItem(STORAGE_KEYS.scrollPosition, sidebarContent.scrollTop);
+  }, 100);
+
+  sidebarContent.addEventListener("scroll", saveScrollPosition);
+
+  // Set up event listeners for the search input
+  searchInput.addEventListener("input", filterTables);
+  searchInput.addEventListener("keyup", function (e) {
+    filterTables();
+
+    // Add keyboard navigation for the filtered list
+    if (e.key === "Enter" || e.key === "ArrowDown") {
+      e.preventDefault();
+      // Focus the first visible table item (not having d-none class)
+      const firstVisibleItem = document.querySelector(
+        "#tablesList .list-group-item-action:not(.d-none)"
+      );
+      if (firstVisibleItem) {
+        firstVisibleItem.focus();
+        // Make sure the item is visible in the scrollable area
+        firstVisibleItem.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+        });
+      }
+    }
+  });
+
+  searchInput.addEventListener("search", filterTables); // For clearing via the "x" in some browsers
 });

data/app/assets/javascripts/dbviewer/utility.js

@@ -0,0 +1,124 @@
+/**
+ * DBViewer Utility Functions
+ * Shared utilities for DBViewer JavaScript modules
+ */
+
+// Create a global namespace for DBViewer
+window.DBViewer = window.DBViewer || {};
+
+/**
+ * Debounces a function call to limit how often it runs
+ * @param {Function} func - The function to debounce
+ * @param {number} wait - Milliseconds to wait between calls
+ * @returns {Function} Debounced function
+ */
+function debounce(func, wait) {
+  let timeout;
+  return function (...args) {
+    const context = this;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), wait);
+  };
+}
+
+/**
+ * Decodes HTML entities in a string
+ * @param {string} text - Text with HTML entities
+ * @returns {string} Decoded text
+ */
+function decodeHTMLEntities(text) {
+  const textarea = document.createElement("textarea");
+  textarea.innerHTML = text;
+  return textarea.value;
+}
+
+/**
+ * Format a number with thousands separators
+ * @param {number} number - Number to format
+ * @returns {string} Formatted number with commas
+ */
+function numberWithDelimiter(number) {
+  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
+/**
+ * Convert bytes to human-readable file size
+ * @param {number} bytes - Size in bytes
+ * @returns {string} Human readable size (e.g., "4.2 MB")
+ */
+function numberToHumanSize(bytes) {
+  if (bytes === null || bytes === undefined) return "N/A";
+  if (bytes === 0) return "0 Bytes";
+
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+}
+
+/**
+ * Helper function to manage theme changes across the application
+ */
+const ThemeManager = {
+  /**
+   * Get the current theme
+   * @returns {string} 'dark' or 'light'
+   */
+  getCurrentTheme() {
+    return document.documentElement.getAttribute("data-bs-theme") || "light";
+  },
+
+  /**
+   * Set the theme and save to local storage
+   * @param {string} theme - 'dark' or 'light'
+   */
+  setTheme(theme) {
+    if (theme !== "dark" && theme !== "light") {
+      console.error("Invalid theme value:", theme);
+      return;
+    }
+
+    document.documentElement.setAttribute("data-bs-theme", theme);
+    localStorage.setItem("dbviewerTheme", theme);
+
+    // Notify all components about theme change
+    const themeChangeEvent = new CustomEvent("dbviewerThemeChanged", {
+      detail: { theme },
+    });
+    document.dispatchEvent(themeChangeEvent);
+  },
+
+  /**
+   * Toggle between dark and light themes
+   */
+  toggleTheme() {
+    const currentTheme = this.getCurrentTheme();
+    this.setTheme(currentTheme === "dark" ? "light" : "dark");
+  },
+
+  /**
+   * Initialize theme based on saved preference or OS preference
+   */
+  initialize() {
+    const prefersDarkMode = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    ).matches;
+    const savedTheme = localStorage.getItem("dbviewerTheme");
+
+    if (savedTheme) {
+      this.setTheme(savedTheme);
+    } else if (prefersDarkMode) {
+      this.setTheme("dark");
+    }
+  },
+};
+
+// Expose utilities to global namespace
+DBViewer.Utility = {
+  debounce,
+  decodeHTMLEntities,
+  numberWithDelimiter,
+  numberToHumanSize,
+  ThemeManager,
+};