Merge pull request #5516 from solidusio/elia+rainer/admin/index-table…

…-features

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

admin/app/components/solidus_admin/layout/navigation/component.html.erb

@@ -4,14 +4,14 @@
  p-4
  w-full
 " data-controller="<%= stimulus_id %>" data-<%= stimulus_id %>-cookie-value="solidus_admin">
- <%= link_to @store.url, class: "py-3 px-2 text-left flex mb-4" do %>
+ <%= link_to spree.admin_path, class: "py-3 px-2 text-left flex mb-4" do %>
  <%= image_tag @logo_path, alt: t('.visit_store'), class: "max-h-7" %>
  <% end %>
 
- <%= link_to @store.url, target: :_blank, class: "flex mb-4 px-2 py-1.5 border border-gray-100 rounded-sm shadow-sm" do %>
+ <%= link_to @store_url, target: :_blank, class: "flex mb-4 px-2 py-1.5 border border-gray-100 rounded-sm shadow-sm" do %>
  <div class="flex-grow">
  <p class="body-small-bold text-black"><%= @store.name %></p>
- <p class="body-tiny text-gray-500"><%= @store.url %></p>
+ <p class="body-tiny text-gray-500"><%= @store_url %></p>
  </div>
  <%= render component("ui/icon").new(name: 'arrow-right-up-line', class: 'w-4 h-4 fill-gray-400') %>
  <% end %>

admin/app/components/solidus_admin/layout/navigation/component.rb

@@ -15,6 +15,12 @@ def initialize(
  @store = store
  end
 
+ def before_render
+ url = @store.url
+ url = "https://#{url}" unless url.start_with?("http")
+ @store_url = url
+ end
+
  def items
  @items.sort_by(&:position)
  end

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

@@ -16,16 +16,23 @@
 
  <%= render component('ui/table').new(
  id: 'orders-list',
- model_class: Spree::Order,
- rows: @page.records,
- 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,
- filters: filters,
- columns: columns,
- prev_page_link: prev_page_link,
- next_page_link: next_page_link,
+ data: {
+ class: Spree::Order,
+ rows: @page.records,
+ fade: row_fade,
+ url: ->(order) { spree.edit_admin_order_path(order) },
+ batch_actions: batch_actions,
+ columns: columns,
+ prev: prev_page_link,
+ next: next_page_link,
+ },
+ search: {
+ name: :q,
+ value: params[:q],
+ searchbar_key: SolidusAdmin::Config[:order_search_key],
+ url: solidus_admin.orders_path(scope: params[:scope]),
+ filters: filters,
+ scopes: scopes,
+ },
  ) %>
 </div>

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

@@ -23,6 +23,16 @@ def batch_actions
  []
  end
 
+ def scopes
+ [
+ { label: t('.scopes.complete'), name: 'completed', default: true },
+ { label: t('.scopes.in_progress'), name: 'in_progress' },
+ { label: t('.scopes.returned'), name: 'returned' },
+ { label: t('.scopes.canceled'), name: 'canceled' },
+ { label: t('.scopes.all_orders'), name: 'all' },
+ ]
+ end
+
  def filters
  [
  {
@@ -92,6 +102,7 @@ def filters
  def columns
  [
  number_column,
+ state_column,
  date_column,
  customer_column,
  total_column,
@@ -114,6 +125,21 @@ def number_column
  }
  end
 
+ def state_column
+ {
+ header: :state,
+ data: ->(order) do
+ color = {
+ 'complete' => :green,
+ 'returned' => :red,
+ 'canceled' => :blue,
+ 'cart' => :graphite_light,
+ }[order.state] || :yellow
+ component('ui/badge').new(name: order.state.humanize, color: color)
+ end
+ }
+ end
+
  def date_column
  {
  header: :date,

admin/app/components/solidus_admin/orders/index/component.yml

@@ -15,3 +15,9 @@ en:
  date:
  formats:
  short: '%d %b %y'
+ scopes:
+ all_orders: All
+ canceled: Canceled
+ complete: Complete
+ returned: Returned
+ in_progress: In Progress

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

@@ -13,15 +13,22 @@
 
  <%= render component('ui/table').new(
  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,
- filters: filters,
- columns: columns,
- prev_page_link: prev_page_link,
- next_page_link: next_page_link,
+ data: {
+ class: Spree::Product,
+ rows: @page.records,
+ url: ->(product) { solidus_admin.product_path(product) },
+ prev: prev_page_link,
+ next: next_page_link,
+ columns: columns,
+ batch_actions: batch_actions,
+ },
+ search: {
+ name: :q,
+ value: params[:q],
+ url: solidus_admin.products_path,
+ searchbar_key: SolidusAdmin::Config[:product_search_key],
+ filters: filters,
+ scopes: scopes,
+ },
  ) %>
 <% end %>

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

@@ -59,6 +59,13 @@ def filters
  end
  end
 
+ def scopes
+ [
+ { name: :all, label: t('.scopes.all'), default: true },
+ { name: :deleted, label: t('.scopes.deleted') },
+ ]
+ end
+
  def columns
  [
  image_column,

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

@@ -7,3 +7,6 @@ en:
  activate: 'Activate'
  filters:
  with_deleted: Include deleted
+ scopes:
+ all: All
+ deleted: Deleted

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

@@ -34,32 +34,32 @@ class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent
  hover:text-white hover:bg-gray-600
  active:text-white active:bg-gray-800
  focus:text-white focus:bg-gray-700
- disabled:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed
- aria-disabled:text-gray-400 aria-disabled:bg-gray-100 aria-disabled:aria-disabled:cursor-not-allowed
+ disabled:text-gray-400 disabled:bg-gray-100
+ aria-disabled:text-gray-400 aria-disabled:bg-gray-100
  },
  secondary: %{
  text-gray-700 bg-white border border-1 border-gray-200
  hover:bg-gray-50
  active:bg-gray-100
  focus:bg-gray-50
- disabled:text-gray-300 disabled:bg-white disabled:cursor-not-allowed
- aria-disabled:text-gray-300 aria-disabled:bg-white aria-disabled:cursor-not-allowed
+ disabled:text-gray-300 disabled:bg-white
+ aria-disabled:text-gray-300 aria-disabled:bg-white
  },
  danger: %{
  text-red-500 bg-white border border-1 border-red-500
  hover:bg-red-500 hover:border-red-600 hover:text-white
  active:bg-red-600 active:border-red-700 active:text-white
  focus:bg-red-50 focus:bg-red-500 focus:border-red-600 focus:text-white
- disabled:text-red-300 disabled:bg-white disabled:border-red-200 disabled:cursor-not-allowed
- aria-disabled:text-red-300 aria-disabled:bg-white aria-disabled:border-red-200 aria-disabled:cursor-not-allowed
+ disabled:text-red-300 disabled:bg-white disabled:border-red-200
+ aria-disabled:text-red-300 aria-disabled:bg-white aria-disabled:border-red-200
  },
  ghost: %{
  text-gray-700 bg-transparent
  hover:bg-gray-50
  active:bg-gray-100
  focus:bg-gray-50 focus:ring-gray-300 focus:ring-2
- disabled:text-gray-300 disabled:bg-transparent disabled:border-gray-300 disabled:cursor-not-allowed
- aria-disabled:text-gray-300 aria-disabled:bg-transparent aria-disabled:border-gray-300 aria-disabled:cursor-not-allowed
+ disabled:text-gray-300 disabled:bg-transparent disabled:border-gray-300
+ aria-disabled:text-gray-300 aria-disabled:bg-transparent aria-disabled:border-gray-300
  },
  }
 

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

@@ -7,7 +7,8 @@ class SolidusAdmin::UI::Tab::Component < SolidusAdmin::BaseComponent
  l: %w[h-12 px-4 body-text-bold],
  }
 
- def initialize(text:, size: :m, current: false, disabled: false, **attributes)
+ def initialize(text:, tag: :a, size: :m, current: false, disabled: false, **attributes)
+ @tag = tag
  @text = text
  @size = size
  @attributes = attributes
@@ -22,11 +23,11 @@ def initialize(text:, size: :m, current: false, disabled: false, **attributes)
  hover:bg-gray-75 hover:text-gray-700
  focus:bg-gray-25 focus:text-gray-700
 
- active:bg-gray-50 active:text-black
+ active:bg-gray-75 active:text-black
  aria-current:bg-gray-50 aria-current:text-black
 
- disabled:bg-gray-100 disabled:text-gray-400
- aria-disabled:bg-gray-100 aria-disabled:text-gray-400
+ disabled:bg-gray-75 disabled:text-gray-400
+ aria-disabled:bg-gray-75 aria-disabled:text-gray-400
  ],
  SIZES.fetch(@size.to_sym),
  @attributes.delete(:class),
@@ -35,7 +36,7 @@ def initialize(text:, size: :m, current: false, disabled: false, **attributes)
 
  def call
  content_tag(
- :a,
+ @tag,
  @text,
  **@attributes
  )