easy-admin-rails 0.1.0

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

@@ -0,0 +1,88 @@
+import { Controller } from "@hotwired/stimulus"
+import JSONEditor from "jsoneditor"
+
+export default class extends Controller {
+  static values = { 
+    mode: String,
+    data: Object
+  }
+  static targets = ["hiddenField", "editor"]
+
+  connect() {
+    this.initializeEditor()
+    
+    // Listen for form submission to ensure hidden field is updated
+    const form = this.element.closest('form')
+    if (form) {
+      form.addEventListener('submit', () => {
+        this.updateHiddenField()
+      })
+    }
+  }
+
+  disconnect() {
+    if (this.editor) {
+      this.editor.destroy()
+      this.editor = null
+    }
+  }
+
+  initializeEditor() {
+    const options = {
+      mode: this.modeValue || 'view',
+      modes: this.modeValue === 'code' ? ['code', 'tree', 'view'] : ['view'],
+      search: this.modeValue !== 'view',
+      history: this.modeValue === 'code',
+      navigationBar: this.modeValue !== 'view',
+      enableSort: true,
+      enableTransform: true,
+      onChange: () => {
+        this.updateHiddenField()
+      },
+      onModeChange: (newMode, oldMode) => {
+        // Update when switching between modes
+        setTimeout(() => this.updateHiddenField(), 100)
+      }
+    }
+
+    const container = this.hasEditorTarget ? this.editorTarget : this.element
+    this.editor = new JSONEditor(container, options)
+    
+    if (this.hasDataValue) {
+      this.editor.set(this.dataValue)
+    }
+  }
+
+  updateHiddenField() {
+    if (this.editor && this.hasHiddenFieldTarget) {
+      try {
+        const jsonData = this.editor.get()
+        const jsonString = JSON.stringify(jsonData)
+        this.hiddenFieldTarget.value = jsonString
+        console.log('JSON Editor: Updated hidden field with:', jsonString)
+      } catch (error) {
+        console.warn('JSON Editor: Invalid JSON, not updating hidden field:', error)
+        // In case of error, try to get the text content
+        try {
+          if (this.editor.mode === 'code') {
+            const text = this.editor.getText()
+            this.hiddenFieldTarget.value = text
+            console.log('JSON Editor: Updated hidden field with raw text:', text)
+          }
+        } catch (textError) {
+          console.warn('JSON Editor: Could not get text content:', textError)
+        }
+      }
+    }
+  }
+
+  getData() {
+    return this.editor ? this.editor.get() : null
+  }
+
+  setData(data) {
+    if (this.editor) {
+      this.editor.set(data)
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["backdrop", "content"]
+
+  connect() {
+    // Show modal when turbo-frame loads content
+    this.element.addEventListener("turbo:frame-load", this.show.bind(this))
+    
+    // Hide modal on successful form submission
+    this.element.addEventListener("turbo:submit-end", this.handleSubmitEnd.bind(this))
+
+    // Handle escape key
+    this.handleKeydown = this.handleKeydown.bind(this)
+    document.addEventListener("keydown", this.handleKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.handleKeydown)
+  }
+
+  show() {
+    const backdrop = document.getElementById("modal-backdrop")
+    if (backdrop) {
+      backdrop.style.display = "block"
+      
+      // Trigger animation after display
+      requestAnimationFrame(() => {
+        backdrop.classList.remove("opacity-0")
+        backdrop.classList.add("opacity-100")
+      })
+      
+      // Prevent body scroll
+      document.body.style.overflow = "hidden"
+    }
+  }
+
+  close() {
+    const backdrop = document.getElementById("modal-backdrop")
+    if (backdrop) {
+      backdrop.classList.remove("opacity-100")
+      backdrop.classList.add("opacity-0")
+      
+      // Hide after animation and clear turbo frame
+      setTimeout(() => {
+        // Clear the modal turbo frame
+        const modalFrame = document.getElementById("modal")
+        if (modalFrame) {
+          modalFrame.innerHTML = ""
+        }
+        document.body.style.overflow = ""
+      }, 300)
+    }
+  }
+
+  closeOnBackdrop(event) {
+    // Only close if clicked on backdrop, not on modal content
+    if (event.target === event.currentTarget) {
+      this.close()
+    }
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape") {
+      this.close()
+    }
+  }
+
+  handleSubmitEnd(event) {
+    // Close modal on successful form submission
+    if (event.detail.success) {
+      this.close()
+    }
+  }
+}

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

@@ -0,0 +1,76 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["navbar", "content", "body"]
+  
+  connect() {
+    this.scrollThreshold = 60
+    this.isScrolled = false
+    this.handleScroll = this.handleScroll.bind(this)
+    window.addEventListener('scroll', this.handleScroll, { passive: true })
+  }
+
+  disconnect() {
+    window.removeEventListener('scroll', this.handleScroll)
+  }
+
+  handleScroll() {
+    const currentScrollY = window.scrollY
+    
+    if (currentScrollY > this.scrollThreshold && !this.isScrolled) {
+      this.shrinkNavbar()
+    } else if (currentScrollY <= this.scrollThreshold && this.isScrolled) {
+      this.expandNavbar()
+    }
+  }
+
+  shrinkNavbar() {
+    this.isScrolled = true
+    // Reduce navbar padding from py-4 to py-2
+    this.navbarTarget.classList.remove('py-4')
+    this.navbarTarget.classList.add('py-2')
+    
+    // Reduce body padding from pt-20 to pt-16
+    if (this.hasBodyTarget) {
+      this.bodyTarget.classList.remove('pt-20')
+      this.bodyTarget.classList.add('pt-16')
+    }
+    
+    // Smoothly hide content elements with width transition
+    this.contentTargets.forEach(content => {
+      // Add transition classes first
+      content.classList.add('transition-all', 'duration-300', 'overflow-hidden')
+      
+      // Then animate to zero width and opacity
+      setTimeout(() => {
+        content.classList.add('w-0', 'opacity-0', 'max-w-0')
+        content.classList.remove('md:block')
+      }, 10)
+    })
+  }
+
+  expandNavbar() {
+    this.isScrolled = false
+    // Restore original navbar padding
+    this.navbarTarget.classList.remove('py-2')
+    this.navbarTarget.classList.add('py-4')
+    
+    // Restore original body padding
+    if (this.hasBodyTarget) {
+      this.bodyTarget.classList.remove('pt-16')
+      this.bodyTarget.classList.add('pt-20')
+    }
+    
+    // Smoothly show content elements
+    this.contentTargets.forEach(content => {
+      // Remove width constraints and restore opacity
+      content.classList.remove('w-0', 'opacity-0', 'max-w-0')
+      content.classList.add('md:block')
+      
+      // Clean up transition classes after animation
+      setTimeout(() => {
+        content.classList.remove('transition-all', 'duration-300', 'overflow-hidden')
+      }, 300)
+    })
+  }
+}

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

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["notification"]
+  static values = { 
+    type: String,
+    message: String,
+    duration: { type: Number, default: 4000 }
+  }
+
+  connect() {
+    this.show()
+  }
+
+  show() {
+    // Add the notification to the page
+    this.element.classList.remove('translate-x-full', 'opacity-0')
+    this.element.classList.add('translate-x-0', 'opacity-100')
+
+    // Auto-hide after duration
+    if (this.durationValue > 0) {
+      this.timeout = setTimeout(() => {
+        this.hide()
+      }, this.durationValue)
+    }
+  }
+
+  hide() {
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+
+    // Animate out
+    this.element.classList.remove('translate-x-0', 'opacity-100')
+    this.element.classList.add('translate-x-full', 'opacity-0')
+
+    // Remove from DOM after animation
+    setTimeout(() => {
+      if (this.element.parentNode) {
+        this.element.remove()
+      }
+    }, 300)
+  }
+
+  close() {
+    this.hide()
+  }
+}

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

@@ -0,0 +1,124 @@
+import { Controller } from "@hotwired/stimulus"
+import { get, post } from "@rails/request.js"
+
+export default class extends Controller {
+  static values = { 
+    actionClass: String,
+    executionMode: String,
+    recordId: String,
+    resourceName: String,
+    confirm: String
+  }
+  
+  execute(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    
+    // Hide the context menu first
+    this.hideContextMenu()
+    
+    // Handle based on execution mode
+    if (this.executionModeValue === 'modal') {
+      this.showModal()
+    } else if (this.executionModeValue === 'instant') {
+      this.executeInstant()
+    }
+  }
+  
+  executeInstant() {
+    // Show confirmation modal if confirm message is provided
+    if (this.confirmValue) {
+      this.showConfirmationModal()
+    } else {
+      // Execute immediately if no confirmation needed
+      this.performAction()
+    }
+  }
+  
+  showModal() {
+    this.loadModalForm()
+  }
+  
+  async showConfirmationModal() {
+    try {
+      // Store action details for when confirmation is received
+      this.pendingAction = {
+        resourceName: this.resourceNameValue,
+        recordId: this.recordIdValue,
+        actionClass: this.actionClassValue
+      }
+      
+      // 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: this.confirmValue,
+          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.performActionWithDetails(resourceName, recordId, actionClass)
+      this.pendingAction = null
+    }
+  }
+  
+  handleCancellation() {
+    this.pendingAction = null
+  }
+  
+  async performAction() {
+    this.performActionWithDetails(
+      this.resourceNameValue,
+      this.recordIdValue,
+      this.actionClassValue
+    )
+  }
+  
+  async performActionWithDetails(resourceName, recordId, actionClass) {
+    try {
+      const formData = new FormData()
+      
+      // Add CSRF token
+      const csrfToken = document.querySelector('[name="csrf-token"]').content
+      formData.append('authenticity_token', csrfToken)
+      
+      const response = await post(`/admin/${resourceName}/${recordId}/actions/${actionClass}`, {
+        responseKind: 'turbo-stream',
+        body: formData
+      })
+    } catch (error) {
+      console.error('Failed to execute action:', error)
+    }
+  }
+  
+  async loadModalForm() {
+    try {
+      const response = await get(`/admin/${this.resourceNameValue}/${this.recordIdValue}/actions/${this.actionClassValue}/form`, {
+        responseKind: 'turbo-stream'
+      })
+    } catch (error) {
+      console.error('Failed to load modal form:', error)
+    }
+  }
+  
+  hideContextMenu() {
+    // Find and hide any existing context menu
+    const contextMenu = document.getElementById('context-menu-container')
+    if (contextMenu) {
+      contextMenu.remove()
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+import { Controller } from "@hotwired/stimulus"
+import { post } from "@rails/request.js"
+
+export default class extends Controller {
+  static targets = ["form"]
+  static values = { 
+    submitUrl: String,
+    recordId: String,
+    actionClass: String 
+  }
+  
+  close() {
+    this.element.remove()
+  }
+  
+  submit() {
+    const formData = this.collectFormData()
+    
+    post(this.submitUrlValue, {
+      body: formData,
+      responseKind: 'turbo-stream'
+    }).then(response => {
+      if (response.ok) {
+        this.close()
+      }
+    }).catch(error => {
+      console.error('Row action submission failed:', error)
+    })
+  }
+  
+  collectFormData() {
+    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', this.actionClassValue)
+    formData.append('execution_mode', 'modal')
+    
+    // Collect form field data from the rendered form components
+    const formElement = this.formTarget
+    const inputs = formElement.querySelectorAll('input, select, textarea')
+    
+    inputs.forEach(input => {
+      const name = input.name
+      if (name && name.startsWith('row_action[')) {
+        if (input.type === 'checkbox') {
+          formData.append(name, input.checked ? '1' : '0')
+        } else {
+          formData.append(name, input.value || '')
+        }
+      }
+    })
+    
+    return formData
+  }
+}