easy-admin-rails 0.1.0

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

@@ -0,0 +1,618 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["search", "dropdown", "selectedItems", "option", "hiddenInput", "display", "noResults", "loading"]
+  static values = { multiple: Boolean, placeholder: String, suggest: Boolean, suggestUrl: String }
+
+  connect() {
+    this.setupDropdown()
+    this.setupClickOutside()
+    this.updateContainerState()
+    this.setupSuggestMode()
+    
+    if (this.suggestValue) {
+      // For suggest mode, initialize with empty options
+      this.initializeSuggestMode()
+    } else {
+      // For static mode, use existing initialization
+      this.initializeOptionsVisibility()
+      this.initializeSelectedOption()
+    }
+  }
+
+  disconnect() {
+    if (this.clickOutsideHandler) {
+      document.removeEventListener('click', this.clickOutsideHandler)
+    }
+  }
+
+  setupDropdown() {
+  }
+
+  setupClickOutside() {
+    this.clickOutsideHandler = (event) => {
+      if (!this.element.contains(event.target)) {
+        this.closeDropdown()
+      }
+    }
+    document.addEventListener('click', this.clickOutsideHandler)
+  }
+
+  toggleDropdown() {
+    this.dropdownTarget.classList.toggle('show')
+  }
+
+  openDropdown() {
+    this.dropdownTarget.classList.add('show')
+  }
+
+  closeDropdown() {
+    this.dropdownTarget.classList.remove('show')
+    // Reset max-height for next opening
+    this.dropdownTarget.style.maxHeight = ''
+  }
+
+  animateToContentHeight() {
+    // Calculate the actual height needed for visible content
+    const dropdown = this.dropdownTarget
+    
+    // Temporarily remove height restrictions to measure content
+    const originalMaxHeight = dropdown.style.maxHeight
+    dropdown.style.maxHeight = 'none'
+    const contentHeight = dropdown.scrollHeight
+    
+    // Set current height as starting point
+    dropdown.style.maxHeight = originalMaxHeight || '300px'
+    
+    // Force reflow
+    dropdown.offsetHeight
+    
+    // Animate to actual content height, but cap at reasonable maximum
+    const targetHeight = Math.min(contentHeight, 300)
+    dropdown.style.maxHeight = `${targetHeight}px`
+  }
+
+  calculateTargetHeight(optionStates) {
+    const dropdown = this.dropdownTarget
+    
+    // Temporarily hide all options
+    this.optionTargets.forEach(option => option.style.visibility = 'hidden')
+    
+    // Show only the options that should be visible
+    optionStates.forEach(({option, shouldShow}) => {
+      option.style.display = shouldShow ? 'block' : 'none'
+      option.style.visibility = 'visible'
+    })
+    
+    // Measure height
+    dropdown.style.maxHeight = 'none'
+    const height = dropdown.scrollHeight
+    
+    // Restore all options visibility for now
+    this.optionTargets.forEach(option => {
+      option.style.display = 'block'
+      option.style.visibility = 'visible'
+    })
+    
+    return Math.min(height, 300)
+  }
+
+  animateHeightChange(startHeight, targetHeight, callback) {
+    const dropdown = this.dropdownTarget
+    
+    // Set explicit start height
+    dropdown.style.maxHeight = `${startHeight}px`
+    
+    // Force reflow
+    dropdown.offsetHeight
+    
+    // Trigger callback after a tiny delay to start the transition
+    requestAnimationFrame(() => {
+      dropdown.style.maxHeight = `${targetHeight}px`
+      if (callback) {
+        setTimeout(callback, 50) // Small delay so animation starts smoothly
+      }
+    })
+  }
+
+  filter(event) {
+    const searchTerm = event.target.value
+    console.log('Filter called with term:', searchTerm, 'Suggest mode:', this.suggestValue)
+    
+    if (this.suggestValue) {
+      // For suggest mode, use debounced API search
+      this.debouncedSuggestSearch(searchTerm)
+    } else {
+      // For static mode, use existing filtering logic
+      this.filterStaticOptions(searchTerm)
+    }
+  }
+
+  filterStaticOptions(searchTerm) {
+    const searchTermLower = searchTerm.toLowerCase()
+    let visibleCount = 0
+    
+    // First, set the dropdown to show and capture current height
+    this.openDropdown()
+    const startHeight = this.dropdownTarget.scrollHeight
+    
+    // Determine which options should be visible
+    const optionStates = this.optionTargets.map(option => {
+      const text = option.textContent.toLowerCase()
+      // If search is empty, show all unselected options
+      const shouldShow = searchTermLower.length === 0 
+        ? !this.isOptionSelected(option.dataset.value)
+        : text.includes(searchTermLower) && !this.isOptionSelected(option.dataset.value)
+      return { option, shouldShow }
+    })
+    
+    // Count visible options first
+    visibleCount = optionStates.filter(state => state.shouldShow).length
+    
+    // Show/hide no results message
+    if (this.hasNoResultsTarget) {
+      if (visibleCount === 0 && searchTermLower.length > 0) {
+        this.noResultsTarget.style.display = 'block'
+      } else {
+        this.noResultsTarget.style.display = 'none'
+      }
+    }
+    
+    // Calculate target height by temporarily showing only visible options
+    const targetHeight = this.calculateTargetHeight(optionStates)
+    
+    // Animate the height change first
+    this.animateHeightChange(startHeight, targetHeight, () => {
+      // After animation starts, update option visibility
+      optionStates.forEach(({option, shouldShow}) => {
+        option.style.display = shouldShow ? 'block' : 'none'
+      })
+    })
+  }
+
+  handleKeydown(event) {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      const visibleOptions = this.optionTargets.filter(option => 
+        option.style.display !== 'none'
+      )
+      if (visibleOptions.length > 0) {
+        this.selectOption({ target: visibleOptions[0] })
+      }
+    } else if (event.key === 'Escape') {
+      this.closeDropdown()
+      this.searchTarget.blur()
+    }
+  }
+
+  selectOption(event) {
+    const option = event.target
+    const value = option.dataset.value
+    const text = option.textContent.trim()
+
+    if (this.multipleValue) {
+      this.addMultipleSelection(value, text)
+      this.clearSearch()
+    } else {
+      this.setSingleSelection(value, text)
+    }
+
+    this.closeDropdown()
+    this.dispatchChangeEvent()
+  }
+
+  addMultipleSelection(value, text) {
+    // Check if already selected
+    const existingItems = Array.from(this.selectedItemsTarget.children)
+    const alreadySelected = existingItems.some(item => 
+      item.dataset.value === value
+    )
+
+    if (!alreadySelected) {
+      // Add to selected items display
+      const selectedItem = this.createSelectedItem(value, text)
+      this.selectedItemsTarget.appendChild(selectedItem)
+
+      // Add hidden input
+      this.addHiddenInput(value)
+
+      // Hide the option
+      const option = this.optionTargets.find(opt => opt.dataset.value === value)
+      if (option) {
+        option.style.display = 'none'
+      }
+
+      // Update container state
+      this.updateContainerState()
+    }
+  }
+
+  setSingleSelection(value, text) {
+    // Update the input (either search target for suggest mode or display target for static mode)
+    if (this.suggestValue) {
+      // For suggest mode, update the search input
+      if (this.hasSearchTarget) {
+        this.searchTarget.value = text
+      }
+    } else {
+      // For static mode, update the display input
+      if (this.hasDisplayTarget) {
+        this.displayTarget.value = text
+      }
+    }
+
+    // Update the hidden input
+    const hiddenInput = this.hiddenInputTargets[0]
+    if (hiddenInput) {
+      hiddenInput.value = value
+    }
+
+    // Update visual selection in dropdown
+    this.updateOptionSelection(value)
+  }
+
+  createSelectedItem(value, text) {
+    const span = document.createElement('span')
+    span.className = 'selected-item'
+    span.dataset.value = value
+    span.innerHTML = `${text}<span class="remove-item">×</span>`
+    
+    span.addEventListener('click', this.removeItem.bind(this))
+    
+    return span
+  }
+
+  addHiddenInput(value) {
+    const input = document.createElement('input')
+    input.type = 'hidden'
+    input.name = this.getFieldName()
+    input.value = value
+    input.dataset.selectFieldTarget = 'hiddenInput'
+    
+    this.element.appendChild(input)
+  }
+
+  removeItem(event) {
+    const selectedItem = event.currentTarget
+    const value = selectedItem.dataset.value
+
+    // Remove the selected item display
+    selectedItem.remove()
+
+    // Remove corresponding hidden input
+    const hiddenInput = this.hiddenInputTargets.find(input => 
+      input.value === value
+    )
+    
+    if (hiddenInput) {
+      hiddenInput.remove()
+    }
+
+    // Show the option again
+    const option = this.optionTargets.find(opt => opt.dataset.value === value)
+    if (option) {
+      option.style.display = 'block'
+    }
+
+    // Update container state
+    this.updateContainerState()
+
+    this.dispatchChangeEvent()
+  }
+
+  clearAll() {
+    // Remove all selected items
+    this.selectedItemsTarget.innerHTML = ''
+
+    // Remove all hidden inputs
+    this.hiddenInputTargets.forEach(input => input.remove())
+
+    // Show all options
+    this.optionTargets.forEach(option => {
+      option.style.display = 'block'
+    })
+
+    // Update container state
+    this.updateContainerState()
+
+    // Clear search
+    this.clearSearch()
+
+    this.dispatchChangeEvent()
+  }
+
+  clearSearch() {
+    if (this.hasSearchTarget) {
+      this.searchTarget.value = ''
+      // Reset all options to visible
+      this.optionTargets.forEach(option => {
+        if (!this.isOptionSelected(option.dataset.value)) {
+          option.style.display = 'block'
+        }
+      })
+      // Hide no results message
+      if (this.hasNoResultsTarget) {
+        this.noResultsTarget.style.display = 'none'
+      }
+      // Animate to new height
+      this.animateToContentHeight()
+    }
+  }
+
+  isOptionSelected(value) {
+    if (this.multipleValue) {
+      const selectedItems = Array.from(this.selectedItemsTarget.children)
+      return selectedItems.some(item => item.dataset.value === value)
+    } else {
+      // For single select, check the hidden input value
+      const hiddenInput = this.hiddenInputTargets[0]
+      return hiddenInput && hiddenInput.value === value
+    }
+  }
+
+  getFieldName() {
+    // Extract field name from the first hidden input if exists
+    const firstHidden = this.hiddenInputTargets[0]
+    if (firstHidden) {
+      return firstHidden.name
+    }
+    
+    // Use field name from data attribute
+    const fieldName = this.element.dataset.fieldName
+    if (fieldName) {
+      const form = this.element.closest('form')
+      const modelName = form.querySelector('[name*="["]')?.name.match(/^(\w+)\[/)?.[1] || 'user'
+      return this.multipleValue ? `${modelName}[${fieldName}][]` : `${modelName}[${fieldName}]`
+    }
+    
+    // Final fallback
+    return this.multipleValue ? 'user[field][]' : 'user[field]'
+  }
+
+  initializeOptionsVisibility() {
+    // Show all unselected options initially
+    this.optionTargets.forEach(option => {
+      if (!this.isOptionSelected(option.dataset.value)) {
+        option.style.display = 'block'
+      } else {
+        option.style.display = 'none'
+      }
+    })
+  }
+
+  initializeSelectedOption() {
+    // For single select, highlight the currently selected option
+    if (!this.multipleValue) {
+      const hiddenInput = this.hiddenInputTargets[0]
+      if (hiddenInput && hiddenInput.value) {
+        this.updateOptionSelection(hiddenInput.value)
+      }
+    }
+  }
+
+  updateOptionSelection(selectedValue) {
+    // Remove selected class from all options
+    this.optionTargets.forEach(option => {
+      option.classList.remove('selected', 'bg-blue-100', 'text-blue-900')
+    })
+
+    // Add selected class to the current option
+    const selectedOption = this.optionTargets.find(option => 
+      option.dataset.value === selectedValue
+    )
+    if (selectedOption) {
+      selectedOption.classList.add('selected', 'bg-blue-100', 'text-blue-900')
+    }
+  }
+
+  updateContainerState() {
+    if (this.multipleValue && this.hasSelectedItemsTarget) {
+      const hasSelections = this.selectedItemsTarget.children.length > 0
+      
+      if (hasSelections) {
+        this.element.classList.add('has-selections')
+      } else {
+        this.element.classList.remove('has-selections')
+      }
+    }
+  }
+
+  removeOption(event) {
+    const element = event.target
+    const valueToRemove = element.dataset.value || element.dataset.removeValue
+
+    if (!valueToRemove) return
+
+    // Remove from selected items if multiple
+    if (this.multipleValue) {
+      const selectedItem = this.selectedItemsTarget.querySelector(`[data-value="${valueToRemove}"]`)
+      if (selectedItem) {
+        selectedItem.remove()
+      }
+    }
+
+    // Remove corresponding hidden input
+    const hiddenInput = this.hiddenInputTargets.find(input => 
+      input.value === valueToRemove
+    )
+    if (hiddenInput) {
+      hiddenInput.remove()
+    }
+
+    // Show the option again in dropdown
+    const option = this.optionTargets.find(opt => opt.dataset.value === valueToRemove)
+    if (option) {
+      option.style.display = 'block'
+    }
+
+    // Clear single select display if needed
+    if (!this.multipleValue && this.hasDisplayTarget) {
+      this.displayTarget.value = ''
+    }
+
+    // Update container state
+    this.updateContainerState()
+
+    // Animate removal of the element that triggered this action
+    this.animateRemoval(element)
+
+    this.dispatchChangeEvent()
+  }
+
+  animateRemoval(element) {
+    const itemToRemove = element.closest('.ea-has-many-item') || element.closest('.selected-item')
+    if (!itemToRemove) return
+
+    // Add removing class for CSS transition
+    itemToRemove.classList.add('removing')
+    
+    // Remove after animation completes
+    setTimeout(() => {
+      if (itemToRemove.parentNode) {
+        itemToRemove.remove()
+      }
+    }, 300) // Match CSS transition duration
+  }
+
+  dispatchChangeEvent() {
+    const event = new CustomEvent('select-field:change', {
+      detail: {
+        selectedValues: this.hiddenInputTargets.map(input => input.value),
+        element: this.element
+      },
+      bubbles: true
+    })
+    this.element.dispatchEvent(event)
+  }
+
+  // Suggest mode methods
+  setupSuggestMode() {
+    if (this.suggestValue) {
+      // Setup debounced search
+      this.debounceTimeout = null
+      this.lastSearchTerm = ''
+    }
+  }
+
+  initializeSuggestMode() {
+    // Clear any existing options from static mode
+    this.optionTargets.forEach(option => option.remove())
+    
+    // Show initial empty state
+    this.showMessage('Type to search...')
+  }
+
+  debouncedSuggestSearch(searchTerm) {
+    // Clear existing timeout
+    if (this.debounceTimeout) {
+      clearTimeout(this.debounceTimeout)
+    }
+
+    // Don't search if term hasn't changed
+    if (searchTerm === this.lastSearchTerm) {
+      return
+    }
+
+    this.lastSearchTerm = searchTerm
+
+    // Show loading state immediately
+    this.showLoadingState()
+    this.openDropdown()
+
+    // Debounce the actual search
+    this.debounceTimeout = setTimeout(() => {
+      this.performSuggestSearch(searchTerm)
+    }, 300) // 300ms debounce
+  }
+
+  async performSuggestSearch(searchTerm) {
+    try {
+      const url = new URL(this.suggestUrlValue, window.location.origin)
+      url.searchParams.set('q', searchTerm)
+
+      const response = await fetch(url.toString(), {
+        headers: {
+          'Accept': 'application/json',
+          'X-Requested-With': 'XMLHttpRequest'
+        }
+      })
+
+      if (!response.ok) {
+        throw new Error('Network response was not ok')
+      }
+
+      const data = await response.json()
+      this.renderSuggestOptions(data.options || [])
+      
+    } catch (error) {
+      console.error('Suggest search failed:', error)
+      this.showMessage('Search failed. Please try again.')
+    }
+  }
+
+  renderSuggestOptions(options) {
+    // Clear existing options
+    this.clearDynamicOptions()
+
+    if (options.length === 0) {
+      this.showMessage('No options found')
+      return
+    }
+
+    // Hide loading and no-results messages
+    this.hideAllMessages()
+
+    // Create and insert new options
+    const dropdown = this.dropdownTarget
+    options.forEach(option => {
+      const optionElement = this.createOptionElement(option)
+      dropdown.appendChild(optionElement)
+    })
+
+    // Animate to new height
+    this.animateToContentHeight()
+  }
+
+  createOptionElement(option) {
+    const [text, value] = Array.isArray(option) ? option : [option.text || option, option.value || option]
+    
+    const div = document.createElement('div')
+    div.className = 'select-option px-3 py-2 text-sm text-gray-900 cursor-pointer hover:bg-blue-50 hover:text-blue-900 transition-colors duration-150'
+    div.dataset.value = value
+    div.dataset.action = 'click->select-field#selectOption'
+    div.dataset.selectFieldTarget = 'option'
+    div.textContent = text
+
+    return div
+  }
+
+  clearDynamicOptions() {
+    // Remove all dynamically created options
+    const options = this.dropdownTarget.querySelectorAll('[data-select-field-target="option"]')
+    options.forEach(option => option.remove())
+  }
+
+  showLoadingState() {
+    this.hideAllMessages()
+    if (this.hasLoadingTarget) {
+      this.loadingTarget.style.display = 'block'
+    }
+  }
+
+  showMessage(message) {
+    this.hideAllMessages()
+    if (this.hasNoResultsTarget) {
+      this.noResultsTarget.textContent = message
+      this.noResultsTarget.style.display = 'block'
+    }
+  }
+
+  hideAllMessages() {
+    if (this.hasNoResultsTarget) {
+      this.noResultsTarget.style.display = 'none'
+    }
+    if (this.hasLoadingTarget) {
+      this.loadingTarget.style.display = 'none'
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  open() {
+    console.log('Settings button clicked - dispatching settings:open event')
+    document.dispatchEvent(new CustomEvent('settings:open'))
+  }
+}