easy-admin-rails 0.1.0

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

@@ -0,0 +1,227 @@
+import { Controller } from "@hotwired/stimulus"
+import { get, post } from "@rails/request.js"
+
+export default class extends Controller {
+  static targets = ["menu"]
+  static values = { 
+    recordId: String,
+    resourceName: String
+  }
+  
+  connect() {
+    // Hide menu when clicking outside
+    this.boundHideMenu = this.hideMenuOnOutsideClick.bind(this)
+    document.addEventListener('click', this.boundHideMenu)
+    
+    // Hide menu when scrolling
+    this.boundHideOnScroll = this.hideMenu.bind(this)
+    document.addEventListener('scroll', this.boundHideOnScroll, true)
+  }
+  
+  disconnect() {
+    document.removeEventListener('click', this.boundHideMenu)
+    document.removeEventListener('scroll', this.boundHideOnScroll, true)
+    this.removeExistingMenu()
+  }
+  
+  showMenu(event) {
+    // Prevent default right-click menu
+    event.preventDefault()
+    event.stopPropagation()
+    
+    // Remove any existing menu
+    this.removeExistingMenu()
+    
+    // Get row data
+    const row = event.currentTarget
+    const recordId = this.recordIdValue || row.dataset.recordId
+    const resourceName = this.resourceNameValue || row.dataset.resourceName
+    
+    if (!recordId || !resourceName) {
+      console.error('Missing recordId or resourceName for context menu')
+      return
+    }
+    
+    // Store position for menu placement
+    this.menuX = event.clientX
+    this.menuY = event.clientY
+    
+    // Load context menu via Turbo
+    this.loadContextMenu(resourceName, recordId)
+  }
+  
+  async loadContextMenu(resourceName, recordId) {
+    try {
+      // Load menu content via Turbo - it will update the context-menu-{recordId} container
+      const response = await get(`/admin/${resourceName}/${recordId}/context_menu`, {
+        responseKind: 'turbo-stream'
+      })
+      
+      // After turbo stream loads, position and show the menu
+      setTimeout(() => {
+        this.positionAndShowMenu(recordId)
+      }, 10)
+      
+    } catch (error) {
+      console.error('Failed to load context menu:', error)
+      this.removeExistingMenu()
+    }
+  }
+  
+  positionAndShowMenu(recordId) {
+    const menuContainer = document.getElementById(`context-menu-${recordId}`)
+    const contextMenu = menuContainer?.querySelector('.context-menu')
+    
+    if (!menuContainer || !contextMenu) return
+    
+    // Get menu dimensions after it's been rendered
+    const menuRect = contextMenu.getBoundingClientRect()
+    const windowWidth = window.innerWidth
+    const windowHeight = window.innerHeight
+    
+    // Calculate position to keep menu within viewport
+    let x = this.menuX
+    let y = this.menuY
+    
+    // Adjust horizontal position if menu would overflow right edge
+    if (x + menuRect.width > windowWidth) {
+      x = windowWidth - menuRect.width - 10
+    }
+    
+    // Adjust vertical position if menu would overflow bottom edge
+    if (y + menuRect.height > windowHeight) {
+      y = windowHeight - menuRect.height - 10
+    }
+    
+    // Ensure menu doesn't go off left or top edges
+    x = Math.max(10, x)
+    y = Math.max(10, y)
+    
+    // Apply final position to container and enable pointer events
+    menuContainer.style.left = `${x}px`
+    menuContainer.style.top = `${y}px`
+    menuContainer.classList.remove('pointer-events-none')
+    
+    // Make context menu visible with animation
+    contextMenu.classList.add('visible')
+  }
+  
+  hideMenu() {
+    this.removeExistingMenu()
+  }
+  
+  hideMenuOnOutsideClick(event) {
+    // Don't hide if clicking inside the menu
+    const menuContainer = document.getElementById('context-menu-container')
+    if (menuContainer && menuContainer.contains(event.target)) {
+      return
+    }
+    
+    // Hide the menu
+    this.hideMenu()
+  }
+  
+  removeExistingMenu() {
+    // Hide all context menus
+    const allMenus = document.querySelectorAll('[id^="context-menu-"]')
+    allMenus.forEach(menu => {
+      const contextMenu = menu.querySelector('.context-menu')
+      if (contextMenu) {
+        contextMenu.classList.remove('visible')
+      }
+      menu.classList.add('pointer-events-none')
+      menu.innerHTML = ''
+    })
+  }
+  
+  // Action handlers
+  executeAction(event) {
+    const button = event.currentTarget
+    const actionClass = button.dataset.actionClass
+    const executionMode = button.dataset.executionMode
+    const recordId = button.dataset.recordId
+    const resourceName = button.dataset.resourceName
+    const confirmMessage = button.dataset.confirm
+    
+    // Hide menu immediately
+    this.hideMenu()
+    
+    // For instant actions, show confirmation modal first
+    if (executionMode === 'instant' && confirmMessage) {
+      this.showConfirmationModal(confirmMessage, resourceName, recordId, actionClass)
+    } else {
+      // Execute immediately if no confirmation needed
+      this.performAction(resourceName, recordId, actionClass)
+    }
+  }
+  
+  showModal(event) {
+    const button = event.currentTarget
+    const actionClass = button.dataset.actionClass
+    const recordId = button.dataset.recordId
+    const resourceName = button.dataset.resourceName
+    
+    // Hide menu immediately
+    this.hideMenu()
+    
+    // Load modal form
+    this.loadModalForm(resourceName, recordId, actionClass)
+  }
+  
+  async showConfirmationModal(message, resourceName, recordId, actionClass) {
+    try {
+      // Store action details for when confirmation is received
+      this.pendingAction = { resourceName, recordId, actionClass }
+      
+      // Listen for confirmation modal events
+      document.addEventListener('confirmation-modal:confirmed', this.handleConfirmation.bind(this), { once: true })
+      document.addEventListener('confirmation-modal:cancelled', this.handleCancellation.bind(this), { once: true })
+      
+      // Load confirmation modal
+      const response = await get('/admin/confirmation_modal', {
+        responseKind: 'turbo-stream',
+        query: {
+          message: message,
+          title: 'Confirm Action',
+          confirm_text: 'Execute',
+          danger: 'true'
+        }
+      })
+    } catch (error) {
+      console.error('Failed to load confirmation modal:', error)
+    }
+  }
+  
+  handleConfirmation() {
+    if (this.pendingAction) {
+      const { resourceName, recordId, actionClass } = this.pendingAction
+      this.performAction(resourceName, recordId, actionClass)
+      this.pendingAction = null
+    }
+  }
+  
+  handleCancellation() {
+    this.pendingAction = null
+  }
+  
+  async performAction(resourceName, recordId, actionClass) {
+    try {
+      const response = await post(`/admin/${resourceName}/${recordId}/actions/${actionClass}`, {
+        responseKind: 'turbo-stream',
+        body: new FormData() // Empty form data for instant actions
+      })
+    } catch (error) {
+      console.error('Failed to execute action:', error)
+    }
+  }
+  
+  async loadModalForm(resourceName, recordId, actionClass) {
+    try {
+      const response = await get(`/admin/${resourceName}/${recordId}/actions/${actionClass}/form`, {
+        responseKind: 'turbo-stream'
+      })
+    } catch (error) {
+      console.error('Failed to load modal form:', error)
+    }
+  }
+}

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

@@ -0,0 +1,309 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "modal", "grid", "monthYear"]
+  
+  connect() {
+    this.currentDate = new Date()
+    this.selectedDate = this.parseInputValue()
+    this.viewDate = new Date(this.selectedDate || this.currentDate)
+    this.isOpen = false
+    
+    // Ensure modal starts with correct classes
+    this.modalTarget.classList.add('hidden', 'opacity-0', 'scale-95')
+    
+    this.updateDisplay()
+  }
+  
+  disconnect() {
+    this.close()
+  }
+  
+  // Toggle date picker modal
+  toggle(event) {
+    if (event) {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+    
+    if (this.isOpen) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+  
+  // Open date picker
+  open() {
+    this.isOpen = true
+    this.adjustModalPosition()
+    this.modalTarget.classList.remove('hidden')
+    // Use setTimeout to ensure the transition works
+    setTimeout(() => {
+      this.modalTarget.classList.add('opacity-100', 'scale-100')
+      this.modalTarget.classList.remove('opacity-0', 'scale-95')
+    }, 10)
+    this.updateCalendar()
+    
+    // Add click outside listener with a small delay to prevent immediate close
+    setTimeout(() => {
+      document.addEventListener('click', this.handleClickOutside)
+      document.addEventListener('keydown', this.handleKeydown)
+    }, 100)
+  }
+  
+  // Adjust modal position for mobile
+  adjustModalPosition() {
+    const inputRect = this.inputTarget.getBoundingClientRect()
+    const viewport = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    }
+    
+    // Check if we're on mobile (viewport width < 640px - sm breakpoint)
+    if (viewport.width < 640) {
+      // On mobile, center the modal horizontally and add some top margin
+      this.modalTarget.style.left = '0'
+      this.modalTarget.style.right = '0'
+      this.modalTarget.style.top = '8px' // mt-2 equivalent
+    } else {
+      // On desktop, remove any mobile-specific positioning
+      this.modalTarget.style.left = ''
+      this.modalTarget.style.right = ''
+      this.modalTarget.style.top = ''
+    }
+  }
+  
+  // Close date picker
+  close() {
+    this.isOpen = false
+    this.modalTarget.classList.add('opacity-0', 'scale-95')
+    this.modalTarget.classList.remove('opacity-100', 'scale-100')
+    
+    // Wait for animation to complete before hiding
+    setTimeout(() => {
+      if (!this.isOpen) {
+        this.modalTarget.classList.add('hidden')
+      }
+    }, 200)
+    
+    // Remove listeners
+    document.removeEventListener('click', this.handleClickOutside)
+    document.removeEventListener('keydown', this.handleKeydown)
+  }
+  
+  // Handle click outside (called from data-action on modal)
+  clickOutside(event) {
+    // Only close if the click target is the modal backdrop itself
+    if (event.target === this.modalTarget) {
+      this.close()
+    }
+  }
+  
+  // Prevent modal close when clicking inside
+  preventClose(event) {
+    event.stopPropagation()
+  }
+  
+  // Navigation methods
+  previousMonth() {
+    this.viewDate.setMonth(this.viewDate.getMonth() - 1)
+    this.updateCalendar()
+  }
+  
+  nextMonth() {
+    this.viewDate.setMonth(this.viewDate.getMonth() + 1)
+    this.updateCalendar()
+  }
+  
+  // Quick actions
+  today() {
+    this.selectedDate = new Date()
+    this.viewDate = new Date()
+    this.updateInput()
+    this.updateCalendar()
+  }
+  
+  clear() {
+    this.selectedDate = null
+    this.inputTarget.value = ""
+    this.updateCalendar()
+  }
+  
+  // Select a date
+  selectDate(event) {
+    const day = parseInt(event.target.dataset.day)
+    if (!day) return
+    
+    this.selectedDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth(), day)
+    this.updateInput()
+    this.updateCalendar()
+    this.close()
+  }
+  
+  // Update the calendar display
+  updateCalendar() {
+    this.updateMonthYear()
+    this.updateGrid()
+  }
+  
+  // Update month/year display
+  updateMonthYear() {
+    const monthNames = [
+      'January', 'February', 'March', 'April', 'May', 'June',
+      'July', 'August', 'September', 'October', 'November', 'December'
+    ]
+    
+    const month = monthNames[this.viewDate.getMonth()]
+    const year = this.viewDate.getFullYear()
+    
+    this.monthYearTarget.textContent = `${month} ${year}`
+  }
+  
+  // Update calendar grid
+  updateGrid() {
+    const year = this.viewDate.getFullYear()
+    const month = this.viewDate.getMonth()
+    
+    // First day of the month
+    const firstDay = new Date(year, month, 1)
+    const lastDay = new Date(year, month + 1, 0)
+    
+    // Start from Sunday of the week containing the first day
+    const startDate = new Date(firstDay)
+    startDate.setDate(startDate.getDate() - startDate.getDay())
+    
+    // Generate 6 weeks (42 days)
+    const days = []
+    const currentDate = new Date(startDate)
+    
+    for (let i = 0; i < 42; i++) {
+      days.push(new Date(currentDate))
+      currentDate.setDate(currentDate.getDate() + 1)
+    }
+    
+    // Render days
+    this.gridTarget.innerHTML = days.map(date => {
+      const day = date.getDate()
+      const isCurrentMonth = date.getMonth() === month
+      const isToday = this.isSameDay(date, new Date())
+      const isSelected = this.selectedDate && this.isSameDay(date, this.selectedDate)
+      const isWeekend = date.getDay() === 0 || date.getDay() === 6
+      
+      let classes = ['text-sm', 'p-2', 'sm:p-2', 'py-3', 'sm:py-2', 'rounded-lg', 'transition-all', 'duration-200', 'touch-manipulation', 'min-h-[40px]', 'sm:min-h-0']
+      
+      if (!isCurrentMonth) {
+        classes.push('text-gray-300', 'cursor-not-allowed')
+      } else if (isSelected) {
+        classes.push('bg-blue-600', 'text-white', 'font-semibold', 'shadow-sm')
+      } else if (isToday) {
+        classes.push('bg-blue-50', 'text-blue-600', 'font-semibold', 'hover:bg-blue-100')
+      } else if (isWeekend) {
+        classes.push('text-gray-500', 'hover:bg-gray-100')
+      } else {
+        classes.push('text-gray-700', 'hover:bg-gray-100')
+      }
+      
+      return `
+        <button type="button" 
+                class="${classes.join(' ')}" 
+                data-day="${isCurrentMonth ? day : ''}"
+                data-action="click->date-picker#selectDate"
+                ${!isCurrentMonth ? 'disabled' : ''}>
+          ${day}
+        </button>
+      `
+    }).join('')
+  }
+  
+  // Update input field
+  updateInput() {
+    if (this.selectedDate) {
+      this.inputTarget.value = this.formatDate(this.selectedDate)
+    }
+  }
+  
+  // Update display on connect
+  updateDisplay() {
+    if (this.selectedDate) {
+      this.inputTarget.value = this.formatDate(this.selectedDate)
+    }
+  }
+  
+  // Parse input value to Date
+  parseInputValue() {
+    const value = this.inputTarget.value
+    if (!value) return null
+    
+    try {
+      return new Date(value)
+    } catch (e) {
+      return null
+    }
+  }
+  
+  // Format date for display
+  formatDate(date) {
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    })
+  }
+  
+  // Check if two dates are the same day
+  isSameDay(date1, date2) {
+    return date1.getFullYear() === date2.getFullYear() &&
+           date1.getMonth() === date2.getMonth() &&
+           date1.getDate() === date2.getDate()
+  }
+  
+  // Bound methods for event listeners
+  handleClickOutside = (event) => {
+    // Don't close if clicking the input or inside the modal
+    if (!this.element.contains(event.target) && !this.modalTarget.contains(event.target)) {
+      this.close()
+    }
+  }
+  
+  handleKeydown = (event) => {
+    if (event.key === 'Escape') {
+      this.close()
+    } else if (this.isOpen) {
+      switch(event.key) {
+        case 'ArrowLeft':
+          event.preventDefault()
+          this.changeSelectedDate(-1)
+          break
+        case 'ArrowRight':
+          event.preventDefault()
+          this.changeSelectedDate(1)
+          break
+        case 'ArrowUp':
+          event.preventDefault()
+          this.changeSelectedDate(-7)
+          break
+        case 'ArrowDown':
+          event.preventDefault()
+          this.changeSelectedDate(7)
+          break
+        case 'Enter':
+          event.preventDefault()
+          if (this.selectedDate) {
+            this.updateInput()
+            this.close()
+          }
+          break
+      }
+    }
+  }
+  
+  changeSelectedDate(days) {
+    if (!this.selectedDate) {
+      this.selectedDate = new Date()
+    }
+    this.selectedDate.setDate(this.selectedDate.getDate() + days)
+    this.viewDate = new Date(this.selectedDate)
+    this.updateCalendar()
+  }
+}

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

@@ -0,0 +1,63 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["trigger", "menu", "chevron"]
+  static classes = ["open"]
+
+  connect() {
+    this.close()
+    this.setupClickOutside()
+  }
+
+  disconnect() {
+    if (this.clickOutsideHandler) {
+      document.removeEventListener('click', this.clickOutsideHandler)
+    }
+  }
+
+  setupClickOutside() {
+    this.clickOutsideHandler = (event) => {
+      if (!this.element.contains(event.target)) {
+        this.close()
+      }
+    }
+    document.addEventListener('click', this.clickOutsideHandler)
+  }
+
+  toggle() {
+    if (this.isOpen()) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    this.menuTarget.classList.remove('hidden')
+    this.menuTarget.classList.add('block')
+    
+    // Rotate chevron up
+    if (this.hasChevronTarget) {
+      this.chevronTarget.classList.add('rotate-180')
+    }
+    
+    // Add a small delay for smooth animation
+    setTimeout(() => {
+      this.menuTarget.classList.add('animate-fadeIn')
+    }, 10)
+  }
+
+  close() {
+    this.menuTarget.classList.add('hidden')
+    this.menuTarget.classList.remove('block', 'animate-fadeIn')
+    
+    // Rotate chevron back down
+    if (this.hasChevronTarget) {
+      this.chevronTarget.classList.remove('rotate-180')
+    }
+  }
+
+  isOpen() {
+    return !this.menuTarget.classList.contains('hidden')
+  }
+}

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

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { event: String, detail: Object }
+
+  emit() {
+    const eventName = this.eventValue
+    const eventDetail = this.hasDetailValue ? this.detailValue : {}
+    
+    console.log(`Event emitter dispatching: ${eventName}`, eventDetail)
+    
+    const customEvent = new CustomEvent(eventName, { 
+      detail: eventDetail,
+      bubbles: true 
+    })
+    
+    document.dispatchEvent(customEvent)
+  }
+}