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) })
+            }
+        })
+    }
+}

lib/decentralised_book_index_web/live/book_live/form_component.ex

@@ -85,6 +85,7 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
     <table class="w-full">
       <thead class="border-b border-zinc-100">
         <tr>
+          <th class="text-left font-medium text-sm pb-1 px-3 w-10"></th>
           <th class="text-left font-medium text-sm pb-1 px-3 w-36 dark:text-white">Type</th>
           <th class="text-left font-medium text-sm pb-1 px-3 dark:text-white">Id</th>
           <th class="text-left font-medium text-sm pb-1 px-3 w-12"></th>
@@ -93,6 +94,11 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
       <tbody phx-hook="bidSort" id="bidSort" phx-target={@myself}>
         <.inputs_for :let={bid_form} field={@form[:bids]}>
           <tr data-id={bid_form.index}>
+            <td class="px-3 w-10 pt-2">
+              <svg class="w-6 h-6 text-gray-800 dark:text-white handle cursor-pointer" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
+              </svg>
+            </td>
             <td class="px-3 w-36">
               <label for={bid_form[:type].id} class="hidden">Type</label>
               <.input field={bid_form[:type]} />
@@ -164,6 +170,7 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
     <table class="w-full">
       <thead class="border-b border-zinc-100">
         <tr>
+          <th class="text-left font-medium text-sm pb-1 px-3 w-10"></th>
           <th class="text-left font-medium text-sm pb-1 px-3 w-96 dark:text-white">Author</th>
           <th class="text-left font-medium text-sm pb-1 px-3 dark:text-white">Role</th>
           <th class="text-left font-medium text-sm pb-1 px-3 w-12"></th>
@@ -172,6 +179,11 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
       <tbody phx-hook="authorRoleSort" id="authorRoleSort" phx-target={@myself}>
         <.inputs_for :let={author_roles_form} field={@form[:author_roles]}>
           <tr data-id={author_roles_form.index}>
+            <td class="px-3 w-10 pt-2">
+              <svg class="w-6 h-6 text-gray-800 dark:text-white handle cursor-pointer" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
+              </svg>
+            </td>
             <td class="px-3 w-96">
               <label for={author_roles_form[:author_id].id} class="hidden">Type</label>
               <.input field={author_roles_form[:author_id]} />