Update the FormComponent for Book to reorder BookIds and AuthorRoles.

assets/js/app.js

@@ -23,11 +23,14 @@ import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 
 import "flowbite/dist/flowbite.phoenix.js";
+import bidSort from "./bidSort";
+import authorRoleSort from "./authorRoleSort";
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
-  params: {_csrf_token: csrfToken}
+  params: {_csrf_token: csrfToken},
+  hooks: { bidSort, authorRoleSort }
 })
 
 // Show progress bar on live navigation and form submits

assets/js/authorRoleSort.js

@@ -0,0 +1,14 @@
+import Sortable from 'sortablejs';
+
+export default {
+    mounted() {
+        var sortable = new Sortable(this.el, {
+            handle: ".handle",
+            draggable: "tr",
+            ghostClass: "bg-gray-100",
+            onSort: (e) => {
+                this.pushEventTo(this.el, "reorder-author-role", { order: sortable.toArray(e.to) })
+            }
+        })
+    }
+}

assets/js/bidSort.js

@@ -0,0 +1,14 @@
+import Sortable from 'sortablejs';
+
+export default {
+    mounted() {
+        var sortable = new Sortable(this.el, {
+            handle: ".handle",
+            draggable: "tr",
+            ghostClass: "bg-gray-100",
+            onSort: (e) => {
+                this.pushEventTo(this.el, "reorder-bids", { order: sortable.toArray(e.to) })
+            }
+        })
+    }
+}