Skip to content

Commit

Permalink
Merge pull request #5397 from nebulab/rainerd/fix/ui-table-row-click-bug
Browse files Browse the repository at this point in the history
[Admin] Enhance `ui/table` component with clickable rows and URL navigation
  • Loading branch information
rainerdema authored Oct 13, 2023
2 parents 7869560 + 00cb97a commit ee3277d
Show file tree
Hide file tree
Showing 8 changed files with 52 additions and 21 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
id: 'orders-list',
model_class: Spree::Order,
rows: @page.records,
fade_row_proc: fade_row_proc,
row_fade: row_fade,
row_url: ->(order) { spree.edit_admin_order_path(order) },
search_key: SolidusAdmin::Config[:order_search_key],
search_url: solidus_admin.orders_path,
batch_actions: batch_actions,
Expand Down
10 changes: 4 additions & 6 deletions admin/app/components/solidus_admin/orders/index/component.rb
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ def initialize(page:)
@page = page
end

class_attribute :fade_row_proc, default: ->(order) { order.paid? && order.shipped? }
class_attribute :row_fade, default: ->(order) { order.paid? && order.shipped? }

def title
Spree::Order.model_name.human.pluralize
Expand Down Expand Up @@ -105,12 +105,10 @@ def number_column
{
header: :order,
data: ->(order) do
order_path = spree.edit_admin_order_path(order)

if !fade_row_proc.call(order)
link_to order.number, order_path, class: 'font-semibold'
if !row_fade.call(order)
content_tag :div, order.number, class: 'font-semibold'
else
link_to order.number, order_path
content_tag :div, order.number
end
end
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
id: 'products-list',
model_class: Spree::Product,
rows: @page.records,
row_url: ->(product) { solidus_admin.product_path(product) },
search_key: SolidusAdmin::Config[:product_search_key],
search_url: solidus_admin.products_path,
batch_actions: batch_actions,
Expand Down
12 changes: 6 additions & 6 deletions admin/app/components/solidus_admin/products/index/component.rb
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,11 @@ def image_column
data: ->(product) do
image = product.gallery.images.first or return

link_to(
render(component('ui/thumbnail').new(src: image.url(:small), alt: product.name)),
solidus_admin.product_path(product),
class: 'inline-flex overflow-hidden',
tabindex: -1,
render(
component('ui/thumbnail').new(
src: image.url(:small),
alt: product.name
)
)
end
}
Expand All @@ -88,7 +88,7 @@ def name_column
{
header: :name,
data: ->(product) do
link_to product.name, solidus_admin.product_path(product)
content_tag :div, product.name
end
}
end
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,11 @@

<tbody class="bg-white text-3.5 line-[150%] text-black">
<% @rows.each do |row| %>
<tr class="
border-b border-gray-100 last:border-0
<%= 'bg-gray-15 text-gray-700' if @fade_row_proc&.call(row) %>
">
<tr
class="border-b border-gray-100 last:border-0 hover:bg-gray-50 cursor-pointer <%= 'bg-gray-15 text-gray-700' if @row_fade&.call(row) %>"
data-action="click-><%= stimulus_id %>#rowClicked"
data-primary-url="<%= @row_url&.call(row) %>"
>
<% @columns.each do |column| %>
<%= render_data_cell(column.data, row) %>
<% end %>
Expand Down
27 changes: 27 additions & 0 deletions admin/app/components/solidus_admin/ui/table/component.js
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,33 @@ export default class extends Controller {
this.render()
}

rowClicked(event) {
if (event.target.closest('a') || event.target.tagName === 'BUTTON' || event.target.type === 'checkbox') return

const row = event.currentTarget

if (this.modeValue === 'batch') {
this.toggleCheckbox(row)
} else {
this.navigateToRow(row)
}
}

toggleCheckbox(row) {
const checkbox = this.checkboxTargets.find(selection => row.contains(selection))

if (checkbox) {
checkbox.checked = !checkbox.checked
this.selectRow()
}
}

navigateToRow(row) {
const url = row.dataset.primaryUrl

if (url) window.location.href = url
}

render() {
const selectedRows = this.checkboxTargets.filter((checkbox) => checkbox.checked)

Expand Down
9 changes: 6 additions & 3 deletions admin/app/components/solidus_admin/ui/table/component.rb
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
# @param id [String] A unique identifier for the table component.
# @param model_class [ActiveModel::Translation] The model class used for translations.
# @param rows [Array] The collection of objects that will be passed to columns for display.
# @param fade_row_proc [Proc, nil] A proc determining if a row should have a faded appearance.
# @param row_fade [Proc, nil] A proc determining if a row should have a faded appearance.
# @param row_url [Proc, nil] A proc that takes a row object as a parameter and returns the URL to navigate to when the row is clicked.
# @param search_param [Symbol] The param for searching.
# @param search_key [Symbol] The key for searching.
# @param search_url [String] The base URL for searching.
Expand Down Expand Up @@ -36,7 +37,8 @@ def initialize(
model_class:,
rows:,
search_key:, search_url:, search_param: :q,
fade_row_proc: nil,
row_fade: nil,
row_url: nil,
columns: [],
batch_actions: [],
filters: [],
Expand All @@ -49,7 +51,8 @@ def initialize(
@id = id
@model_class = model_class
@rows = rows
@fade_row_proc = fade_row_proc
@row_fade = row_fade
@row_url = row_url
@search_param = search_param
@search_key = search_key
@search_url = search_url
Expand Down
2 changes: 1 addition & 1 deletion admin/spec/features/products_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
expect(page).to have_content("$19.99")
expect(page).to be_axe_clean

click_on "Just a product"
find('table tbody tr', text: 'Just a product').click

expect(page).to have_current_path("/admin/products/just-a-prod")
expect(page).to have_content("Manage images")
Expand Down

0 comments on commit ee3277d

Please sign in to comment.