Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[admin] Add scopes and controller helpers for ui/table #5516

Merged
merged 14 commits into from
Nov 24, 2023
Merged

[admin] Add scopes and controller helpers for ui/table #5516

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
13ab92a
Don't add filter hidden inputs if not required in `ui/table`
elia Nov 23, 2023
12298c4
Don't change the cursor for disabled button
elia Nov 24, 2023
d7191a2
Fix the store url to always have an HTTP(S) protocol defined
elia Nov 24, 2023
6def880
Reorganize `ui/table` intializer
elia Nov 24, 2023
c09369a
Let the first render of `ui/table` already hide toolbars based on the…
elia Nov 24, 2023
bfae492
Reset `ui/table` filters when exiting clicking on "cancel" from searc…
elia Nov 24, 2023
cddacff
Extract common search patterns to a controller helper
elia Nov 24, 2023
1406dad
Add support for scopes to `ui/table`
elia Nov 24, 2023
c7f7af5
Add a state column to `orders/index`
elia Nov 24, 2023
9ad6bd6
Only hide `ui/table` cells overflow horizontally when wrapped
elia Nov 24, 2023
00d145e
Allow the `ui/tab` component to pick an arbitrary tag
elia Nov 24, 2023
ff3c195
Adjust the `ui/tab` colors so when disabled by a form submission they…
elia Nov 24, 2023
34faee9
Refactor `ui/table` to use the internal objects instead of proxy ivars
elia Nov 24, 2023
73b1ded
Use turbo-permanent in `ui/table` for navigating out of search mode
elia Nov 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Prev Previous commit
Next Next commit
Refactor ui/table to use the internal objects instead of proxy ivars
  • Loading branch information
@elia
elia committed Nov 24, 2023
commit 34faee9fcc13150083afc2d9d2dcaa3968586a19
61 changes: 31 additions & 30 deletions admin/app/components/solidus_admin/ui/table/component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<div role="search">
<%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "searchToolbar", hidden: initial_mode != "search") do %>
<%= form_with(
url: @search_url,
url: @search.url,
method: :get,
html: {
id: search_form_id,
Expand All @@ -26,13 +26,15 @@
"data-action": "input->#{stimulus_id}#search change->#{stimulus_id}#search",
},
) do |form| %>
<%= hidden_field_tag scope_param_name, current_scope_name %>
<%= hidden_field_tag @search.scope_param_name, @search.current_scope.name if @search.scopes.present? %>
<%= render component('ui/forms/search_field').new(
name: "#{@search_param}[#{@search_key}]",
value: params.dig(@search_param, @search_key),
placeholder: t('.search_placeholder', resources: resource_plural_name),
name: @search.searchbar_param_name,
value: @search.value[@search.searchbar_key],
placeholder: t('.search_placeholder', resources: @data.plural_name),
"aria-label": t('.search_placeholder', resources: @data.plural_name),
"data-#{stimulus_id}-target": "searchField",
"aria-label": t('.search_placeholder', resources: resource_plural_name),
"data-turbo-permanent": "true",
id: "#{stimulus_id}-search-field-#{@id}",
) %>
<% end %>

Expand All @@ -45,27 +47,26 @@
</div>
<% end %>

<% if @filters.any? %>
<% if @search.filters.any? %>
<%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "filterToolbar", hidden: initial_mode != "search") do %>
<% @filters.each_with_index do |filter, index| %>
<% @search.filters.each_with_index do |filter, index| %>
<%= render_ransack_filter_dropdown(filter, index) %>
<% end %>
<% end %>
<% end %>

<%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "scopesToolbar", hidden: initial_mode != "scopes") do %>
<div class="flex-grow">
<%= form_with(url: @search_url, method: :get) do %>
<% @scopes.each do |scope| %>
<%= form_with(url: @search.url, method: :get) do %>
<% @search.scopes.each do |scope| %>
<%= render component("ui/tab").new(
tag: :button,
type: :submit,
text: scope.label,
current: current_scope_name == scope.name.to_s,
name: scope_param_name,
current: scope == @search.current_scope,
name: @search.scope_param_name,
value: scope.name,
) %>
<%#= render component("ui/tab").new(text: scope.label, current: current, href: scope.path) %>
<% end %>
<% end %>
</div>
Expand All @@ -81,15 +82,15 @@

<%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "batchToolbar", role: "toolbar", "aria-label": t(".batch_actions"), hidden: true) do %>
<%= form_tag '', id: batch_actions_form_id %>
<% @batch_actions.each do |batch_action| %>
<% @data.batch_actions.each do |batch_action| %>
<%= render_batch_action_button(batch_action) %>
<% end %>
<% end %>

<%= turbo_frame_tag table_frame_id, target: "_top" do %>
<table class="table-fixed w-full border-collapse">
<colgroup>
<% @columns.each do |column| %>
<% @data.columns.each do |column| %>
<col <%= tag.attributes(**column.col) if column.col %>">
<% end %>
</colgroup>
Expand All @@ -99,13 +100,13 @@
data-<%= stimulus_id %>-target="defaultHeader"
>
<tr>
<% @columns.each do |column| %>
<% @data.columns.each do |column| %>
<%= render_header_cell(column.header) %>
<% end %>
</tr>
</thead>

<% if @batch_actions %>
<% if @data.batch_actions %>
<thead
data-<%= stimulus_id %>-target="batchHeader"
class="bg-white color-black text-xs leading-none text-left"
Expand All @@ -116,46 +117,46 @@
<%= render_header_cell(content_tag(:div, safe_join([
content_tag(:span, "0", "data-#{stimulus_id}-target": "selectedRowsCount"),
" #{t('.rows_selected')}.",
])), colspan: @columns.count - 1) %>
])), colspan: @data.columns.count - 1) %>
</tr>
</thead>
<% end %>

<tbody class="bg-white text-3.5 line-[150%] text-black">
<% @rows.each do |row| %>
<% @data.rows.each do |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) %>"
<% if @row_url %>
class="border-b border-gray-100 last:border-0 hover:bg-gray-50 cursor-pointer <%= 'bg-gray-15 text-gray-700' if @data.fade&.call(row) %>"
<% if @data.url %>
data-action="click-><%= stimulus_id %>#rowClicked"
data-<%= stimulus_id %>-url-param="<%= @row_url.call(row) %>"
data-<%= stimulus_id %>-url-param="<%= @data.url.call(row) %>"
<% end %>
>
<% @columns.each do |column| %>
<% @data.columns.each do |column| %>
<%= render_data_cell(column, row) %>
<% end %>
</tr>
<% end %>

<% if @rows.empty? && @model_class %>
<% if @data.rows.empty? && @data.plural_name %>
<tr>
<td
colspan="<%= @columns.size %>"
colspan="<%= @data.columns.size %>"
class="text-center py-4 text-3.5 line-[150%] text-black bg-white rounded-b-lg"
>
<%= t('.no_resources_found', resources: resource_plural_name) %>
<%= t('.no_resources_found', resources: @data.plural_name) %>
</td>
</tr>
<% end %>
</tbody>

<% if @prev_page_link || @next_page_link %>
<% if @data.prev || @data.next %>
<tfoot>
<tr>
<td colspan="<%= @columns.size %>" class="py-4 bg-white rounded-b-lg border-t border-gray-100">
<td colspan="<%= @data.columns.size %>" class="py-4 bg-white rounded-b-lg border-t border-gray-100">
<div class="flex justify-center">
<%= render component('ui/table/pagination').new(
prev_link: @prev_page_link,
next_link: @next_page_link
prev_link: @data.prev,
next_link: @data.next
) %>
</div>
</td>
Expand Down
79 changes: 46 additions & 33 deletions admin/app/components/solidus_admin/ui/table/component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,36 +7,53 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
Scope = Struct.new(:name, :label, :default, keyword_init: true)
private_constant :BatchAction, :Column, :Filter, :Scope

Data = Struct.new(:rows, :class, :url, :prev, :next, :columns, :fade, :batch_actions, keyword_init: true) # rubocop:disable Lint/StructNewOverride
Search = Struct.new(:name, :value, :url, :searchbar_key, :filters, :scopes, keyword_init: true)
class Data < Struct.new(:rows, :class, :url, :prev, :next, :columns, :fade, :batch_actions, keyword_init: true) # rubocop:disable Lint/StructNewOverride,Style/StructInheritance
def initialize(**args)
super

self.columns = columns.map { |column| Column.new(wrap: false, **column) }
self.batch_actions = batch_actions.to_a.map { |action| BatchAction.new(**action) }
end

def plural_name
self[:class].model_name.human.pluralize if self[:class]
end
end

class Search < Struct.new(:name, :value, :url, :searchbar_key, :filters, :scopes, keyword_init: true) # rubocop:disable Style/StructInheritance
def initialize(**args)
super

self.filters = filters.to_a.map { |filter| Filter.new(**filter) }
self.scopes = scopes.to_a.map { |scope| Scope.new(**scope) }
end

def current_scope
scopes.find { |scope| scope.name.to_s == value[:scope].presence } || default_scope
end

def default_scope
scopes.find(&:default)
end

def scope_param_name
"#{name}[scope]"
end

def searchbar_param_name
"#{name}[#{searchbar_key}]"
end

def value
super || {}
end
end

def initialize(id:, data:, search: nil)
@id = id
@data = Data.new(**data)
@data.columns.unshift selectable_column if @data.batch_actions.present?
@search = Search.new(**search)

# Data
@columns = @data.columns.map { Column.new(wrap: true, **_1) }
@columns.unshift selectable_column if @data.batch_actions.present?
@batch_actions = @data.batch_actions&.map { BatchAction.new(**_1) }
@model_class = data[:class]
@rows = @data.rows
@row_fade = @data.fade
@row_url = @data.url
@prev_page_link = @data.prev
@next_page_link = @data.next

# Search
@filters = @search.filters.map { Filter.new(**_1) }
@scopes = @search.scopes.map { Scope.new(**_1) }
@search_param = @search.name
@search_params = @search.value
@search_key = @search.searchbar_key
@search_url = @search.url
end

def resource_plural_name
@model_class.model_name.human.pluralize
end

def selectable_column
Expand Down Expand Up @@ -95,7 +112,7 @@ def render_batch_action_button(batch_action)
def render_ransack_filter_dropdown(filter, index)
render component("ui/table/ransack_filter").new(
presentation: filter.presentation,
search_param: @search_param,
search_param: @search.name,
combinator: filter.combinator,
attribute: filter.attribute,
predicate: filter.predicate,
Expand All @@ -107,7 +124,7 @@ def render_ransack_filter_dropdown(filter, index)

def render_header_cell(cell, **attrs)
cell = cell.call if cell.respond_to?(:call)
cell = @model_class.human_attribute_name(cell) if cell.is_a?(Symbol)
cell = @data[:class].human_attribute_name(cell) if cell.is_a?(Symbol)
cell = cell.render_in(self) if cell.respond_to?(:render_in)

content_tag(:th, cell, class: %{
Expand Down Expand Up @@ -135,14 +152,10 @@ def render_data_cell(column, data)
end

def current_scope_name
@current_scope_name ||= params.dig(@search_param, :scope).presence || @scopes.find(&:default)&.name&.to_s
end

def scope_param_name
@scope_param_name ||= "#{@search_param}[scope]"
@search.current_scope.name
end

def initial_mode
@initial_mode ||= params.dig(@search_param, @search_key) ? "search" : "scopes"
@initial_mode ||= @search.value[@search.searchbar_key] ? "search" : "scopes"
end
end