easy-admin-rails 0.1.0

data/app/components/easy_admin/resources/table_row_component.rb

@@ -0,0 +1,160 @@
+module EasyAdmin
+  module Resources
+    class TableRowComponent < BaseComponent
+      def initialize(record:, resource_class:)
+        @record = record
+        @resource_class = resource_class
+      end
+
+      def view_template
+        tr(
+          id: helpers.dom_id(@record),
+          class: "group hover:bg-gray-100 transition-colors duration-150",
+          data: {
+            controller: "context-menu",
+            action: "contextmenu->context-menu#showMenu",
+            context_menu_record_id_value: @record.id,
+            context_menu_resource_name_value: @resource_class.route_key
+          }
+        ) do
+          # Checkbox cell for batch actions
+          if @resource_class.batch_actions_enabled
+            td(class: "relative w-16 sm:w-12 px-3 sm:px-6 py-4") do
+              div(class: "absolute left-2 sm:left-4 top-1/2 -mt-3") do
+                render_ios_checkbox(
+                  target: "checkbox",
+                  action: "change->batch-selection#toggleItem",
+                  value: @record.id
+                )
+              end
+            end
+          end
+          
+          @resource_class.index_fields.each_with_index do |field_config, index|
+            render EasyAdmin::Resources::TableCellComponent.new(
+              record: @record,
+              field_config: field_config,
+              resource_class: @resource_class,
+              mobile_hide: index > 2
+            )
+          end
+          
+          render_actions_cell
+        end
+      end
+
+      private
+
+      def render_actions_cell
+        td(class: "relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6") do
+          div(class: "flex items-center justify-end space-x-2 sm:mobile-actions") do
+            render_view_action
+            render_edit_action
+            render_delete_action
+          end
+        end
+      end
+
+      def render_view_action
+        a(
+          href: resource_show_url,
+          class: "inline-flex items-center justify-center w-8 h-8 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors duration-150",
+          data: { 
+            action: "click->table-row#stopPropagation",
+            turbo: "false"
+          },
+          title: "View"
+        ) do
+          unsafe_raw <<~SVG
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+            </svg>
+          SVG
+        end
+      end
+
+      def render_edit_action
+        a(
+          href: resource_edit_url,
+          class: "inline-flex items-center justify-center w-8 h-8 text-green-600 hover:text-green-800 hover:bg-green-50 rounded-lg transition-colors duration-150",
+          data: { 
+            action: "click->table-row#stopPropagation",
+            turbo: "false"
+          },
+          title: "Edit"
+        ) do
+          unsafe_raw <<~SVG
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+            </svg>
+          SVG
+        end
+      end
+
+      def render_delete_action
+        a(
+          href: resource_show_url,
+          method: :delete,
+          class: "inline-flex items-center justify-center w-8 h-8 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors duration-150",
+          data: { 
+            action: "click->table-row#stopPropagation",
+            confirm: "Are you sure you want to delete this #{@resource_class.singular_title.downcase}?",
+            method: :delete,
+            turbo: "false"
+          },
+          title: "Delete"
+        ) do
+          unsafe_raw <<~SVG
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+            </svg>
+          SVG
+        end
+      end
+
+      def resource_show_url
+        easy_admin_url_helpers.resource_path(@resource_class.route_key, @record)
+      end
+
+      def resource_edit_url
+        easy_admin_url_helpers.edit_resource_path(@resource_class.route_key, @record)
+      end
+      
+      def render_ios_checkbox(target: nil, action: nil, value: nil, data: {})
+        label(class: "inline-flex items-center cursor-pointer group") do
+          input(
+            type: "checkbox",
+            value: value,
+            class: "sr-only peer",
+            data: data.merge({
+              batch_selection_target: target,
+              action: action
+            }.compact)
+          )
+          
+          # Custom checkbox design
+          div(
+            class: "relative w-6 h-6 bg-white border-2 border-gray-300 rounded-md 
+                   transition-all duration-200 ease-out
+                   peer-checked:bg-blue-500 peer-checked:border-blue-500
+                   peer-focus:ring-2 peer-focus:ring-blue-500 peer-focus:ring-opacity-50
+                   group-hover:border-gray-400 peer-checked:group-hover:border-blue-600
+                   shadow-sm"
+          ) do
+            # Checkmark icon (hidden by default, shown when checked)
+            unsafe_raw <<~SVG
+              <svg class="absolute inset-0 w-4 h-4 m-auto text-white opacity-0 
+                         transition-opacity duration-200 ease-out
+                         peer-checked:opacity-100 pointer-events-none" 
+                   fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" 
+                      d="M5 13l4 4L19 7"/>
+              </svg>
+            SVG
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/row_action_form_component.rb

@@ -0,0 +1,127 @@
+module EasyAdmin
+  class RowActionFormComponent < BaseComponent
+    def initialize(record:, action_class:, resource_class:, submit_url:)
+      @record = record
+      @action_class = action_class
+      @resource_class = resource_class
+      @submit_url = submit_url
+    end
+    
+    def view_template
+      div(
+        id: "modal",
+        class: "fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50",
+        data: { 
+          controller: "row-modal",
+          row_modal_submit_url_value: @submit_url,
+          row_modal_record_id_value: @record.id,
+          row_modal_action_class_value: @action_class.name
+        }
+      ) do
+        div(class: "relative top-20 mx-auto p-5 border w-11/12 max-w-md shadow-lg rounded-md bg-white") do
+          # Header
+          div(class: "flex items-center justify-between pb-4 mb-4 border-b border-gray-200") do
+            h3(class: "text-lg font-semibold text-gray-900") do
+              @action_class.modal_title || @action_class.label || @action_class.name.humanize
+            end
+            button(
+              type: "button",
+              class: "text-gray-400 hover:text-gray-600 text-xl",
+              data: { action: "click->row-modal#close" }
+            ) { "×" }
+          end
+          
+          # Description
+          if @action_class.modal_description.present?
+            p(class: "text-sm text-gray-600 mb-4") { @action_class.modal_description }
+          end
+          
+          # Record info
+          div(class: "mb-4 p-3 bg-gray-50 rounded") do
+            div(class: "text-sm text-gray-600") do
+              "Record: #{@record.respond_to?(:title) ? @record.title : @record.to_s}"
+            end
+          end
+          
+          # Simple form fields
+          div(class: "space-y-4", data: { row_modal_target: "form" }) do
+            render_simple_fields
+          end
+          
+          # Action buttons
+          div(class: "flex justify-end space-x-3 pt-4 border-t border-gray-200 mt-4") do
+            button(
+              type: "button",
+              class: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50",
+              data: { action: "click->row-modal#close" }
+            ) { "Cancel" }
+            
+            button(
+              type: "button",
+              class: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700",
+              data: { action: "click->row-modal#submit" }
+            ) { @action_class.label }
+          end
+        end
+      end
+    end
+    
+    private
+    
+    def render_simple_fields
+      @action_class.attribute_types.each do |attr_name, attr_type|
+        next if attr_name.in?(['record', 'current_user', 'resource_class', 'params', 'selected_records'])
+        
+        field_config = {
+          name: attr_name,
+          type: determine_field_type(attr_type),
+          label: attr_name.humanize,
+          form_name: "row_action"
+        }
+
+        # Get current value from the action instance
+        action_instance = @action_class.new(record: @record, resource_class: @resource_class)
+        current_value = action_instance.public_send(attr_name)
+        
+        # Create a simple record-like object for the field component
+        field_record = OpenStruct.new(attr_name => current_value)
+        
+        # Create a mock form object
+        mock_form = OpenStruct.new(
+          object: OpenStruct.new(class: OpenStruct.new(name: OpenStruct.new(underscore: 'row_action')))
+        )
+        
+        component = field_component(
+          field_config,
+          action: :form,
+          value: current_value,
+          record: field_record,
+          form: mock_form
+        )
+        
+        render component
+      end
+    end
+    
+    def determine_field_type(attr_type)
+      case attr_type.type
+      when :string
+        :text
+      when :text
+        :textarea
+      when :boolean
+        :boolean
+      when :integer, :float
+        :number
+      when :date
+        :date
+      when :datetime
+        :datetime
+      when :json
+        :json
+      else
+        :text
+      end
+    end
+  end
+end

data/app/components/easy_admin/scopes_component.rb

@@ -0,0 +1,224 @@
+module EasyAdmin
+  class ScopesComponent < Phlex::HTML
+    def initialize(resource_class:, current_scope: nil, counts: {})
+      @resource_class = resource_class
+      @current_scope = current_scope
+      @counts = counts
+    end
+
+    private
+
+    def view_template
+      return unless @resource_class.has_scopes?
+
+      div(class: "mb-6") do
+        div(class: "sm:hidden") do
+          # Mobile dropdown for scopes
+          render_mobile_scope_selector
+        end
+
+        div(class: "hidden sm:block") do
+          # Desktop iOS-style segmented control
+          render_desktop_scope_tabs
+        end
+      end
+    end
+
+    def render_mobile_scope_selector
+      # Beautiful mobile dropdown using dropdown controller
+      div(class: "relative", data: { controller: "dropdown" }) do
+        # Trigger button showing current scope
+        button(
+          type: "button",
+          class: "w-full flex items-center justify-between px-4 py-3 bg-white border border-gray-300 rounded-xl shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500",
+          data: { 
+            action: "click->dropdown#toggle",
+            dropdown_target: "trigger"
+          }
+        ) do
+          # Current scope display
+          div(class: "flex items-center space-x-3") do
+            current_scope_config = @resource_class.scopes.find { |s| is_current_scope?(s) }
+            if current_scope_config
+              if current_scope_config[:icon]
+                span(class: "text-xl") { current_scope_config[:icon] }
+              end
+              div(class: "flex flex-col items-start") do
+                span(class: "font-medium text-gray-900") { current_scope_config[:label] }
+                if current_scope_config[:count] && @counts[current_scope_config[:name]]
+                  span(class: "text-xs text-gray-500") { "#{@counts[current_scope_config[:name]]} items" }
+                end
+              end
+            end
+          end
+          
+          # Chevron
+          svg(
+            class: "w-5 h-5 text-gray-400 transition-transform duration-200",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            data: { dropdown_target: "chevron" }
+          ) do |svg|
+            svg.path(
+              stroke_linecap: "round",
+              stroke_linejoin: "round", 
+              stroke_width: "2",
+              d: "M19 9l-7 7-7-7"
+            )
+          end
+        end
+        
+        # Dropdown menu
+        div(
+          class: "absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg hidden",
+          data: { dropdown_target: "menu" }
+        ) do
+          div(class: "py-2") do
+            @resource_class.scopes.each do |scope|
+              render_mobile_scope_option(scope)
+            end
+          end
+        end
+      end
+    end
+
+    def render_mobile_scope_option(scope)
+      is_current = is_current_scope?(scope)
+      
+      a(
+        href: scope_path(scope),
+        class: "flex items-center justify-between px-4 py-3 text-sm hover:bg-gray-50 #{is_current ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-700'}",
+        data: { turbo_prefetch: "false" }
+      ) do
+        div(class: "flex items-center space-x-3") do
+          # Icon
+          if scope[:icon]
+            span(class: "text-lg") { scope[:icon] }
+          end
+          
+          # Label and count
+          div(class: "flex flex-col items-start") do
+            span(class: "font-medium") { scope[:label] }
+            if scope[:count] && @counts[scope[:name]]
+              span(class: "text-xs #{is_current ? 'text-blue-600' : 'text-gray-500'}") do
+                "#{@counts[scope[:name]]} items"
+              end
+            end
+          end
+        end
+        
+        # Checkmark for current selection
+        if is_current
+          svg(
+            class: "w-5 h-5 text-blue-600",
+            fill: "currentColor",
+            viewBox: "0 0 20 20"
+          ) do |svg|
+            svg.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"
+            )
+          end
+        end
+      end
+    end
+
+    def render_desktop_scope_tabs
+      nav(class: "isolate flex rounded-xl bg-gray-100 p-1 shadow-sm") do
+        @resource_class.scopes.each_with_index do |scope, index|
+          render_scope_tab(scope, index)
+        end
+      end
+    end
+
+    def render_scope_tab(scope, index)
+      is_current = is_current_scope?(scope)
+      is_first = index == 0
+      is_last = index == @resource_class.scopes.length - 1
+
+      a(
+        href: scope_path(scope),
+        class: scope_tab_classes(is_current, is_first, is_last),
+        data: { turbo_prefetch: "false" }
+      ) do
+        div(class: "flex items-center space-x-2") do
+          # Icon
+          if scope[:icon]
+            span(class: "text-lg") { scope[:icon] }
+          end
+          
+          # Label and count
+          div do
+            span(class: "font-medium") { scope[:label] }
+            if scope[:count] && @counts[scope[:name]]
+              span(class: count_badge_classes(is_current)) do
+                @counts[scope[:name]].to_s
+              end
+            end
+          end
+        end
+      end
+    end
+
+    def scope_tab_classes(is_current, is_first, is_last)
+      classes = [
+        "group relative min-w-0 flex-1 overflow-hidden py-3 px-4 text-center text-sm font-medium transition-all duration-200 ease-in-out focus:z-10"
+      ]
+      
+      if is_current
+        classes << "bg-white text-gray-900 shadow-sm ring-1 ring-gray-300"
+      else
+        classes << "text-gray-600 hover:bg-white/50 hover:text-gray-900"
+      end
+      
+      if is_first
+        classes << "rounded-l-lg"
+      end
+      
+      if is_last
+        classes << "rounded-r-lg"
+      end
+      
+      classes.join(" ")
+    end
+
+    def count_badge_classes(is_current)
+      base_classes = "ml-2 inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
+      
+      if is_current
+        "#{base_classes} bg-blue-100 text-blue-800"
+      else
+        "#{base_classes} bg-gray-200 text-gray-700 group-hover:bg-blue-100 group-hover:text-blue-800"
+      end
+    end
+
+    def scope_path(scope)
+      query_params = {}
+      query_params[:scope] = scope[:name] unless scope[:name] == :all
+      
+      # Use engine route helper and build query string manually
+      base_path = EasyAdmin::Engine.routes.url_helpers.resources_path(@resource_class.route_key)
+      query_string = query_params.any? ? query_params.to_query : ""
+      query_string.present? ? "#{base_path}?#{query_string}" : base_path
+    end
+
+    def is_current_scope?(scope)
+      if @current_scope
+        @current_scope.to_s == scope[:name].to_s
+      else
+        scope[:default] || scope[:name] == :all
+      end
+    end
+
+    def scope_label_with_count(scope)
+      label = scope[:label]
+      if scope[:count] && @counts[scope[:name]]
+        "#{label} (#{@counts[scope[:name]]})"
+      else
+        label
+      end
+    end
+  end
+end

data/app/components/easy_admin/settings_sidebar_component.rb

@@ -0,0 +1,140 @@
+module EasyAdmin
+  class SettingsSidebarComponent < Phlex::HTML
+    register_element :turbo_frame
+    
+    def initialize(feature_toggles: [], expanded: false)
+      @feature_toggles = feature_toggles
+      @expanded = expanded
+    end
+
+    def view_template
+      div(
+        id: "settings-sidebar",
+        class: "fixed inset-y-0 right-0 z-50 w-96 bg-white shadow-2xl transform transition-all duration-500 ease-out #{@expanded ? 'translate-x-0' : 'translate-x-full'} backdrop-blur-sm",
+        style: "background: rgba(255, 255, 255, 0.95);",
+        data: { 
+          controller: "settings-sidebar",
+          settings_sidebar_target: "container"
+        }
+      ) do
+        # Header
+        div(class: "relative px-6 py-6 bg-gradient-to-br from-blue-50 via-white to-purple-50 border-b border-gray-100") do
+          div(class: "text-center") do
+            div(class: "inline-flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full mb-3 shadow-lg") do
+              unsafe_raw <<~SVG
+                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                </svg>
+              SVG
+            end
+            h2(class: "text-xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent") { "Settings" }
+          end
+          
+          # Close button - iOS style
+          button(
+            class: "absolute top-4 right-4 w-8 h-8 flex items-center justify-center bg-gray-100 hover:bg-gray-200 rounded-full transition-all duration-200 transform hover:scale-105",
+            data: { action: "click->settings-sidebar#close" },
+            title: "Close"
+          ) do
+            unsafe_raw <<~SVG
+              <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"></path>
+              </svg>
+            SVG
+          end
+        end
+
+        # Content
+        div(class: "flex-1 overflow-y-auto px-6 py-8 bg-gradient-to-b from-gray-50/30 to-white") do
+          turbo_frame(
+            id: "settings-form",
+            class: "space-y-8"
+          ) do
+            form(
+              action: route_helper.settings_path,
+              method: "patch",
+              class: "space-y-8"
+            ) do
+            # Feature Toggles Section
+            div do
+              h3(class: "text-md font-medium text-gray-900 mb-4") { "Feature Toggles" }
+              
+              div(class: "space-y-4") do
+                @feature_toggles.each do |feature|
+                  render_feature_toggle(feature)
+                end
+              end
+            end
+
+            # Save button
+            div(class: "pt-6 border-t border-gray-200") do
+              button(
+                type: "submit",
+                class: "w-full inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+              ) do
+                unsafe_raw <<~SVG
+                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                  </svg>
+                SVG
+                span { "Save Settings" }
+              end
+            end
+            end
+          end
+        end
+
+      end
+    end
+
+    private
+
+    def route_helper
+      @route_helper ||= EasyAdmin::Engine.routes.url_helpers
+    end
+
+    def render_feature_toggle(feature)
+      div(class: "flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200") do
+        div(class: "flex-1") do
+          label(
+            for: "features_#{feature[:name]}",
+            class: "block text-sm font-medium text-gray-900 cursor-pointer"
+          ) { feature[:name].humanize }
+          
+          if feature[:description].present?
+            p(class: "text-xs text-gray-600 mt-1") { feature[:description] }
+          end
+        end
+
+        # Toggle switch
+        div(class: "ml-4") do
+          input(
+            type: "hidden",
+            name: "features[#{feature[:name]}]",
+            value: "0"
+          )
+          
+          input(
+            type: "checkbox",
+            id: "features_#{feature[:name]}",
+            name: "features[#{feature[:name]}]",
+            value: "1",
+            checked: feature[:enabled],
+            class: "sr-only",
+            data: { action: "change->settings-sidebar#toggleFeature" }
+          )
+          
+          label(
+            for: "features_#{feature[:name]}",
+            class: "relative inline-flex items-center h-6 rounded-full w-11 cursor-pointer transition-colors ease-in-out duration-200 #{feature[:enabled] ? 'bg-blue-600' : 'bg-gray-300'}"
+          ) do
+            span(
+              class: "inline-block w-4 h-4 transform bg-white rounded-full transition ease-in-out duration-200 #{feature[:enabled] ? 'translate-x-6' : 'translate-x-1'}"
+            )
+          end
+        end
+      end
+    end
+  end
+end