easy-admin-rails 0.1.0

data/app/javascript/easy_admin/controllers/batch_selection_controller.js

@@ -0,0 +1,223 @@
+import { Controller } from "@hotwired/stimulus"
+import { get, post } from "@rails/request.js"
+
+export default class extends Controller {
+  static targets = ["checkbox", "actionBar", "actionBarContent", "counter", "selectAll", "selectedIds"]
+  static values = { resourceName: String }
+  
+  connect() {
+    this.selectedIds = new Set()
+    this.updateUI()
+  }
+  
+  toggleItem(event) {
+    const checkbox = event.target
+    const id = checkbox.value
+    const row = checkbox.closest('tr')
+    
+    if (checkbox.checked) {
+      this.selectedIds.add(id)
+      // Add selected styling to the row
+      row?.classList.add('bg-blue-50', 'border-blue-200')
+      row?.classList.remove('hover:bg-gray-100')
+    } else {
+      this.selectedIds.delete(id)
+      // Remove selected styling from the row
+      row?.classList.remove('bg-blue-50', 'border-blue-200')
+      row?.classList.add('hover:bg-gray-100')
+    }
+    
+    this.updateUI()
+  }
+  
+  toggleAll(event) {
+    const checkAll = event.target.checked
+    const itemCheckboxes = this.checkboxTargets.filter(cb => !cb.dataset.selectAll)
+    
+    itemCheckboxes.forEach(checkbox => {
+      checkbox.checked = checkAll
+      const row = checkbox.closest('tr')
+      
+      if (checkAll) {
+        this.selectedIds.add(checkbox.value)
+        // Add selected styling to the row
+        row?.classList.add('bg-blue-50', 'border-blue-200')
+        row?.classList.remove('hover:bg-gray-100')
+      } else {
+        this.selectedIds.delete(checkbox.value)
+        // Remove selected styling from the row
+        row?.classList.remove('bg-blue-50', 'border-blue-200')
+        row?.classList.add('hover:bg-gray-100')
+      }
+    })
+    
+    this.updateUI()
+  }
+  
+  updateUI() {
+    const count = this.selectedIds.size
+    
+    // Update counter
+    if (this.hasCounterTarget) {
+      this.counterTarget.textContent = count
+    }
+    
+    // Show/hide action bar with iOS-style animation
+    if (this.hasActionBarContentTarget) {
+      if (count > 0) {
+        // Show the action bar with smooth animation
+        this.actionBarContentTarget.style.transform = 'translateY(0)'
+        this.actionBarContentTarget.style.opacity = '1'
+      } else {
+        // Hide with animation
+        this.actionBarContentTarget.style.transform = 'translateY(100%)'
+        this.actionBarContentTarget.style.opacity = '0'
+      }
+    }
+    
+    // Update hidden input with selected IDs
+    if (this.hasSelectedIdsTarget) {
+      this.selectedIdsTarget.value = Array.from(this.selectedIds).join(',')
+    }
+    
+    // Update select all checkbox state
+    if (this.hasSelectAllTarget) {
+      const itemCheckboxes = this.checkboxTargets.filter(cb => !cb.dataset.selectAll)
+      const allChecked = itemCheckboxes.length > 0 && itemCheckboxes.every(cb => cb.checked)
+      this.selectAllTarget.checked = allChecked
+    }
+  }
+  
+  executeAction(event) {
+    const button = event.currentTarget
+    const actionClass = button.dataset.actionClass
+    const executionMode = button.dataset.executionMode
+    
+    if (this.selectedIds.size === 0) {
+      alert('Please select at least one item')
+      return
+    }
+    
+    if (executionMode === 'instant') {
+      this.executeInstantAction(actionClass, button)
+    } else if (executionMode === 'modal') {
+      this.openModalAction(actionClass)
+    }
+  }
+  
+  async executeInstantAction(actionClass, button) {
+    // Always show confirmation for instant actions
+    const actionLabel = button.textContent.trim()
+    const selectedCount = this.selectedIds.size
+    const defaultMessage = `${selectedCount} selected item${selectedCount !== 1 ? 's' : ''}`
+    const confirmMessage = button.dataset.confirm || defaultMessage
+    
+    // Determine if this is a dangerous action (delete, remove, etc.)
+    const isDangerous = actionLabel.toLowerCase().includes('delete') || 
+                       actionLabel.toLowerCase().includes('remove') || 
+                       actionLabel.toLowerCase().includes('destroy')
+    
+    // Show confirmation modal via Turbo
+    const confirmed = await this.showConfirmationModal(actionLabel, confirmMessage, isDangerous)
+    
+    if (!confirmed) {
+      return
+    }
+    
+    // Show loading state
+    button.disabled = true
+    const originalText = button.textContent
+    button.textContent = 'Processing...'
+    
+    // Prepare form data
+    const formData = new FormData()
+    
+    // Add CSRF token
+    const csrfToken = document.querySelector('[name="csrf-token"]').content
+    formData.append('authenticity_token', csrfToken)
+    
+    // Add action class and execution mode
+    formData.append('action_class', actionClass)
+    formData.append('execution_mode', 'instant')
+    
+    // Add selected IDs
+    Array.from(this.selectedIds).forEach(id => {
+      formData.append('selected_ids[]', id)
+    })
+    
+    // Submit via @rails/request.js
+    post(`/admin/${this.resourceNameValue}/batch_action`, {
+      body: formData,
+      responseKind: 'turbo-stream'
+    }).then(response => {
+      button.disabled = false
+      button.textContent = originalText
+      
+      if (response.ok) {
+        // Dispatch event to clear selection
+        window.dispatchEvent(new CustomEvent('batch-action:completed'))
+      }
+    }).catch(error => {
+      button.disabled = false
+      button.textContent = originalText
+      console.error('Instant batch action failed:', error)
+    })
+  }
+  
+  openModalAction(actionClass) {
+    // Open Turbo Frame modal for the batch action form
+    const url = `/admin/${this.resourceNameValue}/batch_action/${actionClass}/form`
+    const selectedIds = Array.from(this.selectedIds).join(',')
+    
+    // Use @rails/request.js to load the modal
+    get(`${url}?selected_ids=${selectedIds}`, {
+      responseKind: 'turbo-stream'
+    })
+  }
+  
+  clearSelection() {
+    this.selectedIds.clear()
+    this.checkboxTargets.forEach(cb => {
+      cb.checked = false
+      const row = cb.closest('tr')
+      // Remove selected styling from all rows
+      row?.classList.remove('bg-blue-50', 'border-blue-200')
+      row?.classList.add('hover:bg-gray-100')
+    })
+    this.updateUI()
+  }
+  
+  async showConfirmationModal(title, message, isDangerous = false) {
+    return new Promise((resolve) => {
+      // Prepare the confirmation modal URL
+      const params = new URLSearchParams({
+        title: title,
+        message: message,
+        confirm_text: title,
+        cancel_text: 'Cancel',
+        danger: isDangerous
+      })
+      
+      // Load the confirmation modal via Turbo
+      get(`/admin/confirmation_modal?${params.toString()}`, {
+        responseKind: 'turbo-stream'
+      })
+      
+      // Listen for confirmation events
+      const handleConfirmed = () => {
+        document.removeEventListener('confirmation-modal:confirmed', handleConfirmed)
+        document.removeEventListener('confirmation-modal:cancelled', handleCancelled)
+        resolve(true)
+      }
+      
+      const handleCancelled = () => {
+        document.removeEventListener('confirmation-modal:confirmed', handleConfirmed)
+        document.removeEventListener('confirmation-modal:cancelled', handleCancelled)
+        resolve(false)
+      }
+      
+      document.addEventListener('confirmation-modal:confirmed', handleConfirmed)
+      document.addEventListener('confirmation-modal:cancelled', handleCancelled)
+    })
+  }
+}

data/app/javascript/easy_admin/controllers/chart_controller.js

@@ -0,0 +1,216 @@
+import { Controller } from "@hotwired/stimulus"
+import { Chart, registerables } from "chart.js"
+
+Chart.register(...registerables)
+
+// iOS-style color palette
+const iOSColors = {
+  blue: "#007AFF",
+  green: "#34C759", 
+  red: "#FF3B30",
+  orange: "#FF9500",
+  yellow: "#FFCC00",
+  purple: "#AF52DE",
+  pink: "#FF2D92",
+  teal: "#5AC8FA",
+  indigo: "#5856D6",
+  gray: "#8E8E93"
+}
+
+const chartColors = [
+  iOSColors.blue,
+  iOSColors.green,
+  iOSColors.orange,
+  iOSColors.purple,
+  iOSColors.teal,
+  iOSColors.pink,
+  iOSColors.indigo,
+  iOSColors.yellow
+]
+
+export default class extends Controller {
+  static values = { 
+    type: String,
+    data: Object,
+    options: Object 
+  }
+
+  connect() {
+    this.initializeChart()
+  }
+
+  disconnect() {
+    if (this.chart) {
+      this.chart.destroy()
+    }
+  }
+
+  initializeChart() {
+    const ctx = this.element.querySelector('canvas')
+    if (!ctx) return
+
+    const chartData = this.prepareData()
+    const chartOptions = this.prepareOptions()
+
+    this.chart = new Chart(ctx, {
+      type: this.getChartJSType(),
+      data: chartData,
+      options: chartOptions
+    })
+  }
+
+  // Map dashboard chart types to Chart.js types
+  getChartJSType() {
+    const typeMapping = {
+      'horizontal_bar': 'bar',
+      'area': 'line', 
+      'donut': 'doughnut',
+      'polar_area': 'polarArea'
+    }
+    
+    return typeMapping[this.typeValue] || this.typeValue || 'line'
+  }
+
+  prepareData() {
+    const data = this.dataValue || {}
+    const chartJSType = this.getChartJSType()
+    
+    // Apply iOS colors to datasets
+    if (data.datasets) {
+      data.datasets.forEach((dataset, index) => {
+        const color = chartColors[index % chartColors.length]
+        
+        if (chartJSType === 'line') {
+          dataset.borderColor = color
+          dataset.backgroundColor = this.hexToRgba(color, this.typeValue === 'area' ? 0.3 : 0.1)
+          dataset.pointBackgroundColor = color
+          dataset.pointBorderColor = '#ffffff'
+          dataset.pointBorderWidth = 2
+          dataset.pointRadius = 4
+          dataset.pointHoverRadius = 6
+          dataset.fill = this.typeValue === 'area' // Fill area charts
+          dataset.tension = 0.4
+        } else if (chartJSType === 'bar') {
+          dataset.backgroundColor = color
+          dataset.borderColor = color
+          dataset.borderWidth = 0
+          dataset.borderRadius = 4
+          dataset.borderSkipped = false
+        } else if (chartJSType === 'doughnut' || chartJSType === 'pie') {
+          dataset.backgroundColor = chartColors.slice(0, data.labels?.length || 8)
+          dataset.borderWidth = 0
+        }
+      })
+    }
+
+    return data
+  }
+
+  prepareOptions() {
+    const chartJSType = this.getChartJSType()
+    
+    const defaultOptions = {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: {
+        intersect: false,
+        mode: 'index'
+      },
+      // Set indexAxis for horizontal bar charts
+      indexAxis: this.typeValue === 'horizontal_bar' ? 'y' : 'x',
+      plugins: {
+        legend: {
+          display: true,
+          position: 'bottom',
+          labels: {
+            usePointStyle: true,
+            pointStyle: 'circle',
+            padding: 20,
+            font: {
+              family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+              size: 12,
+              weight: '500'
+            },
+            color: '#1D1D1F'
+          }
+        },
+        tooltip: {
+          backgroundColor: 'rgba(0, 0, 0, 0.8)',
+          titleColor: '#ffffff',
+          bodyColor: '#ffffff',
+          borderColor: 'rgba(255, 255, 255, 0.1)',
+          borderWidth: 1,
+          cornerRadius: 8,
+          displayColors: true,
+          titleFont: {
+            family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+            size: 13,
+            weight: '600'
+          },
+          bodyFont: {
+            family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+            size: 12,
+            weight: '500'
+          }
+        }
+      },
+      scales: {
+        x: {
+          grid: {
+            display: true,
+            color: 'rgba(0, 0, 0, 0.05)',
+            lineWidth: 1
+          },
+          ticks: {
+            font: {
+              family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+              size: 11,
+              weight: '500'
+            },
+            color: 'rgba(60, 60, 67, 0.6)'
+          },
+          border: {
+            display: false
+          }
+        },
+        y: {
+          grid: {
+            display: true,
+            color: 'rgba(0, 0, 0, 0.05)',
+            lineWidth: 1
+          },
+          ticks: {
+            font: {
+              family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+              size: 11,
+              weight: '500'
+            },
+            color: 'rgba(60, 60, 67, 0.6)'
+          },
+          border: {
+            display: false
+          }
+        }
+      }
+    }
+
+    // Remove scales for pie/doughnut charts
+    if (chartJSType === 'doughnut' || chartJSType === 'pie') {
+      delete defaultOptions.scales
+    }
+
+    // Merge with custom options
+    return this.mergeOptions(defaultOptions, this.optionsValue || {})
+  }
+
+  mergeOptions(defaultOptions, customOptions) {
+    return Object.assign({}, defaultOptions, customOptions)
+  }
+
+  hexToRgba(hex, alpha) {
+    const r = parseInt(hex.slice(1, 3), 16)
+    const g = parseInt(hex.slice(3, 5), 16) 
+    const b = parseInt(hex.slice(5, 7), 16)
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  }
+}

data/app/javascript/easy_admin/controllers/collapsible_filters_controller.js

@@ -0,0 +1,118 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="collapsible-filters"
+export default class extends Controller {
+  static targets = ["content", "icon"]
+  static values = { 
+    expanded: { type: Boolean, default: true }
+  }
+
+  connect() {
+    // Load saved state
+    this.loadState()
+    
+    // Set initial state
+    if (this.expandedValue) {
+      this.expand(false) // Don't animate on initial load
+    } else {
+      this.collapse(false) // Don't animate on initial load
+    }
+    
+    // Ensure icon has correct initial rotation
+    this.updateIconRotation()
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    
+    if (this.expandedValue) {
+      this.collapse(true)
+    } else {
+      this.expand(true)
+    }
+  }
+
+  expand(animate = true) {
+    this.expandedValue = true
+    
+    if (animate) {
+      // Animate expansion
+      this.contentTarget.style.maxHeight = this.contentTarget.scrollHeight + "px"
+      this.contentTarget.classList.remove("opacity-0")
+      this.contentTarget.classList.add("opacity-100")
+    } else {
+      // Instant expansion
+      this.contentTarget.style.maxHeight = "none"
+      this.contentTarget.classList.remove("opacity-0")
+      this.contentTarget.classList.add("opacity-100")
+    }
+    
+    // Update icon rotation
+    this.updateIconRotation()
+    
+    // Save state
+    this.saveState(true)
+  }
+
+  collapse(animate = true) {
+    this.expandedValue = false
+    
+    if (animate) {
+      // Prepare for animation
+      this.contentTarget.style.maxHeight = this.contentTarget.scrollHeight + "px"
+      
+      // Force reflow
+      this.contentTarget.offsetHeight
+      
+      // Animate collapse
+      this.contentTarget.style.maxHeight = "0px"
+      this.contentTarget.classList.remove("opacity-100")
+      this.contentTarget.classList.add("opacity-0")
+    } else {
+      // Instant collapse
+      this.contentTarget.style.maxHeight = "0px"
+      this.contentTarget.classList.remove("opacity-100")
+      this.contentTarget.classList.add("opacity-0")
+    }
+    
+    // Update icon rotation
+    this.updateIconRotation()
+    
+    // Save state
+    this.saveState(false)
+  }
+
+  saveState(expanded) {
+    // Save the state for this specific page
+    const key = `filters_expanded_${window.location.pathname}`
+    localStorage.setItem(key, expanded ? "true" : "false")
+  }
+
+  loadState() {
+    // Load saved state for this specific page
+    const key = `filters_expanded_${window.location.pathname}`
+    const savedState = localStorage.getItem(key)
+    
+    if (savedState !== null) {
+      this.expandedValue = savedState === "true"
+    }
+    // If no saved state exists, use the default value (true - expanded)
+  }
+
+  updateIconRotation() {
+    if (this.hasIconTarget) {
+      const svg = this.iconTarget.querySelector("svg")
+      if (svg) {
+        if (this.expandedValue) {
+          // Expanded state: icon points down (no rotation)
+          svg.classList.remove("-rotate-90")
+          svg.style.transform = "rotate(0deg)"
+        } else {
+          // Collapsed state: icon points right (rotated -90 degrees)
+          svg.classList.add("-rotate-90")
+          svg.style.transform = "rotate(-90deg)"
+        }
+      }
+    }
+  }
+}

data/app/javascript/easy_admin/controllers/confirmation_modal_controller.js

@@ -0,0 +1,64 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["modal"]
+
+  connect() {
+    // Show modal with animation
+    this.element.style.opacity = '0'
+    this.element.style.display = 'block'
+    requestAnimationFrame(() => {
+      this.element.style.transition = 'opacity 0.3s ease-out'
+      this.element.style.opacity = '1'
+    })
+
+    // Scale animation for modal
+    this.modalTarget.style.transform = 'scale(0.9)'
+    this.modalTarget.style.transition = 'transform 0.3s ease-out'
+    requestAnimationFrame(() => {
+      this.modalTarget.style.transform = 'scale(1)'
+    })
+
+    // Prevent body scroll
+    document.body.style.overflow = 'hidden'
+  }
+
+  disconnect() {
+    // Restore body scroll
+    document.body.style.overflow = ''
+  }
+
+  confirm() {
+    // Dispatch confirmed event
+    this.dispatch('confirmed')
+    this.close()
+  }
+
+  cancel() {
+    // Dispatch cancelled event
+    this.dispatch('cancelled')
+    this.close()
+  }
+
+  clickOutside(event) {
+    // Close if clicked outside modal content
+    if (event.target === this.element) {
+      this.cancel()
+    }
+  }
+
+  close() {
+    // Hide with animation
+    this.element.style.transition = 'opacity 0.3s ease-out'
+    this.modalTarget.style.transform = 'scale(0.9)'
+    this.element.style.opacity = '0'
+    
+    setTimeout(() => {
+      // Clear the modal turbo frame
+      const modalFrame = document.getElementById("modal")
+      if (modalFrame) {
+        modalFrame.innerHTML = ""
+      }
+    }, 300)
+  }
+}