easy-admin-rails 0.1.0

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

@@ -0,0 +1,121 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "preview", "currentFile"]
+
+  connect() {
+    this.setupFileInput()
+  }
+
+  setupFileInput() {
+    if (this.hasInputTarget) {
+      this.inputTarget.addEventListener('change', this.handleFileChange.bind(this))
+    }
+  }
+
+  handleFileChange(event) {
+    const files = event.target.files
+    if (files.length > 0) {
+      this.updatePreview(files)
+    }
+  }
+
+  updatePreview(files) {
+    if (!this.hasPreviewTarget) return
+
+    this.previewTarget.innerHTML = ''
+
+    Array.from(files).forEach(file => {
+      const previewElement = this.createPreviewElement(file)
+      this.previewTarget.appendChild(previewElement)
+    })
+  }
+
+  createPreviewElement(file) {
+    const div = document.createElement('div')
+    div.className = 'flex items-center p-4 bg-gray-50 border border-gray-200 rounded-lg mb-3'
+
+    const isImage = file.type.startsWith('image/')
+    
+    div.innerHTML = `
+      <div class="mr-4">
+        ${isImage ? 
+          `<img src="${URL.createObjectURL(file)}" alt="${file.name}" class="w-16 h-16 object-cover rounded-lg border border-gray-300">` :
+          `<div class="flex items-center justify-center w-16 h-16 bg-blue-100 text-blue-600 rounded-lg">
+            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+            </svg>
+          </div>`
+        }
+      </div>
+      <div class="flex-1">
+        <div class="text-sm font-medium text-gray-900">${file.name}</div>
+        <div class="text-xs text-gray-500">${this.formatFileSize(file.size)}</div>
+      </div>
+      <div>
+        <button type="button" class="inline-flex items-center p-2 border border-red-300 text-red-700 bg-red-50 hover:bg-red-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" data-action="click->file#removePreview">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+    `
+
+    return div
+  }
+
+  removePreview(event) {
+    const previewElement = event.target.closest('.flex')
+    if (previewElement) {
+      previewElement.remove()
+      // Also clear the file input
+      if (this.hasInputTarget) {
+        this.inputTarget.value = ''
+      }
+    }
+  }
+
+  removeFile(event) {
+    // For removing existing files in show component
+    const fileElement = event.target.closest('.bg-gray-50')
+    if (fileElement && confirm('Are you sure you want to remove this file?')) {
+      fileElement.style.opacity = '0.5'
+      // You could emit a custom event here to handle actual removal
+      this.dispatch('fileRemoved', { 
+        detail: { element: fileElement }
+      })
+    }
+  }
+
+  formatFileSize(bytes) {
+    if (bytes === 0) return '0 bytes'
+
+    const k = 1024
+    const sizes = ['bytes', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+  }
+
+  // Drag and drop support
+  dragOver(event) {
+    event.preventDefault()
+    event.currentTarget.classList.add('border-blue-500', 'bg-blue-50')
+  }
+
+  dragLeave(event) {
+    event.preventDefault()
+    event.currentTarget.classList.remove('border-blue-500', 'bg-blue-50')
+  }
+
+  drop(event) {
+    event.preventDefault()
+    event.currentTarget.classList.remove('border-blue-500', 'bg-blue-50')
+    
+    const files = event.dataTransfer.files
+    if (files.length > 0 && this.hasInputTarget) {
+      // Set the files to the input (note: this is limited in some browsers)
+      this.updatePreview(files)
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["tabButton", "tabPanel", "mobileButtonText"]
+
+  connect() {
+    this.showFirstTab()
+  }
+
+  switchTab(event) {
+    const clickedButton = event.currentTarget
+    const tabId = clickedButton.dataset.tabId
+
+    this.hideAllTabs()
+    this.deactivateAllButtons()
+    
+    this.showTab(tabId)
+    this.activateButton(clickedButton)
+  }
+
+  // Emit custom event when dropdown item is clicked
+  emitTabSelection(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    
+    const tabId = event.currentTarget.dataset.tabId
+    const tabLabel = event.currentTarget.dataset.tabLabel
+    
+    window.dispatchEvent(new CustomEvent('tab:selected', {
+      detail: { tabId, tabLabel }
+    }))
+  }
+
+  // Handle the custom event
+  handleTabSelection(event) {
+    const { tabId, tabLabel } = event.detail
+    
+    this.hideAllTabs()
+    this.deactivateAllButtons()
+    
+    this.showTab(tabId)
+    
+    // Update mobile button text
+    if (this.hasMobileButtonTextTarget) {
+      this.mobileButtonTextTarget.textContent = tabLabel
+    }
+    
+    // Update desktop tab button state
+    const matchingButton = this.tabButtonTargets.find(button => 
+      button.dataset.tabId === tabId
+    )
+    if (matchingButton) {
+      this.activateButton(matchingButton)
+    }
+  }
+
+  showFirstTab() {
+    if (this.tabButtonTargets.length > 0 && this.tabPanelTargets.length > 0) {
+      const firstButton = this.tabButtonTargets[0]
+      const firstTabId = firstButton.dataset.tabId
+      
+      this.activateButton(firstButton)
+      this.showTab(firstTabId)
+    }
+  }
+
+  hideAllTabs() {
+    this.tabPanelTargets.forEach(panel => {
+      panel.classList.add('hidden')
+      panel.classList.remove('block')
+    })
+  }
+
+  showTab(tabId) {
+    const targetPanel = this.tabPanelTargets.find(panel => 
+      panel.id === `${tabId}-panel`
+    )
+    
+    if (targetPanel) {
+      targetPanel.classList.remove('hidden')
+      targetPanel.classList.add('block')
+    }
+  }
+
+  deactivateAllButtons() {
+    this.tabButtonTargets.forEach(button => {
+      // Remove active classes
+      button.classList.remove('text-blue-600', 'border-blue-600')
+      // Add inactive classes
+      button.classList.add('text-gray-500', 'border-transparent')
+    })
+  }
+
+  activateButton(button) {
+    // Remove inactive classes
+    button.classList.remove('text-gray-500', 'border-transparent')
+    // Add active classes
+    button.classList.add('text-blue-600', 'border-blue-600')
+  }
+}

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

@@ -0,0 +1,76 @@
+import { Controller } from "@hotwired/stimulus"
+import { get } from "@rails/request.js"
+
+export default class extends Controller {
+  static targets = ["search"]
+  static values = {
+    url: String
+  }
+  
+  connect() {
+    this.searchTimeout = null
+  }
+
+  disconnect() {
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout)
+    }
+  }
+
+  // Handle search input with debouncing
+  search(event) {
+    const query = event.target.value.trim()
+    
+    // Clear previous timeout
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout)
+    }
+    
+    // Debounce search requests
+    this.searchTimeout = setTimeout(() => {
+      if (query.length >= 2) {
+        this.performSearch(query)
+      } else {
+        this.clearResults()
+      }
+    }, 300)
+  }
+
+  // Perform search using Request.js - Turbo Stream will handle DOM updates
+  async performSearch(query) {
+    const response = await get(this.urlValue, {
+      query: { q: query },
+      responseKind: "turbo-stream"
+    })
+  }
+
+  // Select an item - Turbo Stream will handle DOM updates
+  async selectItem(event) {
+    const itemId = event.params.id
+    
+    const response = await get(`${this.urlValue}/select`, {
+      query: { id: itemId },
+      responseKind: "turbo-stream"
+    })
+    
+    // Clear search input after selection
+    this.searchTarget.value = ''
+  }
+
+  // Remove an item - Turbo Stream will handle DOM updates
+  async removeItem(event) {
+    const itemId = event.params.id
+    
+    const response = await get(`${this.urlValue}/remove`, {
+      query: { id: itemId },
+      responseKind: "turbo-stream"
+    })
+  }
+
+  // Clear search results - Turbo Stream will handle this
+  clearResults() {
+    get(`${this.urlValue}/clear`, {
+      responseKind: "turbo-stream"
+    })
+  }
+}

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

@@ -0,0 +1,174 @@
+import { Controller } from "@hotwired/stimulus"
+import { get } from "@rails/request.js"
+
+// Connects to data-controller="infinite-scroll"
+export default class extends Controller {
+  static targets = ["loading", "loadMore", "end"]
+  static values = { 
+    url: String,
+    hasMore: Boolean,
+    threshold: { type: Number, default: 100 } // Distance from bottom to trigger load
+  }
+
+  connect() {
+    this.isLoading = false
+    this.setupIntersectionObserver()
+    this.initializeUI()
+  }
+
+  // Called when the element is replaced by turbo stream
+  urlValueChanged() {
+    if (this.observer && this.sentinel) {
+      // Re-setup observer with new URL
+      this.setupIntersectionObserver()
+    }
+  }
+
+  hasMoreValueChanged() {
+    if (!this.hasMoreValue) {
+      this.showEndMessage()
+    }
+  }
+
+  disconnect() {
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+  }
+
+  setupIntersectionObserver() {
+    // Clean up existing observer and sentinel
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+    if (this.sentinel) {
+      this.sentinel.remove()
+    }
+
+    // Create a sentinel element at the bottom to trigger infinite scroll
+    this.sentinel = document.createElement('div')
+    this.sentinel.classList.add('infinite-scroll-sentinel')
+    this.sentinel.style.height = '1px'
+    this.element.appendChild(this.sentinel)
+
+    // Set up intersection observer
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting && this.hasMoreValue && !this.isLoading) {
+            this.loadNextPage()
+          }
+        })
+      },
+      {
+        rootMargin: `${this.thresholdValue}px`
+      }
+    )
+
+    this.observer.observe(this.sentinel)
+  }
+
+  initializeUI() {
+    // Initially hide the loading spinner until actually loading
+    this.hideLoading()
+    
+    // Show the load more button as the primary interaction
+    if (this.hasLoadMoreTarget) {
+      this.loadMoreTarget.style.display = 'block'
+    }
+  }
+
+  async loadMore(event) {
+    // Handle manual "Load More" button clicks
+    event.preventDefault()
+    if (!this.isLoading && this.hasMoreValue) {
+      await this.loadNextPage()
+    }
+  }
+
+  async loadNextPage() {
+    if (this.isLoading || !this.hasMoreValue) {
+      return
+    }
+
+    console.log('Loading next page:', this.urlValue)
+    this.isLoading = true
+    this.showLoading()
+
+    try {
+      const response = await get(this.urlValue, {
+        responseKind: "turbo-stream"
+      })
+
+      if (response.ok) {
+        // Turbo streams will be automatically processed
+        // Dispatch event to let other controllers know more content was loaded
+        this.dispatch("loaded", { detail: { url: this.urlValue } })
+        console.log('Loaded successfully, new state will be:', {
+          currentUrl: this.urlValue,
+          hasMore: this.hasMoreValue
+        })
+      } else {
+        // Let the server handle error responses via turbo streams
+        this.dispatch("error", { detail: { response } })
+      }
+
+    } catch (error) {
+      console.error('Error loading more content:', error)
+      // Dispatch error event so server can handle it
+      this.dispatch("error", { detail: { error } })
+    } finally {
+      this.isLoading = false
+      this.hideLoading()
+    }
+  }
+
+  showLoading() {
+    if (this.hasLoadingTarget) {
+      this.loadingTarget.classList.remove('hidden')
+    }
+  }
+
+  hideLoading() {
+    if (this.hasLoadingTarget) {
+      this.loadingTarget.classList.add('hidden')
+    }
+  }
+
+  // Called by turbo streams to update pagination state
+  updateState(event) {
+    const { url, hasMore } = event.detail
+    this.urlValue = url
+    this.hasMoreValue = hasMore
+
+    if (!hasMore) {
+      this.showEndMessage()
+    }
+  }
+
+  // Debug method to log current state
+  logState() {
+    console.log('InfiniteScroll State:', {
+      urlValue: this.urlValue,
+      hasMoreValue: this.hasMoreValue,
+      isLoading: this.isLoading
+    })
+  }
+
+  showEndMessage() {
+    if (this.hasEndTarget) {
+      this.endTarget.style.display = 'block'
+    }
+    // Remove sentinel since we're done
+    if (this.sentinel && this.observer) {
+      this.observer.unobserve(this.sentinel)
+      this.sentinel.remove()
+    }
+  }
+
+  retry(event) {
+    event.preventDefault()
+    this.hideLoading()
+    setTimeout(() => this.loadNextPage(), 100)
+  }
+}

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

@@ -0,0 +1,195 @@
+import { Controller } from "@hotwired/stimulus"
+import Swal from "sweetalert2"
+
+export default class extends Controller {
+  static values = { 
+    type: String,      // 'danger', 'warning', 'confirm', 'loading', 'success'
+    title: String,
+    message: String,
+    confirmText: String,
+    cancelText: String
+  }
+
+  show() {
+    const alertType = this.typeValue || 'confirm'
+    
+    switch(alertType) {
+      case 'danger':
+        this.showDangerAlert()
+        break
+      case 'warning':
+        this.showWarningAlert()
+        break
+      case 'loading':
+        this.showLoadingAlert()
+        break
+      case 'success':
+        this.showSuccessAlert()
+        break
+      default:
+        this.showConfirmAlert()
+    }
+  }
+
+  showConfirmAlert() {
+    Swal.fire({
+      title: this.titleValue || 'Confirm',
+      text: this.messageValue || 'Are you sure?',
+      icon: 'question',
+      showCancelButton: true,
+      confirmButtonText: this.confirmTextValue || 'Yes',
+      cancelButtonText: this.cancelTextValue || 'Cancel',
+      reverseButtons: true,
+      ...this.getIOSStyles()
+    }).then((result) => {
+      if (result.isConfirmed) {
+        this.dispatch('confirmed', { detail: { type: 'confirm' } })
+      } else {
+        this.dispatch('cancelled', { detail: { type: 'confirm' } })
+      }
+    })
+  }
+
+  showDangerAlert() {
+    Swal.fire({
+      title: this.titleValue || 'Danger',
+      text: this.messageValue || 'This action cannot be undone.',
+      icon: 'error',
+      showCancelButton: true,
+      confirmButtonText: this.confirmTextValue || 'Delete',
+      cancelButtonText: this.cancelTextValue || 'Cancel',
+      reverseButtons: true,
+      ...this.getIOSStyles()
+    }).then((result) => {
+      if (result.isConfirmed) {
+        this.dispatch('confirmed', { detail: { type: 'danger' } })
+      } else {
+        this.dispatch('cancelled', { detail: { type: 'danger' } })
+      }
+    })
+  }
+
+  showWarningAlert() {
+    Swal.fire({
+      title: this.titleValue || 'Warning',
+      text: this.messageValue || 'Please review before continuing.',
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonText: this.confirmTextValue || 'Continue',
+      cancelButtonText: this.cancelTextValue || 'Cancel',
+      reverseButtons: true,
+      ...this.getIOSStyles()
+    }).then((result) => {
+      if (result.isConfirmed) {
+        this.dispatch('confirmed', { detail: { type: 'warning' } })
+      } else {
+        this.dispatch('cancelled', { detail: { type: 'warning' } })
+      }
+    })
+  }
+
+  showLoadingAlert() {
+    Swal.fire({
+      title: this.titleValue || 'Loading...',
+      text: this.messageValue || 'Please wait...',
+      allowOutsideClick: false,
+      allowEscapeKey: false,
+      showConfirmButton: false,
+      didOpen: () => {
+        Swal.showLoading()
+      },
+      ...this.getIOSStyles()
+    })
+
+    this.dispatch('loading', { detail: { type: 'loading' } })
+  }
+
+  showSuccessAlert() {
+    Swal.fire({
+      title: this.titleValue || 'Success',
+      text: this.messageValue || 'Operation completed successfully.',
+      icon: 'success',
+      confirmButtonText: this.confirmTextValue || 'OK',
+      timer: 3000,
+      timerProgressBar: true,
+      ...this.getIOSStyles()
+    }).then(() => {
+      this.dispatch('confirmed', { detail: { type: 'success' } })
+    })
+  }
+
+  getIOSStyles() {
+    return {
+      buttonsStyling: false,
+      width: '100%',
+      padding: '0',
+      background: '#ffffff',
+      backdrop: 'rgba(0,0,0,0.4)',
+      allowOutsideClick: true,
+      allowEscapeKey: true,
+      position: 'bottom',
+      showClass: {
+        popup: 'swal2-ios-bottom-show',
+        backdrop: 'swal2-backdrop-show'
+      },
+      hideClass: {
+        popup: 'swal2-ios-bottom-hide',
+        backdrop: 'swal2-backdrop-hide'
+      },
+      customClass: {
+        popup: 'swal2-ios-bottom-popup',
+        title: 'swal2-ios-bottom-title',
+        htmlContainer: 'swal2-ios-bottom-content',
+        actions: 'swal2-ios-bottom-actions',
+        confirmButton: 'swal2-ios-bottom-confirm-button',
+        cancelButton: 'swal2-ios-bottom-cancel-button'
+      }
+    }
+  }
+
+  // Static helper methods
+  static showConfirm(title, message, confirmText = 'Yes', cancelText = 'Cancel') {
+    return this.createAndShow('confirm', title, message, confirmText, cancelText)
+  }
+
+  static showDanger(title, message, confirmText = 'Delete', cancelText = 'Cancel') {
+    return this.createAndShow('danger', title, message, confirmText, cancelText)
+  }
+
+  static showWarning(title, message, confirmText = 'Continue', cancelText = 'Cancel') {
+    return this.createAndShow('warning', title, message, confirmText, cancelText)
+  }
+
+  static showLoading(title = 'Loading...', message = 'Please wait...') {
+    return this.createAndShow('loading', title, message)
+  }
+
+  static showSuccess(title = 'Success', message = 'Operation completed successfully.', confirmText = 'OK') {
+    return this.createAndShow('success', title, message, confirmText)
+  }
+
+  static createAndShow(type, title, message, confirmText, cancelText) {
+    const element = document.createElement('div')
+    element.dataset.controller = 'ios-alert'
+    element.dataset.iosAlertTypeValue = type
+    element.dataset.iosAlertTitleValue = title
+    element.dataset.iosAlertMessageValue = message
+    if (confirmText) element.dataset.iosAlertConfirmTextValue = confirmText
+    if (cancelText) element.dataset.iosAlertCancelTextValue = cancelText
+    
+    document.body.appendChild(element)
+    
+    // Trigger the show method
+    const controller = this.application.getControllerForElementAndIdentifier(element, 'ios-alert')
+    if (controller) {
+      controller.show()
+    }
+    
+    return element
+  }
+
+  // Method to close loading alert
+  static closeLoading() {
+    Swal.close()
+  }
+}