Merge pull request #5515 from solidusio/elia/misc-improvements

[admin] Misc improvements

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 
 orbs:
   browser-tools: circleci/[email protected]
-  codecov: codecov/codecov@3.2.3
+  codecov: codecov/codecov@3.3.0
 
 executors:
   base:

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

@@ -1,7 +1,8 @@
 <details
-  data-controller="details-click-outside"
+  data-controller="<%= stimulus_id %>"
   class="relative w-full"
   aria-label="<%= t('.account') %>"
+  data-action="keydown.escape-><%= stimulus_id %>#close"
   <%= :open if params[:account_menu_open] %>
 >
   <summary

admin/app/components/solidus_admin/layout/navigation/account/component.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+import { useClickOutside } from "stimulus-use"
+
+export default class extends Controller {
+  connect() {
+    useClickOutside(this)
+  }
+
+  clickOutside() {
+    this.close()
+  }
+
+  close() {
+    this.element.removeAttribute("open")
+  }
+}

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

@@ -125,7 +125,7 @@ def date_column
 
   def customer_column
     {
-      class_name: "w-[400px]",
+      col: { class: "w-[400px]" },
       header: :customer,
       data: ->(order) do
         customer_email = order.user&.email

admin/app/components/solidus_admin/orders/show/address/component.html.erb

@@ -4,34 +4,26 @@
   <%= render component("ui/modal").new(title: t(".title.#{@type}"), close_path: solidus_admin.order_path(@order)) do |modal| %>
     <%= form_for @order, url: solidus_admin.send("order_#{@type}_address_path", @order), html: { id: form_id } do |form| %>
       <div class="w-full flex flex-col mb-4">
-        <div class="flex justify-between items-center mb-4">
+        <div class="flex justify-between items-center mb-4 relative">
           <h2 class="text-sm font-semibold">
             <%= t(".subtitle.#{@type}") %>
           </h2>
 
-          <% if @user&.addresses&.any? %>
-            <details class="text-black text-sm" data-controller="details-click-outside" data-<%= stimulus_id %>-target="addresses">
-              <summary
-                class="text-left flex cursor-pointer select-none"
-                data-action="keydown.esc-><%= stimulus_id %>#close"
-              >
-                <%= t(".select_address") %>
-                <%= render component("ui/icon").new(name: 'arrow-down-s-fill', class: 'w-5 h-5') %>
-              </summary>
-
-              <div class="absolute mr-4 right-0 bg-white border border-gray-100 rounded-lg py-2 mt-1 shadow-lg z-10 min-w-[16rem] max-h-[26rem] overflow-y-auto">
-                <% @user.addresses.each do |address| %>
-                  <%= tag.a(
-                        href: solidus_admin.send("order_#{@type}_address_path", @order, address_id: address.id),
-                        class: 'block text-black text-sm hover:bg-gray-50 p-2 mx-2 w-auto rounded-lg',
-                        'data-action': "#{stimulus_id}#close",
-                        'data-turbo-frame': address_frame_id
-                      ) do %>
-                    <%= format_address(address) %>
-                  <% end %>
-                <% end %>
-              </div>
-            </details>
+          <% if @addresses.present? %>
+            <%= render component('ui/dropdown').new(
+              text: t(".select_address"),
+              "data-#{stimulus_id}-target": "addresses",
+              class: "max-h-[26rem] overflow-y-auto"
+            ) do %>
+              <% @addresses.each do |address| %>
+                <%= tag.a(
+                  format_address(address),
+                  href: solidus_admin.send("order_#{@type}_address_path", @order, address_id: address.id),
+                  'data-turbo-frame': address_frame_id,
+                  'data-action': "#{component('ui/dropdown').stimulus_id}#close",
+                ) %>
+              <% end %>
+            <% end %>
           <% end %>
         </div>
 
@@ -46,7 +38,7 @@
 
           <%= render component("ui/forms/checkbox").new(
             name: "#{form.object_name}[#{use_attribute}]",
-            checked: form.object.send("#{@type}_address").new_record? || form.object.bill_address == form.object.ship_address,
+            checked: @address == (@type == 'ship' ? @order.bill_address : @order.ship_address),
             value: '1'
           ) %>
 

admin/app/components/solidus_admin/orders/show/address/component.rb

@@ -9,6 +9,7 @@ def initialize(order:, address:, user: nil, type: 'ship')
     @order = order
     @user = user
     @address = address
+    @addresses = user&.addresses.to_a.reject(&:new_record?)
     @type = validate_address_type(type)
   end
 

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

@@ -71,7 +71,7 @@ def columns
 
   def image_column
     {
-      class_name: "w-[72px]",
+      col: { class: "w-[72px]" },
       header: tag.span('aria-label': t('.product_image'), role: 'text'),
       data: ->(product) do
         image = product.gallery.images.first or return

admin/app/components/solidus_admin/ui/dropdown/component.html.erb

@@ -0,0 +1,50 @@
+<details
+  <%= tag.attributes @attributes %>
+>
+  <summary
+    class="
+      text-black
+      hover:fill-gray-500
+      [[open]_&]:fill-gray-500
+      cursor-pointer
+      flex
+      items-center
+    "
+    title="<%= @text || t(".more") %>"
+    data-action="keydown.esc-><%= stimulus_id %>#close"
+  >
+    <% if @text %>
+      <%= @text %>
+      <%= icon_tag "arrow-down-s-fill", class: SIZES.fetch(@size) %>
+    <% else %>
+      <%= icon_tag "more-line", class: SIZES.fetch(@size) %>
+    <% end %>
+  </summary>
+
+  <div
+    class="
+      absolute
+      border
+      border-gray-100
+      mt-0.5
+      flex
+      flex-col
+      min-w-[10rem]
+      p-2
+      rounded-sm
+      shadow-lg
+      bg-white
+      z-10
+
+      <%= DIRECTIONS.fetch(@direction) %>
+
+      [&>*]:p-2
+      [&>*]:rounded-sm
+      [&>*:hover]:bg-gray-50
+      [&>*]:text-black
+      [&>*]:min-w-fit
+    "
+  >
+    <%= content %>
+  </div>
+</details>

admin/app/components/solidus_admin/ui/dropdown/component.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
+
+export default class extends Controller {
+  connect() {
+    useClickOutside(this)
+  }
+
+  clickOutside() {
+    this.close()
+  }
+
+  close() {
+    this.element.removeAttribute('open')
+  }
+}

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Dropdown::Component < SolidusAdmin::BaseComponent
+  DIRECTIONS = {
+    left: "right-0",
+    right: "left-0",
+  }
+
+  SIZES = {
+    s: "w-5 h-5",
+    m: "w-[22px] h-[22px]",
+  }
+
+  def initialize(text: nil, size: :m, direction: :left, **attributes)
+    @text = text
+    @size = size
+    @attributes = attributes
+    @direction = direction
+
+    @attributes[:"data-controller"] = "#{stimulus_id} #{attributes[:"data-controller"]}"
+    @attributes[:"data-action"] = "turbo:before-cache@window->#{stimulus_id}#close #{attributes[:"data-action"]}"
+    @attributes[:class] = "
+      #{@size == :m ? 'body-text' : 'body-small'}
+      #{@attributes[:class]}
+    "
+  end
+end

admin/app/components/solidus_admin/ui/dropdown/component.yml

@@ -0,0 +1,2 @@
+en:
+  more: "More"

admin/app/components/solidus_admin/ui/panel/component.html.erb

@@ -15,36 +15,10 @@
   data-controller="<%= stimulus_id %>"
 >
   <% if menus? %>
-    <details class="absolute top-0 right-0 m-6">
-      <summary title="<%= t(".more") %>">
-        <%= render component("ui/icon").new(
-          name: "more-line",
-          class: "cursor-pointer w-[22px] h-[22px] hover:fill-gray-500 [[open]_&]:fill-gray-500"
-        ) %>
-      </summary>
-      <div
-        class="
-          body-small
-          absolute
-          border
-          border-gray-100
-          mt-0.5
-          right-0
-          flex
-          min-w-[10rem]
-          flex-col
-          p-2
-          rounded-sm
-          shadow-lg
-          bg-white
-          z-10
-        "
-      >
-        <% menus.each do |menu| %>
-          <%= menu %>
-        <% end %>
-      </div>
-    </details>
+    <%= render component('ui/dropdown').new(
+      size: :s,
+      class: "absolute top-0 right-0 m-6",
+    ).with_content(safe_join(menus)) %>
   <% end %>
 
   <% if @title %>

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

@@ -21,9 +21,9 @@ class SolidusAdmin::UI::Panel::Component < SolidusAdmin::BaseComponent
 
   renders_many :menus, ->(name, url, **args) do
     if args[:method]
-      button_to(name, url, **args, class: "p-2 hover:bg-gray-25 rounded-sm text-black #{args[:class]}")
+      button_to(name, url, **args)
     else
-      link_to(name, url, **args, class: "p-2 hover:bg-gray-25 rounded-sm text-black #{args[:class]}")
+      link_to(name, url, **args)
     end
   end
 

admin/app/components/solidus_admin/ui/table/component.html.erb

@@ -76,7 +76,7 @@
     <table class="table-fixed w-full border-collapse">
       <colgroup>
         <% @columns.each do |column| %>
-          <col class="<%= column.class_name %>">
+          <col <%= tag.attributes(**column.col) if column.col %>">
         <% end %>
       </colgroup>
 
@@ -111,11 +111,13 @@
         <% @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) %>"
-            data-action="click-><%= stimulus_id %>#rowClicked"
-            data-primary-url="<%= @row_url&.call(row) %>"
+            <% if @row_url %>
+              data-action="click-><%= stimulus_id %>#rowClicked"
+              data-<%= stimulus_id %>-url-param="<%= @row_url.call(row) %>"
+            <% end %>
           >
             <% @columns.each do |column| %>
-              <%= render_data_cell(column.data, row) %>
+              <%= render_data_cell(column, row) %>
             <% end %>
           </tr>
         <% end %>

admin/app/components/solidus_admin/ui/table/component.js

@@ -84,14 +84,13 @@ export default class extends Controller {
   }
 
   rowClicked(event) {
-    if (event.target.closest('a') || event.target.tagName === 'BUTTON' || event.target.type === 'checkbox') return
+    // If the user clicked on a link, button, input or summary, skip the row url visit
+    if (event.target.closest("td").contains(event.target.closest("a,select,textarea,button,input,summary"))) return
 
-    const row = event.currentTarget
-
-    if (this.modeValue === 'batch') {
-      this.toggleCheckbox(row)
+    if (this.modeValue === "batch") {
+      this.toggleCheckbox(event.currentTarget)
     } else {
-      this.navigateToRow(row)
+      window.Turbo.visit(event.params.url)
     }
   }
 
@@ -104,12 +103,6 @@ export default class extends Controller {
     }
   }
 
-  navigateToRow(row) {
-    const url = row.dataset.primaryUrl
-
-    if (url) window.location.href = url
-  }
-
   render() {
     const selectedRows = this.checkboxTargets.filter((checkbox) => checkbox.checked)
 

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

@@ -45,7 +45,7 @@ def initialize(
     prev_page_link: nil,
     next_page_link: nil
   )
-    @columns = columns.map { Column.new(**_1) }
+    @columns = columns.map { Column.new(wrap: true, **_1) }
     @batch_actions = batch_actions.map { BatchAction.new(**_1) }
     @filters = filters.map { Filter.new(**_1) }
     @id = id
@@ -86,7 +86,7 @@ def selectable_column
           "aria-label": t('.select_row'),
         )
       },
-      class_name: 'w-[52px]',
+      col: { class: 'w-[52px]' },
     )
   end
 
@@ -148,21 +148,20 @@ def render_header_cell(cell, **attrs)
     }, **attrs)
   end
 
-  def render_data_cell(cell, data)
+  def render_data_cell(column, data)
+    cell = column.data
     cell = cell.call(data) if cell.respond_to?(:call)
     cell = data.public_send(cell) if cell.is_a?(Symbol)
     cell = cell.render_in(self) if cell.respond_to?(:render_in)
+    cell = tag.div(cell, class: "flex items-center gap-1.5 justify-start overflow-hidden") if column.wrap
 
-    tag.td(
-      tag.div(cell, class: "flex items-center gap-1.5"),
-      class: "
-        py-2 px-4 h-10 vertical-align-middle leading-none
-        [tr:last-child_&:first-child]:rounded-bl-lg [tr:last-child_&:last-child]:rounded-br-lg
-      ",
-    )
+    tag.td(cell, class: "
+      py-2 px-4 h-10 vertical-align-middle leading-none
+      [tr:last-child_&:first-child]:rounded-bl-lg [tr:last-child_&:last-child]:rounded-br-lg
+    ")
   end
 
-  Column = Struct.new(:header, :data, :class_name, keyword_init: true)
+  Column = Struct.new(:header, :data, :col, :wrap, keyword_init: true)
   BatchAction = Struct.new(:display_name, :icon, :action, :method, keyword_init: true) # rubocop:disable Lint/StructNewOverride
   Filter = Struct.new(:presentation, :combinator, :attribute, :predicate, :options, keyword_init: true)
   private_constant :Column, :BatchAction, :Filter