rails_pulse 0.1.0

data/app/javascript/rails_pulse/controllers/menu_controller.js

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "item" ]
+  static values  = { index: Number }
+
+  #observer
+
+  initialize() {
+    this.#observer = new IntersectionObserver(this.#reset.bind(this))
+  }
+
+  connect() {
+    this.#observer.observe(this.element)
+  }
+
+  disconnect() {
+    this.#observer.disconnect()
+  }
+
+  prev() {
+    if (this.indexValue > 0) {
+      this.indexValue--
+      this.#update()
+    }
+  }
+
+  next() {
+    if (this.indexValue < this.#lastIndex) {
+      this.indexValue++
+      this.#update()
+    }
+  }
+
+  #reset([ entry ]) {
+    if (entry.isIntersecting) {
+      this.indexValue = 0
+      this.#update()
+    }
+  }
+
+  #update() {
+    this.#updateTabstops()
+    this.#focusCurrentItem()
+  }
+
+  #updateTabstops() {
+    this.itemTargets.forEach((it, index) => {
+      it.tabIndex = index === this.indexValue ? 0 : -1
+    })
+  }
+
+  #focusCurrentItem() {
+    this.itemTargets[this.indexValue].focus()
+  }
+
+  get #lastIndex() {
+    return this.itemTargets.length -1
+  }
+}

data/app/javascript/rails_pulse/controllers/pagination_controller.js

@@ -0,0 +1,69 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["limit"]
+  static values = {
+    storageKey: { type: String, default: "rails_pulse_pagination_limit" },
+    url: String
+  }
+
+  connect() {
+    this.restorePaginationLimit()
+  }
+
+  // Update pagination limit via AJAX and reload the page to reflect changes
+  async updateLimit() {
+    const limit = this.limitTarget.value
+
+    // Save to session storage
+    sessionStorage.setItem(this.storageKeyValue, limit)
+
+    try {
+      // Send AJAX request to update server session using Rails.ajax
+      const response = await fetch(this.urlValue, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': this.getCSRFToken()
+        },
+        body: JSON.stringify({ limit: limit })
+      })
+
+      if (response.ok) {
+        // Reload the page to reflect the new pagination limit
+        // This preserves all current URL parameters including Ransack search params
+        window.location.reload()
+      } else {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+    } catch (error) {
+      console.error('Error updating pagination limit:', error)
+    }
+  }
+
+  // Get CSRF token from meta tag
+  getCSRFToken() {
+    const token = document.querySelector('meta[name="csrf-token"]')
+    return token ? token.getAttribute('content') : ''
+  }
+
+  // Save the pagination limit to session storage when it changes
+  savePaginationLimit() {
+    const limit = this.limitTarget.value
+    sessionStorage.setItem(this.storageKeyValue, limit)
+  }
+
+  // Restore the pagination limit from session storage on page load
+  restorePaginationLimit() {
+    const savedLimit = sessionStorage.getItem(this.storageKeyValue)
+    if (savedLimit && this.limitTarget) {
+      // Only set if the current value is different (prevents unnecessary DOM updates)
+      if (this.limitTarget.value !== savedLimit) {
+        this.limitTarget.value = savedLimit
+
+        // Trigger a change event to ensure any other listeners are notified
+        this.limitTarget.dispatchEvent(new Event('change', { bubbles: true }))
+      }
+    }
+  }
+}

data/app/javascript/rails_pulse/controllers/popover_controller.js

@@ -0,0 +1,91 @@
+import { Controller } from "@hotwired/stimulus"
+import { computePosition, flip, shift, offset, autoUpdate } from "@floating-ui/dom"
+
+export default class extends Controller {
+  static targets = [ "button", "menu" ]
+  static values  = { placement: { type: String, default: "bottom" } }
+
+  #showTimer = null
+  #hideTimer = null
+
+  initialize() {
+    this.orient = this.orient.bind(this)
+  }
+
+  connect() {
+    this.cleanup = autoUpdate(this.buttonTarget, this.menuTarget, this.orient)
+  }
+
+  disconnect() {
+    this.cleanup()
+  }
+
+  show(event) {
+    if (event) event.preventDefault()
+    this.menuTarget.showPopover({ source: this.buttonTarget })
+    // Explicitly call orient after showing to ensure positioning
+    this.orient()
+    this.loadOperationDetailsIfNeeded()
+  }
+
+  hide() {
+    this.menuTarget.hidePopover()
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    this.menuTarget.togglePopover({ source: this.buttonTarget })
+    // Explicitly call orient after toggling to ensure positioning
+    this.orient()
+    this.loadOperationDetailsIfNeeded()
+  }
+
+  debouncedShow() {
+    clearTimeout(this.#hideTimer)
+    this.#showTimer = setTimeout(() => this.show(), 700)
+  }
+
+  debouncedHide() {
+    clearTimeout(this.#showTimer)
+    this.#hideTimer = setTimeout(() => this.hide(), 300)
+  }
+
+  orient() {
+    computePosition(this.buttonTarget, this.menuTarget, this.#options).then(({x, y}) => {
+      // Use CSS custom properties for CSP compliance
+      this.menuTarget.style.setProperty('--popover-x', `${x}px`)
+      this.menuTarget.style.setProperty('--popover-y', `${y}px`)
+      // Add class to apply the positioning
+      this.menuTarget.classList.add('positioned')
+    })
+  }
+
+  loadOperationDetailsIfNeeded() {
+    // Check if this popover has operation details to load
+    const operationUrl = this.menuTarget.dataset.operationUrl
+    if (!operationUrl) return
+    
+    // Find the turbo frame inside the popover
+    const turboFrame = this.menuTarget.querySelector('turbo-frame')
+    if (!turboFrame) return
+    
+    // Only load if not already loaded (check if still shows loading content)
+    // Use CSP-safe method to check for loading content
+    const hasLoadingContent = this.hasLoadingContent(turboFrame)
+    if (!hasLoadingContent) return
+    
+    // Set the src attribute to trigger the turbo frame loading
+    turboFrame.src = operationUrl
+  }
+
+  // CSP-safe method to check for loading content
+  hasLoadingContent(element) {
+    // Use textContent instead of innerHTML to avoid CSP issues
+    const textContent = element.textContent || ''
+    return textContent.includes('Loading operation details')
+  }
+
+  get #options() {
+    return { placement: this.placementValue, middleware: [offset(4), flip(), shift({padding: 4})] }
+  }
+}

data/app/javascript/rails_pulse/controllers/timezone_controller.js

@@ -0,0 +1,106 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { cachedAt: String, targetFrame: String }
+
+  connect() {
+    this.updateTimestamp()
+    this.setupObserver()
+    this.setupTurboFrameListener()
+  }
+
+  disconnect() {
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+    if (this.frameObserver) {
+      this.frameObserver.disconnect()
+    }
+    if (this.documentObserver) {
+      this.documentObserver.disconnect()
+    }
+    if (this.turboFrameListener) {
+      document.removeEventListener('turbo:frame-load', this.turboFrameListener)
+    }
+  }
+
+  setupObserver() {
+    if (this.targetFrameValue) {
+      // Try immediately
+      this.updateTimestamp()
+
+      // Also observe for when the frame appears or changes
+      const observer = new MutationObserver(() => {
+        const targetFrame = document.getElementById(this.targetFrameValue)
+        if (targetFrame) {
+          this.updateTimestamp()
+          // Watch for attribute changes on the frame
+          if (this.frameObserver) {
+            this.frameObserver.disconnect()
+          }
+          this.frameObserver = new MutationObserver(() => {
+            this.updateTimestamp()
+          })
+          this.frameObserver.observe(targetFrame, {
+            attributes: true,
+            attributeFilter: ['data-cached-at'],
+            childList: true,
+            subtree: true
+          })
+        }
+      })
+
+      // Watch the whole document for the frame to appear
+      observer.observe(document.body, { childList: true, subtree: true })
+      this.documentObserver = observer
+    }
+  }
+
+  cachedAtValueChanged() {
+    this.updateTimestamp()
+  }
+
+  setupTurboFrameListener() {
+    if (this.targetFrameValue) {
+      this.turboFrameListener = (event) => {
+        // Check if the loaded frame matches our target frame
+        if (event.target && event.target.id === this.targetFrameValue) {
+          // Update timestamp when our target frame loads
+          this.updateTimestamp()
+        }
+      }
+      document.addEventListener('turbo:frame-load', this.turboFrameListener)
+    }
+  }
+
+  updateTimestamp() {
+    let cachedAtValue = this.cachedAtValue
+
+    // If no direct cached value but we have a target frame, try to get it from there
+    if (!cachedAtValue && this.targetFrameValue) {
+      const targetFrame = document.getElementById(this.targetFrameValue)
+      if (targetFrame) {
+        cachedAtValue = targetFrame.dataset.cachedAt
+      }
+    }
+
+    if (cachedAtValue) {
+      try {
+        const date = new Date(cachedAtValue)
+        const localTimeString = date.toLocaleString('en-US', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+          hour: 'numeric',
+          minute: '2-digit',
+          hour12: true
+        })
+        this.element.title = `Last updated: ${localTimeString}`
+      } catch (e) {
+        this.element.title = 'Cache time unavailable'
+      }
+    } else {
+      this.element.title = 'Cache time unavailable'
+    }
+  }
+}