From 71287ab6e1439ad499e834ddbb4e33f037d345ac Mon Sep 17 00:00:00 2001
From: KKlochko <KKlochko@protonmail.com>
Date: Fri, 21 Mar 2025 11:11:00 +0200
Subject: [PATCH] Update the Book form to add remove buttons for ids and author
 roles.

---
 .../live/book_live/form_component.ex          | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

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 5c602ec..d2e6dee 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
@@ -54,8 +54,8 @@ 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">Type</th>
-          <th class="text-left font-medium text-sm pb-1 px-3" colspan="2">Id</th>
+          <th class="text-left font-medium text-sm pb-1 px-3 w-24">Type</th>
+          <th class="text-left font-medium text-sm pb-1 px-3">Id</th>
         </tr>
       </thead>
       <tbody phx-hook="bidSort" id="bidSort" phx-target={@myself}>
@@ -69,20 +69,31 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
               <label for={bid_form[:bid].id} class="hidden">Id</label>
               <.input field={bid_form[:bid]} />
             </td>
+            <td class="w-12">
+              <.button_link
+                phx-click="remove-bid"
+                phx-value-path={bid_form.name}
+                phx-target={@myself}
+                kind="error"
+                size="xs"
+                inverse
+              >
+                <.icon name="hero-trash" class="size-5" />
+              </.button_link>
+            </td>
           </tr>
         </.inputs_for>
       </tbody>
     </table>
 
     <.button_link phx-click="add-bid" phx-target={@myself} kind="primary" size="sm" inverse>
-      Add Book Id.
+      Add Book Id
     </.button_link>
     """
   end
 
   @impl true
   def handle_event("add-bid", params, socket) do
-
     socket =
       update(socket, :form, fn form ->
         AshPhoenix.Form.add_form(form, :bids)
@@ -118,7 +129,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">Author</th>
+          <th class="text-left font-medium text-sm pb-1 px-3 w-80">Author</th>
           <th class="text-left font-medium text-sm pb-1 px-3">Role</th>
         </tr>
       </thead>
@@ -129,11 +140,22 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
               <label for={author_roles_form[:author_id].id} class="hidden">Type</label>
               <.input field={author_roles_form[:author_id]} />
             </td>
-
             <td class="px-3">
               <label for={author_roles_form[:role].id} class="hidden">Id</label>
               <.input field={author_roles_form[:role]} />
             </td>
+            <td class="w-12">
+              <.button_link
+                phx-click="remove-author-role"
+                phx-value-path={author_roles_form.name}
+                phx-target={@myself}
+                kind="error"
+                size="xs"
+                inverse
+              >
+                <.icon name="hero-trash" class="size-5" />
+              </.button_link>
+            </td>
           </tr>
         </.inputs_for>
       </tbody>