Reorder record sets via drag and drop

assets/js/app.js

@@ -26,6 +26,7 @@ import { Hooks as FluxonHooks, DOM as FluxonDOM } from "fluxon";
 import FormatNumberHook from "./hooks/format-number";
 import UniversalSearchNavigationHook from "./hooks/universal-search-navigation";
 import RecordPickerNavigationHook from "./hooks/record-picker-navigation";
+import SortableListHook from "./hooks/sortable-list";
 import confetti from "canvas-confetti";
 import { createLiveToastHook } from "live_toast";
 import banner from "./banner";
@@ -34,6 +35,7 @@ let Hooks = FluxonHooks;
 Hooks.FormatNumber = FormatNumberHook;
 Hooks.UniversalSearchNavigation = UniversalSearchNavigationHook;
 Hooks.RecordPickerNavigation = RecordPickerNavigationHook;
+Hooks.SortableList = SortableListHook;
 Hooks.LiveToast = createLiveToastHook();
 
 const csrfToken = document

assets/js/hooks/sortable-list.js

@@ -0,0 +1,44 @@
+import Sortable from "sortablejs";
+
+export default {
+  mounted() {
+    this.initSortable();
+  },
+
+  updated() {
+    if (this.sortable) {
+      this.sortable.destroy();
+    }
+    this.initSortable();
+  },
+
+  destroyed() {
+    if (this.sortable) {
+      this.sortable.destroy();
+    }
+  },
+
+  initSortable() {
+    this.sortable = Sortable.create(this.el, {
+      animation: 150,
+      handle: "[data-sortable-handle]",
+      draggable: "[data-sortable-item]",
+      ghostClass: "opacity-30",
+      dragClass: "shadow-lg",
+      onEnd: () => {
+        const items = this.el.querySelectorAll("[data-sortable-item]");
+        const recordIds = Array.from(items).map(
+          (item) => item.dataset.recordId
+        );
+
+        const payload = { record_ids: recordIds };
+        const setId = this.el.dataset.setId;
+        if (setId) {
+          payload.set_id = setId;
+        }
+
+        this.pushEvent("reorder", payload);
+      },
+    });
+  },
+};

assets/package-lock.json

@@ -7,7 +7,8 @@
       "dependencies": {
         "barcode-detector": "^3.0.0",
         "canvas-confetti": "^1.9.3",
-        "live_toast": "file:../deps/live_toast"
+        "live_toast": "file:../deps/live_toast",
+        "sortablejs": "^1.15.6"
       },
       "devDependencies": {
         "@tailwindcss/typography": "^0.5.16"
@@ -86,6 +87,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.6.tgz",
+      "integrity": "sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==",
+      "license": "MIT"
+    },
     "node_modules/tagged-tag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",

assets/package.json

@@ -2,7 +2,8 @@
   "dependencies": {
     "barcode-detector": "^3.0.0",
     "canvas-confetti": "^1.9.3",
-    "live_toast": "file:../deps/live_toast"
+    "live_toast": "file:../deps/live_toast",
+    "sortablejs": "^1.15.6"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.16"