easy-admin-rails 0.1.0

data/app/components/easy_admin/dashboards/table_card_component.rb

@@ -0,0 +1,52 @@
+module EasyAdmin
+  module Dashboards
+    class TableCardComponent < BaseCardComponent
+      private
+
+      def render_card_actions
+        if card[:show_view_all]
+          a(
+            href: card[:view_all_url] || "#",
+            class: "inline-flex items-center px-3 py-1.5 bg-blue-50 text-blue-700 text-sm font-medium rounded-lg hover:bg-blue-100 transition-colors"
+          ) do
+            plain "View All"
+          end
+        end
+
+        if card[:allow_export]
+          button(
+            class: "inline-flex items-center px-3 py-1.5 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200 transition-colors ml-2",
+            type: "button"
+          ) do
+            plain "Export"
+          end
+        end
+      end
+
+      def render_skeleton
+        div(class: "animate-pulse") do
+          # Table header skeleton
+          div(class: "grid gap-4 mb-4", style: "grid-template-columns: repeat(#{card[:columns] || 4}, minmax(0, 1fr));") do
+            columns = card[:columns] || 4
+            columns.times do
+              div(class: "h-4 bg-gray-200 rounded")
+            end
+          end
+          
+          # Table rows skeleton
+          div(class: "space-y-3") do
+            rows = card[:preview_rows] || 5
+            rows.times do
+              div(class: "grid gap-4", style: "grid-template-columns: repeat(#{card[:columns] || 4}, minmax(0, 1fr));") do
+                columns = card[:columns] || 4
+                columns.times do
+                  div(class: "h-4 bg-gray-100 rounded")
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/date_picker_component.rb

@@ -0,0 +1,188 @@
+module EasyAdmin
+  class DatePickerComponent < Phlex::HTML
+    attr_reader :name, :value, :label, :options
+
+    def initialize(name:, value: nil, label: nil, **options)
+      @name = name
+      @value = value
+      @label = label
+      @options = options
+    end
+
+    def view_template
+      div(
+        class: "relative",
+        data: { controller: "date-picker" }
+      ) do
+        if label
+          label(for: input_id, class: "block text-sm font-medium text-gray-700 mb-1") { plain label }
+        end
+        
+        div(class: "relative") do
+          input(
+            type: "text",
+            id: input_id,
+            name: name,
+            value: formatted_value,
+            class: input_classes,
+            placeholder: options[:placeholder] || "Select date",
+            readonly: true,
+            data: {
+              date_picker_target: "input",
+              action: "click->date-picker#toggle focus->date-picker#toggle"
+            }
+          )
+          
+          div(class: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400") do
+            calendar_icon
+          end
+        end
+        
+        render_date_picker_modal
+      end
+    end
+
+    private
+
+    def input_id
+      @input_id ||= "#{name}_#{SecureRandom.hex(4)}"
+    end
+
+    def input_classes
+      classes = ["block w-full px-3 py-2 pr-10 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder-gray-400"]
+      classes << options[:class] if options[:class]
+      classes.join(" ")
+    end
+
+    def formatted_value
+      return "" unless value
+      
+      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 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
+      div(
+        class: "absolute z-[9999] 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" }
+        ) do
+          # Will be populated by JavaScript
+        end
+        
+        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") { plain 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" }
+        ) do
+          plain "Today"
+        end
+        
+        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" }
+          ) do
+            plain "Clear"
+          end
+          
+          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" }
+          ) do
+            plain "Done"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,101 @@
+module EasyAdmin
+  module Fields
+    class BaseComponent < Phlex::HTML
+      # Register Turbo custom elements
+      register_element :turbo_frame
+      register_element :turbo_stream
+      register_element :template
+      
+      # Include Rails helpers for form building, URL generation, and text manipulation
+      include ActionView::Helpers::DateHelper
+      include ActionView::Helpers::TextHelper
+      include ActionView::Helpers::UrlHelper
+      include ActionView::Helpers::NumberHelper
+      include EasyAdmin::DashboardsHelper
+      include EasyAdmin::FieldsHelper
+
+      # Add method to access all Rails helpers if needed
+      def helpers
+        @helpers ||= Class.new do
+          include ActionView::Helpers
+          include Rails.application.routes.url_helpers
+          include EasyAdmin::Engine.routes.url_helpers
+        end.new
+      end
+
+      # Direct access to EasyAdmin URL helpers
+      def easy_admin_url_helpers
+        @easy_admin_url_helpers ||= EasyAdmin::Engine.routes.url_helpers
+      end
+
+      # Direct access to Rails URL helpers
+      def rails_url_helpers
+        @rails_url_helpers ||= Rails.application.routes.url_helpers
+      end
+
+      attr_reader :field, :value, :record, :form
+
+      def initialize(field:, value: nil, record: nil, form: nil, **options)
+        @field = field
+        @value = value
+        @record = record
+        @form = form
+        @options = options
+      end
+
+      def view_template
+        # Override this in subclasses
+      end
+
+      private
+
+      def field_name
+        field[:name]
+      end
+
+      def field_label
+        field[:label]
+      end
+
+      def field_type
+        field[:type]
+      end
+
+      def required?
+        field[:required]
+      end
+
+      def readonly?
+        field[:readonly]
+      end
+
+      def field_id
+        "#{field_name}_#{SecureRandom.hex(3)}"
+      end
+
+      def css_classes(*additional_classes)
+        classes = additional_classes.compact
+        classes.join(" ")
+      end
+
+      def format_value(val = value)
+        return "" if val.blank?
+        
+        case field_type
+        when :boolean
+          val ? "Yes" : "No"
+        when :date
+          val.respond_to?(:strftime) ? val.strftime('%B %d, %Y') : val
+        when :datetime
+          val.respond_to?(:strftime) ? val.strftime('%B %d, %Y at %I:%M %p') : val
+        when :email
+          val.to_s
+        when :text
+          val.to_s
+        else
+          val.to_s
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,117 @@
+module EasyAdmin
+  module Fields
+    class BelongsToEditModalComponent < EasyAdmin::BaseComponent
+      def initialize(record:, resource_class:, parent_record:, parent_field:)
+        @record = record
+        @resource_class = resource_class
+        @parent_record = parent_record
+        @parent_field = parent_field
+      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 #{@resource_class.singular_title}"
+                  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_attached_url,
+                  method: "patch",
+                  data: {
+                    turbo_frame: "_top",
+                    controller: "form",
+                    action: "submit->form#submit turbo:submit-end->modal#handleSubmitEnd"
+                  }
+                ) do
+                  render_form_fields
+                  
+                  # 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_fields
+        # Create a form builder for the associated record
+        form_builder = ActionView::Helpers::FormBuilder.new(
+          @resource_class.param_key,
+          @record,
+          helpers,
+          {}
+        )
+
+        # Render each form field for the associated record
+        @resource_class.form_fields.each do |field_config|
+          next if field_config[:readonly]
+
+          current_value = @record.public_send(field_config[:name]) if @record.respond_to?(field_config[:name])
+          
+          field_component = field_component(
+            field_config,
+            action: :form,
+            value: current_value,
+            record: @record,
+            form: form_builder
+          )
+          
+          render field_component
+        end
+      end
+
+      def update_attached_url
+        # We need to create a route that handles updating the attached record
+        # and then refreshes the parent table cell
+        easy_admin_url_helpers.update_belongs_to_attached_resource_path(
+          @parent_record.class.name.underscore.pluralize,
+          id: @parent_record.id,
+          field: @parent_field[:name],
+          attached_id: @record.id
+        )
+      end
+    end
+  end
+end

data/app/components/easy_admin/fields/form/belongs_to_component.rb

@@ -0,0 +1,82 @@
+module EasyAdmin
+  module Fields
+    module Form
+      class BelongsToComponent < SelectComponent
+        private
+
+        # Override to ensure single select mode
+        def multiple?
+          false
+        end
+
+        # Override to use proper field name for belongs_to associations
+        def form_field_name
+          model_name = form.object.class.name.underscore
+          "#{model_name}[#{association_key}]"
+        end
+
+        # Override to handle belongs_to association field name
+        def association_key
+          # Convert belongs_to association name to foreign key
+          # e.g., user -> user_id, category -> category_id
+          if field_name.to_s.end_with?('_id')
+            field_name
+          else
+            "#{field_name}_id"
+          end
+        end
+
+        # Override to always use suggest mode for belongs_to
+        def suggest_mode?
+          true
+        end
+
+        # Override to ensure suggest configuration exists
+        def field
+          @field_with_suggest ||= begin
+            original_field = super
+            original_field.merge(
+              suggest: original_field[:suggest] || { search_fields: [:name], limit: 10 }
+            )
+          end
+        end
+
+        # Override to generate proper suggest URL for belongs_to fields
+        def suggest_url
+          # Extract resource name from form object
+          resource_name = form.object.class.name.underscore.pluralize
+          
+          # For belongs_to fields, use the association name (not the foreign key)
+          search_field_name = field_name
+          
+          url = easy_admin_url_helpers.suggest_resource_path(resource_name, field: search_field_name)
+          Rails.logger.debug "BelongsTo suggest URL for #{field_name}: #{url} (resource: #{resource_name}, field: #{search_field_name})"
+          url
+        end
+
+        # Override to always return empty options since we use suggest mode
+        def options
+          []
+        end
+
+        # Override to get current value using association key
+        def current_selected_values
+          current_value = form.object.public_send(association_key) if form.object.respond_to?(association_key)
+          current_value.present? ? [current_value] : []
+        end
+
+        # Override to ensure hidden input uses the foreign key value
+        def render_hidden_inputs
+          # Single select - one hidden input with foreign key value
+          current_value = form.object.public_send(association_key) if form.object.respond_to?(association_key)
+          input(
+            type: "hidden",
+            name: form_field_name,
+            value: current_value || "",
+            data: { select_field_target: "hiddenInput" }
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/fields/form/boolean_component.rb

@@ -0,0 +1,100 @@
+module EasyAdmin
+  module Fields
+    module Form
+      class BooleanComponent < BaseComponent
+        def view_template
+          div(class: "mb-4") do
+            div(class: "flex items-center justify-between") do
+              div(class: "flex flex-col") do
+                label(for: field_id, class: label_classes) do
+                  plain field_label
+                  if required?
+                    span(class: "text-red-500 ml-1") { "*" }
+                  end
+                end
+
+                if field[:help_text]
+                  p(class: "mt-1 text-sm text-gray-500") { field[:help_text] }
+                end
+              end
+
+              render_toggle_switch
+            end
+          end
+        end
+
+        private
+
+        def render_toggle_switch
+          container_attributes = {
+            class: "relative inline-flex items-center",
+            data: { controller: "toggle-switch" }
+          }
+
+          div(**container_attributes) do
+            # Hidden input for unchecked state
+            input(type: "hidden", name: form_field_name, value: "0")
+
+            # Hidden checkbox that holds the actual value
+            input(
+              type: "checkbox",
+              name: form_field_name,
+              id: field_id,
+              value: "1",
+              checked: current_value,
+              class: "sr-only",
+              data: { toggle_switch_target: "checkbox" }
+            )
+
+            # Visual toggle switch (clickable)
+            div(
+              class: "toggle-switch cursor-pointer",
+              data: { action: "click->toggle-switch#toggle" }
+            ) do
+              span(
+                class: "toggle-slider",
+                data: { toggle_switch_target: "slider" }
+              )
+            end
+
+            # Optional: Status text
+            if field[:show_status]
+              span(class: "ml-3 text-sm font-medium text-gray-700") do
+                span(class: "toggle-status-text", data: { toggle_switch_target: "statusText" }) do
+                  current_value ? "Enabled" : "Disabled"
+                end
+              end
+            end
+          end
+        end
+
+        def toggle_switch_classes
+          base_classes = "relative inline-flex items-center cursor-pointer"
+          disabled_classes = field[:disabled] ? "opacity-50 cursor-not-allowed" : ""
+
+          "#{base_classes} #{disabled_classes}".strip
+        end
+
+        def label_classes
+          "block text-sm font-medium text-gray-700 mb-1"
+        end
+
+        def form_field_name
+          model_name = form.object.class.name.underscore
+          "#{model_name}[#{field_name}]"
+        end
+
+        def current_value
+          value = form.object.public_send(field_name) if form.object.respond_to?(field_name)
+          # Convert various truthy values to boolean
+          case value
+          when true, 1, "1", "true", "on", "yes"
+            true
+          else
+            false
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/fields/form/date_component.rb

@@ -0,0 +1,55 @@
+module EasyAdmin
+  module Fields
+    module Form
+      class DateComponent < BaseComponent
+        def view_template
+          div(class: "mb-4") do
+            label(for: field_id, class: label_classes) do
+              plain field_label
+              if required?
+                span(class: "text-red-500 ml-1") { "*" }
+              end
+            end
+            input(
+              type: "date",
+              name: form_field_name,
+              id: field_id,
+              value: current_value,
+              class: input_classes,
+              required: required?
+            )
+            if field[:help_text]
+              p(class: "mt-1 text-sm text-gray-500") { field[:help_text] }
+            end
+          end
+        end
+
+        private
+
+        def label_classes
+          "block text-sm font-medium text-gray-700 mb-1"
+        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
+
+        def form_field_name
+          model_name = form.object.class.name.underscore
+          "#{model_name}[#{field_name}]"
+        end
+
+        def current_value
+          value = form.object.public_send(field_name) if form.object.respond_to?(field_name)
+          value.respond_to?(:strftime) ? value.strftime("%Y-%m-%d") : value
+        end
+      end
+    end
+  end
+end