Merge pull request #5441 from solidusio/elia/admin/order-cart-component

Add an `orders/cart` component

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

@@ -0,0 +1,118 @@
+<div
+  class="w-full relative overflow-visible"
+  data-controller="<%= stimulus_id %>"
+  data-<%= stimulus_id %>-products-url-value="<%= solidus_admin.variants_for_order_path(@order) %>"
+  data-action="
+    keydown-><%= stimulus_id %>#selectResult
+  "
+  data-<%= stimulus_id %>-loading-text-value="<%= t('.loading') %>"
+  data-<%= stimulus_id %>-initial-text-value="<%= t('.initial') %>"
+  data-<%= stimulus_id %>-empty-text-value="<%= t('.empty') %>"
+>
+  <%= render component('ui/panel').new do |panel| %>
+    <div>
+      <div class="peer">
+      <%= render component("ui/forms/search_field").new(
+        "data-action": "#{stimulus_id}#search focus->#{stimulus_id}#showResults #{stimulus_id}#showResults",
+        placeholder: t(".search_placeholder"),
+        "data-#{stimulus_id}-target": "searchField",
+      ) %>
+      </div>
+
+      <%# results popover %>
+      <details class="px-6 relative overflow-visible">
+        <summary class="hidden"></summary>
+        <div
+          class="
+            absolute
+            left-0
+            top-2
+            bg-white
+            z-30
+            w-full
+            rounded-lg
+            shadow
+            border
+            border-gray-100
+            p-2
+            flex-col
+            gap-1
+            max-h-screen
+            overflow-y-auto
+          "
+          data-<%= stimulus_id %>-target="results"
+        >
+        </div>
+      </details>
+
+    </div>
+
+    <%# line items table %>
+    <div class="rounded-b-lg -mx-6 -mb-6 overflow-hidden">
+      <table class="table-auto w-full">
+        <thead>
+          <tr class="border-gray-100 border-t">
+            <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none">Product</th>
+            <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">Quantity</th>
+            <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">Price</th>
+            <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16"><span class="sr-only">Actions</span></th>
+          </tr>
+        </thead>
+        <tbody>
+          <% @order.line_items.each do |line_item| %>
+            <tr class="border-gray-100 border-t">
+              <td class="px-6 py-4">
+                <div class="flex gap-2 grow">
+                  <% variant = line_item.variant %>
+                  <%= render component("ui/thumbnail").new(
+                    src: (variant.images.first || variant.product.gallery.images.first)&.url(:small),
+                    alt: variant.name
+                  ) %>
+                  <div class="flex-col">
+                    <div class="leading-5 text-black body-small-bold"><%= variant.name %></div>
+                    <div class="leading-5 text-gray-500 body-small">
+                      SKU: <%= variant.sku %>
+                      <%= variant.options_text.presence&.prepend("- ") %>
+                    </div>
+                  </div>
+                </div>
+              </td>
+              <td class="px-6 py-4">
+                <%= form_for(line_item, url: solidus_admin.order_line_item_path(@order, line_item), html: {
+                  "data-controller": "readonly-when-submitting"
+                }) do |f| %>
+                  <%= render component("ui/forms/input").new(
+                    name: "#{f.object_name}[quantity]",
+                    type: :number,
+                    value: line_item.quantity,
+                    "aria-label": "Quantity",
+                    min: 0,
+                    class: "!w-16 inline-block",
+                    "data-action": "input->#{stimulus_id}#updateLineItem",
+                  ) %>
+                  <% render component("ui/button").new(type: :submit, text: "Update", class: "inline-block") %>
+                <% end %>
+              </td>
+              <td class="px-6 py-4">
+                <span class="text-gray-500 body-small"><%= line_item.single_money.to_html %></span>
+              </td>
+              <td class="px-6 py-4 text-right">
+                <%= form_for(line_item, url: solidus_admin.order_line_item_path(@order, line_item), method: :delete) do |f| %>
+                  <%= render component('ui/button').new(
+                    scheme: :ghost,
+                    size: :s,
+                    title: t("spree.delete"),
+                    icon: 'close-line',
+                    "data-controller": "confirm",
+                    "data-confirm-text-value": t("spree.are_you_sure"),
+                  ) %>
+                <% end %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+
+  <% end %>
+</div>

admin/app/components/solidus_admin/orders/cart/component.js

@@ -0,0 +1,135 @@
+import { Controller } from "@hotwired/stimulus"
+import { useClickOutside, useDebounce } from "stimulus-use"
+
+const QUERY_KEY = "q[name_or_variants_including_master_sku_cont]"
+
+export default class extends Controller {
+  static targets = ["result", "results", "searchField"]
+  static values = {
+    results: String,
+    productsUrl: String,
+    loadingText: String,
+    initialText: String,
+    emptyText: String,
+  }
+  static debounces = [
+    {
+      name: "requestSubmitForLineItems",
+      wait: 500,
+    },
+    "search",
+  ]
+
+  get query() {
+    return this.searchFieldTarget.value
+  }
+
+  get selectedResult() {
+    // Keep the index within boundaries
+    if (this.selectedIndex < 0) this.selectedIndex = 0
+    if (this.selectedIndex >= this.resultTargets.length) this.selectedIndex = this.resultTargets.length - 1
+
+    return this.resultTargets[this.selectedIndex]
+  }
+
+  connect() {
+    useClickOutside(this)
+    useDebounce(this)
+
+    this.selectedIndex = 0
+    this.lineItemsToBeSubmitted = []
+
+    if (this.query) {
+      this.showResults()
+      this.search()
+    }
+  }
+
+  selectResult(event) {
+    switch (event.key) {
+      case "Enter":
+        event.preventDefault()
+        this.selectedResult?.click()
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        this.selectedIndex -= 1
+        this.render()
+        break
+      case "ArrowDown":
+        event.preventDefault()
+        this.selectedIndex += 1
+        this.render()
+        break
+    }
+  }
+
+  clickOutside() {
+    this.openResults = false
+    this.render()
+  }
+
+  async search() {
+    const query = this.query
+
+    if (query) {
+      this.resultsValue = this.loadingTextValue
+      this.render()
+
+      this.resultsValue = (await (await fetch(`${this.productsUrlValue}?${QUERY_KEY}=${query}`)).text()) || this.emptyTextValue
+      this.render()
+    } else {
+      this.resultsValue = this.initialTextValue
+      this.render()
+    }
+  }
+
+  showResults() {
+    this.openResults = true
+    this.render()
+  }
+
+  updateLineItem(event) {
+    if (!this.lineItemsToBeSubmitted.includes(event.currentTarget)) {
+      this.lineItemsToBeSubmitted.push(event.currentTarget)
+    }
+
+    this.requestSubmitForLineItems()
+  }
+
+  // This is a workaround to permit using debounce when needing to pass a parameter
+  requestSubmitForLineItems() {
+    this.lineItemsToBeSubmitted.forEach((lineItem) => {
+      lineItem.form.requestSubmit()
+    })
+    this.lineItemsToBeSubmitted = []
+  }
+
+  render() {
+    let resultsHtml = this.resultsValue
+
+    if (this.renderedHtml !== resultsHtml) {
+      this.renderedHtml = resultsHtml
+      this.resultsTarget.innerHTML = resultsHtml
+    }
+
+    if (this.openResults && resultsHtml && this.query) {
+      if (!this.resultsTarget.parentNode.open) this.selectedIndex = 0
+
+      for (const result of this.resultTargets) {
+        if (result === this.selectedResult) {
+          if (!result.hasAttribute("aria-selected") && result.scrollIntoViewIfNeeded) {
+            // This is a non-standard method, but it's supported by all major browsers
+            result.scrollIntoViewIfNeeded()
+          }
+          result.setAttribute("aria-selected", true)
+        } else {
+          result.removeAttribute("aria-selected")
+        }
+      }
+      this.resultsTarget.parentNode.open = true
+    } else {
+      this.resultsTarget.parentNode.open = false
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Orders::Cart::Component < SolidusAdmin::BaseComponent
+  def initialize(order:)
+    @order = order
+  end
+end

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

@@ -0,0 +1,7 @@
+# Add your component translations here.
+# Use the translation in the example in your template with `t(".hello")`.
+en:
+  search_placeholder: "Find a variant by name or SKU"
+  loading: "Loading..."
+  initial: "Type to search"
+  empty: "No results"

admin/app/components/solidus_admin/orders/cart/result/component.html.erb

@@ -0,0 +1,34 @@
+<%= form_for(@order.line_items.build(variant: @variant), url: solidus_admin.order_line_items_path(@order), method: :post, html: {
+  "data-controller": "readonly-when-submitting #{stimulus_id}",
+  "data-action": "click->#{stimulus_id}#submit",
+  "data-#{component('orders/cart').stimulus_id}-target": "result",
+  class: "
+    rounded
+    p-2
+    items-center
+    flex
+    hover:bg-gray-25
+    aria-selected:bg-gray-25
+    cursor-pointer
+  "
+}) do |f| %>
+  <%= hidden_field_tag("#{f.object_name}[variant_id]", @variant.id) %>
+  <div class="flex gap-2 grow">
+    <%= render component("ui/thumbnail").new(
+      src: @image&.url(:small),
+      alt: @variant.name
+    ) %>
+    <div class="flex-col">
+      <div class="leading-5 text-black body-small-bold"><%= @variant.name %></div>
+      <div class="leading-5 text-gray-500 body-small">
+        SKU:
+        <%= @variant.sku %>
+        <%= @variant.options_text.presence&.prepend("- ") %>
+      </div>
+    </div>
+  </div>
+  <div class="flex gap-2 items-center">
+    <span class="text-gray-500 body-small"><%= render component("products/stock").from_variant(@variant) %></span>
+    <span class="text-black body-small"><%= @variant.display_price.to_html %></span>
+  </div>
+<% end %>

admin/app/components/solidus_admin/orders/cart/result/component.js

@@ -0,0 +1,7 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  submit(event) {
+    event.currentTarget.requestSubmit()
+  }
+}

admin/app/components/solidus_admin/orders/cart/result/component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Orders::Cart::Result::Component < SolidusAdmin::BaseComponent
+  with_collection_parameter :variant
+
+  def initialize(order:, variant:)
+    @order = order
+    @variant = variant
+    @image = @variant.images.first || @variant.product.gallery.images.first
+  end
+end

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

@@ -8,7 +8,7 @@
       <%= render component("ui/button").new(
         tag: :a,
         text: t('.create_order'),
-        href: solidus_admin.new_order_path,
+        href: spree.new_admin_order_path,
         icon: "add-line",
       ) %>
     </div>

admin/app/components/solidus_admin/orders/new/component.html.erb → admin/app/components/solidus_admin/orders/show/component.html.erb

@@ -1,12 +1,12 @@
 <%= page do %>
   <%= page_header do %>
-    <%= page_header_back solidus_admin.orders_path %>
-
-    <%= page_header_title t(".create_order") %>
-
+    <%= page_header_back(solidus_admin.orders_path) %>
+    <%= page_header_title(t('.title', number: @order.number)) %>
     <%= page_header_actions do %>
       <%= render component("ui/button").new(tag: :button, scheme: :secondary, text: t(".discard"), form: form_id) %>
       <%= render component("ui/button").new(tag: :button, text: t(".save"), form: form_id) %>
     <% end %>
   <% end %>
+
+  <%= render component('orders/cart').new(order: @order) %>
 <% end %>

admin/app/components/solidus_admin/orders/new/component.rb → admin/app/components/solidus_admin/orders/show/component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class SolidusAdmin::Orders::New::Component < SolidusAdmin::BaseComponent
+class SolidusAdmin::Orders::Show::Component < SolidusAdmin::BaseComponent
   include SolidusAdmin::Layout::PageHelpers
 
   def initialize(order:)

admin/app/components/solidus_admin/orders/new/component.yml → admin/app/components/solidus_admin/orders/show/component.yml

@@ -1,6 +1,6 @@
 # Add your component translations here.
 # Use the translation in the example in your template with `t(".hello")`.
 en:
-  create_order: Create Order
   save: Save
   discard: Discard
+  title: "Order %{number}"

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

@@ -16,6 +16,10 @@ def initialize(name:, **attrs)
 
     # Hide the icon from screen readers by default.
     @attrs['aria-hidden'] = true unless @attrs.key?('aria-hidden')
+
+    # Default icons without style to 16x16, mostly useful in test snapshots.
+    @attrs['width'] = '16'
+    @attrs['height'] = '16'
   end
 
   def call

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

@@ -1,7 +1,7 @@
 <div
   class="
     flex items-center justify-between
-    rounded inline-block px-3 py-2
+    rounded px-3 py-2
     transform translate-y-full opacity-0 transition-all duration-500
     <%= SCHEMES.fetch(@scheme.to_sym).join(' ') %>
   "

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

@@ -13,6 +13,6 @@ class SolidusAdmin::UI::Toast::Component < SolidusAdmin::BaseComponent
   def initialize(text:, icon: nil, scheme: :default)
     @text = text
     @icon = icon
-    @scheme = scheme.to_sym
+    @scheme = scheme
   end
 end