[Admin] Open modal content remotely

admin/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "trailingComma": "es5",
+  "semi": false
+}

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

@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static values = {
-    cookie: String
+    cookie: String,
   }
 
   setCookie(event) {

admin/app/components/solidus_admin/layout/page_helpers.rb

@@ -2,7 +2,7 @@
 
 module SolidusAdmin::Layout::PageHelpers
   def page(**attrs, &block)
-    tag.div(capture(&block), class: "px-4 relative", "data-controller": stimulus_id, **attrs) +
+    tag.div(capture(&block), class: "px-4 relative", "data-controller": attrs.fetch(:stimulus_id, stimulus_id), **attrs) +
       tag.div(render(component("layout/feedback").new), class: "flex justify-center py-10")
   end
 

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

@@ -1,9 +1,9 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["addresses"]
 
   close() {
-    this.addressesTarget.removeAttribute('open')
+    this.addressesTarget.removeAttribute("open")
   }
 }

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

@@ -1,7 +1,7 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   closeMenus() {
-    this.element.querySelectorAll('details').forEach(details => details.removeAttribute('open'))
+    this.element.querySelectorAll("details").forEach((details) => details.removeAttribute("open"))
   }
 }

admin/app/components/solidus_admin/orders/show/customer_search/component.js

@@ -1,14 +1,15 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static values = { customersUrl: String }
 
   async search({ detail: { query, controller } }) {
-    controller.resultsValue =
-      (await (await fetch(`${this.customersUrlValue}?q[name_or_variants_including_master_sku_cont]=${query}`)).text())
+    controller.resultsValue = await (
+      await fetch(`${this.customersUrlValue}?q[name_or_variants_including_master_sku_cont]=${query}`)
+    ).text()
   }
 
   submit(event) {
-    event.detail.resultTarget.querySelector('form').submit()
+    event.detail.resultTarget.querySelector("form").submit()
   }
 }

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

@@ -1,5 +1,5 @@
-<%= turbo_frame_tag :edit_shipping_category_modal do %>
-  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+<%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+  <%= turbo_frame_tag :edit_shipping_category_modal do %>
     <%= form_for @shipping_category, url: solidus_admin.shipping_category_path(@shipping_category), html: { id: form_id } do |f| %>
       <div class="flex flex-col gap-6 pb-4">
         <%= render component("ui/forms/field").text_field(f, :name) %>
@@ -13,4 +13,3 @@
     <% end %>
   <% end %>
 <% end %>
-<%= render component("shipping_categories/index").new(page: @page) %>

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

@@ -5,35 +5,20 @@ def model_class
     Spree::ShippingCategory
   end
 
-  def actions
-    render component("ui/button").new(
-      tag: :a,
-      text: t('.add'),
-      href: spree.new_admin_shipping_category_path,
-      icon: "add-line",
-      class: "align-self-end w-full",
-    )
-  end
-
   def page_actions
     render component("ui/button").new(
       tag: :a,
       text: t('.add'),
-      href: solidus_admin.new_shipping_category_path, data: { turbo_frame: :new_shipping_category_modal },
+      href: solidus_admin.new_shipping_category_path, data: {
+        action: "click->ui--pages--index#openModal"
+      },
       icon: "add-line",
       class: "align-self-end w-full",
     )
   end
 
-  def turbo_frames
-    %w[
-      new_shipping_category_modal
-      edit_shipping_category_modal
-    ]
-  end
-
-  def row_url(shipping_category)
-    spree.edit_admin_shipping_category_path(shipping_category, _turbo_frame: :edit_shipping_category_modal)
+  def edit_url(shipping_category)
+    spree.edit_admin_shipping_category_path(shipping_category)
   end
 
   def search_key
@@ -57,7 +42,14 @@ def batch_actions
 
   def columns
     [
-      :name
+      {
+        header: :name,
+        data: ->(shipping_category) do
+          link_to shipping_category.name, edit_url(shipping_category),
+            data: { action: "click->ui--pages--index#openModal" },
+            class: "body-link"
+        end
+      },
     ]
   end
 end

admin/app/components/solidus_admin/shipping_categories/new/component.html.erb

@@ -1,5 +1,5 @@
-<%= turbo_frame_tag :new_shipping_category_modal do %>
-  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+<%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+  <%= turbo_frame_tag :new_shipping_category_modal do %>
     <%= form_for @shipping_category, url: solidus_admin.shipping_categories_path(page: params[:page], q: params[:q]), html: { id: form_id } do |f| %>
       <div class="flex flex-col gap-6 pb-4">
         <%= render component("ui/forms/field").text_field(f, :name) %>
@@ -13,5 +13,3 @@
     <% end %>
   <% end %>
 <% end %>
-
-<%= render component("shipping_categories/index").new(page: @page) %>

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

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

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

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

admin/app/components/solidus_admin/ui/forms/address/component.js

@@ -1,4 +1,4 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["country", "state", "stateName", "stateWrapper", "stateNameWrapper"]
@@ -7,8 +7,8 @@ export default class extends Controller {
     const countryId = this.countryTarget.value
 
     fetch(`/admin/countries/${countryId}/states`)
-      .then(response => response.json())
-      .then(data => {
+      .then((response) => response.json())
+      .then((data) => {
         this.updateStateOptions(data)
       })
   }
@@ -30,13 +30,12 @@ export default class extends Controller {
     const stateSelect = this.stateTarget
     const stateName = this.stateNameTarget
 
-
     if (showSelect) {
       // Show state select dropdown.
       stateSelect.disabled = false
       stateName.value = ""
-      stateWrapper.classList.remove('hidden')
-      stateNameWrapper.classList.add('hidden')
+      stateWrapper.classList.remove("hidden")
+      stateNameWrapper.classList.add("hidden")
     } else {
       // Show state name text input if no states to choose from.
       stateSelect.disabled = true

admin/app/components/solidus_admin/ui/forms/input/component.js

@@ -1,16 +1,15 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static values = {
     customValidity: String,
   }
 
   connect() {
-    if (this.customValidityValue)
-      this.element.setCustomValidity(this.customValidityValue)
+    if (this.customValidityValue) this.element.setCustomValidity(this.customValidityValue)
   }
 
   clearCustomValidity() {
-    this.element.setCustomValidity('')
+    this.element.setCustomValidity("")
   }
 }

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

@@ -6,7 +6,7 @@
     **@attributes
   ) %>
 >
-  <a href="<%= @close_path %>" aria-hidden="true" class="cursor-default fixed inset-0 bg-full-black/50 overflow-y-auto"></a>
+  <a aria-hidden="true" class="cursor-default fixed inset-0 bg-full-black/50 overflow-y-auto" data-action="click-><%= stimulus_id %>#close"></a>
   <div class="fixed inset-0 z-10 pointer-events-none flex min-h-full justify-center p-4 text-center items-center">
     <div class="min-w-[40rem] max-h-screen pointer-events-auto cursor-auto relative transform overflow-auto rounded-lg bg-white text-left shadow-xl max-w-lg divide-y divide-gray-100">
 

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

@@ -1,7 +1,16 @@
-import { Controller } from "@hotwired/stimulus";
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   connect() {
-    this.element.showModal();
+    this.element.showModal()
+    this.element.addEventListener("close", () => this.removeModal())
+  }
+
+  close() {
+    this.element.close()
+  }
+
+  removeModal() {
+    this.element.remove()
   }
 }

admin/app/components/solidus_admin/ui/pages/index/component.html.erb

@@ -1,4 +1,4 @@
-<%= page do %>
+<%= page "data-controller": stimulus_id do %>
   <% if @tabs %>
     <%= page_header do %>
       <%= render_title %>

admin/app/components/solidus_admin/ui/pages/index/component.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  async openModal(event) {
+    event.preventDefault();
+    const url = event.target.href;
+    const response = await fetch(url);
+    document.body.insertAdjacentHTML("beforeend", await response.text());
+  }
+}

admin/app/components/solidus_admin/ui/pages/index/component.rb

@@ -20,6 +20,10 @@ def scopes; []; end
   def filters; []; end
   def columns; []; end
 
+  def self.stimulus_id
+    "ui--pages--index"
+  end
+
   def initialize(page:)
     @page = page
     @tabs = tabs&.map { |tab| Tab.new(**tab) }

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

@@ -137,11 +137,12 @@
       <%= "data-sortable-animation-value=#{@sortable.animation}" if @sortable&.animation %>
     >
       <% @data.rows.each do |row| %>
+        <% rowUrl = @data.url.call(row) %>
         <tr
-          class="border-b border-gray-100 last:border-0 hover:bg-gray-50 cursor-pointer <%= 'bg-gray-15 text-gray-700' if @data.fade&.call(row) %>"
-          <% if @data.url %>
+          class="border-b border-gray-100 last:border-0 <%= 'hover:bg-gray-50 cursor-pointer' if rowUrl %> <%= 'bg-gray-15 text-gray-700' if @data.fade&.call(row) %>"
+          <% if rowUrl %>
             data-action="click-><%= stimulus_id %>#rowClicked"
-            data-<%= stimulus_id %>-url-param="<%= @data.url.call(row) %>"
+            data-<%= stimulus_id %>-url-param="<%= rowUrl %>"
             <%= "data-sortable-url=#{@sortable.url.call(row)}" if @sortable&.url %>
           <% end %>
         >