Merge pull request #5286 from solidusio/elia/admin/pagination-buttons

[Admin] Use `ui/button` for the pagination component

admin/app/components/solidus_admin/products/index/component.html.erb

@@ -17,6 +17,10 @@
 
   <%= render @table_component.new(
     page: @page,
+    footer: render(@pagination_component.new(
+      prev_link: @page.first? ? nil : solidus_admin.products_path(page: @page.number - 1),
+      next_link: @page.last? ? nil : solidus_admin.products_path(page: @page.number + 1)
+    )),
     batch_actions: [
       {
         display_name: t('.batch_actions.delete'),

admin/app/components/solidus_admin/products/index/component.rb

@@ -5,13 +5,15 @@ def initialize(
     page:,
     badge_component: component('ui/badge'),
     table_component: component('ui/table'),
+    pagination_component: component('ui/table/pagination'),
     button_component: component("ui/button")
   )
     @page = page
 
     @badge_component = badge_component
     @table_component = table_component
     @button_component = button_component
+    @pagination_component = pagination_component
   end
 
   def image_column(product)

admin/app/components/solidus_admin/ui/table/component.html.erb

@@ -78,6 +78,17 @@
       <% end %>
     </tbody>
 
-    <%= render_table_footer %>
+    <% if @footer.present? %>
+      <tfoot>
+        <tr>
+          <td colspan="<%= @columns.size %>" class="py-4">
+            <div class="flex justify-center">
+              <%= @footer %>
+            </div>
+          </td>
+        </tr>
+      </tfoot>
+    <% end %>
+
   </table>
 </div>

admin/app/components/solidus_admin/ui/table/component.rb

@@ -2,7 +2,6 @@
 
 class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
   # @param page [GearedPagination::Page] The pagination page object.
-  # @param path [Proc] A callable object that generates the path for pagination links.
   #
   # @param columns [Array<Hash>] The array of column definitions.
   # @option columns [Symbol|Proc|#to_s] :header The column header.
@@ -15,28 +14,27 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
   # @option batch_actions [String] :action The batch action path.
   # @option batch_actions [String] :method The batch action HTTP method for the provided path.
   #
-  # @param pagination_component [Class] The pagination component class (default: component("ui/table/pagination")).
+  # @param footer [String] The content for the footer, e.g. pagination links.
+  #
   # @param checkbox_componnent [Class] The checkbox component class (default: component("ui/forms/checkbox")).
   # @param button_component [Class] The button component class (default: component("ui/button")).
   # @param tab_component [Class] The tab component class (default: component("ui/tab")).
   def initialize(
     page:,
-    path: nil,
     columns: [],
     batch_actions: [],
-    pagination_component: component("ui/table/pagination"),
+    footer: nil,
     checkbox_componnent: component("ui/forms/checkbox"),
     button_component: component("ui/button"),
     tab_component: component("ui/tab")
   )
     @page = page
-    @path = path
     @columns = columns.map { Column.new(**_1) }
     @batch_actions = batch_actions.map { BatchAction.new(**_1) }
     @model_class = page.records.model
     @rows = page.records
+    @footer = footer
 
-    @pagination_component = pagination_component
     @checkbox_componnent = checkbox_componnent
     @button_component = button_component
     @tab_component = tab_component
@@ -131,24 +129,6 @@ def render_data_cell(cell, data)
     content_tag(:td, content_tag(:div, cell, class: "flex items-center gap-1.5"), class: "py-2 px-4 h-10 vertical-align-middle leading-none")
   end
 
-  def render_table_footer
-    if @pagination_component
-      tag.tfoot do
-        tag.tr do
-          tag.td(colspan: @columns.size, class: "py-4") do
-            tag.div(class: "flex justify-center") do
-              render_pagination_component
-            end
-          end
-        end
-      end
-    end
-  end
-
-  def render_pagination_component
-    @pagination_component.new(page: @page, path: @path).render_in(self)
-  end
-
   Column = Struct.new(:header, :data, :class_name, keyword_init: true)
   BatchAction = Struct.new(:display_name, :icon, :action, :method, keyword_init: true) # rubocop:disable Lint/StructNewOverride
   private_constant :Column, :BatchAction

admin/app/components/solidus_admin/ui/table/pagination/component.html.erb

@@ -1,29 +1,24 @@
-<div>
-  <nav aria-label="pagination">
-    <ul class="flex items-center">
-      <li>
-        <% if @page.first? %>
-          <span class="<%= link_classes(rounded: :left) %>", "aria-label"=<%= t(".prev") %>, "aria-disabled"=true>
-            <%= icon_tag("arrow-left-s-line", class: "fill-current text-grey-400 w-5 h-5") %>
-          </span>
-        <% else %>
-          <%= link_to @path.call(@page.number - 1), class: link_classes(rounded: :left), "aria-label" => t(".prev") do %>
-            <%= icon_tag("arrow-left-s-line", class: "w-5 h-5") %>
-          <% end %>
-        <% end %>
-      </li>
-
-      <li>
-        <% if @page.last? %>
-          <span class="<%= link_classes(rounded: :right) %>", "aria-label"=<%= t(".next") %>, "aria-disabled"=true>
-            <%= icon_tag("arrow-right-s-line", class: "fill-current text-grey-400 w-5 h-5") %>
-          </span>
-        <% else %>
-          <%= link_to @path.call(@page.next_param), class: link_classes(rounded: :right), "aria-label" => t(".next") do %>
-            <%= icon_tag("arrow-right-s-line", class: "w-5 h-5") %>
-          <% end %>
-        <% end %>
-      </li>
-    </ul>
-  </nav>
-</div>
+<nav aria-label="pagination" class="flex items-center">
+  <%= render component('ui/button').new(
+    icon: 'arrow-left-s-line',
+    class: 'rounded-tr-none rounded-br-none border-r-0',
+    scheme: :secondary,
+    size: :s,
+    tag: :a,
+    href: @prev_link,
+    'aria-disabled': @prev_link.blank?,
+    rel: 'prev',
+    text: content_tag(:span, t('.previous'), class: 'sr-only'),
+  ) -%>
+  <%= render component('ui/button').new(
+    icon: 'arrow-right-s-line',
+    class: 'rounded-tl-none rounded-bl-none',
+    scheme: :secondary,
+    size: :s,
+    tag: :a,
+    href: @next_link,
+    'aria-disabled': @next_link.blank?,
+    rel: 'next',
+    text: content_tag(:span, t('.next'), class: 'sr-only'),
+  ) %>
+</nav>

admin/app/components/solidus_admin/ui/table/pagination/component.rb

@@ -1,42 +1,14 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::UI::Table::Pagination::Component < SolidusAdmin::BaseComponent
-  # @param page [GearedPagination::Page] The Geared Pagination page object
-  # @param path [Proc] (optional) A callable object that generates the path,
-  #                         e.g. ->(page_number){ products_path(page: page_number) }
-  def initialize(page:, path: nil)
-    @page = page
-    @path = path || default_path
+  # @param prev_link [String] The link to the previous page.
+  # @param next_link [String] The link to the next page.
+  def initialize(prev_link: nil, next_link: nil)
+    @prev_link = prev_link
+    @next_link = next_link
   end
 
-  def default_path
-    model_name = @page.records.model.model_name.param_key
-    lambda { |page_number| send("#{model_name.pluralize}_path", page: page_number) }
-  end
-
-  def link_classes(rounded: nil)
-    classes = %w[
-      flex
-      items-center
-      justify-center
-      px-2
-      h-10
-      ml-0
-      leading-tight
-      text-gray-500
-      bg-white
-      border
-      border-gray-300
-      hover:bg-gray-100
-      hover:text-gray-700
-      dark:bg-gray-800
-      dark:border-gray-700
-      dark:text-gray-400
-      dark:hover:bg-gray-700
-      dark:hover:text-white
-    ]
-    classes << 'rounded-l-lg' if rounded == :left
-    classes << 'rounded-r-lg' if rounded == :right
-    classes.join(' ')
+  def render?
+    @prev_link.present? || @next_link.present?
   end
 end

admin/lib/solidus_admin/preview.rb

@@ -28,6 +28,7 @@ module ControllerHelper
 
     included do
       helper ActionView::Helpers
+      helper SolidusAdmin::ContainerHelper
       helper_method :current_component
     end
 

admin/spec/components/previews/solidus_admin/ui/button/component_preview.rb

@@ -18,6 +18,10 @@ def playground(size: :m, scheme: :primary, text: "Button", icon: 'search-line')
     render component("ui/button").new(size: size, scheme: scheme, text: text, icon: icon.presence)
   end
 
+  def group
+    render_with_template
+  end
+
   private
 
   def icon_options

admin/spec/components/previews/solidus_admin/ui/button/component_preview/group.html.erb

@@ -0,0 +1,18 @@
+<%= render current_component.new(
+  tag: :a,
+  rel: 'prev',
+  href: '#',
+  icon: 'arrow-left-s-line',
+  class: 'rounded-tr-none rounded-br-none border-r-0',
+  scheme: :secondary,
+  size: :s
+) -%>
+<%= render current_component.new(
+  tag: :a,
+  rel: 'next',
+  icon: 'arrow-right-s-line',
+  class: 'rounded-tl-none rounded-bl-none',
+  scheme: :secondary,
+  size: :s,
+  'aria-disabled': true
+) %>

admin/spec/components/previews/solidus_admin/ui/table/component_preview.rb

@@ -23,16 +23,6 @@ def simple
       model_class
     end
 
-    render component("ui/table").new(
-      page: page,
-      path: ->(_page_number) { "#" },
-      columns: [
-        { header: :id, data: -> { _1.id.to_s } },
-        { header: :name, data: :name },
-        { header: -> { "Availability at #{Time.current}" }, data: -> { "#{time_ago_in_words _1.available_on} ago" } },
-        { header: -> { component("ui/badge").new(name: "$$$") }, data: -> { component("ui/badge").new(name: _1.display_price, color: :green) } },
-        { header: "Generated at", data: Time.current.to_s },
-      ]
-    )
+    render_with_template(locals: { page: page, rows: rows })
   end
 end

admin/spec/components/previews/solidus_admin/ui/table/component_preview/simple.html.erb

@@ -0,0 +1,14 @@
+<%= render current_component.new(
+  page: page,
+  footer: render(component("ui/table/pagination").new(
+    prev_link: nil,
+    next_link: '#2',
+  )),
+  columns: [
+    { header: :id, data: -> { _1.id.to_s } },
+    { header: :name, data: :name },
+    { header: -> { "Availability at #{Time.current}" }, data: -> { "#{time_ago_in_words _1.available_on} ago" } },
+    { header: -> { component("ui/badge").new(name: "$$$") }, data: -> { component("ui/badge").new(name: _1.display_price, color: :green) } },
+    { header: "Generated at", data: Time.current.to_s },
+  ]
+) %>

admin/spec/components/previews/solidus_admin/ui/table/pagination/component_preview.rb

@@ -5,32 +5,15 @@ class SolidusAdmin::UI::Table::Pagination::ComponentPreview < ViewComponent::Pre
   include SolidusAdmin::Preview
 
   def overview
-    render_with_template(
-      locals: {
-        page: page_proc,
-        path: path_proc
-      }
-    )
+    render_with_template
   end
 
-  # @param left toggle
-  # @param right toggle
-  def playground(left: false, right: false)
+  # @param prev_link
+  # @param next_link
+  def playground(prev_link: '#1', next_link: '#2')
     render current_component.new(
-      page: page_proc.call(left, right),
-      path: path_proc
+      prev_link: prev_link.presence,
+      next_link: next_link.presence,
     )
   end
-
-  private
-
-  def page_proc
-    lambda { |left, right|
-      Struct.new(:number, :next_param, :first?, :last?).new(1, '#', !left, !right)
-    }
-  end
-
-  def path_proc
-    ->(_page_number) { "#" }
-  end
 end

admin/spec/components/previews/solidus_admin/ui/table/pagination/component_preview/overview.html.erb

@@ -1,16 +1,16 @@
 <table>
-  <% [
-    { title: 'Default', left: true, right: true },
-    { title: 'Left', left: true, right: false },
-    { title: 'Right', left: false, right: true },
-    { title: 'Disabled', left: false, right: false }
-  ].each do |config| %>
+  <% {
+    'Default': ['#1', '#2'],
+    'Left': ['#1', nil],
+    'Right': [nil, '#2'],
+    'Disabled': [nil, nil],
+  }.each do |title, (left, right)| %>
     <tr>
-      <td class="font-bold px-3 py-1"><%= config[:title] %></td>
+      <td class="font-bold px-3 py-1"><%= title %></td>
       <td class="px-3 py-1 text-center">
         <%= render current_component.new(
-          page: page.call(config[:left], config[:right]),
-          path: path
+          prev_link: (left && "#1"),
+          next_link: (right && "#2"),
         ) %>
       </td>
     </tr>

admin/spec/components/solidus_admin/ui/button/component_spec.rb

@@ -3,7 +3,9 @@
 require "spec_helper"
 
 RSpec.describe SolidusAdmin::UI::Button::Component, type: :component do
-  it "renders the overview preview" do
+  it "renders previews" do
+    render_preview(:playground)
     render_preview(:overview)
+    render_preview(:group)
   end
 end