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
     )