easy-admin-rails 0.1.0

data/app/components/easy_admin/pagination_component.rb

@@ -0,0 +1,188 @@
+module EasyAdmin
+  class PaginationComponent < Phlex::HTML
+    def initialize(pagy:, request_params: nil)
+      @pagy = pagy
+      @request_params = request_params || ActionController::Parameters.new.permit!
+    end
+
+    def view_template
+      return unless @pagy.pages > 1
+
+      nav(class: "flex items-center justify-between bg-white px-4 py-3 sm:px-6 border-t border-gray-200") do
+        render_mobile_pagination
+        render_desktop_pagination
+      end
+    end
+
+    private
+
+    def render_mobile_pagination
+      div(class: "flex flex-1 justify-between sm:hidden") do
+        render_prev_link_mobile
+        render_page_info
+        render_next_link_mobile
+      end
+    end
+
+    def render_desktop_pagination
+      div(class: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between") do
+        render_page_stats
+        render_desktop_nav
+      end
+    end
+
+    def render_prev_link_mobile
+      if @pagy.prev
+        a(
+          href: page_url(@pagy.prev),
+          class: "relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-medium text-gray-700 border border-gray-300 hover:bg-gray-50 transition-colors duration-200"
+        ) { "Previous" }
+      else
+        span(
+          class: "relative inline-flex items-center rounded-md bg-gray-100 px-3 py-2 text-sm font-medium text-gray-400 border border-gray-300 cursor-not-allowed"
+        ) { "Previous" }
+      end
+    end
+
+    def render_next_link_mobile
+      if @pagy.next
+        a(
+          href: page_url(@pagy.next),
+          class: "relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-medium text-gray-700 border border-gray-300 hover:bg-gray-50 transition-colors duration-200"
+        ) { "Next" }
+      else
+        span(
+          class: "relative ml-3 inline-flex items-center rounded-md bg-gray-100 px-3 py-2 text-sm font-medium text-gray-400 border border-gray-300 cursor-not-allowed"
+        ) { "Next" }
+      end
+    end
+
+    def render_page_info
+      div(class: "flex items-center justify-center flex-1") do
+        p(class: "text-sm text-gray-700 text-center") do
+          plain "Page "
+          span(class: "font-medium") { @pagy.page.to_s }
+          # Only show "of X" if we have total pages (not in countless mode)
+          if @pagy.respond_to?(:pages) && @pagy.pages > 0
+            plain " of "
+            span(class: "font-medium") { @pagy.pages.to_s }
+          end
+        end
+      end
+    end
+
+    def render_page_stats
+      # Removed record count display for performance
+      # Just show simple page info instead
+      p(class: "text-sm text-gray-700") do
+        plain "Page "
+        span(class: "font-medium") { @pagy.page.to_s }
+        # Only show "of X" if we have total pages (not in countless mode)
+        if @pagy.respond_to?(:pages) && @pagy.pages > 0
+          plain " of "
+          span(class: "font-medium") { @pagy.pages.to_s }
+        end
+      end
+    end
+
+    def render_desktop_nav
+      div(class: "flex items-center space-x-1") do
+        # Previous button
+        if @pagy.prev
+          a(
+            href: page_url(@pagy.prev),
+            class: "relative inline-flex items-center justify-center w-10 h-10 rounded-lg bg-white text-gray-500 border border-gray-300 hover:bg-gray-50 hover:text-gray-700 transition-all duration-200"
+          ) do
+            unsafe_raw('<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>')
+          end
+        else
+          span(
+            class: "relative inline-flex items-center justify-center w-10 h-10 rounded-lg bg-gray-100 text-gray-400 border border-gray-300 cursor-not-allowed"
+          ) do
+            unsafe_raw('<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>')
+          end
+        end
+
+        # Page numbers
+        render_page_links
+
+        # Next button
+        if @pagy.next
+          a(
+            href: page_url(@pagy.next),
+            class: "relative inline-flex items-center justify-center w-10 h-10 rounded-lg bg-white text-gray-500 border border-gray-300 hover:bg-gray-50 hover:text-gray-700 transition-all duration-200"
+          ) do
+            unsafe_raw('<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>')
+          end
+        else
+          span(
+            class: "relative inline-flex items-center justify-center w-10 h-10 rounded-lg bg-gray-100 text-gray-400 border border-gray-300 cursor-not-allowed"
+          ) do
+            unsafe_raw('<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>')
+          end
+        end
+      end
+    end
+
+    def render_page_links
+      # Handle both regular and countless pagination modes
+      series = begin
+                 if @pagy.respond_to?(:series) && (@pagy.respond_to?(:pages) ? @pagy.pages > 0 : true)
+                   @pagy.series(size: 7)
+                 else
+                   # Fallback: just show current page
+                   [@pagy.page]
+                 end
+               rescue => e
+                 # If series fails, fall back to current page only
+                 [@pagy.page]
+               end
+
+      # Ensure we have a valid array
+      series = [@pagy.page] if series.nil? || !series.respond_to?(:each)
+
+      series.each do |item|
+        case item
+        when Integer
+          if item == @pagy.page
+            # Current page
+            span(
+              class: "relative inline-flex items-center justify-center w-10 h-10 rounded-lg bg-blue-600 text-white font-semibold border border-blue-600 shadow-sm"
+            ) { item.to_s }
+          else
+            # Other pages
+            a(
+              href: page_url(item),
+              class: "relative inline-flex items-center justify-center w-10 h-10 rounded-lg bg-white text-gray-700 font-medium border border-gray-300 hover:bg-blue-50 hover:text-blue-700 hover:border-blue-300 transition-all duration-200"
+            ) { item.to_s }
+          end
+        when String
+          # Gap
+          span(
+            class: "relative inline-flex items-center justify-center w-10 h-10 text-gray-500"
+          ) { "..." }
+        when :gap
+          # Gap (symbol version)
+          span(
+            class: "relative inline-flex items-center justify-center w-10 h-10 text-gray-500"
+          ) { "..." }
+        end
+      end
+    end
+
+    def page_url(page)
+      # Permit all parameters that we want to preserve
+      permitted_params = @request_params.permit(:resource_name, :scope, :search, :sort, :direction, :period, :date_from, :date_to, :segment, :refresh)
+      current_params = permitted_params.except(:page).to_h
+      current_params[:page] = page if page > 1
+      
+      query_string = current_params.any? ? "?#{current_params.to_query}" : ""
+      "#{current_url_path}#{query_string}"
+    end
+
+    def current_url_path
+      # This will be overridden by the specific implementation
+      "/"
+    end
+  end
+end

data/app/components/easy_admin/quick_filters_component.rb

@@ -0,0 +1,65 @@
+module EasyAdmin
+  class QuickFiltersComponent < Phlex::HTML
+    def initialize(resource_class:, current_period: nil, current_params: nil)
+      @resource_class = resource_class
+      @current_period = current_period
+      @current_params = current_params || ActionController::Parameters.new.permit!
+    end
+
+    def view_template
+      div(class: "bg-white rounded-xl shadow-sm border border-gray-200 mb-4 sm:mb-6") do
+        div(class: "px-4 sm:px-6 py-3 border-b border-gray-100") do
+          h3(class: "text-sm font-semibold text-gray-900") { "Quick Filters" }
+        end
+        div(class: "p-4 sm:p-6") do
+          div(class: "flex flex-wrap gap-2") do
+            render_quick_filter_link("Today", "today")
+            render_quick_filter_link("Last 7 Days", "7d")
+            render_quick_filter_link("Last 30 Days", "30d")
+            render_quick_filter_link("Last 90 Days", "90d")
+            render_quick_filter_link("Last Year", "1y")
+            render_clear_filter_link
+          end
+        end
+      end
+    end
+
+    private
+
+    def render_quick_filter_link(label, period)
+      active = @current_period == period
+      css_classes = if active
+                     "inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 bg-blue-600 text-white shadow-sm"
+                   else
+                     "inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 bg-white text-gray-700 border border-gray-300 hover:bg-gray-50"
+                   end
+
+      a(href: build_filter_url(period), class: css_classes, data: { turbo_prefetch: "false" }) { label }
+    end
+
+    def render_clear_filter_link
+      return unless @current_period.present?
+      
+      a(
+        href: build_filter_url(nil),
+        class: "inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 bg-white text-red-600 border border-red-300 hover:bg-red-50",
+        data: { turbo_prefetch: "false" }
+      ) { "Clear Filter" }
+    end
+
+    def build_filter_url(period)
+      route_helper = EasyAdmin::Engine.routes.url_helpers
+      current_params = @current_params.permit(:scope, :search, :sort, :direction, :page).to_h
+      
+      if period
+        current_params[:period] = period
+      else
+        current_params.delete(:period)
+      end
+      
+      base_url = route_helper.resources_path(@resource_class.route_key)
+      query_string = current_params.to_query
+      query_string.present? ? "#{base_url}?#{query_string}" : base_url
+    end
+  end
+end

data/app/components/easy_admin/resource_pagination_component.rb

@@ -0,0 +1,14 @@
+module EasyAdmin
+  class ResourcePaginationComponent < PaginationComponent
+    def initialize(pagy:, resource_class:, request_params: nil)
+      @resource_class = resource_class
+      super(pagy: pagy, request_params: request_params)
+    end
+
+    private
+
+    def current_url_path
+      EasyAdmin::Engine.routes.url_helpers.resources_path(@resource_class.route_key)
+    end
+  end
+end

data/app/components/easy_admin/resources/index_component.rb

@@ -0,0 +1,211 @@
+module EasyAdmin
+  module Resources
+    class IndexComponent < BaseComponent
+    def initialize(resource_class:, current_scope: nil, scope_counts: {}, current_params: {}, search_params: {}, current_period: nil, current_user: nil)
+      @resource_class = resource_class
+      @current_scope = current_scope
+      @scope_counts = scope_counts
+      @current_params = current_params
+      @search_params = search_params
+      @current_period = current_period
+      @current_user = current_user
+    end
+
+    def view_template
+      div do
+        render_page_header
+        render_scopes if @resource_class.has_scopes?
+        render_combined_filters
+        render_search_banner if @current_params[:search].present?
+        render_period_banner if @current_params[:period].present?
+        render_table_frame
+      end
+    end
+
+    private
+
+    def render_page_header
+      div(class: "mb-6") do
+        div(class: "sm:flex sm:items-center") do
+          div(class: "sm:flex-auto") do
+            h1(class: "text-2xl font-bold leading-6 text-gray-900") { @resource_class.title }
+            p(class: "mt-2 text-sm text-gray-700") do
+              "A list of all #{@resource_class.title.downcase} in your account."
+            end
+          end
+          div(class: "mt-4 sm:ml-16 sm:mt-0 sm:flex-none") do
+            render_new_resource_link
+          end
+        end
+      end
+    end
+
+    def render_new_resource_link
+      a(
+        href: easy_admin_url_helpers.new_resource_path(@resource_class.route_key),
+        class: "block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+      ) do
+        unsafe_raw <<~SVG
+          <svg class="inline-block 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="M12 4v16m8-8H4"/>
+          </svg>
+        SVG
+        plain "New #{@resource_class.singular_title}"
+      end
+    end
+
+    def render_scopes
+      render EasyAdmin::ScopesComponent.new(
+        resource_class: @resource_class,
+        current_scope: @current_scope,
+        counts: @scope_counts
+      )
+    end
+
+    def render_combined_filters
+      render EasyAdmin::CombinedFiltersComponent.new(
+        resource_class: @resource_class,
+        current_params: @current_params,
+        search_params: @search_params,
+        current_period: @current_period
+      )
+    end
+
+    def render_search_banner
+      div(class: "mb-4 rounded-md bg-blue-50 p-4") do
+        div(class: "flex") do
+          div(class: "flex-shrink-0") do
+            unsafe_raw <<~SVG
+              <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/>
+              </svg>
+            SVG
+          end
+          div(class: "ml-3") do
+            p(class: "text-sm text-blue-700") do
+              "Search results for \""
+              strong { @current_params[:search] }
+              "\""
+              a(
+                href: easy_admin_url_helpers.resources_path(@resource_class.route_key),
+                class: "font-medium text-blue-700 hover:text-blue-600 ml-2"
+              ) { "Clear search" }
+            end
+          end
+        end
+      end
+    end
+
+    def render_period_banner
+      div(class: "mb-4 rounded-md bg-green-50 p-4") do
+        div(class: "flex") do
+          div(class: "flex-shrink-0") do
+            unsafe_raw <<~SVG
+              <svg class="h-5 w-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+              </svg>
+            SVG
+          end
+          div(class: "ml-3") do
+            p(class: "text-sm text-green-700") do
+              "Showing results for "
+              strong { period_label(@current_params[:period]) }
+              a(
+                href: clear_period_url,
+                class: "font-medium text-green-700 hover:text-green-600 ml-2",
+                data: { turbo_prefetch: "false" }
+              ) { "Clear filter" }
+            end
+          end
+        end
+      end
+    end
+
+    def render_table_frame
+      turbo_frame(
+        id: "table-frame",
+        src: frame_src_url,
+        loading: "lazy"
+      ) do
+        render_skeleton_table
+      end
+    end
+
+    def render_skeleton_table
+      div(class: "mt-8 flow-root") do
+        div(class: "mobile-table-wrapper -mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8") do
+          div(class: "inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8") do
+            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
+                render_skeleton_header
+                render_skeleton_body
+              end
+            end
+          end
+        end
+      end
+    end
+
+    def render_skeleton_header
+      thead(class: "bg-gray-50") do
+        tr do
+          @resource_class.index_fields.each_with_index do |field, index|
+            th(
+              scope: "col",
+              class: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wide #{'mobile-hide' if index > 2}"
+            ) { field[:label] }
+          end
+          th(scope: "col", class: "relative px-6 py-3") do
+            span(class: "sr-only") { "Actions" }
+          end
+        end
+      end
+    end
+
+    def render_skeleton_body
+      tbody(class: "divide-y divide-gray-200 bg-white") do
+        5.times do
+          tr(class: "animate-pulse") do
+            @resource_class.index_fields.each_with_index do |field, index|
+              td(class: "whitespace-nowrap px-6 py-4 text-sm #{'mobile-hide' if index > 2}") do
+                div(class: "h-4 bg-gray-200 rounded")
+              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
+                3.times do
+                  div(class: "w-8 h-8 bg-gray-200 rounded-lg")
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+
+    def period_label(period)
+      case period
+      when 'today' then 'Today'
+      when '7d' then 'Last 7 Days'
+      when '30d' then 'Last 30 Days'
+      when '90d' then 'Last 90 Days'
+      when '1y' then 'Last Year'
+      else period.humanize
+      end
+    end
+
+    def clear_period_url
+      base_url = easy_admin_url_helpers.resources_path(@resource_class.route_key)
+      clear_params = @current_params.except(:period)
+      query_string = clear_params.present? ? clear_params.to_query : ""
+      query_string.present? ? "#{base_url}?#{query_string}" : base_url
+    end
+
+    def frame_src_url
+      base_url = easy_admin_url_helpers.resources_path(@resource_class.route_key)
+      query_string = @current_params.present? ? @current_params.to_query : ""
+      query_string.present? ? "#{base_url}?#{query_string}" : base_url
+    end
+    end
+  end
+end

data/app/components/easy_admin/resources/index_frame_component.rb

@@ -0,0 +1,88 @@
+module EasyAdmin
+  module Resources
+    class IndexFrameComponent < BaseComponent
+      def initialize(resource_class:, records:, pagy: nil, current_params: {}, current_path: nil, current_user: nil)
+        @resource_class = resource_class
+        @records = records
+        @pagy = pagy
+        @current_params = current_params
+        @current_path = current_path
+        @current_user = current_user
+      end
+
+      def view_template
+        turbo_frame(id: "table-frame") do
+          if @records.any?
+            render_table_content
+          else
+            render_empty_state
+          end
+          render_pagination if @pagy
+        end
+      end
+
+      private
+
+      def render_table_content
+        div(class: "mt-8 flow-root") do
+          div(class: "mobile-table-wrapper -mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8") do
+            div(class: "inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8") do
+              div(class: "overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg") do
+                render EasyAdmin::Resources::TableComponent.new(
+                  records: @records,
+                  resource_class: @resource_class,
+                  current_params: @current_params,
+                  current_user: @current_user
+                )
+              end
+            end
+          end
+        end
+      end
+
+      def render_empty_state
+        div(class: "text-center py-12") do
+          unsafe_raw <<~SVG
+            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
+            </svg>
+          SVG
+          h3(class: "mt-2 text-sm font-semibold text-gray-900") { "No #{@resource_class.title.downcase}" }
+          p(class: "mt-1 text-sm text-gray-500") { "Get started by creating a new #{@resource_class.singular_title.downcase}." }
+          div(class: "mt-6") do
+            a(
+              href: easy_admin_url_helpers.new_resource_path(@resource_class.route_key),
+              class: "inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            ) do
+              unsafe_raw <<~SVG
+                <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                  <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"/>
+                </svg>
+              SVG
+              "New #{@resource_class.singular_title}"
+            end
+          end
+        end
+      end
+
+      def render_pagination
+        div(id: "infinite-scroll-container") do
+          if @resource_class.respond_to?(:infinite_scroll_enabled?) && @resource_class.infinite_scroll_enabled?
+            render EasyAdmin::InfiniteScrollComponent.new(
+              pagy: @pagy,
+              resource_class: @resource_class,
+              current_params: @current_params,
+              current_path: @current_path
+            )
+          else
+            render EasyAdmin::ResourcePaginationComponent.new(
+              pagy: @pagy,
+              resource_class: @resource_class,
+              request_params: @current_params
+            )
+          end
+        end
+      end
+    end
+  end
+end