elia+rainer/admin/stock-edit: [wip]

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

@@ -30,20 +30,11 @@
             <% @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>
+                  <%= render component("ui/resource_item").new(
+                    thumbnail: (line_item.variant.images.first || line_item.variant.product.gallery.images.first)&.url(:small),
+                    title: line_item.variant.name,
+                    subtitle: "#{line_item.variant.sku}#{line_item.variant.options_text.presence&.prepend("- ")}",
+                  ) %>
                 </td>
                 <td class="px-6 py-4">
                   <%= form_for(line_item, url: solidus_admin.order_line_item_path(@order, line_item), html: {

admin/app/components/solidus_admin/stock_items/edit/component.html.erb

@@ -0,0 +1,81 @@
+<div
+  data-controller="<%= stimulus_id %>"
+  data-<%= stimulus_id %>-initial-count-on-hand-value="<%= @stock_item.count_on_hand_was || @stock_item.count_on_hand %>"
+  data-action="input-><%= stimulus_id %>#updateCountOnHand"
+>
+  <%= render component("ui/modal").new(title: t(".title"), close_path: solidus_admin.stock_items_path(page: params[:page], q: params[:q])) do |modal| %>
+    <%= form_for @stock_item, url: solidus_admin.stock_item_path(@stock_item), html: { id: form_id } do |f| %>
+      <div class="flex flex-col gap-6 pb-4">
+        <div class="flex gap-4">
+          <%= link_to spree.edit_admin_product_variant_path(
+            @stock_item.variant.product,
+            @stock_item.variant,
+          ), class: 'hover:bg-gray-25 rounded p-1 w-1/2 border border-gray-100' do %>
+            <%= render component("ui/resource_item").new(
+              thumbnail:
+                (
+                  @stock_item.variant.images.first ||
+                    @stock_item.variant.product.gallery.images.first
+                )&.url(:small),
+              title: @stock_item.variant.name,
+              subtitle:
+                "#{@stock_item.variant.sku}#{@stock_item.variant.options_text.presence&.prepend(" - ")}",
+            ) %>
+          <% end %>
+          <%= link_to spree.edit_admin_stock_location_path(@stock_item.stock_location), class: 'hover:bg-gray-25 rounded p-1 w-1/2 border border-gray-100' do %>
+            <%= render component("ui/resource_item").new(
+              title: @stock_item.stock_location.name,
+              subtitle: "#{Spree::StockLocation.model_name.human} #{@stock_item.stock_location.code}",
+            ) %>
+          <% end %>
+        </div>
+
+        <%= render component("ui/forms/field").text_field(
+          f,
+          :count_on_hand,
+          disabled: true,
+          value: @stock_item.count_on_hand_was || @stock_item.count_on_hand,
+          "data-#{stimulus_id}-target": 'countOnHand',
+        ) %>
+        <%= render component("ui/forms/field").new(
+          label: t(".quantity_adjustment"),
+          hint: t(".quantity_adjustment_hint_html"),
+        ) do %>
+          <%= render component("ui/forms/input").new(
+            value: params[:quantity_adjustment] || 0,
+            name: :quantity_adjustment,
+            type: :number,
+            step: 1,
+            "data-#{stimulus_id}-target": 'quantityAdjustment',
+          ) %>
+        <% end %>
+
+        <%= render component("ui/forms/switch_field").new(
+          name: "#{f.object_name}[backorderable]",
+          label: Spree::StockItem.human_attribute_name(:backorderable),
+          error: f.object.errors[:backorderable],
+          hint: t(".backorderable_hint_html"),
+          checked: f.object.backorderable?,
+          include_hidden: true,
+        ) %>
+      </div>
+    <% end %>
+
+    <% modal.with_actions do %>
+      <%= render component("ui/button").new(
+        tag: :a,
+        scheme: :secondary,
+        text: t(".cancel"),
+        href: solidus_admin.stock_items_path(page: params[:page], q: params[:q]),
+      ) %>
+
+      <%= render component("ui/button").new(
+        tag: :button,
+        text: t(".submit"),
+        form: form_id,
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render component("stock_items/index").new(page: @page) %>
+</div>

admin/app/components/solidus_admin/stock_items/edit/component.js

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    initialCountOnHand: Number,
+  }
+
+  static targets = ['countOnHand', 'quantityAdjustment']
+
+  connect() {
+    this.updateCountOnHand()
+  }
+
+  updateCountOnHand() {
+    this.countOnHandTarget.value = parseInt(this.initialCountOnHandValue) + parseInt(this.quantityAdjustmentTarget.value)
+  }
+}

admin/app/components/solidus_admin/stock_items/edit/component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::StockItems::Edit::Component < SolidusAdmin::BaseComponent
+  def initialize(stock_item:, page:)
+    @stock_item = stock_item
+    @page = page
+  end
+
+  def title
+    [
+      "#{Spree::StockLocation.model_name.human}: #{@stock_item.stock_location.name}",
+    ].join(' / ')
+  end
+
+  def form_id
+    "#{stimulus_id}-#{dom_id(@stock_item)}"
+  end
+end

admin/app/components/solidus_admin/stock_items/edit/component.yml

@@ -0,0 +1,10 @@
+en:
+  submit: "Save"
+  cancel: "Cancel"
+  title: "Edit Stock Levels"
+  quantity_adjustment: "Quantity Adjustment"
+  quantity_adjustment_hint_html: |
+    Enter a positive number to increase the stock level, or a negative number to decrease the stock level.
+  backorderable_hint_html: |
+    Enable to allow customers to place orders even when the product is out of stock.<br>
+    When ordering the product customers will know that the product will be delivered at a later date, once it becomes available again.

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

@@ -12,6 +12,7 @@
       next: next_page_path,
       columns: columns,
       batch_actions: batch_actions,
+      url: -> { solidus_admin.edit_stock_item_path(_1, page: params[:page], q: params[:q]) },
     },
     search: {
       name: :q,

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

@@ -71,13 +71,14 @@ def columns
       stock_location_column,
       back_orderable_column,
       count_on_hand_column,
+      stock_movements_column,
     ]
   end
 
   def image_column
     {
       col: { class: "w-[72px]" },
-      header: tag.span('aria-label': t('.image'), role: 'text'),
+      header: tag.span('aria-label': Spree::Image.model_name.human, role: 'text'),
       data: ->(stock_item) do
         image = stock_item.variant.gallery.images.first or return
 
@@ -127,8 +128,29 @@ def variant_column
   def stock_location_column
     {
       header: :stock_location,
-      data: ->(stock_item) do
-        link_to stock_item.stock_location.name, spree.admin_stock_location_stock_movements_path(stock_item.stock_location.id, q: { variant_sku_eq: stock_item.variant.sku })
+      data: ->(stock_item) { stock_item.stock_location.name },
+    }
+  end
+
+  # Cache the stock movement counts to avoid N+1 queries
+  def stock_movement_counts
+    @stock_movement_counts ||= Spree::StockMovement.where(stock_item_id: @page.records.select(:id)).group(:stock_item_id).count
+  end
+
+  def stock_movements_column
+    {
+      header: :stock_movements,
+      data: -> do
+        count = stock_movement_counts[_1.id] || 0
+
+        link_to(
+          "#{count} #{Spree::StockMovement.model_name.human(count: count).downcase}",
+          spree.admin_stock_location_stock_movements_path(
+            _1.stock_location.id,
+            q: { variant_sku_eq: _1.variant.sku },
+          ),
+          class: 'body-link'
+        )
       end
     }
   end
@@ -146,7 +168,8 @@ def count_on_hand_column
     {
       header: :count_on_hand,
       data: ->(stock_item) do
-        content_tag :div, stock_item.count_on_hand
+        content_tag :div,
+        stock_item.count_on_hand
       end
     }
   end

admin/app/components/solidus_admin/ui/forms/field/component.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::UI::Forms::Field::Component < SolidusAdmin::BaseComponent
+  extend SolidusAdmin::ComponentsHelper
+
   def initialize(label:, hint: nil, tip: nil, error: nil, input_attributes: nil, **attributes)
     @label = label
     @hint = hint
@@ -70,6 +72,25 @@ def self.text_area(form, method, object: nil, hint: nil, tip: nil, size: :m, **a
     )
   end
 
+  def self.toggle(form, method, object: nil, hint: nil, tip: nil, size: :m, **attributes)
+    object_name, object, label, errors = extract_form_details(form, object, method)
+
+    new(
+      label: label,
+      hint: hint,
+      tip: tip,
+      error: errors,
+    ).with_content(
+      component('ui/forms/switch').new(
+        name: "#{object_name}[#{method}]",
+        size: size,
+        checked: object.public_send(method),
+        include_hidden: true,
+        **attributes,
+      )
+    )
+  end
+
   def self.extract_form_details(form, object, method)
     if form.is_a?(String)
       object_name = form

admin/app/components/solidus_admin/ui/forms/switch/component.rb

@@ -6,34 +6,38 @@ class SolidusAdmin::UI::Forms::Switch::Component < SolidusAdmin::BaseComponent
     m: 'w-10 h-6 after:w-5 after:h-5 after:checked:translate-x-4',
   }.freeze
 
-  def initialize(size: :m, **attributes)
+  def initialize(size: :m, include_hidden: false, **attributes)
     @size = size
     @attributes = attributes
-  end
+    @include_hidden = include_hidden
+    @attributes[:class] = "
+      #{SIZES.fetch(@size)}
+      rounded-full after:rounded-full
+      appearance-none	inline-block relative p-0.5 cursor-pointer
 
-  def call
-    tag.input(
-      type: 'checkbox',
-      class: "
-        #{SIZES.fetch(@size)}
-        rounded-full after:rounded-full
-        appearance-none	inline-block relative p-0.5 cursor-pointer
+      outline-none
+      focus:ring focus:ring-gray-300 focus:ring-0.5 focus:ring-offset-1
+      active:ring active:ring-gray-300 active:ring-0.5 active:ring-offset-1
 
-        outline-none
-        focus:ring focus:ring-gray-300 focus:ring-0.5 focus:ring-offset-1
-        active:ring active:ring-gray-300 active:ring-0.5 active:ring-offset-1
+      disabled:cursor-not-allowed
+      after:top-0 after:left-0
+      after:content-[''] after:block
+      after:transition-all after:duration-300 after:ease-in-out
 
-        disabled:cursor-not-allowed
-        after:top-0 after:left-0
-        after:content-[''] after:block
-        after:transition-all after:duration-300 after:ease-in-out
+      bg-gray-200 after:bg-white
+      hover:bg-gray-300
+      checked:bg-gray-500 checked:hover:bg-gray-70
+      disabled:opacity-40
+      #{attributes[:class]}
+    "
+  end
 
-        bg-gray-200 after:bg-white
-        hover:bg-gray-300
-        checked:bg-gray-500 checked:hover:bg-gray-70
-        disabled:opacity-40
-      ",
+  def call
+    input = tag.input(
+      type: 'checkbox',
       **@attributes,
     )
+
+    @include_hidden ? hidden_field_tag(@attributes.fetch(:name), false) + input : input
   end
 end

admin/app/components/solidus_admin/ui/forms/switch_field/component.html.erb

@@ -0,0 +1,20 @@
+<label class="flex flex-wrap items-center gap-2 w-full border border-gray-100 rounded px-4 py-2">
+  <div class="flex gap-1 items-center grow py-2">
+    <span class="text-gray-700 body-tiny-bold body-text-bold"><%= @label %></span>
+
+    <%= render component("ui/toggletip").new(text: @tip) if @tip.present? %>
+  </div>
+
+  <%= render component("ui/forms/switch").new(**@attributes) %>
+
+  <% if @hint.present? || @error.present? %>
+    <div
+      class="
+        w-full body-small [:disabled~&]:text-gray-300 text-gray-500 flex gap-1 flex-col pt-2 pb-4
+      "
+    >
+      <%= tag.span @hint if @hint.present? %>
+      <%= tag.span safe_join(@error, tag.br), class: "text-red-400" if @error.present? %>
+    </div>
+  <% end %>
+</label>

admin/app/components/solidus_admin/ui/forms/switch_field/component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::SwitchField::Component < SolidusAdmin::BaseComponent
+  def initialize(label:, error:, hint:, **attributes)
+    @label = label
+    @error = error
+    @hint = hint
+    @attributes = attributes
+  end
+end

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

@@ -0,0 +1,10 @@
+<div class="flex gap-2 grow">
+  <%= render component("ui/thumbnail").new(
+    src: @thumbnail,
+    alt: @title,
+  ) if @thumbnail %>
+  <div class="flex-col">
+    <div class="leading-5 text-black body-small-bold"><%= @title %></div>
+    <div class="leading-5 text-gray-500 body-small"><%= @subtitle %></div>
+  </div>
+</div>

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

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::ResourceItem::Component < SolidusAdmin::BaseComponent
+  def initialize(title:, subtitle:, thumbnail: nil)
+    @thumbnail = thumbnail
+    @title = title
+    @subtitle = subtitle
+  end
+end