Account Activity View + Account Forms (#1406)

* Remove balance mode, sketch out refactor

* Activity view checkpoint

* Entry partials, checkpoint

* Finish txn partial

* Give entries context when editing for different turbo responses

* Calculate change of balance for each entry

* Account tabs consolidation

* Translations, linting, brakeman updates

* Account actions concern

* Finalize forms, get account system tests passing

* Get tests passing

* Lint, rubocop, schema updates

* Improve routing and stream responses

* Fix broken routes

* Add import option for adding accounts

* Fix system test

* Fix test specificity

* Fix sparklines

* Improve account redirects

app/views/account/entries/_entry.html.erb

@@ -1,5 +1,5 @@
-<%# locals: (entry:, **opts) %>
+<%# locals: (entry:, selectable: true, show_balance: false, origin: nil) %>
 
 <%= turbo_frame_tag dom_id(entry) do %>
-  <%= render partial: entry.entryable.to_partial_path, locals: { entry: entry, **opts } %>
+  <%= render partial: entry.entryable.to_partial_path, locals: { entry:, selectable:, show_balance:, origin: } %>
 <% end %>

app/views/account/entries/_entry_group.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (date:, entries:, content:, selectable:) %>
+<%# locals: (date:, entries:, content:, selectable:, totals: false) %>
 <div id="entry-group-<%= date %>" 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">
@@ -16,7 +16,9 @@
       </p>
     </div>
 
-    <%= totals_by_currency(collection: entries, money_method: :amount_money, negate: true) %>
+    <% if totals %>
+      <%= totals_by_currency(collection: entries, money_method: :amount_money, negate: true) %>
+    <% end %>
   </div>
   <div class="bg-white shadow-xs rounded-md border border-alpha-black-25 divide-y divide-alpha-black-50">
     <%= content %>

app/views/account/entries/_selection_bar.html.erb

@@ -0,0 +1,15 @@
+<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 "entry_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">
+    <%= form_with url: bulk_delete_transactions_path, data: { turbo_confirm: true, turbo_frame: "_top" } do %>
+      <button type="button" data-bulk-select-scope-param="bulk_delete" data-action="bulk-select#submitBulkRequest" 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>

app/views/account/entries/index.html.erb

@@ -0,0 +1,88 @@
+<%= turbo_frame_tag dom_id(@account, "entries") do %>
+  <div class="bg-white p-5 border border-alpha-black-25 rounded-xl shadow-xs">
+    <div class="flex items-center justify-between mb-4">
+      <%= tag.h2 t(".title"), class: "font-medium text-lg" %>
+      <div data-controller="menu" data-testid="activity-menu">
+        <button class="btn btn--secondary flex items-center gap-2" data-menu-target="button">
+          <%= lucide_icon("plus", class: "w-4 h-4") %>
+          <%= tag.span t(".new") %>
+        </button>
+        <div data-menu-target="content" class="z-10 hidden bg-white rounded-lg border border-alpha-black-25 shadow-xs p-1">
+          <%= link_to new_account_valuation_path(@account), data: { turbo_frame: :modal }, class: "block p-2 rounded-lg hover:bg-gray-50 flex items-center gap-2" do %>
+            <%= lucide_icon("circle-dollar-sign", class: "text-gray-500 w-5 h-5") %>
+            <%= tag.span t(".new_balance"), class: "text-sm" %>
+          <% end %>
+
+          <%= link_to @account.investment? ? new_account_trade_path(@account) : new_transaction_path(account_id: @account.id), data: { turbo_frame: :modal }, class: "block p-2 rounded-lg hover:bg-gray-50 flex items-center gap-2" do %>
+            <%= lucide_icon("credit-card", class: "text-gray-500 w-5 h-5") %>
+            <%= tag.span t(".new_transaction"), class: "text-sm" %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+
+    <% if @entries.empty? %>
+      <p class="text-gray-500 text-sm p-4"><%= t(".no_entries") %></p>
+    <% else %>
+
+      <div>
+        <%= form_with url: account_entries_path(@account),
+              id: "entries-search",
+              scope: :q,
+              method: :get,
+              data: { controller: "auto-submit-form" } do |form| %>
+          <div class="flex gap-2 mb-4">
+            <div class="grow">
+              <div class="flex items-center px-3 py-2 gap-2 border border-gray-200 rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
+                <%= lucide_icon("search", class: "w-5 h-5 text-gray-500") %>
+                <%= form.search_field :search,
+                            placeholder: "Search entries by name",
+                            value: @q[:search],
+                            class: "form-field__input placeholder:text-sm placeholder:text-gray-500",
+                            "data-auto-submit-form-target": "auto" %>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+
+      <%= tag.div id: dom_id(@account, "entries_bulk_select"),
+                data: {
+                  controller: "bulk-select",
+                  bulk_select_singular_label_value: t(".entry"),
+                  bulk_select_plural_label_value: t(".entries")
+                } do %>
+        <div id="entry-selection-bar" data-bulk-select-target="selectionBar" class="flex justify-center hidden">
+          <%= render "account/entries/selection_bar" %>
+        </div>
+
+        <div class="grid bg-gray-25 rounded-xl grid-cols-12 items-center uppercase text-xs font-medium text-gray-500 px-5 py-3 mb-4">
+          <div class="pl-0.5 col-span-8 flex items-center gap-4">
+            <%= check_box_tag "selection_entry",
+                              class: "maybe-checkbox maybe-checkbox--light",
+                              data: { action: "bulk-select#togglePageSelection" } %>
+            <p><%= t(".date") %></p>
+          </div>
+          <%= tag.p t(".amount"), class: "col-span-2 justify-self-end" %>
+          <%= tag.p t(".balance"), class: "col-span-2 justify-self-end" %>
+        </div>
+
+        <div>
+          <div class="rounded-tl-lg rounded-tr-lg bg-white border-alpha-black-25 shadow-xs">
+
+            <div class="space-y-4">
+              <%= entries_by_date(@entries) do |entries| %>
+                <%= render entries, show_balance: true, origin: "account" %>
+              <% end %>
+            </div>
+
+          </div>
+
+          <div class="p-4 bg-white rounded-bl-lg rounded-br-lg">
+            <%= render "pagination", pagy: @pagy %>
+          </div>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>