easy-admin-rails 0.2.6 → 0.2.7

data/app/components/easy_admin/show_layout_component.rb

@@ -1,12 +1,16 @@
+require 'securerandom'
+
 module EasyAdmin
   class ShowLayoutComponent < Phlex::HTML
+    include EasyAdmin::FieldsHelper
+    
     def initialize(resource_class:, record:)
       @resource_class = resource_class
       @record = record
     end
 
     def view_template
-      if @resource_class.has_show_layout?
+      if @resource_class.has_custom_show_layout?
         render_custom_layout
       else
         render_default_layout
@@ -16,16 +20,633 @@ module EasyAdmin
     private
 
     def render_custom_layout
-      @resource_class.show_layout.each do |element|
-        render_element(element)
+      layout_type, layout_content = @resource_class.show_layout_definition
+      
+      case layout_type
+      when :component
+        render layout_content.new(record: @record)
+      when :ast
+        render_ast_layout(layout_content)
+      end
+    end
+    
+    def render_ast_layout(root_node)
+      render_node(root_node)
+    end
+    
+    def render_node(node)
+      # Create layout context for the node
+      context = EasyAdmin::Layouts::LayoutContext.new(
+        record: @record,
+        resource_class: @resource_class,
+        current_user: nil, # TODO: get from controller
+        view_context: self
+      )
+      
+      # Check if node is visible
+      visible = node.visible?(context)
+      return unless visible
+      
+      
+      case node
+      when EasyAdmin::Layouts::Nodes::Root
+        render_root_node(node)
+      when EasyAdmin::Layouts::Nodes::Row
+        render_row_node(node)
+      when EasyAdmin::Layouts::Nodes::Column
+        render_column_node(node)
+      when EasyAdmin::Layouts::Nodes::Card
+        render_card_node(node)
+      when EasyAdmin::Layouts::Nodes::FieldNode
+        render_field_node(node)
+      when EasyAdmin::Layouts::Nodes::Heading
+        render_heading_node(node)
+      when EasyAdmin::Layouts::Nodes::Divider
+        render_divider_node(node)
+      when EasyAdmin::Layouts::Nodes::MetricCard
+        render_metric_card_node(node)
+      when EasyAdmin::Layouts::Nodes::Content
+        render_content_node(node, context)
+      when EasyAdmin::Layouts::Nodes::Tabs
+        render_tabs_node(node)
+      when EasyAdmin::Layouts::Nodes::Tab
+        render_tab_node(node)
+      when EasyAdmin::Layouts::Nodes::Section
+        render_section_node(node)
+      when EasyAdmin::Layouts::Nodes::Grid
+        render_grid_node(node)
+      when EasyAdmin::Layouts::Nodes::Spacer
+        render_spacer_node(node)
+      when EasyAdmin::Layouts::Nodes::RenderNode
+        render_render_node(node, context)
+      else
+        # Fallback for unknown node types
+        render_children(node)
+      end
+    end
+    
+    def render_root_node(node)
+      div(class: "easy-admin-layout") do
+        render_children(node)
+      end
+    end
+    
+    def render_row_node(node)
+      classes = ["grid", "items-stretch"]
+      
+      # Check if any child column has explicit size - if so, use 12-column grid
+      has_sized_columns = node.children.any? { |child| 
+        child.is_a?(EasyAdmin::Layouts::Nodes::Column) && child.attributes[:size] 
+      }
+      
+      if has_sized_columns
+        # Use 12-column grid for Bootstrap-style column sizing
+        classes << "grid-cols-1 md:grid-cols-12"
+      elsif node.attributes[:columns]
+        # Use simple equal-width columns
+        columns = node.attributes[:columns]
+        case columns
+        when 1
+          classes << "grid-cols-1"
+        when 2
+          classes << "grid-cols-1 md:grid-cols-2"
+        when 3
+          classes << "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+        when 4
+          classes << "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+        when 5
+          classes << "grid-cols-1 md:grid-cols-3 lg:grid-cols-5"
+        when 6
+          classes << "grid-cols-1 md:grid-cols-3 lg:grid-cols-6"
+        else
+          classes << "grid-cols-1 md:grid-cols-#{[columns, 12].min}"
+        end
+      else
+        classes << "grid-cols-1"
+      end
+      
+      # Add spacing with Tailwind gap classes
+      spacing = node.attributes[:spacing] || "medium"
+      case spacing
+      when "small", "sm"
+        classes << "gap-2"
+      when "medium", "md"
+        classes << "gap-4"
+      when "large", "lg"
+        classes << "gap-6"
+      else
+        classes << "gap-4"
+      end
+      
+      div(class: classes.join(" ")) do
+        render_children(node)
+      end
+    end
+    
+    def render_column_node(node)
+      classes = ["flex", "flex-col", "h-full"]
+      
+      # Handle column spanning in Tailwind CSS Grid
+      if node.attributes[:size]
+        size = node.attributes[:size]
+        # On mobile, all columns take full width, on desktop use specified size
+        case size
+        when 1
+          classes << "col-span-1 md:col-span-1"
+        when 2
+          classes << "col-span-1 md:col-span-2"
+        when 3
+          classes << "col-span-1 md:col-span-3"
+        when 4
+          classes << "col-span-1 md:col-span-4"
+        when 5
+          classes << "col-span-1 md:col-span-5"
+        when 6
+          classes << "col-span-1 md:col-span-6"
+        when 7
+          classes << "col-span-1 md:col-span-7"
+        when 8
+          classes << "col-span-1 md:col-span-8"
+        when 9
+          classes << "col-span-1 md:col-span-9"
+        when 10
+          classes << "col-span-1 md:col-span-10"
+        when 11
+          classes << "col-span-1 md:col-span-11"
+        when 12
+          classes << "col-span-1 md:col-span-12"
+        else
+          classes << "col-span-full"
+        end
+      end
+      
+      # Add responsive column spans if specified
+      if node.attributes[:sm]
+        classes << "sm:col-span-#{node.attributes[:sm]}"
+      end
+      if node.attributes[:md]
+        classes << "md:col-span-#{node.attributes[:md]}"
+      end
+      if node.attributes[:lg]
+        classes << "lg:col-span-#{node.attributes[:lg]}"
+      end
+      
+      # Add alignment classes with Tailwind
+      if node.attributes[:align]
+        case node.attributes[:align]
+        when 'center'
+          classes << "flex justify-center"
+        when 'right'
+          classes << "flex justify-end"
+        when 'left'
+          classes << "flex justify-start"
+        end
+      end
+      
+      div(class: classes.join(" ")) do
+        render_children(node)
+      end
+    end
+    
+    def render_card_node(node)
+      # Build card classes with Tailwind
+      card_classes = ["bg-white", "rounded-lg", "shadow-sm", "border", "mb-4", "flex-1", "flex", "flex-col", "h-full"]
+      
+      # Add color styling with Tailwind
+      if node.attributes[:color]
+        case node.attributes[:color]
+        when "primary"
+          card_classes << "border-blue-200"
+        when "secondary"
+          card_classes << "border-gray-200"
+        when "success"
+          card_classes << "border-green-200"
+        when "info"
+          card_classes << "border-cyan-200"
+        when "warning"
+          card_classes << "border-yellow-200"
+        when "danger"
+          card_classes << "border-red-200"
+        when "light"
+          card_classes << "border-gray-100"
+        when "dark"
+          card_classes << "border-gray-800"
+        else
+          card_classes << "border-gray-200"
+        end
+      else
+        card_classes << "border-gray-200"
+      end
+      
+      div(class: card_classes.join(" ")) do
+        # Card header
+        if node.attributes[:title]
+          header_classes = ["px-6", "py-4", "border-b", "border-gray-200"]
+          
+          # Add header color styling with Tailwind
+          if node.attributes[:color]
+            case node.attributes[:color]
+            when "primary"
+              header_classes << "bg-blue-50"
+            when "secondary"
+              header_classes << "bg-gray-50"
+            when "success"
+              header_classes << "bg-green-50"
+            when "info"
+              header_classes << "bg-cyan-50"
+            when "warning"
+              header_classes << "bg-yellow-50"
+            when "danger"
+              header_classes << "bg-red-50"
+            when "light"
+              header_classes << "bg-gray-25"
+            when "dark"
+              header_classes << "bg-gray-800 text-white"
+            else
+              header_classes << "bg-gray-50"
+            end
+          else
+            header_classes << "bg-gray-50"
+          end
+          
+          div(class: header_classes.join(" ")) do
+            h3(class: "text-lg font-semibold text-gray-900") { node.attributes[:title] }
+          end
+        end
+        
+        # Card body with better spacing for field groups
+        div(class: "px-6 py-5 flex-1") do
+          render_children(node)
+        end
+      end
+    end
+    
+    def render_field_node(node)
+      field_config = @resource_class.find_field_config(node.field_name)
+      
+      if field_config
+        # Check if label should be shown (node attributes override field config)
+        show_label = node.attributes[:label] != false && 
+                    (node.attributes.key?(:label) ? node.attributes[:label] : field_config[:label])
+
+        
+        div(class: "mb-3 py-2 border-b border-gray-100 last:border-b-0") do
+          if show_label
+            div(class: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1") do
+              show_label == true ? (field_config[:label] || node.field_name.to_s.humanize) : show_label
+            end
+          end
+          div(class: "text-sm text-gray-900 font-medium break-words max-w-full overflow-hidden") do
+            render_field_value(field_config)
+          end
+        end
+      else
+        div(class: "mb-2 px-3 py-2 bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-md text-sm") do
+          "Field '#{node.field_name}' not found"
+        end
+      end
+    end
+    
+    def render_heading_node(node)
+      level = node.attributes[:level] || 2
+      tag_name = "h#{level}"
+      classes = ["mb-3", "font-semibold"]
+      
+      # Add appropriate text sizing based on heading level
+      case level
+      when 1
+        classes << "text-xl text-gray-900"
+      when 2
+        classes << "text-lg text-gray-900"
+      when 3
+        classes << "text-base text-gray-800"
+      when 4
+        classes << "text-sm text-gray-800"
+      else
+        classes << "text-sm text-gray-700"
+      end
+      
+      # Override with custom size if specified
+      if node.attributes[:size]
+        case node.attributes[:size]
+        when "small"
+          classes[-1] = "text-sm text-gray-700"
+        when "medium"
+          classes[-1] = "text-base text-gray-800"
+        when "large"
+          classes[-1] = "text-lg text-gray-900"
+        end
+      end
+      
+      send(tag_name, class: classes.join(" ")) { node.text }
+    end
+    
+    def render_divider_node(node)
+      margin = node.attributes[:margin] || 4
+      hr(class: "my-#{margin} border-gray-200")
+    end
+    
+    def render_metric_card_node(node)
+      title = node.attributes[:title]
+      value = node.attributes[:value]
+      
+      # Evaluate value if it's a proc
+      display_value = case value
+                      when Proc
+                        value.call(@record)
+                      else
+                        value
+                      end
+      
+      div(class: "bg-white rounded-lg shadow-sm border text-center") do
+        div(class: "p-6") do
+          h5(class: "text-sm font-medium text-gray-500 mb-1") { title }
+          h2(class: "text-2xl font-bold text-blue-600") { display_value }
+        end
+      end
+    end
+    
+    def render_content_node(node, context)
+      if node.block
+        result = context.instance_exec(&node.block)
+        if result.respond_to?(:call)
+          render result
+        else
+          unsafe_raw result.to_s
+        end
+      end
+    end
+    
+    def render_tabs_node(node)
+      tabs_id = node.attributes[:id] || "tabs-#{SecureRandom.hex(4)}"
+      tab_type = node.attributes[:type] || :horizontal
+      
+      div(class: "easy-admin-tabs", 
+          data: { 
+            controller: tab_type == :vertical ? "vertical-tabs" : "form-tabs",
+            action: "tab:selected@window->form-tabs#handleTabSelection"
+          }) do
+        
+        # Tab navigation
+        render_tab_navigation(node, tabs_id, tab_type)
+        
+        # Tab content
+        render_tab_content(node, tabs_id)
+      end
+    end
+    
+    def render_tab_navigation(tabs_node, tabs_id, tab_type)
+      if tab_type == :vertical
+        render_vertical_tab_navigation(tabs_node, tabs_id)
+      else
+        render_horizontal_tab_navigation(tabs_node, tabs_id)
+      end
+    end
+    
+    def render_horizontal_tab_navigation(tabs_node, tabs_id)
+      # Using Bootstrap tabs with form-tabs controller
+      div(class: "border-b border-gray-200") do
+        nav(class: "-mb-px flex space-x-8", aria: { label: "Tabs" }) do
+          tabs_node.children.each_with_index do |tab_node, index|
+            tab_id = "#{tabs_id}-#{tab_node.attributes[:name]&.parameterize || index}"
+            tab_label = tab_node.attributes[:label] || tab_node.attributes[:name]
+            
+            button(
+              class: "whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm #{index == 0 ? 'text-blue-600 border-blue-600' : 'text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300'}",
+              data: {
+                form_tabs_target: "tabButton",
+                tab_id: tab_id,
+                action: "click->form-tabs#switchTab"
+              },
+              type: "button"
+            ) do
+              # Tab icon if provided
+              if tab_node.attributes[:icon]
+                i(class: "#{tab_node.attributes[:icon]} me-2")
+              end
+              
+              # Tab label
+              span { tab_label }
+              
+              # Tab badge if provided
+              if tab_node.attributes[:badge]
+                span(class: "ml-2 py-0.5 px-2 rounded-full text-xs font-medium bg-gray-100 text-gray-900") { tab_node.attributes[:badge] }
+              end
+            end
+          end
+        end
+      end
+    end
+    
+    def render_vertical_tab_navigation(tabs_node, tabs_id)
+      # Using Tailwind classes with vertical-tabs controller
+      div(class: "flex") do
+        nav(class: "flex-col -mb-px mr-8") do
+          tabs_node.children.each_with_index do |tab_node, index|
+            tab_id = "#{tabs_id}-#{tab_node.attributes[:name]&.parameterize || index}"
+            tab_label = tab_node.attributes[:label] || tab_node.attributes[:name]
+            
+            button(
+              class: "block border-l-4 py-2 pl-3 pr-4 text-left text-sm font-medium #{index == 0 ? 'bg-blue-50 text-blue-700 border-blue-200' : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900 border-transparent'}",
+              data: {
+                vertical_tabs_target: "tab",
+                tab_id: tab_id,
+                action: "click->vertical-tabs#switchTab"
+              },
+              type: "button"
+            ) do
+              # Tab icon if provided
+              if tab_node.attributes[:icon]
+                i(class: "#{tab_node.attributes[:icon]} mr-2")
+              end
+              
+              # Tab label
+              span { tab_label }
+              
+              # Tab badge if provided
+              if tab_node.attributes[:badge]
+                span(class: "ml-2 py-0.5 px-2 rounded-full text-xs font-medium bg-blue-100 text-blue-800") { tab_node.attributes[:badge] }
+              end
+            end
+          end
+        end
+      end
+    end
+    
+    def render_tab_content(tabs_node, tabs_id)
+      div(class: "mt-4") do
+        tabs_node.children.each_with_index do |tab_node, index|
+          tab_id = "#{tabs_id}-#{tab_node.attributes[:name]&.parameterize || index}"
+          
+          # Content panel for both form-tabs and vertical-tabs controllers
+          div(
+            class: "#{index == 0 ? 'block' : 'hidden'}",
+            id: "#{tab_id}-panel",
+            data: {
+              form_tabs_target: "tabPanel",
+              vertical_tabs_target: "content",
+              tab_id: tab_id
+            }
+          ) do
+            render_children(tab_node)
+          end
+        end
+      end
+    end
+    
+    def render_tab_node(node)
+      # Tab nodes are rendered by their parent tabs container
+      # This method should not be called directly
+      render_children(node)
+    end
+    
+    def render_section_node(node)
+      classes = ["mb-4"]
+      
+      div(class: classes.join(" ")) do
+        if node.attributes[:title]
+          h3(class: "mb-3 text-lg font-semibold") { node.attributes[:title] }
+        end
+        
+        render_children(node)
+      end
+    end
+    
+    def render_grid_node(node)
+      columns = node.attributes[:columns] || 2
+      classes = ["grid"]
+      
+      # Add responsive column classes with Tailwind CSS Grid
+      case columns
+      when 1
+        classes << "grid-cols-1"
+      when 2
+        classes << "grid-cols-1 md:grid-cols-2"
+      when 3
+        classes << "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+      when 4
+        classes << "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+      else
+        classes << "grid-cols-1 md:grid-cols-#{[columns, 6].min}"
+      end
+      
+      # Add spacing
+      spacing = node.attributes[:spacing] || "medium"
+      classes << spacing_class(spacing)
+      
+      div(class: classes.join(" ")) do
+        render_children(node)
+      end
+    end
+    
+    def render_spacer_node(node)
+      size = node.attributes[:size] || 4
+      div(class: "my-#{size}")
+    end
+    
+    def render_render_node(node, context)
+      component_class = node.component_class
+      props = node.props || {}
+      
+      # Add context data to props
+      enhanced_props = props.merge(
+        record: @record,
+        resource_class: @resource_class
+      )
+      
+      if component_class
+        component = component_class.new(**enhanced_props)
+        render component
+      else
+        div(class: "bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded-md") do
+          "Component class not found: #{node.component_class}"
+        end
+      end
+    end
+    
+    def render_children(node)
+      node.children.each { |child| render_node(child) }
+    end
+    
+    def spacing_class(spacing)
+      case spacing
+      when "small"
+        "g-2"
+      when "medium"
+        "g-3"
+      when "large"
+        "g-4"
+      else
+        "g-3"
+      end
+    end
+    
+    def render_field_value(field_config)
+      # Get the value and format it
+      value = @record.send(field_config[:name])
+      formatted_value = format_field_value(value, field_config)
+      
+      # Render based on field type with compact styling
+      case field_config[:type]
+      when :boolean
+        span(class: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium #{value ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}") { 
+          formatted_value 
+        }
+      when :email
+        a(href: "mailto:#{value}", class: "text-blue-600 hover:text-blue-800 underline") { 
+          formatted_value 
+        }
+      when :select, :belongs_to
+        if value.present?
+          span(class: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800") { 
+            formatted_value 
+          }
+        else
+          span(class: "text-gray-400") { "—" }
+        end
+      when :datetime, :date
+        span(class: "text-gray-700") { 
+          formatted_value 
+        }
+      else
+        span { formatted_value }
+      end
+    end
+    
+    def format_field_value(value, field_config)
+      case field_config[:type]
+      when :boolean
+        value ? "Yes" : "No"
+      when :date
+        value&.strftime("%B %d, %Y")
+      when :datetime
+        value&.strftime("%B %d, %Y at %I:%M %p")
+      when :belongs_to
+        # Handle belongs_to associations with display method
+        if value.present?
+          display_method = field_config[:display_method] || :name
+          if value.respond_to?(display_method)
+            value.public_send(display_method)
+          elsif value.respond_to?(:name)
+            value.name
+          elsif value.respond_to?(:title)
+            value.title
+          else
+            value.to_s
+          end
+        else
+          "—"
+        end
+      else
+        value.present? ? value.to_s : "—"
       end
     end
 
     def render_default_layout
-      div(class: "row row-sm") do
-        div(class: "col-12") do
-          div(class: "card") do
-            div(class: "card-body") do
+      div(class: "grid grid-cols-1 gap-4") do
+        div(class: "col-span-1") do
+          div(class: "bg-white rounded-lg shadow-sm border") do
+            div(class: "p-6") do
               @resource_class.show_fields.each do |field|
                 render_default_field(field)
               end
@@ -156,11 +777,11 @@ module EasyAdmin
         class: card_css_classes(chart_config)
       ) do
         # Loading skeleton
-        div(class: "card") do
-          div(class: "card-header") do
-            h5(class: "card-title") { chart_config[:title] }
+        div(class: "bg-white rounded-lg shadow-sm border") do
+          div(class: "px-6 py-4 border-b border-gray-200") do
+            h5(class: "text-lg font-semibold text-gray-900") { chart_config[:title] }
           end
-          div(class: "card-body") do
+          div(class: "p-6") do
             div(class: "animate-pulse") do
               div(class: "h-64 bg-gray-300 rounded")
             end
@@ -241,33 +862,82 @@ module EasyAdmin
       show_label = field_config[:show_label] != false && field_config[:label].present?
       
       if show_label && field_config[:field_type] != :inline
-        div(class: "mb-3 row") do
-          div(class: "col-sm-3") do
-            strong { "#{field_config[:label]}:" }
+        div(class: "mb-4") do
+          div(class: "text-sm font-medium text-gray-700 mb-1") do
+            field_config[:label]
           end
-          div(class: "col-sm-9") do
+          div(class: "text-sm text-gray-900") do
             render_field_value(field_config)
           end
         end
       else
         # Field without label (inline or label: false)
-        div(class: "mb-3") do
+        div(class: "mb-4") do
           render_field_value(field_config)
         end
       end
     end
 
     def render_field_value(field_config)
-      # Find the matching field configuration
       field_definition = @resource_class.fields_config.find { |f| f[:name] == field_config[:name] }
       
       if field_definition
-        field_value = @record.public_send(field_config[:name])
-        # Pass show_label setting to field component
-        show_label = field_config[:show_label] != false && field_config[:label].present?
-        render_field_component(field_definition, field_value, show_label: show_label)
+        field_value = @record.public_send(field_config[:name]) if @record
+        
+        begin
+          component = EasyAdmin::Field.render(
+            field_definition[:type] || :text,
+            action: :show,
+            field: field_definition,
+            value: field_value,
+            record: @record
+          )
+
+          result = component.call
+          
+          unsafe_raw result
+        rescue => e
+          case field_definition[:type]
+          when :boolean
+            field_value ? "Yes" : "No"
+          when :datetime, :date
+            field_value&.strftime("%B %d, %Y at %l:%M %p")
+          when :belongs_to
+            # Handle belongs_to associations
+            if field_value.respond_to?(field_definition[:display_method])
+              field_value.public_send(field_definition[:display_method])
+            elsif field_value.respond_to?(:name)
+              field_value.name
+            elsif field_value.respond_to?(:title)
+              field_value.title
+            else
+              field_value.to_s
+            end
+          when :has_many
+            # Handle has_many associations
+            if field_value.respond_to?(:count)
+              "#{field_value.count} #{field_config[:name].to_s.humanize.downcase}"
+            else
+              field_value.to_s
+            end
+          when :json
+            # Handle JSON fields
+            if field_value.is_a?(Hash) || field_value.is_a?(Array)
+              field_value.empty? ? "No data" : JSON.pretty_generate(field_value)
+            else
+              field_value.to_s
+            end
+          else
+            # Regular text fields
+            if field_value.present?
+              field_value.to_s.truncate(200)
+            else
+              "—"
+            end
+          end
+        end
       else
-        span(class: "text-muted") { "Field not found" }
+        span(class: "text-gray-500") { "Field not found" }
       end
     end
 
@@ -294,8 +964,8 @@ module EasyAdmin
     end
 
     def render_default_field(field)
-      div(class: "mb-3 row") do
-        div(class: "col-sm-3") do
+      div(class: "mb-3 grid grid-cols-12 gap-4 items-center") do
+        div(class: "col-span-12 sm:col-span-3") do
           strong { "#{field[:label]}:" }
         end
         div(class: "col-sm-9") do