easy-admin-rails 0.1.15 → 0.2.0

data/app/controllers/easy_admin/row_actions_controller.rb

@@ -3,6 +3,8 @@ module EasyAdmin
     before_action :load_resource_class
     before_action :load_record
     before_action :load_action_class, only: [:execute, :form]
+    before_action :authorize_row_action_access!, only: [:context_menu]
+    before_action :authorize_row_action_execution!, only: [:execute, :form]
     
     # Render context menu with available actions
     def context_menu
@@ -212,5 +214,28 @@ module EasyAdmin
       
       streams
     end
+    
+    def authorize_row_action_access!
+      # User must have read access to the record to see row actions
+      authorize! @record, to: :show?
+      # User must have row actions permission for this resource  
+      authorize! @resource_class.model_class, to: :row_action?
+    end
+    
+    def authorize_row_action_execution!
+      # User must have update access to execute row actions on the record
+      authorize! @record, to: :update?
+      # User must have row actions permission for this resource
+      authorize! @resource_class.model_class, to: :row_action?
+      
+      # Additional permission: specific row action authorization
+      if @action_class
+        action_permission = "#{@resource_class.resource_name}:#{@action_class.name.underscore.split('/').last}"
+        
+        unless current_admin_user && EasyAdmin::Permissions.authorized?(current_admin_user, action_permission)
+          raise ActionPolicy::Unauthorized, "Not authorized to perform #{@action_class.name} row action"
+        end
+      end
+    end
   end
 end

data/app/helpers/easy_admin/fields_helper.rb

@@ -1,16 +1,68 @@
 module EasyAdmin
   module FieldsHelper
     def render_field(field, action:, value: nil, record: nil, form: nil)
-      component = EasyAdmin::Field.render(
-        field[:type], 
-        action: action,
-        field: field,
-        value: value,
-        record: record,
-        form: form
-      )
+      # Handle custom components and content
+      case field[:type]
+      when :custom_component
+        # Recreate component with current context (including record)
+        if field[:component_class] && record
+          component_options = field[:component_options] || {}
+          component_options[:user] = record if component_options[:user].nil?
+          component = field[:component_class].new(**component_options)
+          return component.call.html_safe
+        elsif field[:component_instance] && field[:component_instance].respond_to?(:call)
+          # Fallback to stored instance
+          return field[:component_instance].call.html_safe
+        end
+        return ""
+      when :custom_content
+        if field[:block]
+          Rails.logger.debug "🔍 [FieldsHelper] Processing custom_content block"
+          Rails.logger.debug "🔍 [FieldsHelper] Form present: #{form.present?}"
+          Rails.logger.debug "🔍 [FieldsHelper] Record present: #{record.present?}"
+          
+          # Create a context object with access to form, record, and helpers
+          context = OpenStruct.new(form: form, record: record, helpers: self)
+          
+          # Call the block directly to get the result (don't use capture which converts to string)
+          result = field[:block].call(context)
+          
+          Rails.logger.debug "🔍 [FieldsHelper] Block result class: #{result.class}"
+          Rails.logger.debug "🔍 [FieldsHelper] Result responds to call: #{result.respond_to?(:call)}"
+          Rails.logger.debug "🔍 [FieldsHelper] Result responds to view_template: #{result.respond_to?(:view_template)}"
+          
+          # Handle different types of results
+          if result.respond_to?(:call) && result.respond_to?(:view_template)
+            Rails.logger.debug "🔍 [FieldsHelper] Rendering Phlex component"
+            # It's a Phlex component - use Rails render helper
+            render(result)
+          elsif result.is_a?(String)
+            Rails.logger.debug "🔍 [FieldsHelper] Rendering string result"
+            result.html_safe
+          elsif result.respond_to?(:to_s)
+            Rails.logger.debug "🔍 [FieldsHelper] Converting to string and rendering"
+            result.to_s.html_safe
+          else
+            Rails.logger.debug "🔍 [FieldsHelper] No valid result, returning empty string"
+            ""
+          end
+        else
+          Rails.logger.debug "🔍 [FieldsHelper] No block provided for custom_content"
+          ""
+        end
+      else
+        # Regular field rendering
+        component = EasyAdmin::Field.render(
+          field[:type], 
+          action: action,
+          field: field,
+          value: value,
+          record: record,
+          form: form
+        )
 
-      component.call.html_safe
+        component.call.html_safe
+      end
     end
 
     def field_component(field, action:, value: nil, record: nil, form: nil)

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

@@ -6,9 +6,7 @@ export default class extends Controller {
   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 
@@ -16,4 +14,4 @@ export default class extends Controller {
     
     document.dispatchEvent(customEvent)
   }
-}
+}

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

@@ -91,7 +91,6 @@ export default class extends Controller {
       return
     }
 
-    console.log('Loading next page:', this.urlValue)
     this.isLoading = true
     this.showLoading()
 
@@ -104,10 +103,6 @@ export default class extends Controller {
         // 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 } })
@@ -148,11 +143,6 @@ export default class extends Controller {
 
   // Debug method to log current state
   logState() {
-    console.log('InfiniteScroll State:', {
-      urlValue: this.urlValue,
-      hasMoreValue: this.hasMoreValue,
-      isLoading: this.isLoading
-    })
   }
 
   showEndMessage() {

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

@@ -59,15 +59,12 @@ export default class extends Controller {
         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)
@@ -85,4 +82,4 @@ export default class extends Controller {
       this.editor.set(data)
     }
   }
-}
+}

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

@@ -0,0 +1,227 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["permissionCard", "hiddenInput"]
+  static values = { 
+    userId: Number
+  }
+
+  connect() {
+    console.log("🎯 PermissionToggleController connected")
+    console.log("🎯 User ID:", this.userIdValue)
+    
+    // Debug: Log all permission cards found
+    const cards = this.permissionCardTargets
+    console.log("🎯 Found", cards.length, "permission cards")
+    
+    cards.forEach((card, index) => {
+      console.log(`🎯 Card ${index}:`, {
+        permission: card.dataset.permissionName,
+        granted: card.dataset.granted,
+        resourceType: card.dataset.resourceType
+      })
+    })
+    
+    // Debug: Log all hidden inputs found
+    const hiddenInputs = this.element.querySelectorAll('input[type="hidden"][data-permission-toggle-target="hiddenInput"]')
+    console.log("🎯 Found", hiddenInputs.length, "hidden inputs")
+    
+    hiddenInputs.forEach((input, index) => {
+      console.log(`🎯 Hidden input ${index}:`, {
+        name: input.name,
+        value: input.value
+      })
+    })
+  }
+
+  togglePermission(event) {
+    event.preventDefault()
+    
+    const card = event.currentTarget
+    const permissionName = card.dataset.permissionName
+    const currentlyGranted = card.dataset.granted === "true"
+    const newGrantedState = !currentlyGranted
+
+    console.log("🎯 Toggling permission:", {
+      permission: permissionName,
+      wasGranted: currentlyGranted,
+      nowGranted: newGrantedState
+    })
+
+    // Update the card UI immediately
+    this.updateCardUI(card, newGrantedState)
+    
+    // Update the hidden input field for form submission
+    this.updateHiddenInput(card, newGrantedState)
+    
+    // Show notification for feedback
+    this.showNotification(
+      `Permission ${newGrantedState ? 'granted' : 'revoked'}`, 
+      newGrantedState ? "success" : "warning"
+    )
+  }
+
+  toggleAllForResource(event) {
+    event.preventDefault()
+    
+    const resourceType = event.currentTarget.dataset.resourceType
+    const resourceCards = this.permissionCardTargets.filter(card => 
+      card.dataset.resourceType === resourceType
+    )
+
+    // Determine if we should grant all or revoke all
+    // If any permission is not granted, grant all. Otherwise, revoke all.
+    const hasAnyDenied = resourceCards.some(card => card.dataset.granted === "false")
+    const newState = hasAnyDenied
+
+    resourceCards.forEach(card => {
+      if ((card.dataset.granted === "true") !== newState) {
+        // Only toggle cards that need to change
+        const permissionId = card.dataset.permissionId
+        const permissionName = card.dataset.permissionName
+
+        // Update UI
+        this.updateCardUI(card, newState)
+        
+        // Update hidden input
+        this.updateHiddenInput(card, newState)
+      }
+    })
+
+    this.showNotification(
+      `${newState ? 'Granted' : 'Revoked'} all ${resourceType.replace(/_/g, ' ')} permissions (UI only)`, 
+      newState ? "success" : "warning"
+    )
+  }
+
+  updateCardUI(card, isGranted) {
+    // Update data attribute
+    card.dataset.granted = isGranted.toString()
+
+    // Update CSS classes
+    card.className = `permission-card cursor-pointer transition-all duration-200 ${this.getCardClasses(isGranted)}`
+
+    // Update icon
+    const iconContainer = card.querySelector('.flex-shrink-0')
+    if (iconContainer) {
+      iconContainer.innerHTML = this.getPermissionIconSVG(isGranted)
+    }
+
+    // Update text colors
+    const actionSpan = card.querySelector('.text-sm.font-medium')
+    if (actionSpan) {
+      actionSpan.className = `text-sm font-medium ${isGranted ? 'text-green-900' : 'text-gray-900'} capitalize`
+    }
+
+    // Update badge colors
+    const badge = card.querySelector('.px-2.py-1.rounded.text-xs.font-medium')
+    if (badge) {
+      badge.className = `ml-2 inline-flex items-center px-2 py-1 rounded text-xs font-medium ${this.getPermissionBadgeClasses(isGranted)}`
+    }
+
+    // Update description color
+    const description = card.querySelector('.leading-relaxed')
+    if (description) {
+      description.className = `text-xs ${isGranted ? 'text-green-700' : 'text-gray-600'} leading-relaxed`
+    }
+
+    // Update technical name color
+    const technicalName = card.querySelector('.font-mono')
+    if (technicalName) {
+      technicalName.className = `text-xs ${isGranted ? 'text-green-600' : 'text-gray-500'} font-mono mt-1`
+    }
+
+    // Update status indicator
+    const statusIndicator = card.querySelector('.rounded-full')
+    if (statusIndicator) {
+      statusIndicator.textContent = isGranted ? "Granted" : "Denied"
+      statusIndicator.className = `inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${this.getStatusClasses(isGranted)}`
+    }
+  }
+
+  // TODO: Implement backend integration
+  // async sendToggleRequest(permissionId, permissionName, isGranted) {
+  //   const response = await fetch('/admin/permissions/toggle', {
+  //     method: 'POST',
+  //     headers: {
+  //       'Content-Type': 'application/json',
+  //       'X-CSRF-Token': this.getCSRFToken(),
+  //       'Accept': 'application/json'
+  //     },
+  //     body: JSON.stringify({
+  //       user_id: this.userIdValue,
+  //       permission_id: permissionId,
+  //       permission_name: permissionName,
+  //       granted: isGranted
+  //     })
+  //   })
+
+  //   if (!response.ok) {
+  //     throw new Error(`HTTP error! status: ${response.status}`)
+  //   }
+
+  //   return await response.json()
+  // }
+
+  updateHiddenInput(card, isGranted) {
+    // Find the hidden input within this card
+    const hiddenInput = card.querySelector('input[type="hidden"][data-permission-toggle-target="hiddenInput"]')
+    if (hiddenInput) {
+      const oldValue = hiddenInput.value
+      hiddenInput.value = isGranted.toString()
+      console.log("🎯 Updated hidden input:", {
+        name: hiddenInput.name,
+        oldValue: oldValue,
+        newValue: hiddenInput.value
+      })
+    } else {
+      console.warn(`🎯 No hidden input found for permission card: ${card.dataset.permissionName}`)
+    }
+  }
+
+  getCSRFToken() {
+    const metaTag = document.querySelector('meta[name="csrf-token"]')
+    return metaTag ? metaTag.getAttribute('content') : ''
+  }
+
+  showNotification(message, type = "info") {
+    // Try to use existing notification system
+    const event = new CustomEvent('notification:show', {
+      detail: { message, type }
+    })
+    window.dispatchEvent(event)
+  }
+
+  // Helper methods for CSS classes (matching the Ruby component)
+  getCardClasses(isGranted) {
+    if (isGranted) {
+      return "bg-green-50 border border-green-200 hover:border-green-300 hover:bg-green-100"
+    } else {
+      return "bg-red-50 border border-red-200 hover:border-red-300 hover:bg-red-100"
+    }
+  }
+
+  getPermissionBadgeClasses(isGranted) {
+    if (isGranted) {
+      return "bg-green-100 text-green-800"
+    } else {
+      return "bg-red-100 text-red-800"
+    }
+  }
+
+  getStatusClasses(isGranted) {
+    if (isGranted) {
+      return "bg-green-100 text-green-800"
+    } else {
+      return "bg-red-100 text-red-800"
+    }
+  }
+
+  getPermissionIconSVG(isGranted) {
+    if (isGranted) {
+      return '<svg class="w-5 h-5 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>'
+    } else {
+      return '<svg class="w-5 h-5 text-red-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>'
+    }
+  }
+}

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

@@ -0,0 +1,93 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["preview"]
+  static values = { 
+    roles: Array
+  }
+
+  updatePreview(event) {
+    const selectedRoleId = parseInt(event.target.value)
+    const selectedRole = this.rolesValue.find(role => role.id === selectedRoleId)
+    
+    if (selectedRole && this.hasPreviewTarget) {
+      this.renderRolePreview(selectedRole)
+    } else if (this.hasPreviewTarget) {
+      this.clearPreview()
+    }
+  }
+
+  renderRolePreview(role) {
+    const previewHTML = this.buildPreviewHTML(role)
+    this.previewTarget.innerHTML = previewHTML
+    this.previewTarget.style.display = 'block'
+  }
+
+  clearPreview() {
+    this.previewTarget.innerHTML = ''
+    this.previewTarget.style.display = 'none'
+  }
+
+  buildPreviewHTML(role) {
+    const permissionsCount = Object.values(role.permissions || {}).flat().length
+    
+    let html = `
+      <div class="mb-4">
+        <h3 class="text-lg font-medium text-gray-900 mb-2">Role Permissions Preview</h3>
+        <p class="text-sm text-gray-600">
+          Permissions that will be granted with the <strong>${role.name}</strong> role:
+        </p>
+      </div>
+    `
+
+    if (permissionsCount === 0) {
+      html += `
+        <div class="text-center py-6">
+          <svg class="w-8 h-8 text-gray-400 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
+          </svg>
+          <h4 class="text-md font-medium text-gray-900 mb-1">No Permissions</h4>
+          <p class="text-gray-600">This role has no permissions assigned.</p>
+        </div>
+      `
+    } else {
+      html += '<div class="space-y-4">'
+      
+      Object.entries(role.permissions || {}).forEach(([resourceType, permissions]) => {
+        html += `
+          <div class="bg-white border border-gray-200 rounded-lg p-4">
+            <div class="flex items-center mb-3">
+              <h4 class="text-md font-medium text-gray-900 capitalize">${resourceType.replace(/_/g, ' ')}</h4>
+              <span class="ml-2 inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                ${permissions.length} permissions
+              </span>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+        `
+        
+        permissions.forEach(permission => {
+          html += `
+            <div class="flex items-center p-2 bg-green-50 border border-green-200 rounded">
+              <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+              </svg>
+              <div class="flex-1 min-w-0">
+                <span class="text-sm font-medium text-gray-900 capitalize">${permission.action.replace(/_/g, ' ')}</span>
+                ${permission.description ? `<p class="text-xs text-gray-600 mt-1">${permission.description}</p>` : ''}
+              </div>
+            </div>
+          `
+        })
+        
+        html += `
+            </div>
+          </div>
+        `
+      })
+      
+      html += '</div>'
+    }
+
+    return html
+  }
+}

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

@@ -117,8 +117,7 @@ export default class extends Controller {
 
   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)

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

@@ -2,7 +2,6 @@ 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'))
   }
-}
+}

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

@@ -4,8 +4,6 @@ export default class extends Controller {
   static targets = ["container"]
 
   connect() {
-    console.log('Settings sidebar controller connected')
-    console.log('Container target:', this.containerTarget)
     this.isOpen = false
     // Listen for global events to open/close
     document.addEventListener('settings:open', this.open.bind(this))
@@ -14,7 +12,6 @@ export default class extends Controller {
 
 
   open() {
-    console.log('Settings sidebar open() called')
     this.isOpen = true
     
     // Add subtle bounce animation and slide in
@@ -183,4 +180,4 @@ export default class extends Controller {
     document.removeEventListener('settings:close', this.close.bind(this))
     document.removeEventListener('keydown', this.handleKeydown)
   }
-}
+}

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

@@ -2,8 +2,6 @@ import { Turbo } from "@hotwired/turbo-rails"
 
 Turbo.StreamActions.redirect = function() {
   const url = this.getAttribute("url")
-  console.log("Redirect URL:", url)
-  console.log("Element:", this)
 
   Turbo.visit(url, { frame: '_top', action: 'advance' })
 }

data/app/javascript/easy_admin/controllers.js

@@ -26,6 +26,8 @@ import RowModalController from './controllers/row_modal_controller'
 import RowActionController from './controllers/row_action_controller'
 import JsoneditorController from './controllers/jsoneditor_controller'
 import VersionRevertController from './controllers/version_revert_controller'
+import RolePreviewController from './controllers/role_preview_controller'
+import PermissionToggleController from './controllers/permission_toggle_controller'
 
 // Register controllers
 application.register('sidebar', SidebarController)
@@ -53,4 +55,6 @@ application.register('context-menu', ContextMenuController)
 application.register('row-modal', RowModalController)
 application.register('row-action', RowActionController)
 application.register('jsoneditor', JsoneditorController)
-application.register('version-revert', VersionRevertController)
+application.register('version-revert', VersionRevertController)
+application.register('role-preview', RolePreviewController)
+application.register('permission-toggle', PermissionToggleController)

data/app/models/easy_admin/admin_user.rb

@@ -7,6 +7,12 @@ module EasyAdmin
            :recoverable, :rememberable, :validatable,
            :trackable, :lockable, :timeoutable
     
+    # EasyAdmin Permissions
+    include EasyAdmin::Permissions::UserExtensions
+    
+    # Direct role association (each admin user has one role)
+    belongs_to :role, class_name: 'EasyAdmin::Permissions::Role', optional: true
+    
     # Validations
     validates :email, presence: true, uniqueness: { case_sensitive: false }
     validates :first_name, :last_name, presence: true

data/app/policies/admin_user_policy.rb

@@ -0,0 +1,36 @@
+class AdminUserPolicy < ApplicationPolicy
+  # Users can always view their own profile
+  def show?
+    own_record? || super
+  end
+  
+  # Users can update their own basic information
+  def update?
+    own_record? || super
+  end
+  
+  # Only users with permissions can create other users
+  def create?
+    user_has_permission?("users:create")
+  end
+  
+  # Only users with permissions can delete other users
+  def destroy?
+    !own_record? && user_has_permission?("users:delete")
+  end
+  
+  # Role management permissions
+  def assign_roles?
+    user_has_permission?("users:manage_roles")
+  end
+  
+  def remove_roles?
+    user_has_permission?("users:manage_roles")
+  end
+  
+  private
+  
+  def own_record?
+    user && record && user.id == record.id
+  end
+end