easy-admin-rails 0.1.0

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

@@ -0,0 +1,186 @@
+import { Controller } from "@hotwired/stimulus"
+
+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))
+    document.addEventListener('settings:close', this.close.bind(this))
+  }
+
+
+  open() {
+    console.log('Settings sidebar open() called')
+    this.isOpen = true
+    
+    // Add subtle bounce animation and slide in
+    this.containerTarget.classList.remove('translate-x-full')
+    this.containerTarget.classList.add('translate-x-0')
+    this.containerTarget.style.transform = 'translateX(-8px)'
+    
+    setTimeout(() => {
+      this.containerTarget.style.transform = 'translateX(0)'
+    }, 100)
+    
+    
+    // Prevent body scroll and add iOS-like behavior
+    document.body.classList.add('overflow-hidden')
+    
+    // Add subtle scale animation to content
+    const content = this.containerTarget.querySelector('.flex-1')
+    if (content) {
+      content.style.transform = 'scale(0.95)'
+      content.style.opacity = '0'
+      setTimeout(() => {
+        content.style.transform = 'scale(1)'
+        content.style.opacity = '1'
+      }, 150)
+    }
+  }
+
+  close() {
+    this.isOpen = false
+    
+    // Add exit animation
+    const content = this.containerTarget.querySelector('.flex-1')
+    if (content) {
+      content.style.transform = 'scale(0.95)'
+      content.style.opacity = '0.8'
+    }
+    
+    // Slide out with slight bounce
+    this.containerTarget.style.transform = 'translateX(8px)'
+    setTimeout(() => {
+      this.containerTarget.classList.remove('translate-x-0')
+      this.containerTarget.classList.add('translate-x-full')
+      this.containerTarget.style.transform = ''
+    }, 100)
+    
+    
+    // Re-enable body scroll with delay
+    setTimeout(() => {
+      document.body.classList.remove('overflow-hidden')
+    }, 300)
+  }
+
+  toggle() {
+    if (this.isOpen) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  toggleFeature(event) {
+    const checkbox = event.target
+    const label = checkbox.nextElementSibling
+    const toggle = label.querySelector('span')
+    
+    // Add haptic-like feedback with scale animation
+    label.style.transform = 'scale(0.95)'
+    setTimeout(() => {
+      label.style.transform = 'scale(1)'
+    }, 100)
+    
+    if (checkbox.checked) {
+      // Enable state - green gradient
+      label.classList.remove('bg-gray-300', 'hover:bg-gray-400')
+      label.classList.add('bg-gradient-to-r', 'from-green-400', 'to-green-600', 'shadow-lg', 'shadow-green-400/30')
+      toggle.classList.remove('translate-x-1')
+      toggle.classList.add('translate-x-6')
+      
+      // Add checkmark
+      const checkmark = toggle.querySelector('svg')
+      if (!checkmark) {
+        toggle.innerHTML = `
+          <svg class="w-3 h-3 text-green-600 absolute inset-0 m-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
+          </svg>
+        `
+      }
+    } else {
+      // Disable state - gray
+      label.classList.remove('bg-gradient-to-r', 'from-green-400', 'to-green-600', 'shadow-lg', 'shadow-green-400/30')
+      label.classList.add('bg-gray-300', 'hover:bg-gray-400')
+      toggle.classList.remove('translate-x-6')
+      toggle.classList.add('translate-x-1')
+      
+      // Remove checkmark
+      toggle.innerHTML = ''
+    }
+    
+    // Add subtle success animation to the parent card
+    const card = checkbox.closest('.group')
+    if (card) {
+      card.classList.add('ring-2', 'ring-green-200')
+      setTimeout(() => {
+        card.classList.remove('ring-2', 'ring-green-200')
+      }, 500)
+    }
+  }
+
+  submitForm(event) {
+    // Let turbo handle the form submission
+    // Show loading state
+    const submitButton = event.target.querySelector('button[type="submit"]')
+    if (submitButton) {
+      const originalText = submitButton.innerHTML
+      submitButton.innerHTML = '<svg class="w-4 h-4 mr-2 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg><span>Saving...</span>'
+      submitButton.disabled = true
+      
+      // Restore button after delay (turbo will handle the response)
+      setTimeout(() => {
+        submitButton.innerHTML = originalText
+        submitButton.disabled = false
+        this.showNotification('Settings updated successfully', 'success')
+      }, 1000)
+    }
+  }
+
+  showNotification(message, type = 'info') {
+    // Create notification element
+    const notification = document.createElement('div')
+    notification.className = `fixed top-4 right-4 z-[60] px-4 py-3 rounded-lg shadow-lg text-white transition-all duration-300 transform translate-x-full ${
+      type === 'success' ? 'bg-green-600' : 
+      type === 'error' ? 'bg-red-600' : 
+      'bg-blue-600'
+    }`
+    notification.textContent = message
+    
+    document.body.appendChild(notification)
+    
+    // Slide in
+    setTimeout(() => {
+      notification.classList.remove('translate-x-full')
+      notification.classList.add('translate-x-0')
+    }, 100)
+    
+    // Slide out and remove after 3 seconds
+    setTimeout(() => {
+      notification.classList.remove('translate-x-0')
+      notification.classList.add('translate-x-full')
+      setTimeout(() => notification.remove(), 300)
+    }, 3000)
+  }
+
+  // Handle escape key
+  handleKeydown = (event) => {
+    if (event.key === 'Escape' && this.isOpen) {
+      this.close()
+    }
+  }
+
+  initialize() {
+    document.addEventListener('keydown', this.handleKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener('settings:open', this.open.bind(this))
+    document.removeEventListener('settings:close', this.close.bind(this))
+    document.removeEventListener('keydown', this.handleKeydown)
+  }
+}

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

@@ -0,0 +1,102 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["mobileToggle"]
+  static values = { 
+    storageKey: { type: String, default: "easyAdminSidebarCollapsed" }
+  }
+
+  connect() {
+    // Restore sidebar state from localStorage on page load
+    this.restoreSidebarState()
+    
+    // Mark as restored to enable transitions
+    setTimeout(() => {
+      document.body.classList.add('sidebar-restored')
+    }, 50)
+    
+    // Listen for window resize to handle mobile/desktop transitions
+    this.handleResize = this.handleResize.bind(this)
+    window.addEventListener('resize', this.handleResize)
+  }
+
+  disconnect() {
+    window.removeEventListener('resize', this.handleResize)
+  }
+
+  toggle() {
+    const isMobile = window.innerWidth < 1024
+    
+    if (isMobile) {
+      // Mobile: delegate to mobile controller
+      const mobileController = document.querySelector('[data-controller*="sidebar-mobile"]')
+      if (mobileController) {
+        this.application.getControllerForElementAndIdentifier(mobileController, 'sidebar-mobile')?.toggle()
+      }
+    } else {
+      // Desktop: toggle sidebar collapse
+      const isCurrentlyCollapsed = document.body.classList.contains("sidebar--collapsed")
+      
+      if (isCurrentlyCollapsed) {
+        document.body.classList.remove("sidebar--collapsed")
+        this.saveSidebarState(false) // expanded
+      } else {
+        document.body.classList.add("sidebar--collapsed")
+        this.saveSidebarState(true) // collapsed
+      }
+      
+      this.dispatch("toggled", { detail: { isOpen: !isCurrentlyCollapsed, isMobile } })
+    }
+  }
+
+
+  // Save sidebar collapsed state to localStorage
+  saveSidebarState(isCollapsed) {
+    try {
+      localStorage.setItem(this.storageKeyValue, JSON.stringify(isCollapsed))
+    } catch (e) {
+      // Handle localStorage not available (private browsing, etc.)
+      console.warn('Could not save sidebar state to localStorage:', e)
+    }
+  }
+
+  // Restore sidebar state from localStorage
+  restoreSidebarState() {
+    const isMobile = window.innerWidth < 1024
+    
+    // Only restore state on desktop
+    if (isMobile) {
+      return
+    }
+
+    try {
+      const savedState = localStorage.getItem(this.storageKeyValue)
+      
+      if (savedState !== null) {
+        const isCollapsed = JSON.parse(savedState)
+        
+        if (isCollapsed) {
+          document.body.classList.add("sidebar--collapsed")
+        } else {
+          document.body.classList.remove("sidebar--collapsed")
+        }
+      }
+      // If no saved state, use default (expanded)
+    } catch (e) {
+      console.warn('Could not restore sidebar state from localStorage:', e)
+    }
+  }
+
+  // Handle window resize - ensure mobile state is reset properly
+  handleResize() {
+    const isMobile = window.innerWidth < 1024
+    
+    if (isMobile) {
+      // On mobile, remove desktop collapse class
+      document.body.classList.remove("sidebar--collapsed")
+    } else {
+      // On desktop, restore saved state
+      this.restoreSidebarState()
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["container", "overlay"]
+
+  open() {
+    this.containerTarget.classList.add("sidebar--open")
+    this.overlayTarget.classList.add("sidebar-overlay--visible")
+  }
+
+  close() {
+    this.containerTarget.classList.remove("sidebar--open")
+    this.overlayTarget.classList.remove("sidebar-overlay--visible")
+  }
+
+  toggle() {
+    if (this.containerTarget.classList.contains("sidebar--open")) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+}

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

@@ -0,0 +1,96 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["toggle", "submenu", "chevron"]
+
+  toggle(event) {
+    event.preventDefault()
+    
+    const toggleIndex = this.toggleTargets.indexOf(event.currentTarget)
+    const submenu = this.submenuTargets[toggleIndex]
+    const chevron = this.chevronTargets[toggleIndex]
+    const isCurrentlyExpanded = submenu.classList.contains('block')
+    
+    if (isCurrentlyExpanded) {
+      // Collapsing
+      this.collapse(submenu, chevron)
+    } else {
+      // Expanding
+      this.expand(submenu, chevron)
+    }
+    
+    // Dispatch custom event
+    this.dispatch("toggled", { 
+      detail: { 
+        expanded: !isCurrentlyExpanded,
+        button: event.currentTarget,
+        submenu: submenu
+      } 
+    })
+  }
+
+  // Method to expand a specific item with smooth animation
+  expand(submenu, chevron) {
+    // Show the submenu
+    submenu.classList.remove('hidden')
+    submenu.classList.add('block')
+    
+    // Rotate the chevron
+    if (chevron) {
+      chevron.classList.add('rotate-90')
+    }
+    
+    // Get the natural height for smooth animation
+    submenu.style.maxHeight = 'none'
+    const height = submenu.scrollHeight
+    submenu.style.maxHeight = '0'
+    
+    // Force a reflow
+    submenu.offsetHeight
+    
+    // Animate to natural height
+    submenu.style.transition = 'max-height 0.3s ease-out'
+    submenu.style.maxHeight = height + 'px'
+    
+    // Remove inline style after animation completes
+    setTimeout(() => {
+      submenu.style.maxHeight = ''
+      submenu.style.transition = ''
+    }, 300)
+  }
+
+  // Method to collapse a specific item
+  collapse(submenu, chevron) {
+    // Set current height explicitly for smooth collapse
+    const height = submenu.scrollHeight
+    submenu.style.maxHeight = height + 'px'
+    submenu.style.transition = 'max-height 0.3s ease-out'
+    
+    // Force a reflow
+    submenu.offsetHeight
+    
+    // Rotate chevron back
+    if (chevron) {
+      chevron.classList.remove('rotate-90')
+    }
+    
+    // Animate to 0
+    submenu.style.maxHeight = '0'
+    
+    // Clean up after animation
+    setTimeout(() => {
+      submenu.classList.add('hidden')
+      submenu.classList.remove('block')
+      submenu.style.maxHeight = ''
+      submenu.style.transition = ''
+    }, 300)
+  }
+
+  // Collapse all expanded items
+  collapseAll() {
+    this.toggleTargets.forEach((button, index) => {
+      const submenu = this.submenuTargets[index]
+      this.collapse(button, submenu)
+    })
+  }
+}

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

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["row", "card"]
+
+  connect() {
+    // Handle clicks on table rows and mobile cards
+    this.element.addEventListener("click", this.handleClick.bind(this))
+  }
+
+  handleClick(event) {
+    // Find the closest row or card element
+    const clickableElement = event.target.closest("[data-href]")
+    
+    if (!clickableElement) return
+    
+    // Don't navigate if clicking on buttons or links
+    if (event.target.closest("a, button")) return
+    
+    // Get the URL from data-href attribute
+    const href = clickableElement.dataset.href
+    
+    if (href) {
+      // Navigate to the show page
+      window.location.href = href
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { url: String }
+
+  navigate(event) {
+    // Only navigate if we didn't click on an action button or inline edit trigger
+    if (!event.target.closest('[data-action*="stopPropagation"]')) {
+      window.location = this.urlValue
+    }
+  }
+
+  stopPropagation(event) {
+    event.stopPropagation()
+  }
+}

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

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["statusText", "checkbox", "slider"]
+
+  toggle(event) {
+    // Prevent the default behavior since we'll handle the state change
+    event.preventDefault()
+    
+    // Find the hidden checkbox and toggle its state
+    const checkbox = this.checkboxTarget
+    checkbox.checked = !checkbox.checked
+    
+    // Trigger change event so forms know the value changed
+    checkbox.dispatchEvent(new Event('change', { bubbles: true }))
+    
+    // Update status text if present
+    if (this.hasStatusTextTarget) {
+      this.statusTextTarget.textContent = checkbox.checked ? "Enabled" : "Disabled"
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,54 @@
+import { application } from './application'
+
+import SidebarController from './controllers/sidebar_controller'
+import SidebarNavController from './controllers/sidebar_nav_controller'
+import SidebarMobileController from './controllers/sidebar_mobile_controller'
+import SelectFieldController from './controllers/select_field_controller'
+import ChartController from './controllers/chart_controller'
+import DatePickerController from './controllers/date_picker_controller'
+import DropdownController from './controllers/dropdown_controller'
+import ToggleSwitchController from './controllers/toggle_switch_controller'
+import FormTabsController from './controllers/form_tabs_controller'
+import CollapsibleFiltersController from './controllers/collapsible_filters_controller'
+import NavbarScrollController from './controllers/navbar_scroll_controller'
+import HasManySearchController from './controllers/has_many_search_controller'
+import NotificationController from './controllers/notification_controller'
+import InfiniteScrollController from './controllers/infinite_scroll_controller'
+import FileController from './controllers/file_controller'
+import SettingsSidebarController from './controllers/settings_sidebar_controller'
+import EventEmitterController from './controllers/event_emitter_controller'
+import ModalController from './controllers/modal_controller'
+import BatchSelectionController from './controllers/batch_selection_controller'
+import BatchModalController from './controllers/batch_modal_controller'
+import ConfirmationModalController from './controllers/confirmation_modal_controller'
+import ContextMenuController from './controllers/context_menu_controller'
+import RowModalController from './controllers/row_modal_controller'
+import RowActionController from './controllers/row_action_controller'
+import JsoneditorController from './controllers/jsoneditor_controller'
+
+// Register controllers
+application.register('sidebar', SidebarController)
+application.register('sidebar-nav', SidebarNavController)
+application.register('sidebar-mobile', SidebarMobileController)
+application.register('select-field', SelectFieldController)
+application.register('chart', ChartController)
+application.register('date-picker', DatePickerController)
+application.register('dropdown', DropdownController)
+application.register('toggle-switch', ToggleSwitchController)
+application.register('form-tabs', FormTabsController)
+application.register('collapsible-filters', CollapsibleFiltersController)
+application.register('navbar-scroll', NavbarScrollController)
+application.register('has-many-search', HasManySearchController)
+application.register('notification', NotificationController)
+application.register('infinite-scroll', InfiniteScrollController)
+application.register('file', FileController)
+application.register('settings-sidebar', SettingsSidebarController)
+application.register('event-emitter', EventEmitterController)
+application.register('modal', ModalController)
+application.register('batch-selection', BatchSelectionController)
+application.register('batch-modal', BatchModalController)
+application.register('confirmation-modal', ConfirmationModalController)
+application.register('context-menu', ContextMenuController)
+application.register('row-modal', RowModalController)
+application.register('row-action', RowActionController)
+application.register('jsoneditor', JsoneditorController)

data/app/javascript/easy_admin.base.js

@@ -0,0 +1,4 @@
+// EasyAdmin base JavaScript
+import './easy_admin/application'
+import './easy_admin/controllers'
+import "@hotwired/turbo-rails"

data/app/models/easy_admin/admin_user.rb

@@ -0,0 +1,53 @@
+module EasyAdmin
+  class AdminUser < ApplicationRecord
+    self.table_name = "easy_admin_admin_users"
+    
+    # Devise modules
+    devise :database_authenticatable, :registerable,
+           :recoverable, :rememberable, :validatable,
+           :trackable, :lockable, :timeoutable
+    
+    # Validations
+    validates :email, presence: true, uniqueness: { case_sensitive: false }
+    validates :first_name, :last_name, presence: true
+    
+    # Scopes
+    scope :active, -> { where(locked_at: nil) }
+    scope :recently_signed_in, -> { where("last_sign_in_at > ?", 1.week.ago) }
+    
+    # Instance methods
+    def full_name
+      "#{first_name} #{last_name}".strip
+    end
+    
+    def display_name
+      full_name.present? ? full_name : email
+    end
+    
+    def initials
+      "#{first_name&.first}#{last_name&.first}".upcase
+    end
+    
+    def active?
+      !locked_at.present?
+    end
+    
+    def recently_active?
+      last_sign_in_at && last_sign_in_at > 1.week.ago
+    end
+    
+    # Class methods
+    def self.create_default_admin!
+      return if exists?
+      
+      create!(
+        email: "admin@example.com",
+        password: "password",
+        password_confirmation: "password",
+        first_name: "Admin",
+        last_name: "User",
+        confirmed_at: Time.current
+      )
+    end
+  end
+end

data/app/models/easy_admin/application_record.rb

@@ -0,0 +1,5 @@
+module EasyAdmin
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/views/easy_admin/dashboard/index.html.erb

@@ -0,0 +1,3 @@
+<h1>EasyAdmin Dashboard</h1>
+<p>Welcome to EasyAdmin!</p>
+<p>This is your admin dashboard.</p>

data/app/views/easy_admin/dashboards/show.html.erb

@@ -0,0 +1,7 @@
+<% content_for :title, @dashboard_class.title %>
+
+<%== EasyAdmin::Dashboards::ShowComponent.new(
+  dashboard_class: @dashboard_class,
+  params: params,
+  request_path: request.path
+).call %>

data/app/views/easy_admin/passwords/edit.html.erb

@@ -0,0 +1,42 @@
+<!-- Form -->
+<div class="p-10">
+  <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put, class: "space-y-8" }) do |f| %>
+    <%= f.hidden_field :reset_password_token %>
+    
+    <!-- Input Fields Container -->
+    <div class="space-y-4">
+      <!-- Password Field -->
+      <div class="relative">
+        <%= f.password_field :password, autofocus: true, autocomplete: "new-password",
+                             class: "w-full px-6 py-5 bg-gray-50/80 border-0 text-gray-900 placeholder-gray-400 focus:bg-gray-100/80 focus:ring-0 focus:outline-none text-base rounded-2xl transition-colors duration-200 font-medium",
+                             placeholder: "New password" %>
+      </div>
+
+      <!-- Password Confirmation Field -->
+      <div class="relative">
+        <%= f.password_field :password_confirmation, autocomplete: "new-password",
+                             class: "w-full px-6 py-5 bg-gray-50/80 border-0 text-gray-900 placeholder-gray-400 focus:bg-gray-100/80 focus:ring-0 focus:outline-none text-base rounded-2xl transition-colors duration-200 font-medium",
+                             placeholder: "Confirm new password" %>
+      </div>
+    </div>
+
+    <% if @minimum_password_length %>
+      <div class="text-sm text-gray-500 text-center font-medium">
+        Password must be at least <%= @minimum_password_length %> characters
+      </div>
+    <% end %>
+
+    <!-- Submit Button -->
+    <div class="pt-4">
+      <%= f.submit "Change Password", 
+                   class: "w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-bold py-5 px-6 rounded-2xl transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-blue-500/30 text-base shadow-xl shadow-blue-500/20 active:scale-[0.98]" %>
+    </div>
+
+  <% end %>
+
+  <!-- Links -->
+  <div class="text-center pt-6">
+    <%= link_to "Back to Sign In", new_session_path(resource_name), 
+                class: "block text-base text-blue-500 hover:text-blue-600 font-bold transition-colors duration-200" %>
+  </div>
+</div>