From b1e174eb2ef18dbc27fc167aca284c14bf193ec6 Mon Sep 17 00:00:00 2001
From: KKlochko <KKlochko@protonmail.com>
Date: Fri, 18 Apr 2025 11:15:23 +0300
Subject: [PATCH] Update the FormComponent for Book to reorder BookIds and
 AuthorRoles.

---
 assets/js/app.js                                   |  5 ++++-
 assets/js/authorRoleSort.js                        | 14 ++++++++++++++
 assets/js/bidSort.js                               | 14 ++++++++++++++
 .../live/book_live/form_component.ex               | 12 ++++++++++++
 4 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/authorRoleSort.js
 create mode 100644 assets/js/bidSort.js

diff --git a/assets/js/app.js b/assets/js/app.js
index f4acdd6..d5639d0 100644
--- a/assets/js/app.js
+++ b/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
diff --git a/assets/js/authorRoleSort.js b/assets/js/authorRoleSort.js
new file mode 100644
index 0000000..4e30d7d
--- /dev/null
+++ b/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) })
+            }
+        })
+    }
+}
diff --git a/assets/js/bidSort.js b/assets/js/bidSort.js
new file mode 100644
index 0000000..3b0af78
--- /dev/null
+++ b/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) })
+            }
+        })
+    }
+}
diff --git a/lib/decentralised_book_index_web/live/book_live/form_component.ex b/lib/decentralised_book_index_web/live/book_live/form_component.ex
index c7b5f24..b52cf04 100644
--- a/lib/decentralised_book_index_web/live/book_live/form_component.ex
+++ b/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]} />