easy-admin-rails 0.1.0

data/app/components/easy_admin/fields/show/has_many_component.rb

@@ -0,0 +1,192 @@
+module EasyAdmin
+  module Fields
+    module Show
+      class HasManyComponent < BaseComponent
+        private
+
+        def view_template
+          div(class: "field-display ea-has-many-field") do
+            # Only show label if show_label is not explicitly false
+            if field.fetch(:show_label, true)
+              div(class: "field-label font-medium text-sm text-gray-700 mb-3") { plain field_label }
+            end
+            
+            div(class: "field-value") do
+              render_has_many_table
+            end
+          end
+        end
+
+        def render_has_many_table
+          if value.respond_to?(:each) && value.any?
+            div(class: "overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg") do
+              table(class: "table-striped min-w-full divide-y divide-gray-300") do
+                thead(class: "bg-gray-50") do
+                  tr do
+                    association_fields.each do |field|
+                      th(scope: "col", class: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wide") do
+                        plain field[:label]
+                      end
+                    end
+                    th(scope: "col", class: "relative px-6 py-3") do
+                      span(class: "sr-only") { "Actions" }
+                    end
+                  end
+                end
+                tbody(class: "divide-y divide-gray-200 bg-white") do
+                  records_to_show.each do |item|
+                    tr(class: "hover:bg-gray-100 transition-colors duration-150") do
+                      association_fields.each do |field|
+                        td(class: "whitespace-nowrap px-6 py-4 text-sm") do
+                          div(class: "text-gray-900 font-medium") do
+                            field_value = item.public_send(field[:name])
+                            plain format_association_value(field_value, field[:type])
+                          end
+                        end
+                      end
+                      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") do
+                          a(href: view_path_for(item), 
+                            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", 
+                            title: "View") do
+                            unsafe_raw %(<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>)
+                          end
+                        end
+                      end
+                    end
+                  end
+                end
+              end
+            end
+            
+            if value.count > 5
+              div(class: "text-sm text-gray-500 mt-3 text-center") do
+                "Showing #{records_to_show.count} of #{value.count} #{field_label.downcase}."
+              end
+            end
+          else
+            div(class: "text-center py-8 text-gray-500") do
+              div(class: "text-lg") { "📄" }
+              div(class: "mt-2 text-sm") { "No #{field_label.downcase} found." }
+            end
+          end
+        end
+
+        def render_skeleton_loader
+          div(class: "ea-has-many-skeleton") do
+            skeleton_count.times do
+              div(class: "ea-skeleton-item") do
+                div(class: "ea-skeleton-line ea-skeleton-line--title")
+                div(class: "ea-skeleton-line ea-skeleton-line--subtitle")
+                div(class: "ea-skeleton-actions") do
+                  3.times do
+                    div(class: "ea-skeleton-button")
+                  end
+                end
+              end
+            end
+          end
+        end
+
+        def turbo_frame_id
+          "has_many_#{field_name}_#{record.id}"
+        end
+
+        def lazy_load_url
+          # TODO: Create proper route helper for has_many lazy loading
+          # For now, construct URL dynamically based on engine mount point
+          "#{EasyAdmin::Engine.routes.url_helpers.resources_path(resource_name: resource_route_key).chomp('/')}/#{record.id}/has_many/#{field_name}"
+        end
+
+        def resource_route_key
+          record.class.name.underscore.pluralize
+        end
+
+        def skeleton_count
+          field[:skeleton_count] || 3
+        end
+
+        def association_fields
+          @association_fields ||= determine_association_fields
+        end
+
+        def determine_association_fields
+          return field[:fields] if field[:fields]
+          
+          # Get the association class
+          association_class = determine_association_class
+          return [] unless association_class
+          
+          # Default fields - try to get the most common ones
+          fields = []
+          
+          # Add ID field
+          fields << { name: :id, label: "ID", type: :number }
+          
+          # Try common display fields
+          if association_class.column_names.include?('name')
+            fields << { name: :name, label: "Name", type: :text }
+          elsif association_class.column_names.include?('title')
+            fields << { name: :title, label: "Title", type: :text }
+          end
+          
+          # Add timestamps if available
+          if association_class.column_names.include?('created_at')
+            fields << { name: :created_at, label: "Created", type: :datetime }
+          end
+          
+          fields.take(3) # Limit to 3 fields for readability
+        end
+
+        def determine_association_class
+          return field[:association] if field[:association]
+          
+          # Try to determine from the field name or value
+          if value.respond_to?(:first) && value.first
+            value.first.class
+          elsif field_name.to_s.end_with?('s')
+            # Pluralized association name, try to singularize and classify
+            field_name.to_s.singularize.classify.constantize
+          else
+            field_name.to_s.classify.constantize
+          end
+        rescue NameError
+          nil
+        end
+
+        def records_to_show
+          @records_to_show ||= value.limit(5)
+        end
+
+        def format_association_value(val, type)
+          return "—" if val.blank?
+          
+          case type
+          when :datetime
+            val.respond_to?(:strftime) ? val.strftime('%b %d, %Y at %I:%M %p') : val.to_s
+          when :date
+            val.respond_to?(:strftime) ? val.strftime('%b %d, %Y') : val.to_s
+          when :boolean
+            val ? "Yes" : "No"
+          else
+            val.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/show/json_component.rb

@@ -0,0 +1,45 @@
+module EasyAdmin
+  module Fields
+    module Show
+      class JsonComponent < Fields::BaseComponent
+        def view_template
+          div(class: "space-y-2") do
+            div(class: "text-sm font-medium text-gray-700") { field_label }
+            div(class: "bg-white border rounded-lg overflow-hidden") do
+              if json_value.present?
+                div(
+                  data: {
+                    controller: "jsoneditor",
+                    jsoneditor_mode_value: "view",
+                    jsoneditor_data_value: parsed_json_data.to_json
+                  },
+                  style: "height: 300px;"
+                )
+              else
+                div(class: "p-4 text-center text-gray-400 italic") { "No data" }
+              end
+            end
+          end
+        end
+
+        private
+
+        def json_value
+          @json_value ||= value
+        end
+
+        def parsed_json_data
+          if json_value.is_a?(String)
+            begin
+              JSON.parse(json_value)
+            rescue JSON::ParserError
+              { error: "Invalid JSON", raw_value: json_value }
+            end
+          else
+            json_value
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+module EasyAdmin
+  module Fields
+    module Show
+      class NumberComponent < BaseComponent
+        def view_template
+          div(class: "ea-show-value ea-show-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/show/select_component.rb

@@ -0,0 +1,25 @@
+module EasyAdmin
+  module Fields
+    module Show
+      class SelectComponent < BaseComponent
+        def view_template
+          div(class: "ea-show-value ea-show-select") do
+            if value.present?
+              if value.is_a?(Array)
+                div(class: "ea-select-multiple") do
+                  value.each do |item|
+                    span(class: "ea-select-tag") { plain item.to_s }
+                  end
+                end
+              else
+                plain value.to_s
+              end
+            else
+              span(class: "ea-empty-value") { plain "—" }
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+module EasyAdmin
+  module Fields
+    module Show
+      class TextComponent < BaseComponent
+        def view_template
+          div(class: "ea-show-value") do
+            if value.present?
+              value.to_s
+            else
+              span(class: "ea-empty-value") { "—" }
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,26 @@
+module EasyAdmin
+  module Fields
+    module Show
+      class TextareaComponent < BaseComponent
+        def view_template
+          div(class: "ea-show-value") do
+            if value.present?
+              div(class: "ea-text-content") do
+                simple_format(value)
+              end
+            else
+              span(class: "ea-empty-value") { "—" }
+            end
+          end
+        end
+
+        private
+
+        def simple_format(text)
+          # Simple implementation of Rails' simple_format helper
+          text.to_s.gsub(/\r\n?/, "\n").gsub(/\n/, "<br>").html_safe
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/filters_component.rb

@@ -0,0 +1,120 @@
+module EasyAdmin
+  class FiltersComponent < Phlex::HTML
+    def initialize(resource_class:, current_params: {}, search_params: {})
+      @resource_class = resource_class
+      @current_params = current_params
+      @search_params = search_params || {}
+    end
+
+    def view_template
+      return unless @resource_class.filterable_fields.any?
+
+      div(class: "bg-white shadow rounded-lg mb-6") do
+        form(
+          method: "get",
+          action: route_helper.resources_path(@resource_class.route_key),
+          data: { turbo_frame: "table-frame" },
+          class: "space-y-4"
+        ) do
+          # Preserve existing params (except search params)
+          preserve_params
+
+          div(class: "p-6 border-b border-gray-200") do
+            div(class: "flex items-center justify-between mb-4") do
+              div do
+                h3(class: "text-lg font-medium text-gray-900") { "Filters" }
+                p(class: "text-sm text-gray-500") { "Filter #{@resource_class.title.downcase} by specific criteria" }
+              end
+              
+              # Clear filters button
+              if has_active_filters?
+                a(
+                  href: build_clear_filters_url,
+                  class: "text-sm text-red-600 hover:text-red-800 font-medium",
+                  data: { turbo_frame: "table-frame" }
+                ) { "Clear all filters" }
+              end
+            end
+
+            div(class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4") do
+              @resource_class.filterable_fields.each do |field|
+                render_filter_field(field)
+              end
+            end
+          end
+
+          div(class: "px-6 py-4 bg-gray-50") do
+            div(class: "flex items-center justify-end space-x-3") do
+              button(
+                type: "submit",
+                class: "inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              ) do
+                unsafe_raw '<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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707v6.586l-4-4V9.414a1 1 0 00-.293-.707L3.293 6.293A1 1 0 013 5.586V4z"></path>
+                </svg>'
+                span { "Apply Filters" }
+              end
+            end
+          end
+        end
+      end
+    end
+
+    private
+
+    def route_helper
+      @route_helper ||= EasyAdmin::Engine.routes.url_helpers
+    end
+
+    def preserve_params
+      # Preserve non-filter params (scope, sort, direction, period, page)
+      preserved_params = @current_params.except(:q)
+      preserved_params.each do |key, value|
+        input(type: "hidden", name: key, value: value)
+      end
+    end
+
+    def render_filter_field(field)
+      component_class = filter_component_for_field(field)
+      render component_class.new(field: field, search_params: @search_params)
+    end
+
+    def filter_component_for_field(field)
+      case field[:type]
+      when :string, :email, :text
+        EasyAdmin::Fields::Index::Filters::StringComponent
+      when :boolean
+        EasyAdmin::Fields::Index::Filters::BooleanComponent
+      when :select, :belongs_to
+        EasyAdmin::Fields::Index::Filters::SelectComponent
+      when :number, :integer
+        EasyAdmin::Fields::Index::Filters::NumberComponent
+      when :date, :datetime
+        EasyAdmin::Fields::Index::Filters::DateComponent
+      else
+        EasyAdmin::Fields::Index::Filters::StringComponent
+      end
+    end
+
+    def has_active_filters?
+      return false unless @search_params.present?
+      
+      @search_params.each do |key, value|
+        return true if value.present?
+      end
+      
+      false
+    end
+
+    def build_clear_filters_url
+      base_url = route_helper.resources_path(@resource_class.route_key)
+      clear_params = @current_params.except(:q)
+      
+      if clear_params.present? && !clear_params.empty?
+        "#{base_url}?#{clear_params.to_query}"
+      else
+        base_url
+      end
+    end
+  end
+end

data/app/components/easy_admin/form_tabs_component.rb

@@ -0,0 +1,166 @@
+module EasyAdmin
+  class FormTabsComponent < Phlex::HTML
+    include EasyAdmin::FieldsHelper
+
+    def initialize(resource_class:, form:)
+      @resource_class = resource_class
+      @form = form
+    end
+
+    def view_template
+      div(
+        class: "form-tabs", 
+        data: { 
+          controller: "form-tabs",
+          action: "tab:selected@window->form-tabs#handleTabSelection"
+        }
+      ) do
+        render_tab_navigation
+        render_tab_content
+      end
+    end
+
+    private
+
+    def render_tab_navigation
+      nav(class: "border-b border-gray-200 mb-4 sm:mb-6") do
+        # Mobile dropdown for tabs
+        div(class: "sm:hidden relative", data: { controller: "dropdown" }) do
+          button(
+            type: "button",
+            class: "flex items-center justify-between w-full px-3 py-2 text-base border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-blue-500 focus:border-blue-500",
+            data: {
+              action: "click->dropdown#toggle",
+              dropdown_target: "trigger",
+              form_tabs_target: "mobileButton"
+            }
+          ) do
+            span(data: { form_tabs_target: "mobileButtonText" }) { @resource_class.form_tabs.first[:label] }
+            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"/></svg>')
+          end
+          
+          # Dropdown menu
+          div(
+            class: "absolute right-0 mt-2 w-full bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 z-10 hidden",
+            data: { dropdown_target: "menu" }
+          ) do
+            div(class: "py-1") do
+              @resource_class.form_tabs.each do |tab|
+                button(
+                  type: "button",
+                  class: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900",
+                  data: {
+                    action: "click->dropdown#close click->form-tabs#emitTabSelection",
+                    tab_id: tab[:name].downcase.gsub(/\s+/, '-'),
+                    tab_label: tab[:label]
+                  }
+                ) do
+                  tab[:label]
+                end
+              end
+            end
+          end
+        end
+        
+        # Desktop tabs
+        ul(class: "hidden sm:flex flex-wrap -mb-px text-sm font-medium text-center", role: "tablist") do
+          @resource_class.form_tabs.each_with_index do |tab, index|
+            render_tab_button(tab, index)
+          end
+        end
+      end
+    end
+
+    def render_tab_button(tab, index)
+      li(class: "mr-2", role: "presentation") do
+        button(
+          class: tab_button_classes(index == 0),
+          id: "#{tab[:name].downcase.gsub(/\s+/, '-')}-tab",
+          data: {
+            form_tabs_target: "tabButton",
+            tab_id: tab[:name].downcase.gsub(/\s+/, '-'),
+            action: "click->form-tabs#switchTab"
+          },
+          type: "button",
+          role: "tab"
+        ) do
+          if tab[:icon]
+            span(class: "inline-flex items-center") do
+              unsafe_raw(tab_icon(tab[:icon]))
+              span(class: "ml-2") { tab[:label] }
+            end
+          else
+            plain tab[:label]
+          end
+        end
+      end
+    end
+
+    def render_tab_content
+      div(class: "tab-content") do
+        @resource_class.form_tabs.each_with_index do |tab, index|
+          render_tab_panel(tab, index)
+        end
+      end
+    end
+
+    def render_tab_panel(tab, index)
+      div(
+        class: tab_panel_classes(index == 0),
+        id: "#{tab[:name].downcase.gsub(/\s+/, '-')}-panel",
+        data: { form_tabs_target: "tabPanel" },
+        role: "tabpanel"
+      ) do
+        div(class: "bg-white shadow-sm rounded-lg border border-gray-200") do
+          div(class: "px-4 py-5 sm:p-6") do
+            h3(class: "text-lg font-medium leading-6 text-gray-900 mb-6") do
+              tab[:label]
+            end
+            
+            div(class: "grid grid-cols-1 gap-6") do
+              tab[:fields].each do |field|
+                div do
+                  unsafe_raw render_field(field, action: :form, form: @form)
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+
+    def tab_button_classes(active = false)
+      base_classes = "inline-flex items-center p-4 border-b-2 rounded-t-lg transition-colors duration-200"
+      
+      if active
+        active_classes = "text-blue-600 border-blue-600"
+      else
+        inactive_classes = "text-gray-500 border-transparent hover:text-gray-600 hover:border-gray-300"
+      end
+      
+      "#{base_classes} #{active ? active_classes : inactive_classes}"
+    end
+
+    def tab_panel_classes(active = false)
+      base_classes = "tab-panel"
+      visibility_classes = active ? "block" : "hidden"
+      
+      "#{base_classes} #{visibility_classes}"
+    end
+
+    def tab_icon(icon_name)
+      case icon_name.to_sym
+      when :user
+        '<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>'
+      when :security
+        '<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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>'
+      when :settings
+        '<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="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>'
+      when :info
+        '<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>'
+      else
+        '<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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>'
+      end
+    end
+  end
+end