easy-admin-rails 0.1.0

data/app/components/easy_admin/fields/index/filters/boolean_component.rb

@@ -0,0 +1,96 @@
+module EasyAdmin
+  module Fields
+    module Index
+      module Filters
+        class BooleanComponent < BaseComponent
+          private
+
+          def render_filter_input
+            div(
+              class: "relative",
+              data: {
+                controller: "select-field",
+                select_field_multiple_value: "false",
+                select_field_placeholder_value: "Select...",
+                field_name: @field[:name]
+              }
+            ) do
+              # Display input
+              div(class: "relative") do
+                input(
+                  type: "text",
+                  class: single_select_input_classes,
+                  placeholder: "Select...",
+                  readonly: true,
+                  value: current_display_value,
+                  data: {
+                    select_field_target: "display",
+                    action: "click->select-field#toggleDropdown"
+                  }
+                )
+                # Dropdown arrow
+                div(class: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none") do
+                  unsafe_raw('<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>')
+                end
+              end
+
+              # Dropdown menu
+              div(
+                class: "select-dropdown absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto opacity-0 invisible transform scale-95 transition-all duration-200 ease-out",
+                data: { select_field_target: "dropdown" }
+              ) do
+                render_option("", "All")
+                render_option("true", "Yes")
+                render_option("false", "No")
+              end
+
+              # Hidden input for the actual value
+              input(
+                type: "hidden",
+                name: "q[#{@field[:name]}_eq]",
+                value: @search_params["#{@field[:name]}_eq"] || "",
+                data: { select_field_target: "hiddenInput" }
+              )
+            end
+          end
+
+          def render_option(value, text)
+            selected = @search_params["#{@field[:name]}_eq"].to_s == value.to_s
+            
+            div(
+              class: "select-option px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 hover:text-blue-900 transition-colors duration-150 #{selected ? 'bg-blue-50 text-blue-900' : 'text-gray-900'}",
+              data: {
+                value: value,
+                action: "click->select-field#selectOption",
+                select_field_target: "option"
+              }
+            ) do
+              text
+            end
+          end
+
+          def current_display_value
+            case @search_params["#{@field[:name]}_eq"]
+            when "true"
+              "Yes"
+            when "false"
+              "No"
+            else
+              "All"
+            end
+          end
+
+          def single_select_input_classes
+            base_classes = "block w-full px-3 py-2 pr-10 text-sm border rounded-md cursor-pointer"
+            state_classes = "border-gray-300 placeholder-gray-400 bg-white"
+            focus_classes = "focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+            hover_classes = "hover:border-gray-400"
+            transition_classes = "transition-colors duration-200"
+            
+            "#{base_classes} #{state_classes} #{focus_classes} #{hover_classes} #{transition_classes}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/fields/index/filters/date_component.rb

@@ -0,0 +1,182 @@
+module EasyAdmin
+  module Fields
+    module Index
+      module Filters
+        class DateComponent < BaseComponent
+          private
+
+        def render_filter_input
+          div(class: "grid grid-cols-2 gap-2") do
+            # From date picker
+            div(class: "relative", data: { controller: "date-picker" }) do
+              div(class: "relative") do
+                input(
+                  type: "text",
+                  name: "q[#{@field[:name]}_gteq]",
+                  value: format_display_value(@search_params["#{@field[:name]}_gteq"]),
+                  placeholder: "From date",
+                  class: "#{base_input_classes} pr-10",
+                  data: { 
+                    date_picker_target: "input",
+                    action: "click->date-picker#toggle focus->date-picker#toggle"
+                  },
+                  readonly: true
+                )
+                div(class: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400") do
+                  render_calendar_icon
+                end
+              end
+              render_date_picker_modal("from")
+            end
+
+            # To date picker
+            div(class: "relative", data: { controller: "date-picker" }) do
+              div(class: "relative") do
+                input(
+                  type: "text",
+                  name: "q[#{@field[:name]}_lteq]",
+                  value: format_display_value(@search_params["#{@field[:name]}_lteq"]),
+                  placeholder: "To date",
+                  class: "#{base_input_classes} pr-10",
+                  data: { 
+                    date_picker_target: "input",
+                    action: "click->date-picker#toggle focus->date-picker#toggle"
+                  },
+                  readonly: true
+                )
+                div(class: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400") do
+                  render_calendar_icon
+                end
+              end
+              render_date_picker_modal("to")
+            end
+          end
+        end
+
+        def format_display_value(value)
+          return "" unless value.present?
+          
+          case value
+          when Date
+            value.strftime("%B %d, %Y")
+          when Time
+            value.to_date.strftime("%B %d, %Y")
+          when String
+            begin
+              Date.parse(value).strftime("%B %d, %Y")
+            rescue ArgumentError
+              value
+            end
+          else
+            value.to_s
+          end
+        end
+
+        def render_calendar_icon
+          unsafe_raw <<~SVG
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+              <line x1="16" y1="2" x2="16" y2="6"></line>
+              <line x1="8" y1="2" x2="8" y2="6"></line>
+              <line x1="3" y1="10" x2="21" y2="10"></line>
+            </svg>
+          SVG
+        end
+
+        def render_date_picker_modal(suffix)
+          div(
+            class: "absolute z-50 mt-2 hidden opacity-0 scale-95 transition-all duration-200 ease-out left-0 right-0 sm:left-auto sm:right-auto sm:min-w-[320px]",
+            data: { 
+              date_picker_target: "modal",
+              action: "click->date-picker#clickOutside"
+            }
+          ) do
+            div(
+              class: "bg-white rounded-lg shadow-xl border border-gray-200 p-4 mx-2 sm:mx-0 max-w-sm sm:max-w-none",
+              data: { action: "click->date-picker#preventClose" }
+            ) do
+              render_date_picker_header
+              render_date_picker_calendar
+              render_date_picker_footer
+            end
+          end
+        end
+
+        def render_date_picker_header
+          div(class: "flex items-center justify-between mb-4") do
+            button(
+              type: "button",
+              class: "p-2 hover:bg-gray-100 rounded-lg transition-colors group",
+              data: { action: "click->date-picker#previousMonth" }
+            ) do
+              unsafe_raw <<~SVG
+                <svg class="w-4 h-4 text-gray-600 group-hover:text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                </svg>
+              SVG
+            end
+            
+            div(
+              class: "text-base font-semibold text-gray-900",
+              data: { date_picker_target: "monthYear" }
+            )
+            
+            button(
+              type: "button", 
+              class: "p-2 hover:bg-gray-100 rounded-lg transition-colors group",
+              data: { action: "click->date-picker#nextMonth" }
+            ) do
+              unsafe_raw <<~SVG
+                <svg class="w-4 h-4 text-gray-600 group-hover:text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+              SVG
+            end
+          end
+        end
+
+        def render_date_picker_calendar
+          div do
+            # Days of week header
+            div(class: "grid grid-cols-7 gap-1 mb-3") do
+              %w[Sun Mon Tue Wed Thu Fri Sat].each do |day|
+                div(class: "text-xs sm:text-sm text-center text-gray-500 font-medium py-2") { day }
+              end
+            end
+            
+            # Calendar grid (populated by JavaScript)
+            div(
+              class: "grid grid-cols-7 gap-1 sm:gap-2",
+              data: { date_picker_target: "grid" }
+            )
+          end
+        end
+
+        def render_date_picker_footer
+          div(class: "flex flex-col sm:flex-row sm:items-center sm:justify-between mt-4 pt-4 border-t border-gray-200 space-y-3 sm:space-y-0") do
+            button(
+              type: "button",
+              class: "px-4 py-2.5 sm:px-3 sm:py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors touch-manipulation",
+              data: { action: "click->date-picker#today" }
+            ) { "Today" }
+            
+            div(class: "flex items-center space-x-3 sm:space-x-2") do
+              button(
+                type: "button", 
+                class: "flex-1 sm:flex-none px-4 py-2.5 sm:px-3 sm:py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors touch-manipulation",
+                data: { action: "click->date-picker#clear" }
+              ) { "Clear" }
+              
+              button(
+                type: "button",
+                class: "flex-1 sm:flex-none px-4 py-2.5 sm:px-3 sm:py-1.5 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors touch-manipulation", 
+                data: { action: "click->date-picker#close" }
+              ) { "Done" }
+            end
+          end
+        end
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/fields/index/filters/number_component.rb

@@ -0,0 +1,30 @@
+module EasyAdmin
+  module Fields
+    module Index
+      module Filters
+        class NumberComponent < BaseComponent
+          private
+
+          def render_filter_input
+            div(class: "grid grid-cols-2 gap-2") do
+              input(
+              type: "number",
+              name: "q[#{@field[:name]}_gteq]",
+              value: @search_params["#{@field[:name]}_gteq"],
+              placeholder: "Min",
+              class: base_input_classes
+              )
+              input(
+              type: "number",
+              name: "q[#{@field[:name]}_lteq]",
+              value: @search_params["#{@field[:name]}_lteq"],
+              placeholder: "Max",
+              class: base_input_classes
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/fields/index/filters/select_component.rb

@@ -0,0 +1,101 @@
+module EasyAdmin
+  module Fields
+    module Index
+      module Filters
+        class SelectComponent < BaseComponent
+          private
+
+          def render_filter_input
+            div(
+              class: "relative",
+              data: {
+                controller: "select-field",
+                select_field_multiple_value: "false",
+                select_field_placeholder_value: "Select #{@field[:label].downcase}...",
+                field_name: @field[:name]
+              }
+            ) do
+              # Display input
+              div(class: "relative") do
+                input(
+                  type: "text",
+                  class: single_select_input_classes,
+                  placeholder: "Select #{@field[:label].downcase}...",
+                  readonly: true,
+                  value: current_display_value,
+                  data: {
+                    select_field_target: "display",
+                    action: "click->select-field#toggleDropdown"
+                  }
+                )
+                # Dropdown arrow
+                div(class: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none") do
+                  unsafe_raw('<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>')
+                end
+              end
+
+              # Dropdown menu
+              div(
+                class: "select-dropdown absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto opacity-0 invisible transform scale-95 transition-all duration-200 ease-out",
+                data: { select_field_target: "dropdown" }
+              ) do
+                render_option("", "All")
+                
+                if @field[:options]
+                  @field[:options].each do |option_value, option_label|
+                    render_option(option_value, option_label)
+                  end
+                end
+              end
+
+              # Hidden input for the actual value
+              input(
+                type: "hidden",
+                name: "q[#{@field[:name]}_eq]",
+                value: @search_params["#{@field[:name]}_eq"] || "",
+                data: { select_field_target: "hiddenInput" }
+              )
+            end
+          end
+
+          def render_option(value, text)
+            selected = @search_params["#{@field[:name]}_eq"].to_s == value.to_s
+            
+            div(
+              class: "select-option px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 hover:text-blue-900 transition-colors duration-150 #{selected ? 'bg-blue-50 text-blue-900' : 'text-gray-900'}",
+              data: {
+                value: value,
+                action: "click->select-field#selectOption",
+                select_field_target: "option"
+              }
+            ) do
+              text.to_s
+            end
+          end
+
+          def current_display_value
+            return "All" if @search_params["#{@field[:name]}_eq"].blank?
+            
+            if @field[:options]
+              @field[:options].each do |option_value, option_label|
+                return option_label.to_s if option_value.to_s == @search_params["#{@field[:name]}_eq"].to_s
+              end
+            end
+            
+            @search_params["#{@field[:name]}_eq"].to_s
+          end
+
+          def single_select_input_classes
+            base_classes = "block w-full px-3 py-2 pr-10 text-sm border rounded-md cursor-pointer"
+            state_classes = "border-gray-300 placeholder-gray-400 bg-white"
+            focus_classes = "focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+            hover_classes = "hover:border-gray-400"
+            transition_classes = "transition-colors duration-200"
+            
+            "#{base_classes} #{state_classes} #{focus_classes} #{hover_classes} #{transition_classes}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/fields/index/filters/string_component.rb

@@ -0,0 +1,32 @@
+module EasyAdmin
+  module Fields
+    module Index
+      module Filters
+        class StringComponent < BaseComponent
+          private
+
+          def render_filter_input
+            input(
+              type: "text",
+              id: field_id,
+              name: "q[#{@field[:name]}_cont]",
+              value: @search_params["#{@field[:name]}_cont"],
+              placeholder: "Search #{@field[:label].downcase}...",
+              class: input_classes
+            )
+          end
+
+          def input_classes
+            base_classes = "block w-full px-3 py-2 border rounded-md shadow-sm text-sm"
+            state_classes = "border-gray-300 placeholder-gray-400"
+            focus_classes = "focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+            hover_classes = "hover:border-gray-400"
+            transition_classes = "transition-colors duration-200"
+            
+            "#{base_classes} #{state_classes} #{focus_classes} #{hover_classes} #{transition_classes}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/fields/index/json_component.rb

@@ -0,0 +1,23 @@
+module EasyAdmin
+  module Fields
+    module Index
+      class JsonComponent < Fields::BaseComponent
+        def view_template
+          div(class: "text-center") do
+            if json_value.present?
+              span(class: "text-green-600 font-bold text-lg") { "+" }
+            else
+              span(class: "text-gray-400 font-bold text-lg") { "−" }
+            end
+          end
+        end
+
+        private
+
+        def json_value
+          @json_value ||= value
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/fields/index/number_component.rb

@@ -0,0 +1,20 @@
+module EasyAdmin
+  module Fields
+    module Index
+      class NumberComponent < BaseComponent
+        def view_template
+          span(class: "ea-cell-value ea-cell-number") do
+            format_value
+          end
+        end
+
+        private
+
+        def format_value
+          return "" if value.blank?
+          value.to_s
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/fields/index/select_component.rb

@@ -0,0 +1,25 @@
+module EasyAdmin
+  module Fields
+    module Index
+      class SelectComponent < BaseComponent
+        def view_template
+          span(class: "ea-cell-value ea-cell-select") do
+            plain format_value
+          end
+        end
+
+        private
+
+        def format_value
+          return "" if value.blank?
+          
+          if value.is_a?(Array)
+            value.join(", ")
+          else
+            value.to_s
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/fields/index/text_component.rb

@@ -0,0 +1,20 @@
+module EasyAdmin
+  module Fields
+    module Index
+      class TextComponent < BaseComponent
+        def view_template
+          span(class: "ea-cell-value") do
+            truncate(format_value, length: 50)
+          end
+        end
+
+        private
+
+        def truncate(text, length:)
+          return text if text.length <= length
+          "#{text[0, length]}..."
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/fields/inline_edit_modal_component.rb

@@ -0,0 +1,135 @@
+module EasyAdmin
+  module Fields
+    class InlineEditModalComponent < EasyAdmin::BaseComponent
+      def initialize(record:, field_config:, resource_class:)
+        @record = record
+        @field_config = field_config
+        @resource_class = resource_class
+      end
+
+      def view_template
+        turbo_frame(id: "modal") do
+          div(
+            id: "modal-backdrop",
+            class: "fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 opacity-100 transition-opacity duration-300",
+            data: { 
+              controller: "modal",
+              action: "click->modal#closeOnBackdrop"
+            }
+          ) do
+          div(class: "relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 xl:w-2/5 shadow-lg rounded-md bg-white") do
+            div(class: "mt-3") do
+              # Modal header
+              div(class: "flex items-center justify-between mb-4") do
+                h3(class: "text-lg font-medium text-gray-900") do
+                  "Edit #{@field_config[:label]}"
+                end
+                button(
+                  class: "text-gray-400 hover:text-gray-600 focus:outline-none",
+                  data: { action: "click->modal#close" }
+                ) do
+                  unsafe_raw <<~SVG
+                    <svg class="w-6 h-6" 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"></path>
+                    </svg>
+                  SVG
+                end
+              end
+
+              # Modal form
+              form(
+                action: update_field_url,
+                method: "patch",
+                data: {
+                  turbo_frame: "_top",
+                  controller: "form",
+                  action: "submit->form#submit turbo:submit-end->modal#handleSubmitEnd"
+                }
+              ) do
+                render_form_field
+                
+                # Form actions
+                div(class: "flex justify-end space-x-3 mt-6") 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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
+                    data: { action: "click->modal#close" }
+                  ) do
+                    "Cancel"
+                  end
+                  
+                  button(
+                    type: "submit",
+                    class: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                  ) do
+                    "Save Changes"
+                  end
+                end
+              end
+            end
+          end
+          end
+        end
+      end
+
+      private
+
+      def render_form_field
+        # For converted belongs_to fields, we need to get the foreign key value
+        if @field_config[:original_type] == :belongs_to
+          current_value = @record.public_send(@field_config[:name]) # This is already the foreign key
+        else
+          current_value = @record.public_send(@field_config[:name])
+        end
+        
+        
+        # Create a form builder for the field component
+        # Make sure the record has the current value set for the field
+        if @field_config[:original_type] == :belongs_to
+          # For belongs_to fields, ensure the foreign key is accessible
+          @record.define_singleton_method(@field_config[:name]) { current_value } unless @record.respond_to?(@field_config[:name])
+        end
+        
+        form_builder = ActionView::Helpers::FormBuilder.new(
+          @resource_class.param_key,
+          @record,
+          helpers,
+          {}
+        )
+        
+        # Get the field component instance and render it
+        field_component = field_component(
+          @field_config,
+          action: :form,
+          value: current_value,
+          record: @record,
+          form: form_builder
+        )
+        
+        
+        render field_component
+      end
+
+      def field_input_id
+        "field_#{@field_config[:name]}"
+      end
+
+      def update_field_url
+        # For belongs_to fields that were converted to select, we need to use the belongs_to_reattach route
+        if @field_config[:original_type] == :belongs_to
+          easy_admin_url_helpers.belongs_to_reattach_resource_path(
+            @resource_class.route_key,
+            id: @record.id,
+            field: @field_config[:original_name]
+          )
+        else
+          easy_admin_url_helpers.update_field_resource_path(
+            @resource_class.route_key,
+            id: @record.id,
+            field: @field_config[:name]
+          )
+        end
+      end
+    end
+  end
+end