Implement new sortable_controller.js with sortable.js and `rails/…

…request.js`

The `onEnd` method, sends a PATCH request to update item positions,
using `@rails/request.js` for secure AJAX calls with proper CSRF token 
handling.

https://github.com/SortableJS/Sortable
https://github.com/rails/requestjs-rails

admin/app/javascript/solidus_admin/controllers/sortable_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+import Sortable from "sortablejs"
+import { patch } from '@rails/request.js'
+
+export default class extends Controller {
+ static values = {
+ param: { type: String, default: 'postion' },
+ handle: { type: String, default: null },
+ animation: { type: Number, default: 150 },
+ }
+
+ connect() {
+ this.sortable = Sortable.create(this.element, {
+ onEnd: this.onEnd.bind(this),
+ animation: this.animationValue,
+ handle: this.handleValue,
+ })
+ }
+
+ async onEnd({ item, newIndex }) {
+ if (!item.dataset.sortableUrl) return
+
+ const data = new FormData()
+ data.append(this.paramValue, newIndex + 1)
+
+ return await patch(item.dataset.sortableUrl, { body: data, responseKind: "js" })
+ }
+
+ disconnect() {
+ this.sortable.destroy()
+ this.sortable = null
+ }
+}

admin/config/importmap.rb

@@ -6,6 +6,8 @@
 pin "@hotwired/turbo-rails", to: "turbo.js"
 
 pin "stimulus-use", to: "https://ga.jspm.io/npm:[email protected]/dist/index.js"
+pin "sortablejs", to: "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
+pin "@rails/request.js", to: "https://cdn.jsdelivr.net/npm/@rails/[email protected]/+esm"
 
 pin "solidus_admin/application", preload: true
 pin "solidus_admin/utils"