[wip] Add orders/show/shipment component

Author: rainerdema

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

@@ -1,11 +1,14 @@
 <div class="<%= stimulus_id %>" data-controller="<%= stimulus_id %>">
   <div class="rounded p-2">
     <%= render component('ui/panel').new do |panel| %>
+      <% panel.with_menu t(".edit_shipment"), solidus_admin.order_shipments_path(@order, shipment_id: @shipment.id) %>
+
       <% panel.with_section(wide: true, high: true) do %>
         <section class="border-gray-100 border-t w-full first-of-type:border-t-0 p-6">
           <h2>
             <span class="text-xl">
-              #<%= @index %>: <%= @shipment.number %> from <%= @shipment.stock_location.name %> <%= render component('ui/badge').new(name: @shipment.state.titleize) %>
+              <%= t('.title', index: @index, number: @shipment.number, location: @shipment.stock_location.name) %>
+              <%= render component('ui/badge').new(name: @shipment.state.titleize) %>
             </span>
           </h2>
         </section>
@@ -16,10 +19,20 @@
           <table class="table-auto w-full">
             <thead>
               <tr>
-                <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none"><%= t(".product") %></th>
-                <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16"><%= t(".quantity") %></th>
-                <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16 whitespace-nowrap"><%= t(".total") %></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"><%= t(".actions") %></span></th>
+                <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none">
+                  <%= t(".product") %>
+                </th>
+                <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">
+                  <%= t(".quantity") %>
+                </th>
+                <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16 whitespace-nowrap">
+                  <%= t(".total") %>
+                </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">
+                    <%= t(".actions") %>
+                  </span>
+                </th>
               </tr>
             </thead>
             <tbody>
@@ -75,8 +88,6 @@
                         </span>
                         <%= @shipment.shipping_method.name %> - <%= @shipment.display_cost %>
                       </label>
-
-                      <%= render component("ui/icon").new(name: 'edit-line', class: 'w-5 h-5 cursor-pointer') %>
                     </li>
                     <li class="flex justify-between py-1.5">
                       <label class="flex flex-col w-full py-1.5">
@@ -85,8 +96,6 @@
                         </span>
                         <%= @shipment.tracking || t(".none") %>
                       </label>
-
-                      <%= render component("ui/icon").new(name: 'edit-line', class: 'w-5 h-5 cursor-pointer') %>
                     </li>
                   </ul>
                 </td>

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

@@ -1,8 +1,11 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::Orders::Show::Shipment::Component < SolidusAdmin::BaseComponent
+  include SolidusAdmin::Layout::PageHelpers
+
   def initialize(shipment:, index:)
     @shipment = shipment
+    @order = shipment.order
     @index = index
   end
 

admin/app/components/solidus_admin/orders/show/shipment/component.yml

@@ -1,9 +1,11 @@
 en:
+  title: "#%{index}: %{number} from %{location}"
   product: Product
   quantity: Quantity
   total: Total Price
   actions: Actions
   none: No tracking details provided
+  edit_shipment: Edit shipment
   inventory_states:
     backordered: Backordered
     canceled: Canceled

admin/app/components/solidus_admin/orders/show/shipment/edit/component.html.erb

@@ -0,0 +1,18 @@
+<div class="<%= stimulus_id %>">
+  <%= render component("orders/show").new(order: @order) %>
+  <%= render component("ui/modal").new(title: t(".title", number: @shipment.number), close_path: close_path) do |modal| %>
+    <%= form_for @shipment, url: solidus_admin.order_shipments_path(@order, shipment_id: @shipment.id), html: { id: form_id } do |f| %>
+      <%= render component("ui/forms/field").text_field(f, :tracking) %>
+      <%= render component("ui/forms/field").select(
+        f,
+        :selected_shipping_rate_id,
+        @shipment.shipping_rates.map { |sr| [sr.shipping_method.name, sr.id] },
+      ) %>
+    <% end %>
+
+    <% modal.with_actions do %>
+      <%= render component("ui/button").new(tag: :a, scheme: :secondary, href: close_path, type: :submit, text: t('.cancel')) %>
+      <%= render component("ui/button").new(form: form_id, type: :submit, text: t('.submit')) %>
+    <% end %>
+  <% end %>
+</div>

admin/app/components/solidus_admin/orders/show/shipment/edit/component.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['output']
+
+  typed(event) {
+    this.text = event.currentTarget.value
+    this.render()
+  }
+
+  render() {
+    this.outputTarget.innerText = this.text
+  }
+}

admin/app/components/solidus_admin/orders/show/shipment/edit/component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Orders::Show::Shipment::Edit::Component < SolidusAdmin::BaseComponent
+  include SolidusAdmin::Layout::PageHelpers
+
+  def initialize(shipment:)
+    @order = shipment.order
+    @shipment = shipment
+  end
+
+  def form_id
+    dom_id(@order, "#{stimulus_id}_shipment_form_#{@shipment.id}")
+  end
+
+  def close_path
+    @close_path ||= solidus_admin.order_path(@order)
+  end
+end

admin/app/components/solidus_admin/orders/show/shipment/edit/component.yml

@@ -0,0 +1,4 @@
+en:
+  title: "Edit shipment %{number}"
+  submit: "Save"
+  cancel: "Cancel"

admin/app/controllers/solidus_admin/shipments_controller.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::ShipmentsController < SolidusAdmin::BaseController
+  include Spree::Core::ControllerHelpers::StrongParameters
+
+  before_action :load_order, :load_shipment, only: [:show, :update]
+
+  def show
+    render component('orders/show/shipment/edit').new(shipment: @shipment)
+  end
+
+  def update
+    if @shipment.update_attributes_and_order(shipment_params)
+      redirect_to order_path(@order), status: :see_other, notice: t('.success')
+    else
+      flash.now[:error] = @order.errors[:base].join(", ") if @order.errors[:base].any?
+
+      respond_to do |format|
+        format.html do
+          render component('orders/show/shipment/edit').new(order: @order), status: :unprocessable_entity
+        end
+      end
+    end
+  end
+
+  private
+
+  def load_order
+    @order = Spree::Order.find_by!(number: params[:order_id])
+  end
+
+  def load_shipment
+    @shipment = @order.shipments.find_by(id: params[:shipment_id])
+  end
+
+  def shipment_params
+    if params[:shipment] && !params[:shipment].empty?
+      params.require(:shipment).permit(permitted_shipment_attributes)
+    else
+      {}
+    end
+  end
+
+  def authorization_subject
+    @order || Spree::Order
+  end
+end

admin/config/locales/shipments.en.yml

@@ -0,0 +1,7 @@
+en:
+  solidus_admin:
+    shipments:
+      title: "Shipments"
+      update:
+        success: "Shipment was updated successfully"
+        error: "Shipment could not be updated"

admin/config/routes.rb

@@ -38,6 +38,7 @@
     resource :customer
     resource :ship_address, only: [:show, :edit, :update], controller: "addresses", type: "ship"
     resource :bill_address, only: [:show, :edit, :update], controller: "addresses", type: "bill"
+    resource :shipments
 
     member do
       get :variants_for

admin/lib/solidus_admin/configuration.rb

@@ -44,7 +44,7 @@ class Configuration < Spree::Preferences::Configuration
     #                     Setting this to `true` enables access to alpha stage features that might still be in testing or development.
     #                     Use with caution, as these features may not be fully stable or complete.
     #                     Default: false
-    preference :enable_alpha_features, :boolean, default: false
+    preference :enable_alpha_features, :boolean, default: true
 
     alias enable_alpha_features? enable_alpha_features
 

admin/spec/components/previews/solidus_admin/orders/show/shipment/edit/component_preview.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# @component "orders/show/shipment/edit"
+class SolidusAdmin::Orders::Show::Shipment::Edit::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  def overview
+    render_with_template
+  end
+
+  # @param shipment text
+  def playground(shipment: "shipment")
+    render component("orders/show/shipment/edit").new(shipment: shipment)
+  end
+end

admin/spec/components/previews/solidus_admin/orders/show/shipment/edit/component_preview/overview.html.erb

@@ -0,0 +1,7 @@
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    Scenario 1
+  </h6>
+
+  <%= render current_component.new(shipment: "shipment") %>
+</div>

admin/spec/components/solidus_admin/orders/show/shipment/edit/component_spec.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::Orders::Show::Shipment::Edit::Component, type: :component do
+  it "renders the overview preview" do
+    render_preview(:overview)
+  end
+
+  # it "renders something useful" do
+  #   render_inline(described_class.new(shipment: "shipment"))
+  #
+  #   expect(page).to have_text "Hello, components!"
+  #   expect(page).to have_css '.value'
+  # end
+end