easy-admin-rails 0.1.0

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

@@ -0,0 +1,326 @@
+module EasyAdmin
+  module Fields
+    module Form
+      class SelectComponent < EasyAdmin::Fields::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
+            
+            div(
+              class: select_container_classes,
+              data: {
+                controller: "select-field",
+                select_field_multiple_value: multiple?.to_s,
+                select_field_placeholder_value: placeholder,
+                select_field_suggest_value: suggest_mode?.to_s,
+                select_field_suggest_url_value: suggest_mode? ? suggest_url : "",
+                field_name: field_name
+              }
+            ) do
+              if multiple?
+                render_multiple_select_container
+              else
+                render_single_select_input
+              end
+              render_select_dropdown
+              render_clear_button if multiple?
+              render_hidden_inputs
+            end
+            
+            if field[:help_text]
+              p(class: "mt-1 text-sm text-gray-500") { field[:help_text] }
+            end
+          end
+        end
+
+        private
+
+        def multiple?
+          result = field[:multiple] == true
+          result
+        end
+
+        def options
+          field[:options] || []
+        end
+
+        def placeholder
+          field[:placeholder] || "Search #{field_label.downcase}..."
+        end
+
+        def suggest_mode?
+          field[:suggest].present?
+        end
+
+        def suggest_url
+          return "" unless suggest_mode?
+          
+          # Extract resource name from form object
+          resource_name = form.object.class.name.underscore.pluralize
+          
+          # For belongs_to fields that were converted to select, use the original association name
+          search_field_name = if field[:original_type] == :belongs_to && field[:original_name]
+            field[:original_name]
+          else
+            field_name
+          end
+          
+          easy_admin_url_helpers.suggest_resource_path(resource_name, field: search_field_name)
+        end
+
+        def label_classes
+          "block text-sm font-medium text-gray-700 mb-1"
+        end
+
+        def select_container_classes
+          base_classes = "relative"
+          classes = [base_classes]
+          classes << "select-multiple" if multiple?
+          classes.join(" ")
+        end
+
+        def render_multiple_select_container
+          div(class: "relative border border-gray-300 rounded-md bg-white min-h-10 focus-within:ring-1 focus-within:ring-blue-500 focus-within:border-blue-500 transition-colors duration-200") do
+            div(class: "flex flex-wrap items-center gap-1 p-2 pr-8") do
+              # Selected items container - will be populated by Stimulus controller
+              div(class: "flex flex-wrap items-center gap-1", data: { select_field_target: "selectedItems" }) do
+                current_selected_values.each do |selected_value|
+                  render_selected_item(selected_value)
+                end
+              end
+              
+              # Search input
+              input(
+                type: "text",
+                class: "flex-1 min-w-20 border-none outline-none text-sm placeholder-gray-400 bg-transparent",
+                placeholder: current_selected_values.empty? ? placeholder : "",
+                data: {
+                  select_field_target: "search",
+                  action: "input->select-field#filter keydown->select-field#handleKeydown focus->select-field#openDropdown"
+                }
+              )
+            end
+          end
+        end
+
+        def render_search_input
+          input(
+            type: "text",
+            class: search_input_classes,
+            placeholder: placeholder,
+            data: {
+              select_field_target: "search",
+              action: "input->select-field#filter keydown->select-field#handleKeydown"
+            }
+          )
+        end
+
+        def render_single_select_input
+          div(class: "relative") do
+            input(
+              type: "text",
+              class: single_select_input_classes,
+              placeholder: suggest_mode? ? placeholder : (field[:placeholder] || "Select #{field_label.downcase}..."),
+              readonly: !suggest_mode?,
+              value: suggest_mode? ? "" : current_display_value,
+              data: suggest_mode? ? {
+                select_field_target: "search",
+                action: "input->select-field#filter keydown->select-field#handleKeydown focus->select-field#openDropdown"
+              } : {
+                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
+        end
+
+        private
+
+        def search_input_classes
+          base_classes = "block w-full px-3 py-2 text-sm border rounded-md"
+          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
+
+        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
+
+        def selected_items_classes
+          base_classes = "selected-items flex flex-wrap gap-1"
+          padding_classes = "p-2 min-h-10"
+          border_classes = "border border-gray-300 rounded-md bg-white"
+          
+          "#{base_classes} #{padding_classes} #{border_classes}"
+        end
+
+        def render_selected_item(selected_value)
+          span(
+            class: "selected-item inline-flex items-center px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded cursor-pointer hover:bg-blue-200 transition-colors duration-150",
+            data: {
+              value: selected_value,
+              action: "click->select-field#removeItem"
+            }
+          ) do
+            plain display_text_for_value(selected_value)
+            span(class: "remove-item ml-1 text-blue-600 hover:text-blue-800 font-medium") { plain "×" }
+          end
+        end
+
+        def render_select_dropdown
+          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
+            if suggest_mode?
+              # For suggest mode, options will be loaded dynamically
+              render_no_results_message
+              render_loading_message
+            else
+              # For static mode, render all options
+              options.each do |option|
+                render_option(option)
+              end
+              render_no_results_message
+            end
+          end
+        end
+
+        def render_option(option)
+          option_value, option_text = extract_option_value_and_text(option)
+          
+          div(
+            class: "select-option px-3 py-2 text-sm text-gray-900 cursor-pointer hover:bg-blue-50 hover:text-blue-900 transition-colors duration-150",
+            data: {
+              value: option_value,
+              action: "click->select-field#selectOption",
+              select_field_target: "option"
+            }
+          ) do
+            plain option_text.to_s
+          end
+        end
+
+        def render_no_results_message
+          div(
+            class: "select-no-results px-3 py-2 text-sm text-gray-500 text-center",
+            data: { select_field_target: "noResults" },
+            style: "display: none;"
+          ) do
+            plain "No options found"
+          end
+        end
+
+        def render_loading_message
+          div(
+            class: "select-loading px-3 py-2 text-sm text-gray-500 text-center",
+            data: { select_field_target: "loading" },
+            style: "display: none;"
+          ) do
+            plain "Loading..."
+          end
+        end
+
+        def render_clear_button
+          button(
+            type: "button",
+            class: "select-clear absolute top-2 right-8 p-1 text-gray-400 hover:text-gray-600 bg-white rounded transition-colors duration-150",
+            data: { action: "click->select-field#clearAll" },
+            title: "Clear all selections"
+          ) do
+            unsafe_raw('<svg class="w-4 h-4" 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"/></svg>')
+          end
+        end
+
+        def render_hidden_inputs
+          if multiple?
+            current_selected_values.each do |selected_value|
+              input(
+                type: "hidden",
+                name: "#{form_field_name}[]",
+                value: selected_value,
+                data: { select_field_target: "hiddenInput" }
+              )
+            end
+          else
+            # Single select - one hidden input
+            current_value = form.object.public_send(field_name) if form.object.respond_to?(field_name)
+            input(
+              type: "hidden",
+              name: form_field_name,
+              value: current_value || "",
+              data: { select_field_target: "hiddenInput" }
+            )
+          end
+        end
+
+        def extract_option_value_and_text(option)
+          if option.is_a?(Array)
+            [option[1], option[0]]
+          elsif option.is_a?(Hash)
+            [option[:value] || option["value"], option[:text] || option["text"] || option[:label] || option["label"]]
+          else
+            [option, option]
+          end
+        end
+
+        def form_field_name
+          model_name = form.object.class.name.underscore
+          "#{model_name}[#{field_name}]"
+        end
+
+        def current_selected_values
+          current_value = form.object.public_send(field_name) if form.object.respond_to?(field_name)
+          
+          if multiple?
+            current_value.is_a?(Array) ? current_value : []
+          else
+            current_value.present? ? [current_value] : []
+          end
+        end
+
+        def current_display_value
+          current_value = form.object.public_send(field_name) if form.object.respond_to?(field_name)
+          return "" if current_value.blank?
+          
+          # Find the display text for the current value
+          options.each do |option|
+            option_value, option_text = extract_option_value_and_text(option)
+            return option_text if option_value.to_s == current_value.to_s
+          end
+          
+          current_value.to_s
+        end
+
+        def display_text_for_value(value)
+          # Find the display text for the given value
+          options.each do |option|
+            option_value, option_text = extract_option_value_and_text(option)
+            return option_text if option_value.to_s == value.to_s
+          end
+          
+          value.to_s
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,55 @@
+module EasyAdmin
+  module Fields
+    module Form
+      class TextComponent < 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: "text",
+              name: form_field_name,
+              id: field_id,
+              value: current_value,
+              class: input_classes,
+              required: required?,
+              placeholder: field[:placeholder] || "Enter #{field_label.downcase}"
+            )
+            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
+          form.object.public_send(field_name) if form.object.respond_to?(field_name)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,54 @@
+module EasyAdmin
+  module Fields
+    module Form
+      class TextareaComponent < 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
+            textarea(
+              name: form_field_name,
+              id: field_id,
+              class: textarea_classes,
+              required: required?,
+              rows: field[:rows] || 4,
+              placeholder: field[:placeholder] || "Enter #{field_label.downcase}"
+            ) { current_value }
+            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 textarea_classes
+          base_classes = "block w-full px-3 py-2 border rounded-md shadow-sm text-sm resize-y"
+          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
+          form.object.public_send(field_name) if form.object.respond_to?(field_name)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,93 @@
+module EasyAdmin
+  module Fields
+    module Index
+      class BelongsToComponent < BaseComponent
+        private
+
+        def view_template
+          div(class: "field-cell") do
+            if association_record
+              if field[:show_link]
+                a(
+                  href: view_path_for(association_record),
+                  class: "field-link field-link--compact"
+                ) do
+                  plain display_text
+                end
+              else
+                span(class: "field-text") { plain display_text }
+              end
+            else
+              span(class: "field-empty") { plain "—" }
+            end
+          end
+        end
+
+        def association_record
+          @association_record ||= load_association_record
+        end
+
+        def load_association_record
+          return nil if value.blank?
+
+          association_class = determine_association
+          
+          if value.respond_to?(:id)
+            # Already loaded record
+            value
+          else
+            # ID value, need to load the record
+            association_class.find_by(id: value)
+          end
+        end
+
+        def determine_association
+          return field[:association] if field[:association]
+          
+          # Try to determine from attribute name
+          if field_name.to_s.end_with?('_id')
+            field_name.to_s.gsub('_id', '').classify.constantize
+          else
+            field_name.to_s.classify.constantize
+          end
+        rescue NameError
+          raise ArgumentError, "Could not determine association for #{field_name}. Please specify :association option."
+        end
+
+        def display_text
+          return "—" unless association_record
+
+          text = if field[:display_method]
+            association_record.send(field[:display_method])
+          elsif association_record.respond_to?(:name)
+            association_record.name
+          elsif association_record.respond_to?(:title)
+            association_record.title
+          elsif association_record.respond_to?(:to_label)
+            association_record.to_label
+          else
+            "##{association_record.id}"
+          end
+
+          # Truncate for index display
+          if field[:truncate] != false
+            truncate_length = field[:truncate] || 30
+            text.to_s.length > truncate_length ? "#{text.to_s[0...truncate_length]}..." : text.to_s
+          else
+            text.to_s
+          end
+        end
+
+        def view_path_for(record)
+          return field[:view_path_proc].call(record) if field[:view_path_proc]
+          
+          association_class = record.class
+          EasyAdmin::Engine.routes.url_helpers.resource_path(
+            resource_name: association_class.model_name.route_key,
+            id: record.id
+          )
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+module EasyAdmin
+  module Fields
+    module Index
+      class BooleanComponent < BaseComponent
+        def view_template
+          span(class: badge_classes) do
+            if value
+              unsafe_raw '<span class="flex items-center"><svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>Active</span>'
+            else
+              unsafe_raw '<span class="flex items-center"><svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>Inactive</span>'
+            end
+          end
+        end
+
+        private
+
+        def badge_classes
+          base_classes = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
+          
+          if value
+            "#{base_classes} bg-green-100 text-green-800"
+          else
+            "#{base_classes} bg-gray-100 text-gray-800"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module EasyAdmin
+  module Fields
+    module Index
+      class DateComponent < BaseComponent
+        def view_template
+          span(class: "ea-cell-value") do
+            format_value
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module EasyAdmin
+  module Fields
+    module Index
+      class DatetimeComponent < BaseComponent
+        def view_template
+          span(class: "ea-cell-value") do
+            format_value
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+module EasyAdmin
+  module Fields
+    module Index
+      class EmailComponent < BaseComponent
+        def view_template
+          if value.present?
+            a(href: "mailto:#{value}", class: "ea-link") do
+              truncate(value.to_s, length: 30)
+            end
+          else
+            span(class: "ea-empty-value") { "—" }
+          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/index/filters/base_component.rb

@@ -0,0 +1,48 @@
+module EasyAdmin
+  module Fields
+    module Index
+      module Filters
+        class BaseComponent < Phlex::HTML
+          def initialize(field:, search_params: {})
+            @field = field
+            @search_params = search_params
+          end
+
+          def view_template
+            div(class: "space-y-2") do
+              render_label
+              render_filter_input
+            end
+          end
+
+          private
+
+          def render_label
+            label(
+              for: field_id,
+              class: "block text-sm font-medium text-gray-700"
+            ) { @field[:label] }
+          end
+
+          def render_filter_input
+            # Override in subclasses
+          end
+
+          def field_id
+            "filter_#{@field[:name]}"
+          end
+
+          def base_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