Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-06 14:05:20 +02:00
Code Issues Releases Activity Actions

Add bulk selection UI controls (#840)

Browse source 
* Add bulk selection UI

* Handle bulk selection with Stimulus controller instead of session

* Update tests

* Remove stale routes

* Remove old system test helper methods
This commit is contained in:
Zach Gollwitzer 2024-06-07 12:44:06 -04:00 • committed by GitHub
parent e4ac5c87e4
commit 115f792198
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 256 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/views/accounts/_transactions.html.erb
View file

@ -13,7 +13,7 @@
<% else %>
<div class="space-y-6">
<% transactions.group_by(&:date).each do |date, transactions| %>
<%= transactions_group(date, transactions) %>
<%= transactions_group(date, transactions, "accounts/transactions/transaction") %>
<% end %>
</div>
<% end %>

17
app/views/accounts/transactions/_transaction.html.erb Normal file
View file

@ -0,0 +1,17 @@
<%= turbo_frame_tag dom_id(transaction), class: "grid grid-cols-12 items-center text-gray-900 py-4 text-sm font-medium px-4" do %>
<div class="col-span-4">
<%= render "transactions/name", transaction: transaction %>
</div>
<div class="col-span-3">
<%= render "transactions/categories/badge", category: transaction.category %>
</div>
<%= link_to transaction.account.name,
account_path(transaction.account),
class: ["col-span-3 hover:underline"] %>
<div class="col-span-2 ml-auto">
<%= render "transactions/amount", transaction: transaction %>
</div>
<% end %>

17
app/views/transactions/_date_group.html.erb Normal file
View file

@ -0,0 +1,17 @@
<%# locals: (date:, transactions:) %>
<div class="bg-gray-25 rounded-xl p-1 w-full" data-bulk-select-target="group">
<div class="py-2 px-4 flex items-center justify-between font-medium text-xs text-gray-500">
<div class="flex pl-0.5 items-center gap-4">
<%= check_box_tag "#{date}_transactions_selection",
class: "maybe-checkbox maybe-checkbox--light",
id: "selection_transaction_#{date}",
data: { action: "bulk-select#toggleGroupSelection" } %>
<%= tag.span "#{date.strftime('%b %d, %Y')} · #{transactions.size}" %>
</div>
<%= tag.span format_money(-transactions.sum(&:amount_money)) %>
</div>
<div class="bg-white shadow-xs rounded-md border border-alpha-black-25 divide-y divide-alpha-black-50">
<%= render transactions %>
</div>
</div>

17
app/views/transactions/_selection_bar.html.erb Normal file
View file

@ -0,0 +1,17 @@
<div class="fixed bottom-6 z-10 flex items-center justify-between rounded-xl bg-gray-900 px-4 text-sm text-white w-[420px] py-1.5">
<div class="flex items-center gap-2">
<%= check_box_tag "transaction_selection", 1, true, class: "maybe-checkbox maybe-checkbox--dark", data: { action: "bulk-select#deselectAll" } %>
<p data-bulk-select-target="selectionBarText"></p>
</div>
<div class="flex items-center gap-1 text-gray-500">
<%= button_to "#", disabled: true, class: "cursor-not-allowed p-1.5 group hover:bg-gray-700 flex items-center justify-center rounded-md", title: "Edit" do %>
<%= 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" %>
<% end %>
</div>
</div>

6
app/views/transactions/_transaction.html.erb
View file

@ -1,5 +1,9 @@
<%= turbo_frame_tag dom_id(transaction), class: "grid grid-cols-12 items-center text-gray-900 py-4 text-sm font-medium px-4" do %>
<div class="col-span-4">
<div class="col-span-4 flex items-center gap-4">
<%= check_box_tag dom_id(transaction, "selection"),
class: "maybe-checkbox maybe-checkbox--light",
data: { id: transaction.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
<%= render "transactions/name", transaction: transaction %>
</div>

17
app/views/transactions/index.html.erb
View file

@ -1,23 +1,32 @@
<div class="space-y-4">
<%= render "header" %>
<%= render partial: "transactions/summary", locals: { totals: @totals } %>
<div id="transactions" class="bg-white rounded-xl border border-alpha-black-25 shadow-xs p-4 space-y-4">
<div id="transactions" data-controller="bulk-select" data-bulk-select-resource-value="<%= t(".transaction") %>" class="bg-white rounded-xl border border-alpha-black-25 shadow-xs p-4 space-y-4">
<%= render partial: "transactions/searches/search", locals: { transactions: @transactions } %>
<% if @transactions.present? %>
<div hidden id="transaction-selection-bar" data-bulk-select-target="selectionBar">
<%= render "selection_bar" %>
</div>
<div class="grid grid-cols-12 bg-gray-25 rounded-xl px-5 py-3 text-xs uppercase font-medium text-gray-500 items-center mb-4">
<p class="col-span-4">transaction</p>
<div class="pl-0.5 col-span-4 flex items-center gap-4">
<%= check_box_tag "selection_transaction",
class: "maybe-checkbox maybe-checkbox--light",
data: { action: "bulk-select#togglePageSelection" } %>
<p class="col-span-4">transaction</p>
</div>
<p class="col-span-3 pl-4">category</p>
<p class="col-span-3">account</p>
<p class="col-span-2 justify-self-end">amount</p>
</div>
<div class="space-y-6">
<% @transactions.group_by(&:date).each do |date, transactions| %>
<%= transactions_group(date, transactions) %>
<%= render partial: "date_group", locals: { date:, transactions: } %>
<% end %>
</div>
<% else %>