easy-admin-rails 0.1.0

data/app/components/easy_admin/show_layout_component.rb

@@ -0,0 +1,600 @@
+module EasyAdmin
+  class ShowLayoutComponent < Phlex::HTML
+    def initialize(resource_class:, record:)
+      @resource_class = resource_class
+      @record = record
+    end
+
+    def view_template
+      if @resource_class.has_show_layout?
+        render_custom_layout
+      else
+        render_default_layout
+      end
+    end
+
+    private
+
+    def render_custom_layout
+      @resource_class.show_layout.each do |element|
+        render_element(element)
+      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
+              @resource_class.show_fields.each do |field|
+                render_default_field(field)
+              end
+            end
+          end
+        end
+      end
+    end
+
+    def render_element(element)
+      case element[:type]
+      when :row
+        render_row(element)
+      else
+        # Handle unknown element types gracefully
+        nil
+      end
+    end
+
+    def render_row(row_config)
+      div(class: row_css_classes(row_config)) do
+        row_config[:columns].each do |column|
+          # Add row context to column config
+          column[:row_columns_count] = row_config[:columns_count]
+          render_column(column)
+        end
+      end
+    end
+
+    def render_column(column_config)
+      div(class: column_css_classes(column_config)) do
+        column_config[:elements].each do |element|
+          render_column_element(element)
+        end
+      end
+    end
+
+    def render_column_element(element)
+      case element[:type]
+      when :card
+        render_card(element)
+      when :metric_card
+        render_metric_card(element)
+      when :chart_card
+        render_chart_card(element)
+      when :field
+        render_field_element(element)
+      when :content
+        render_content_element(element)
+      when :heading
+        render_heading_element(element)
+      when :divider
+        render_divider_element(element)
+      when :tabs
+        render_tabs_element(element)
+      end
+    end
+
+    def render_card(card_config)
+      div(class: card_css_classes(card_config)) do
+        if card_config[:title]
+          # Title gets standard padding even if card padding is none
+          title_padding = card_config[:padding] == "none" ? "px-4 py-4 md:px-5 md:py-5" : "px-4 py-4 md:px-5 md:py-5"
+          div(class: "#{title_padding} border-b border-gray-50") do
+            title_color = card_config[:color] == "dark" ? "text-white" : "text-gray-900"
+            h5(class: "text-base md:text-lg font-medium #{title_color}") { card_config[:title] }
+          end
+        end
+        
+        # Content area respects card padding setting
+        if card_config[:padding] == "none"
+          # No additional padding - content fills the card
+          card_config[:elements].each do |element|
+            render_card_element(element)
+          end
+        else
+          # Standard padding for content
+          div(class: "p-4 md:p-5") do
+            card_config[:elements].each do |element|
+              render_card_element(element)
+            end
+          end
+        end
+      end
+    end
+
+    def render_metric_card(metric_config)
+      # Evaluate value if it's a lambda/proc
+      value = if metric_config[:value].respond_to?(:call)
+                metric_config[:value].call(@record)
+              else
+                metric_config[:value].to_s
+              end
+
+      div(class: metric_card_css_classes(metric_config)) do
+        div(class: "p-4 md:p-6 text-center") do
+          if metric_config[:icon]
+            div(class: "mb-2 md:mb-3") do
+              i(class: "#{metric_config[:icon]} text-lg md:text-xl")
+            end
+          end
+          
+          h3(class: "text-xl md:text-2xl font-bold mb-1") { value }
+          p(class: "text-xs md:text-sm opacity-90 mb-0") { metric_config[:title] }
+          
+          if metric_config[:trend]
+            small(class: "text-xs opacity-75 block mt-1") do
+              case metric_config[:trend]
+              when "increase"
+                "📈 Trending up"
+              when "decrease" 
+                "📉 Trending down"
+              else
+                "📊 Stable"
+              end
+            end
+          end
+        end
+      end
+    end
+
+    def render_chart_card(chart_config)
+      # Lazy load chart cards via turbo-frame for performance
+      turbo_frame(
+        id: "chart-#{chart_config.object_id}",
+        src: lazy_chart_path(chart_config),
+        loading: "lazy",
+        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] }
+          end
+          div(class: "card-body") do
+            div(class: "animate-pulse") do
+              div(class: "h-64 bg-gray-300 rounded")
+            end
+          end
+        end
+      end
+    end
+
+    def render_tabs_element(tabs_config)
+      div(data: { controller: "form-tabs" }) do
+        # Mobile-friendly tab navigation with horizontal scroll
+        div(class: "border-b border-gray-200 overflow-x-auto") do
+          nav(class: "-mb-px flex space-x-4 md:space-x-8 min-w-max px-4 md:px-0") do
+            tabs_config[:tabs].each_with_index do |tab, index|
+              button(
+                type: "button",
+                class: "whitespace-nowrap py-2 px-2 md:px-1 border-b-2 font-medium text-sm #{index == 0 || tab[:active] ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'} flex-shrink-0",
+                data: { 
+                  form_tabs_target: "tabButton",
+                  tab_id: tab[:name].downcase,
+                  action: "click->form-tabs#switchTab"
+                }
+              ) do
+                if tab[:icon]
+                  unsafe_raw "<i class=\"#{tab[:icon]} mr-1 md:mr-2 text-xs md:text-sm\"></i>"
+                end
+                span(class: "text-xs md:text-sm") { tab[:label] }
+              end
+            end
+          end
+        end
+
+        # Tab content with mobile padding
+        div(class: "mt-4 px-4 md:px-0") do
+          tabs_config[:tabs].each_with_index do |tab, index|
+            div(
+              class: "#{index == 0 || tab[:active] ? 'block' : 'hidden'}",
+              id: "#{tab[:name].downcase}-panel",
+              data: { form_tabs_target: "tabPanel" }
+            ) do
+              # Lazy load tab content that contains expensive elements
+              if tab_contains_expensive_elements?(tab)
+                turbo_frame(
+                  id: "tab-#{tab[:name].downcase}-content",
+                  src: lazy_tab_path(tab),
+                  loading: "lazy"
+                ) do
+                  render_loading_skeleton
+                end
+              else
+                tab[:elements].each do |element|
+                  render_card_element(element)
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+
+    def render_card_element(element)
+      case element[:type]
+      when :field
+        render_field_element(element)
+      when :content
+        render_content_element(element)
+      when :heading
+        render_heading_element(element)
+      when :divider
+        render_divider_element(element)
+      when :tabs
+        render_tabs_element(element)
+      end
+    end
+
+    def render_field_element(field_config)
+      # Skip field if label is explicitly set to false/nil and show_label is false
+      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]}:" }
+          end
+          div(class: "col-sm-9") do
+            render_field_value(field_config)
+          end
+        end
+      else
+        # Field without label (inline or label: false)
+        div(class: "mb-3") 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)
+      else
+        span(class: "text-muted") { "Field not found" }
+      end
+    end
+
+    def render_content_element(content_config)
+      if content_config[:block]
+        # Execute the block in the context of this component
+        instance_eval(&content_config[:block])
+      else
+        div(class: content_config[:css_classes]) do
+          unsafe_raw content_config[:html]
+        end
+      end
+    end
+
+    def render_heading_element(heading_config)
+      tag_name = "h#{heading_config[:level]}"
+      public_send(tag_name, class: heading_css_classes(heading_config)) do
+        heading_config[:text]
+      end
+    end
+
+    def render_divider_element(divider_config)
+      hr(class: divider_css_classes(divider_config))
+    end
+
+    def render_default_field(field)
+      div(class: "mb-3 row") do
+        div(class: "col-sm-3") do
+          strong { "#{field[:label]}:" }
+        end
+        div(class: "col-sm-9") do
+          field_value = @record.public_send(field[:name])
+          render_field_component(field, field_value)
+        end
+      end
+    end
+
+    # Render field components directly
+    def render_field_component(field_definition, field_value, show_label: true)
+      component_class = field_component_class(field_definition[:type])
+      
+      if component_class
+        # Create a modified field definition with show_label setting
+        modified_field = field_definition.merge(show_label: show_label)
+        
+        component_instance = component_class.new(
+          field: modified_field,
+          value: field_value,
+          record: @record
+        )
+        render component_instance
+      else
+        # Fallback rendering for unknown field types
+        render_fallback_field(field_value, field_definition)
+      end
+    end
+
+    def field_component_class(field_type)
+      case field_type
+      when :string, :text
+        EasyAdmin::Fields::Show::TextComponent
+      when :number
+        EasyAdmin::Fields::Show::NumberComponent
+      when :email
+        EasyAdmin::Fields::Show::EmailComponent
+      when :date
+        EasyAdmin::Fields::Show::DateComponent
+      when :datetime
+        EasyAdmin::Fields::Show::DatetimeComponent
+      when :boolean
+        EasyAdmin::Fields::Show::BooleanComponent
+      when :select
+        EasyAdmin::Fields::Show::SelectComponent
+      when :belongs_to
+        EasyAdmin::Fields::Show::BelongsToComponent
+      when :has_many
+        EasyAdmin::Fields::Show::HasManyComponent
+      when :file
+        EasyAdmin::Fields::Show::FileComponent
+      when :json
+        EasyAdmin::Fields::Show::JsonComponent
+      else
+        nil
+      end
+    end
+
+    def render_fallback_field(field_value, field_definition)
+      case field_value
+      when true, false
+        span(class: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium #{'bg-green-100 text-green-800' if field_value} #{'bg-gray-100 text-gray-800' unless field_value}") do
+          field_value ? "Yes" : "No"
+        end
+      when Date, DateTime, Time
+        span(class: "text-gray-900") { field_value.strftime("%B %d, %Y") }
+      when Numeric
+        span(class: "text-gray-900") { field_value.to_s }
+      else
+        span(class: "text-gray-900") { field_value.to_s }
+      end
+    end
+
+    def render_loading_skeleton
+      div(class: "animate-pulse") do
+        3.times do
+          div(class: "mb-4") do
+            div(class: "h-4 bg-gray-300 rounded w-1/4 mb-2")
+            div(class: "h-6 bg-gray-300 rounded w-3/4")
+          end
+        end
+      end
+    end
+
+    # Helper methods for lazy loading paths
+    def lazy_metric_path(metric_config)
+      # Generate path for lazy loading metric partial
+      EasyAdmin::Engine.routes.url_helpers.resource_metric_path(
+        resource_name: @resource_class.route_key,
+        id: @record.id,
+        metric_id: metric_config.object_id
+      )
+    end
+
+    def lazy_chart_path(chart_config)
+      # Generate path for lazy loading chart partial
+      EasyAdmin::Engine.routes.url_helpers.resource_chart_path(
+        resource_name: @resource_class.route_key,
+        id: @record.id,
+        chart_id: chart_config.object_id
+      )
+    end
+
+    def lazy_tab_path(tab_config)
+      # Generate path for lazy loading tab content
+      EasyAdmin::Engine.routes.url_helpers.resource_tab_content_path(
+        resource_name: @resource_class.route_key,
+        id: @record.id,
+        tab_name: tab_config[:name].downcase
+      )
+    end
+
+    def tab_contains_expensive_elements?(tab)
+      # Check if tab contains charts, metrics, or other expensive elements
+      tab[:elements].any? do |element|
+        [:chart_card, :metric_card, :dashboard].include?(element[:type])
+      end
+    end
+
+    # Turbo frame helper (for Phlex compatibility)
+    def turbo_frame(id:, src: nil, loading: nil, **options, &block)
+      turbo_frame_tag(id, src: src, loading: loading, **options, &block)
+    end
+
+    def turbo_frame_tag(id, **options, &block)
+      # Create turbo-frame element
+      element_options = { id: id }
+      element_options[:src] = options[:src] if options[:src]
+      element_options[:loading] = options[:loading] if options[:loading]
+      element_options[:class] = options[:class] if options[:class]
+      
+      # Convert to HTML attributes format
+      html_attributes = element_options.map { |k, v| "#{k}=\"#{v}\"" }.join(" ")
+      
+      unsafe_raw "<turbo-frame #{html_attributes}>"
+      yield if block_given?
+      unsafe_raw "</turbo-frame>"
+    end
+
+    private
+
+    # CSS class helpers with static classes for Tailwind detection
+    def row_css_classes(row_config)
+      # Only apply negative margins for multi-column layouts
+      has_multiple_columns = row_config[:columns_count] > 1
+      
+      base_classes = "flex flex-col md:flex-row md:flex-wrap mb-6"
+      
+      case row_config[:spacing]
+      when "none"
+        negative_margin = has_multiple_columns ? "md:-mx-0" : ""
+        "#{base_classes} space-y-0 md:space-y-0 #{negative_margin}"
+      when "small"
+        negative_margin = has_multiple_columns ? "md:-mx-1" : ""
+        "#{base_classes} space-y-2 md:space-y-0 #{negative_margin}"
+      when "medium"
+        negative_margin = has_multiple_columns ? "md:-mx-2" : ""
+        "#{base_classes} space-y-4 md:space-y-0 #{negative_margin}"
+      when "large"
+        negative_margin = has_multiple_columns ? "md:-mx-4" : ""
+        "#{base_classes} space-y-6 md:space-y-0 #{negative_margin}"
+      else
+        negative_margin = has_multiple_columns ? "md:-mx-2" : ""
+        "#{base_classes} space-y-4 md:space-y-0 #{negative_margin}"
+      end
+    end
+
+    def column_css_classes(column_config)
+      # Calculate width based on the total number of columns in the row
+      total_columns = column_config[:row_columns_count] || 1
+      
+      # Only add horizontal padding for multi-column layouts
+      padding_classes = total_columns > 1 ? "px-0 md:px-2" : "px-0"
+      base_classes = "w-full mb-4 md:mb-0 #{padding_classes}"
+      
+      case total_columns
+      when 1
+        "#{base_classes} md:w-full"
+      when 2
+        "#{base_classes} md:w-1/2"
+      when 3
+        "#{base_classes} md:w-1/3"
+      when 4
+        "#{base_classes} md:w-1/4"
+      when 6
+        "#{base_classes} md:w-1/6"
+      else
+        "#{base_classes} md:flex-1"
+      end
+    end
+
+    def card_css_classes(card_config)
+      classes = ["rounded-2xl mb-4 md:mb-0 overflow-hidden"]
+      
+      # Color classes
+      case card_config[:color]
+      when "primary"
+        classes << "bg-blue-50 border border-blue-100"
+      when "secondary"
+        classes << "bg-gray-50 border border-gray-200"
+      when "success"
+        classes << "bg-green-50 border border-green-100"
+      when "danger"
+        classes << "bg-red-50 border border-red-100"
+      when "warning"
+        classes << "bg-yellow-50 border border-yellow-100"
+      when "info"
+        classes << "bg-cyan-50 border border-cyan-100"
+      when "dark"
+        classes << "bg-gray-800 text-white border border-gray-700"
+      when "white"
+        classes << "bg-white border border-gray-200"
+      when "transparent"
+        classes << "bg-transparent border-0"
+        classes.delete_if { |c| c.include?("rounded") } # Remove rounded corners for transparent
+        classes << "rounded-none"
+      else # light
+        classes << "bg-gray-50 border border-gray-200"
+      end
+      
+      # Shadow classes
+      case card_config[:shadow]
+      when "none"
+        # No shadow
+      when "small"
+        classes << "shadow-sm"
+      when "medium"
+        classes << "shadow-md"
+      when "large"
+        classes << "shadow-lg"
+      else
+        classes << "shadow-sm" # default
+      end
+      
+      # Padding classes
+      padding = card_config[:padding] || "medium"
+      case padding
+      when "none"
+        classes << "p-0"
+      when "small"
+        classes << "p-2 sm:p-3"
+      when "medium"
+        classes << "p-4 sm:p-6"
+      when "large"
+        classes << "p-6 sm:p-8"
+      else
+        classes << "p-4 sm:p-6" # default
+      end
+      
+      classes.join(" ")
+    end
+
+    def metric_card_css_classes(metric_config)
+      case metric_config[:color]
+      when "primary"
+        "rounded-2xl shadow-sm border border-gray-100 h-full mb-4 md:mb-0 overflow-hidden bg-blue-500 text-white"
+      when "secondary"
+        "rounded-2xl shadow-sm border border-gray-100 h-full mb-4 md:mb-0 overflow-hidden bg-gray-500 text-white"
+      when "success"
+        "rounded-2xl shadow-sm border border-gray-100 h-full mb-4 md:mb-0 overflow-hidden bg-green-500 text-white"
+      when "danger"
+        "rounded-2xl shadow-sm border border-gray-100 h-full mb-4 md:mb-0 overflow-hidden bg-red-500 text-white"
+      when "warning"
+        "rounded-2xl shadow-sm border border-gray-100 h-full mb-4 md:mb-0 overflow-hidden bg-orange-500 text-white"
+      when "info"
+        "rounded-2xl shadow-sm border border-gray-100 h-full mb-4 md:mb-0 overflow-hidden bg-blue-400 text-white"
+      when "dark"
+        "rounded-2xl shadow-sm border border-gray-100 h-full mb-4 md:mb-0 overflow-hidden bg-gray-800 text-white"
+      else
+        "rounded-2xl shadow-sm border border-gray-100 h-full mb-4 md:mb-0 overflow-hidden bg-gray-100 text-gray-900"
+      end
+    end
+
+    def heading_css_classes(heading_config)
+      case heading_config[:size]
+      when "small"
+        "mb-3 font-semibold text-gray-900 text-sm"
+      when "medium"
+        "mb-3 font-semibold text-gray-900 text-base"
+      when "large"
+        "mb-3 font-semibold text-gray-900 text-lg"
+      else
+        "mb-3 font-semibold text-gray-900 text-base"
+      end
+    end
+
+    def divider_css_classes(divider_config)
+      case divider_config[:style]
+      when "default"
+        "border-0 border-t my-4 border-gray-200"
+      when "dashed"
+        "border-0 border-t my-4 border-dashed border-gray-300"
+      when "dotted"
+        "border-0 border-t my-4 border-dotted border-gray-300"
+      when "thick"
+        "border-0 border-t-2 my-4 border-gray-400"
+      else
+        "border-0 border-t my-4 border-gray-200"
+      end
+    end
+  end
+end