Skip to content

Commit

Permalink
Simplify the pagination component to just accept a prev and next link
Browse files Browse the repository at this point in the history
  • Loading branch information
elia committed Jul 27, 2023
1 parent a7f4cad commit cf6805a
Show file tree
Hide file tree
Showing 8 changed files with 48 additions and 70 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
13 changes: 12 additions & 1 deletion admin/app/components/solidus_admin/ui/table/component.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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>
28 changes: 4 additions & 24 deletions admin/app/components/solidus_admin/ui/table/component.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,24 @@
<nav aria-label="pagination">
<ul class="flex items-center">
<li>
<% if @page.first? %>
<% if @prev_link.blank? %>
<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 %>
<%= link_to @prev_link, 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? %>
<% if @next_link.blank? %>
<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 %>
<%= link_to @next_link, class: link_classes(rounded: :right), "aria-label" => t(".next") do %>
<%= icon_tag("arrow-right-s-line", class: "w-5 h-5") %>
<% end %>
<% end %>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
# 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) }
def render?
@prev_link.present? || @next_link.present?
end

def link_classes(rounded: nil)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Original file line number Diff line number Diff line change
@@ -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>
Expand Down

0 comments on commit cf6805a

Please sign in to comment.