Add bulk deletion button and form

maybe-finance · Jun 7, 2024 · d73db98 · d73db98
1 parent 049c750
commit d73db98
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/app/javascript/controllers/bulk_select_controller.js b/app/javascript/controllers/bulk_select_controller.js
@@ -18,6 +18,12 @@ export default class extends Controller {
     document.removeEventListener("turbo:load", this.#updateView)
   }
 
+  submitBulkDeletionRequest(e) {
+    const form = e.target.closest("form");
+    this.#addHiddenFormInputsForSelectedIds(form, "bulk_delete[transaction_ids][]", this.selectedIdsValue)
+    form.requestSubmit()
+  }
+
   togglePageSelection(e) {
     if (e.target.checked) {
       this.#selectAll()
@@ -54,6 +60,16 @@ export default class extends Controller {
     this.#updateView()
   }
 
+  #addHiddenFormInputsForSelectedIds(form, paramName, transactionIds) {
+    transactionIds.forEach(id => {
+      const input = document.createElement("input");
+      input.type = 'hidden'
+      input.name = paramName
+      input.value = id
+      form.appendChild(input)
+    })
+  }
+
   #rowsForGroup(group) {
     return this.rowTargets.filter(row => group.contains(row))
   }

diff --git a/app/views/transactions/_selection_bar.html.erb b/app/views/transactions/_selection_bar.html.erb
@@ -10,8 +10,10 @@
       <%= lucide_icon "pencil-line", class: "w-5 group-hover:text-white" %>
     <% end %>
 
-    <%= button_to "#", disabled: true, class: "cursor-not-allowed p-1.5 group hover:bg-gray-700 flex items-center justify-center rounded-md", title: "Delete" do %>
-      <%= lucide_icon "trash-2", class: "w-5 group-hover:text-white" %>
+    <%= form_with url: bulk_delete_transactions_path, builder: ActionView::Helpers::FormBuilder, data: { turbo_confirm: true } do %>
+      <button type="button" data-action="bulk-select#submitBulkDeletionRequest" class="p-1.5 group hover:bg-gray-700 flex items-center justify-center rounded-md" title="Delete">
+        <%= lucide_icon "trash-2", class: "w-5 group-hover:text-white" %>
+      </button>
     <% end %>
   </div>
 </div>