easy-admin-rails 0.1.11 → 0.1.12

data/app/components/easy_admin/versions/pagination_component.rb

@@ -0,0 +1,206 @@
+module EasyAdmin
+  module Versions
+    class PaginationComponent < BaseComponent
+      def initialize(pagy:, resource_class:, record:)
+        @pagy = pagy
+        @resource_class = resource_class
+        @record = record
+      end
+
+      def view_template
+        return unless @pagy.pages > 1
+
+        div(id: "versions-pagination", class: "mt-6 flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6") do
+          # Mobile pagination info
+          div(class: "flex flex-1 justify-between sm:hidden") do
+            if @pagy.prev
+              link_to_previous_page
+            else
+              span(class: "relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500") do
+                "Previous"
+              end
+            end
+
+            if @pagy.next
+              link_to_next_page
+            else
+              span(class: "relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500") do
+                "Next"
+              end
+            end
+          end
+
+          # Desktop pagination
+          div(class: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between") do
+            # Results info
+            div do
+              p(class: "text-sm text-gray-700") do
+                plain "Showing "
+                span(class: "font-medium") { @pagy.from }
+                plain " to "
+                span(class: "font-medium") { @pagy.to }
+                plain " of "
+                span(class: "font-medium") { @pagy.count }
+                plain " versions"
+              end
+            end
+
+            # Page navigation
+            div do
+              nav(class: "isolate inline-flex -space-x-px rounded-md shadow-sm", "aria-label": "Pagination") do
+                # Previous page
+                if @pagy.prev
+                  link_to_previous_page_desktop
+                else
+                  span(class: "relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0") do
+                    span(class: "sr-only") { "Previous" }
+                    unsafe_raw <<~SVG
+                      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd"/>
+                      </svg>
+                    SVG
+                  end
+                end
+
+                # Page numbers (show first, current range, and last)
+                render_page_numbers
+
+                # Next page
+                if @pagy.next
+                  link_to_next_page_desktop
+                else
+                  span(class: "relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0") do
+                    span(class: "sr-only") { "Next" }
+                    unsafe_raw <<~SVG
+                      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/>
+                      </svg>
+                    SVG
+                  end
+                end
+              end
+            end
+          end
+        end
+      end
+
+      private
+
+      def link_to_previous_page
+        a(
+          href: versions_url(page: @pagy.prev),
+          data: { turbo_frame: "versions-section" },
+          class: "relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+        ) do
+          "Previous"
+        end
+      end
+
+      def link_to_next_page
+        a(
+          href: versions_url(page: @pagy.next),
+          data: { turbo_frame: "versions-section" },
+          class: "relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+        ) do
+          "Next"
+        end
+      end
+
+      def link_to_previous_page_desktop
+        a(
+          href: versions_url(page: @pagy.prev),
+          data: { turbo_frame: "versions-section" },
+          class: "relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
+        ) do
+          span(class: "sr-only") { "Previous" }
+          unsafe_raw <<~SVG
+            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd"/>
+            </svg>
+          SVG
+        end
+      end
+
+      def link_to_next_page_desktop
+        a(
+          href: versions_url(page: @pagy.next),
+          data: { turbo_frame: "versions-section" },
+          class: "relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
+        ) do
+          span(class: "sr-only") { "Next" }
+          unsafe_raw <<~SVG
+            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/>
+            </svg>
+          SVG
+        end
+      end
+
+      def render_page_numbers
+        # Calculate range of pages to show
+        current = @pagy.page
+        total = @pagy.pages
+        
+        # Show pages around current page
+        start_page = [current - 2, 1].max
+        end_page = [current + 2, total].min
+        
+        # Always show page 1 if not in range
+        if start_page > 1
+          render_page_link(1)
+          if start_page > 2
+            span(class: "relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 focus:outline-offset-0") do
+              "..."
+            end
+          end
+        end
+
+        # Show page range
+        (start_page..end_page).each do |page|
+          if page == current
+            render_current_page(page)
+          else
+            render_page_link(page)
+          end
+        end
+
+        # Always show last page if not in range
+        if end_page < total
+          if end_page < total - 1
+            span(class: "relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 focus:outline-offset-0") do
+              "..."
+            end
+          end
+          render_page_link(total)
+        end
+      end
+
+      def render_current_page(page)
+        span(
+          "aria-current": "page",
+          class: "relative z-10 inline-flex items-center bg-blue-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+        ) do
+          page.to_s
+        end
+      end
+
+      def render_page_link(page)
+        a(
+          href: versions_url(page: page),
+          data: { turbo_frame: "versions-section" },
+          class: "relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
+        ) do
+          page.to_s
+        end
+      end
+
+      def versions_url(page:)
+        easy_admin_url_helpers.resource_versions_path(
+          @resource_class.route_key,
+          @record.id,
+          page: page
+        )
+      end
+    end
+  end
+end

data/app/components/easy_admin/versions/timeline_component.rb

@@ -0,0 +1,412 @@
+module EasyAdmin
+  module Versions
+    class TimelineComponent < BaseComponent
+      def initialize(versions:, turbo_frame_id: nil, resource_class: nil, record: nil)
+        @versions = versions
+        @turbo_frame_id = turbo_frame_id
+        @resource_class = resource_class
+        @record = record
+      end
+
+      def view_template
+        content = lambda do
+          div(class: "w-full") do
+            # Timeline container with explicit vertical layout
+            div(class: "relative w-full") do
+              # Timeline line - centered with icons (hidden on mobile)
+              div(class: "absolute left-10 top-0 bottom-0 w-0.5 bg-gray-300 hidden sm:block")
+              
+              # Version items - force vertical stacking (newest first)
+              @versions.each_with_index do |version, index|
+                div(class: "relative w-full mb-6 sm:mb-8") do
+                  render_timeline_item_content(version, index)
+                end
+              end
+            end
+          end
+        end
+
+        if @turbo_frame_id
+          turbo_frame(id: @turbo_frame_id) do
+            content.call
+          end
+        else
+          content.call
+        end
+      end
+
+      private
+
+      def render_timeline_item_content(version, index)
+        div(class: "flex items-start") do
+          # Timeline dot - matches admin panel styling (hidden on mobile)
+          div(class: "absolute left-8 w-3 h-3 #{event_bg_color(version.event)} rounded-full z-10 shadow-sm hidden sm:block") do
+            # Simple dot design to match admin panel
+          end
+          
+          # Content card - responsive margin (no left margin on mobile)
+          div(class: "sm:ml-16 flex-1") do
+            div(class: "bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-200") do
+              render_item_header(version)
+              render_item_content(version)
+              render_item_actions(version)
+            end
+          end
+        end
+      end
+
+      def render_item_header(version)
+        # Match admin panel header style (like in BaseCardComponent) with mobile responsiveness
+        div(class: "px-4 sm:px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex items-center justify-between") do
+          div(class: "flex items-center space-x-2 sm:space-x-3") do
+            # Event badge - using admin panel style
+            span(class: "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600") do
+              version.event.capitalize
+            end
+            
+            # Time ago
+            span(class: "text-sm font-medium text-gray-900") do
+              time_ago_in_words(version.created_at) + " ago"
+            end
+          end
+          
+          div(class: "flex items-center space-x-1 sm:space-x-2") do
+            # Exact timestamp - hide on mobile
+            span(class: "hidden sm:inline text-xs font-medium text-gray-500 uppercase tracking-wide") do
+              version.created_at.strftime("%m/%d %I:%M%p")
+            end
+            
+            # User info - matching admin panel style
+            if version.whodunnit
+              span(class: "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800") do
+                version.whodunnit
+              end
+            else
+              span(class: "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600") do
+                "System"
+              end
+            end
+          end
+        end
+      end
+
+      def render_item_content(version)
+        # Match admin panel body padding (like in BaseCardComponent) - responsive padding
+        div(class: "p-4 sm:p-6") do
+          if version.object.blank?
+            div(class: "text-sm text-gray-500") { "No change data available" }
+            return
+          end
+
+          begin
+            old_attrs = parse_version_object(version.object)
+            changes = extract_changes(version, old_attrs)
+            
+            if changes.any?
+              div(class: "space-y-4") do
+                # Show first 3 changes with better styling
+                changes.first(3).each do |field, change|
+                  render_field_change(field, change)
+                end
+                
+                # Show count of remaining changes - using admin panel badge style
+                if changes.size > 3
+                  div(class: "pt-4 border-t border-gray-100") do
+                    span(class: "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600") do
+                      "+#{changes.size - 3} more changes"
+                    end
+                  end
+                end
+              end
+            else
+              div(class: "text-sm text-gray-500 flex items-center space-x-2") 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
+                span { "No visible changes detected" }
+              end
+            end
+          rescue => e
+            div(class: "text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg p-3 flex items-center space-x-2") do
+              unsafe_raw '<svg class="w-4 h-4 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
+              span { "Error parsing version data: #{e.message}" }
+            end
+          end
+        end
+      end
+
+      def render_field_change(field, change)
+        # Match admin panel card nested styling
+        div(class: "bg-gray-50 rounded-xl p-4 border border-gray-100") do
+          # Field name - using admin panel typography
+          div(class: "text-sm font-semibold text-gray-900 mb-3") do
+            span { field.humanize }
+          end
+          
+          # Change display with arrow - responsive layout (horizontal on desktop, vertical on mobile)
+          div(class: "flex flex-col sm:flex-row sm:items-center space-y-3 sm:space-y-0 sm:space-x-4") do
+            if change.has_key?(:old)
+              div(class: "flex-1") do
+                div(class: "text-xs font-medium text-gray-500 uppercase tracking-wide mb-1") { "From" }
+                div(class: "text-sm text-gray-900 bg-white px-3 py-2 rounded-lg border border-gray-200 shadow-sm") do
+                  format_value(change[:old])
+                end
+              end
+            end
+            
+            # Arrow pointing from old to new - horizontal on desktop, vertical on mobile
+            if change.has_key?(:old) && change.has_key?(:new)
+              div(class: "flex-shrink-0 text-gray-400 flex justify-center sm:block") do
+                # Vertical arrow for mobile
+                unsafe_raw <<~SVG
+                  <svg class="h-4 w-4 sm:hidden" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clip-rule="evenodd"/>
+                  </svg>
+                SVG
+                # Horizontal arrow for desktop
+                unsafe_raw <<~SVG
+                  <svg class="h-4 w-4 hidden sm:block" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd"/>
+                  </svg>
+                SVG
+              end
+            end
+            
+            if change.has_key?(:new)
+              div(class: "flex-1") do
+                div(class: "text-xs font-medium text-gray-500 uppercase tracking-wide mb-1") { "To" }
+                div(class: "text-sm text-gray-900 bg-white px-3 py-2 rounded-lg border border-gray-200 shadow-sm") do
+                  format_value(change[:new])
+                end
+              end
+            end
+          end
+        end
+      end
+
+      def render_item_actions(version)
+        # Match admin panel footer style (like in BaseCardComponent)
+        div(class: "px-6 py-4 bg-gray-50/30 border-t border-gray-100 flex items-center justify-between") do
+          div(class: "flex items-center space-x-2") do
+            # Button style matching admin panel (similar to table header links)
+            a(
+              href: version_diff_url(version.id),
+              data: { 
+                turbo_frame: "modal"
+              },
+              class: "group hover:text-gray-900 transition-colors duration-150 text-xs font-medium text-gray-500 uppercase tracking-wide"
+            ) do
+              span { "View Details" }
+            end
+            
+            span(class: "text-gray-300") { "•" }
+            
+            button(
+              class: "group hover:text-gray-900 transition-colors duration-150 text-xs font-medium text-gray-500 uppercase tracking-wide",
+              data: { 
+                controller: "version-revert",
+                action: "click->version-revert#confirm",
+                version_revert_version_id_value: version.id,
+                version_revert_resource_id_value: @record.id,
+                version_revert_resource_name_value: @resource_class.route_key
+              }
+            ) do
+              span { "Revert" }
+            end
+          end
+          
+          # Version ID - using admin panel monospace style
+          span(class: "text-xs font-medium text-gray-500 uppercase tracking-wide") do
+            "##{version.id}"
+          end
+        end
+      end
+
+      def event_color(event)
+        case event
+        when "create" then "border-green-500"
+        when "update" then "border-blue-500"
+        when "destroy" then "border-red-500"
+        else "border-gray-400"
+        end
+      end
+
+      def parse_version_object(object_yaml)
+        return {} if object_yaml.blank?
+        
+        # Try safe loading first with common Rails classes
+        YAML.safe_load(
+          object_yaml, 
+          permitted_classes: [Time, Date, DateTime, ActiveSupport::TimeWithZone, ActiveSupport::TimeZone, Symbol],
+          aliases: true
+        )
+      rescue Psych::DisallowedClass, Psych::BadAlias
+        # Fallback: try unsafe loading for ActiveSupport objects
+        begin
+          YAML.unsafe_load(object_yaml)
+        rescue
+          # Last resort: try to extract basic info manually
+          extract_basic_attributes(object_yaml)
+        end
+      rescue => e
+        Rails.logger.warn "Failed to parse version object: #{e.message}"
+        {}
+      end
+      
+      def extract_basic_attributes(yaml_string)
+        # Simple regex-based extraction for basic attributes
+        attributes = {}
+        
+        yaml_string.scan(/^(\w+):\s*(.+)$/).each do |key, value|
+          # Skip complex objects
+          next if value.include?('!ruby/object')
+          
+          # Clean up the value
+          cleaned_value = value.strip.gsub(/^["']|["']$/, '')
+          attributes[key] = cleaned_value unless cleaned_value.empty?
+        end
+        
+        attributes
+      rescue
+        {}
+      end
+
+      def extract_changes(version, old_attrs)
+        return {} unless old_attrs.is_a?(Hash)
+        
+        current_item = version.item
+        return {} unless current_item
+        
+        changes = {}
+        current_attrs = current_item.attributes
+        
+        # Compare old and new attributes
+        (old_attrs.keys + current_attrs.keys).uniq.each do |key|
+          next if skip_field?(key)
+          
+          old_val = normalize_value_for_comparison(old_attrs[key])
+          new_val = normalize_value_for_comparison(current_attrs[key])
+          
+          if old_val != new_val
+            changes[key] = { old: old_attrs[key], new: current_attrs[key] }
+          end
+        end
+        
+        changes
+      end
+
+      def skip_field?(field)
+        %w[id updated_at].include?(field.to_s)
+      end
+
+      def normalize_value_for_comparison(value)
+        case value
+        when true, "true", "t", "1", 1
+          true
+        when false, "false", "f", "0", 0
+          false  
+        when nil, ""
+          nil
+        else
+          value
+        end
+      end
+
+      def format_value(value)
+        case value
+        when Time, DateTime, ActiveSupport::TimeWithZone
+          value.strftime("%Y-%m-%d %H:%M")
+        when true
+          "Yes"
+        when false  
+          "No"
+        when nil
+          "empty"
+        when String
+          # Try to parse as JSON for better formatting
+          if looks_like_json?(value)
+            format_json_preview(value)
+          else
+            value.to_s.truncate(30)
+          end
+        else
+          value.to_s.truncate(30)
+        end
+      end
+
+      private
+
+      def looks_like_json?(string)
+        return false if string.blank?
+        
+        # Check for regular JSON
+        regular_json = string.strip.start_with?('{', '[') || string == '0' || string == 'null' || string =~ /^\d+$/
+        
+        # Check for single-quoted JSON strings (like "{\"key\":\"value\"}")
+        quoted_json = string.strip.start_with?('"{') || string.strip.start_with?('"[')
+        
+        result = regular_json || quoted_json
+        result
+      end
+
+      def format_json_preview(json_string)
+        return json_string if json_string.blank?
+
+        # Handle simple cases - including numeric strings that represent empty JSON
+        case json_string.strip
+        when '0', '1', '2', 'null', '""'
+          span(class: "text-gray-500 italic") { "empty" }
+        else
+          begin
+            # Try to handle quoted JSON strings
+            cleaned_string = json_string
+            if json_string.strip.start_with?('"{') || json_string.strip.start_with?('"[')
+              # Remove outer quotes and parse as JSON
+              cleaned_string = JSON.parse(json_string)
+            end
+            
+            parsed = JSON.parse(cleaned_string)
+            if parsed.is_a?(Hash) && parsed.empty?
+              span(class: "text-gray-500 italic") { "empty object" }
+            elsif parsed.is_a?(Array) && parsed.empty?
+              span(class: "text-gray-500 italic") { "empty array" }
+            elsif parsed.is_a?(Hash)
+              # Show key count for objects
+              key_count = parsed.keys.size
+              span(class: "text-gray-700") { "#{key_count} #{'key'.pluralize(key_count)}" }
+            elsif parsed.is_a?(Array)
+              # Show item count for arrays
+              item_count = parsed.size
+              span(class: "text-gray-700") { "#{item_count} #{'item'.pluralize(item_count)}" }
+            else
+              # Simple value
+              parsed.to_s.truncate(30)
+            end
+          rescue JSON::ParserError
+            # Not valid JSON, truncate as string
+            json_string.truncate(30)
+          end
+        end
+      end
+
+      # Event colors matching admin panel's subtle approach
+      def event_bg_color(event)
+        case event
+        when "create" then "bg-blue-500"
+        when "update" then "bg-gray-400" 
+        when "destroy" then "bg-red-500"
+        else "bg-gray-300"
+        end
+      end
+
+      def version_diff_url(version_id)
+        return '#' unless @resource_class && @record
+        
+        easy_admin_url_helpers.resource_version_diff_path(
+          @resource_class.route_key,
+          @record.id,
+          version_id
+        )
+      end
+
+    end
+  end
+end