solidcrud 0.1.0

data/app/assets/javascripts/controllers/dashboard_controller.js

@@ -0,0 +1,96 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="dashboard"
+export default class extends Controller {
+  static targets = ["stats", "modelCount", "railsVersion", "databaseType"]
+
+  connect() {
+    console.log("Dashboard controller connected")
+    this.startRealTimeUpdates()
+  }
+
+  disconnect() {
+    this.stopRealTimeUpdates()
+  }
+
+  startRealTimeUpdates() {
+    // Update dashboard stats every 30 seconds
+    this.updateInterval = setInterval(() => {
+      this.updateStats()
+    }, 30000)
+
+    // Listen for Turbo navigation events to refresh data
+    document.addEventListener("turbo:load", this.handleTurboLoad.bind(this))
+  }
+
+  stopRealTimeUpdates() {
+    if (this.updateInterval) {
+      clearInterval(this.updateInterval)
+    }
+    document.removeEventListener("turbo:load", this.handleTurboLoad.bind(this))
+  }
+
+  handleTurboLoad() {
+    // Refresh dashboard data when navigating back to dashboard
+    if (window.location.pathname === "/admin") {
+      this.updateStats()
+    }
+  }
+
+  async updateStats() {
+    try {
+      const response = await fetch("/admin/dashboard_stats", {
+        headers: {
+          "Accept": "text/vnd.turbo-stream.html",
+          "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
+        }
+      })
+
+      if (response.ok) {
+        const html = await response.text()
+        // Update the stats section with Turbo Stream
+        this.updateStatsSection(html)
+      }
+    } catch (error) {
+      console.error("Failed to update dashboard stats:", error)
+    }
+  }
+
+  updateStatsSection(html) {
+    // Parse and apply Turbo Stream updates
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(html, "text/html")
+    const turboStreams = doc.querySelectorAll("turbo-stream")
+
+    turboStreams.forEach(stream => {
+      const target = stream.getAttribute("target")
+      const action = stream.getAttribute("action")
+      const template = stream.querySelector("template")
+
+      if (target && template) {
+        const targetElement = document.getElementById(target)
+        if (targetElement) {
+          const newContent = template.content.cloneNode(true)
+
+          switch (action) {
+            case "replace":
+              targetElement.replaceWith(newContent)
+              break
+            case "update":
+              targetElement.innerHTML = ""
+              targetElement.appendChild(newContent)
+              break
+            case "append":
+              targetElement.appendChild(newContent)
+              break
+          }
+        }
+      }
+    })
+  }
+
+  // Manual refresh method that can be called from UI
+  refresh() {
+    this.updateStats()
+  }
+}

data/app/assets/javascripts/controllers/modal_controller.js

@@ -0,0 +1,217 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="modal"
+export default class extends Controller {
+  static targets = ["container", "content", "title", "body", "confirmButton", "cancelButton", "closeButton"]
+
+  connect() {
+    console.log("Modal controller connected")
+    this.setupKeyboardListeners()
+  }
+
+  disconnect() {
+    this.removeKeyboardListeners()
+  }
+
+  // Show modal with custom content
+  show(event) {
+    event?.preventDefault()
+
+    const title = event?.params?.title || "Confirm Action"
+    const body = event?.params?.body || "Are you sure you want to proceed?"
+    const confirmText = event?.params?.confirmText || "Confirm"
+    const cancelText = event?.params?.cancelText || "Cancel"
+    const confirmClass = event?.params?.confirmClass || "bg-red-500 hover:bg-red-600"
+
+    this.titleTarget.textContent = title
+    this.bodyTarget.innerHTML = body
+    this.confirmButtonTarget.textContent = confirmText
+    this.cancelButtonTarget.textContent = cancelText
+
+    // Update confirm button classes
+    this.confirmButtonTarget.className = `inline-flex items-center px-4 py-2 text-sm font-medium text-white rounded-lg transition-all duration-200 ${confirmClass}`
+
+    // Store the original link/button that triggered the modal
+    this.triggerElement = event?.target?.closest("a, button") || event?.currentTarget
+
+    this.containerTarget.classList.remove("hidden")
+    this.containerTarget.classList.add("flex")
+
+    // Focus management
+    this.previousActiveElement = document.activeElement
+    this.confirmButtonTarget.focus()
+
+    // Prevent body scroll
+    document.body.style.overflow = "hidden"
+  }
+
+  // Hide modal
+  hide() {
+    this.containerTarget.classList.add("hidden")
+    this.containerTarget.classList.remove("flex")
+
+    // Restore body scroll
+    document.body.style.overflow = ""
+
+    // Restore focus
+    if (this.previousActiveElement) {
+      this.previousActiveElement.focus()
+    }
+  }
+
+  // Confirm delete action
+  confirmDelete(event) {
+    event?.preventDefault()
+
+    const element = event.currentTarget
+    const title = element.dataset.modalTitle || "Confirm Delete"
+    const message = element.dataset.modalMessage || "Are you sure you want to delete this item?"
+    const confirmText = element.dataset.modalConfirmText || "Delete"
+    const cancelText = element.dataset.modalCancelText || "Cancel"
+    const url = element.dataset.modalUrl || element.href
+
+    this.titleTarget.textContent = title
+    this.bodyTarget.innerHTML = `<p class="text-slate-600">${message}</p>`
+    this.confirmButtonTarget.textContent = confirmText
+    this.cancelButtonTarget.textContent = cancelText
+
+    // Update confirm button for delete (red styling)
+    this.confirmButtonTarget.className = "inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-red-500 hover:bg-red-600 rounded-lg transition-all duration-200"
+
+    // Store the delete URL
+    this.deleteUrl = url
+
+    this.containerTarget.classList.remove("hidden")
+    this.containerTarget.classList.add("flex")
+
+    // Focus management
+    this.previousActiveElement = document.activeElement
+    this.confirmButtonTarget.focus()
+
+    // Prevent body scroll
+    document.body.style.overflow = "hidden"
+  }
+
+  // Perform delete action
+  performDelete() {
+    if (this.deleteUrl) {
+      // Create a form to submit the delete request
+      const form = document.createElement("form")
+      form.method = "POST"
+      form.action = this.deleteUrl
+      form.style.display = "none"
+
+      // Add authenticity token if available
+      const csrfToken = document.querySelector('meta[name="csrf-token"]')
+      if (csrfToken) {
+        const tokenInput = document.createElement("input")
+        tokenInput.type = "hidden"
+        tokenInput.name = "authenticity_token"
+        tokenInput.value = csrfToken.content
+        form.appendChild(tokenInput)
+      }
+
+      // Add method override for DELETE
+      const methodInput = document.createElement("input")
+      methodInput.type = "hidden"
+      methodInput.name = "_method"
+      methodInput.value = "delete"
+      form.appendChild(methodInput)
+
+      document.body.appendChild(form)
+      form.submit()
+    }
+  }
+
+  // Confirm action
+  confirm(event) {
+    event?.preventDefault()
+
+    // Handle delete confirmation
+    if (this.deleteUrl) {
+      this.performDelete()
+      this.hide()
+      return
+    }
+
+    if (this.triggerElement) {
+      // If it's a link, navigate to it
+      if (this.triggerElement.tagName === "A") {
+        window.location.href = this.triggerElement.href
+      } else if (this.triggerElement.type === "submit") {
+        // If it's a submit button, submit the form
+        const form = this.triggerElement.closest("form")
+        if (form) {
+          form.submit()
+        }
+      } else {
+        // Trigger click on the original element
+        this.triggerElement.click()
+      }
+    }
+
+    this.hide()
+  }
+
+  // Cancel action
+  cancel(event) {
+    event?.preventDefault()
+    this.hide()
+  }
+
+  // Close on backdrop click
+  closeOnBackdrop(event) {
+    if (event.target === this.containerTarget) {
+      this.hide()
+    }
+  }
+
+  // Keyboard listeners
+  setupKeyboardListeners() {
+    this.keydownHandler = this.handleKeydown.bind(this)
+    document.addEventListener("keydown", this.keydownHandler)
+  }
+
+  removeKeyboardListeners() {
+    if (this.keydownHandler) {
+      document.removeEventListener("keydown", this.keydownHandler)
+    }
+  }
+
+  handleKeydown(event) {
+    if (!this.containerTarget.classList.contains("flex")) return
+
+    switch (event.key) {
+      case "Escape":
+        event.preventDefault()
+        this.hide()
+        break
+      case "Enter":
+        if (document.activeElement === this.confirmButtonTarget) {
+          event.preventDefault()
+          this.confirm()
+        }
+        break
+      case "Tab":
+        // Trap focus within modal
+        const focusableElements = this.containerTarget.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        )
+        const firstElement = focusableElements[0]
+        const lastElement = focusableElements[focusableElements.length - 1]
+
+        if (event.shiftKey) {
+          if (document.activeElement === firstElement) {
+            event.preventDefault()
+            lastElement.focus()
+          }
+        } else {
+          if (document.activeElement === lastElement) {
+            event.preventDefault()
+            firstElement.focus()
+          }
+        }
+        break
+    }
+  }
+}

data/app/assets/javascripts/controllers/navigation_controller.js

@@ -0,0 +1,117 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="navigation"
+export default class extends Controller {
+  static targets = ["sidebar", "mobileMenu", "overlay"]
+
+  connect() {
+    console.log("Navigation controller connected")
+    this.setupKeyboardShortcuts()
+  }
+
+  toggleMobileMenu() {
+    const isOpen = this.mobileMenuTarget.classList.contains("open")
+
+    if (isOpen) {
+      this.closeMobileMenu()
+    } else {
+      this.openMobileMenu()
+    }
+  }
+
+  openMobileMenu() {
+    this.mobileMenuTarget.classList.add("open")
+    this.overlayTarget?.classList.add("active")
+
+    // Prevent body scroll when mobile menu is open
+    document.body.style.overflow = "hidden"
+  }
+
+  closeMobileMenu() {
+    this.mobileMenuTarget.classList.remove("open")
+    this.overlayTarget?.classList.remove("active")
+
+    // Restore body scroll
+    document.body.style.overflow = ""
+  }
+
+  // Close mobile menu when clicking overlay
+  closeOnOverlayClick(event) {
+    if (event.target === this.overlayTarget) {
+      this.closeMobileMenu()
+    }
+  }
+
+  // Keyboard shortcuts
+  setupKeyboardShortcuts() {
+    document.addEventListener("keydown", (event) => {
+      // Escape key closes mobile menu
+      if (event.key === "Escape" && this.mobileMenuTarget.classList.contains("open")) {
+        this.closeMobileMenu()
+      }
+
+      // Ctrl/Cmd + B toggles sidebar (if exists)
+      if ((event.ctrlKey || event.metaKey) && event.key === "b") {
+        event.preventDefault()
+        this.toggleSidebar()
+      }
+    })
+  }
+
+  toggleSidebar() {
+    if (this.hasSidebarTarget) {
+      this.sidebarTarget.classList.toggle("collapsed")
+      // Save preference to localStorage
+      const isCollapsed = this.sidebarTarget.classList.contains("collapsed")
+      localStorage.setItem("solidcrud_sidebar_collapsed", isCollapsed)
+    }
+  }
+
+  // Handle navigation link clicks for SPA behavior
+  handleNavClick(event) {
+    const link = event.target.closest("a")
+    if (!link) return
+
+    // Close mobile menu after navigation on mobile
+    if (window.innerWidth < 768) {
+      this.closeMobileMenu()
+    }
+
+    // Add loading state
+    this.showNavigationLoading()
+  }
+
+  showNavigationLoading() {
+    // Add a subtle loading indicator
+    const loader = document.createElement("div")
+    loader.id = "navigation-loader"
+    loader.className = "fixed top-0 left-0 right-0 h-1 bg-blue-500 animate-pulse z-50"
+    loader.style.animation = "loading 1s ease-in-out infinite"
+
+    document.body.appendChild(loader)
+
+    // Remove loader after navigation completes
+    document.addEventListener("turbo:load", () => {
+      const existingLoader = document.getElementById("navigation-loader")
+      if (existingLoader) {
+        existingLoader.remove()
+      }
+    }, { once: true })
+  }
+
+  // Highlight active navigation item
+  highlightActiveNav() {
+    const currentPath = window.location.pathname
+
+    // Remove active class from all nav items
+    this.element.querySelectorAll(".nav-item").forEach(item => {
+      item.classList.remove("active")
+    })
+
+    // Add active class to current nav item
+    const activeItem = this.element.querySelector(`.nav-item[data-path="${currentPath}"]`)
+    if (activeItem) {
+      activeItem.classList.add("active")
+    }
+  }
+}

data/app/assets/javascripts/controllers/notification_controller.js

@@ -0,0 +1,85 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="notification"
+export default class extends Controller {
+  static targets = ["container"]
+
+  connect() {
+    console.log("Notification controller connected")
+    // Handle notifications that are already in the DOM
+    this.handleExistingNotifications()
+    // Setup mutation observer for dynamically added notifications
+    this.setupMutationObserver()
+  }
+
+  disconnect() {
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+  }
+
+  // Setup mutation observer to handle dynamically added notifications
+  setupMutationObserver() {
+    this.observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('notification')) {
+            this.setupNotification(node)
+          }
+        })
+      })
+    })
+
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    })
+  }
+
+  // Handle notifications that are dynamically added via Turbo Stream
+  handleExistingNotifications() {
+    const notifications = this.element.querySelectorAll('.notification')
+    notifications.forEach(notification => {
+      this.setupNotification(notification)
+    })
+  }
+
+  // Setup notification behavior
+  setupNotification(notification) {
+    const autoDismiss = notification.dataset.notificationAutoDismiss === 'true'
+    const dismissButton = notification.querySelector('button[data-action="notification#dismiss"]')
+
+    if (dismissButton) {
+      dismissButton.addEventListener('click', () => {
+        this.dismiss(notification)
+      })
+    }
+
+    // Auto-dismiss after 5 seconds if enabled
+    if (autoDismiss) {
+      setTimeout(() => {
+        this.dismiss(notification)
+      }, 5000)
+    }
+
+    // Animate in
+    setTimeout(() => {
+      notification.classList.remove("translate-x-full", "opacity-0")
+      notification.classList.add("translate-x-0", "opacity-100")
+    }, 10)
+  }
+
+  // Dismiss notification
+  dismiss(notification) {
+    // Animate out
+    notification.classList.remove("translate-x-0", "opacity-100")
+    notification.classList.add("translate-x-full", "opacity-0")
+
+    // Remove from DOM after animation
+    setTimeout(() => {
+      if (notification.parentNode) {
+        notification.parentNode.removeChild(notification)
+      }
+    }, 300)
+  }
+}

data/app/assets/javascripts/controllers/search_controller.js

@@ -0,0 +1,189 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="search"
+export default class extends Controller {
+  static targets = ["input", "results", "loading", "clear"]
+
+  connect() {
+    console.log("Search controller connected")
+    this.setupDebouncedSearch()
+    this.restoreSearchState()
+  }
+
+  setupDebouncedSearch() {
+    this.searchTimeout = null
+    this.inputTarget.addEventListener("input", this.debouncedSearch.bind(this))
+  }
+
+  debouncedSearch() {
+    clearTimeout(this.searchTimeout)
+    this.searchTimeout = setTimeout(() => {
+      this.performSearch()
+    }, 300) // 300ms debounce
+  }
+
+  async performSearch() {
+    const query = this.inputTarget.value.trim()
+
+    if (query.length === 0) {
+      this.clearSearch()
+      return
+    }
+
+    this.showLoading()
+
+    try {
+      const url = new URL(window.location)
+      url.searchParams.set("search", query)
+      url.searchParams.set("page", "1") // Reset to first page on new search
+
+      const response = await fetch(url.toString(), {
+        headers: {
+          "Accept": "text/vnd.turbo-stream.html",
+          "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
+        }
+      })
+
+      if (response.ok) {
+        const html = await response.text()
+        this.updateResults(html)
+        this.saveSearchState(query)
+      } else {
+        this.showError("Search failed. Please try again.")
+      }
+    } catch (error) {
+      console.error("Search error:", error)
+      this.showError("Network error. Please check your connection.")
+    } finally {
+      this.hideLoading()
+    }
+  }
+
+  updateResults(html) {
+    // Parse Turbo Stream response and update the table/results
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(html, "text/html")
+    const turboStreams = doc.querySelectorAll("turbo-stream")
+
+    turboStreams.forEach(stream => {
+      const target = stream.getAttribute("target")
+      const action = stream.getAttribute("action")
+      const template = stream.querySelector("template")
+
+      if (target && template) {
+        const targetElement = document.getElementById(target)
+        if (targetElement) {
+          const newContent = template.content.cloneNode(true)
+
+          switch (action) {
+            case "replace":
+              targetElement.replaceWith(newContent)
+              break
+            case "update":
+              targetElement.innerHTML = ""
+              targetElement.appendChild(newContent)
+              break
+            case "append":
+              targetElement.appendChild(newContent)
+              break
+          }
+        }
+      }
+    })
+  }
+
+  clearSearch() {
+    this.inputTarget.value = ""
+    this.hideClearButton()
+    this.saveSearchState("")
+
+    // Reload the page without search parameters
+    const url = new URL(window.location)
+    url.searchParams.delete("search")
+    url.searchParams.set("page", "1")
+
+    // Use Turbo to navigate without full page reload
+    Turbo.visit(url.toString(), { action: "replace" })
+  }
+
+  showLoading() {
+    if (this.hasLoadingTarget) {
+      this.loadingTarget.classList.remove("hidden")
+    }
+  }
+
+  hideLoading() {
+    if (this.hasLoadingTarget) {
+      this.loadingTarget.classList.add("hidden")
+    }
+  }
+
+  showClearButton() {
+    if (this.hasClearTarget) {
+      this.clearTarget.classList.remove("hidden")
+    }
+  }
+
+  hideClearButton() {
+    if (this.hasClearTarget) {
+      this.clearTarget.classList.add("hidden")
+    }
+  }
+
+  showError(message) {
+    // Create and show error message
+    const errorDiv = document.createElement("div")
+    errorDiv.className = "bg-red-50 border border-red-200 rounded-xl p-4 mt-4"
+    errorDiv.innerHTML = `
+      <div class="flex items-center space-x-3">
+        <div class="flex-shrink-0">
+          <i class="fas fa-exclamation-circle text-red-500 text-lg"></i>
+        </div>
+        <div class="flex-1">
+          <p class="text-red-800 font-medium">${message}</p>
+        </div>
+      </div>
+    `
+
+    // Insert error message after the search form
+    const form = this.element.closest("form") || this.element
+    form.parentNode.insertBefore(errorDiv, form.nextSibling)
+
+    // Auto-remove error after 5 seconds
+    setTimeout(() => {
+      if (errorDiv.parentNode) {
+        errorDiv.remove()
+      }
+    }, 5000)
+  }
+
+  saveSearchState(query) {
+    sessionStorage.setItem(`solidcrud_search_${this.getModelName()}`, query)
+  }
+
+  restoreSearchState() {
+    const savedQuery = sessionStorage.getItem(`solidcrud_search_${this.getModelName()}`)
+    if (savedQuery) {
+      this.inputTarget.value = savedQuery
+      if (savedQuery.length > 0) {
+        this.showClearButton()
+      }
+    }
+  }
+
+  getModelName() {
+    // Extract model name from URL or data attribute
+    const urlMatch = window.location.pathname.match(/\/admin\/([^\/]+)/)
+    return urlMatch ? urlMatch[1] : ""
+  }
+
+  // Handle input changes to show/hide clear button
+  handleInput() {
+    const hasValue = this.inputTarget.value.trim().length > 0
+    if (hasValue) {
+      this.showClearButton()
+    } else {
+      this.hideClearButton()
+    }
+  }
+}