Fix the amount and date filters on the transactions page

[davidcornu]

Fixes #11263

Summary of the problem

Context

• The transaction page uses a turbo frame to lazy load the ledger:

  hcb/app/views/events/transactions.html.erb

  Lines 144 to 148 in bf8c279

  	<%= turbo_frame_tag [dom_id(@event), :ledger], src: event_ledger_path(@event, **params.to_unsafe_h) do %>
  	<%= render partial: "filter" %>
  	<%= render "application/loading_container", klass: "mt-8" %>
  	<% end %>

• The contents of the turbo frame are rendered by the .../ledger endpoint (note that these contain the filters as well):

  hcb/app/views/events/ledger.html.erb

  Lines 2 to 3 in 6e1deab

  	<%= turbo_frame_tag [dom_id(@event), :ledger] do %>
  	<%= render partial: "filter" %>

• The filters are a mix of links

  hcb/app/views/events/_filter_menu.html.erb

  Lines 50 to 52 in 2abe39a

  	<%= link_to(upsert_query_params(type:), class: "flex-auto menu__action #{"menu__action--active" if @type == type}", data: { turbo_prefetch: "false" }) do %>
  	<%= type.humanize.gsub("Ach", "ACH").gsub("Paypal", "PayPal").gsub("Hcb", "HCB") %>
  	<% end %>

  and forms

  hcb/app/views/events/_filter_menu.html.erb

  Lines 57 to 61 in 2abe39a

  	<%= form_with(model: nil, local: true, method: :get, class: "flex-auto p1") do |form| %>
  	<p class="bold mb0 mt0">Transactions after...</p>
  	<%= form.date_field :start, class: "border mb1", value: @start_date %>
  	<p class="bold mb0 mt0">Transactions before...</p>
  	<%= form.date_field :end, class: "border mb1", value: @end_date %>

• When the user clicks on the filter icon, these filter options are rendered inside of a menu

  hcb/app/views/events/_filter_menu.html.erb

  Line 1 in d84dbba

  <div data-controller="menu" data-menu-append-to-value="turbo-frame#ledger" data-menu-placement-value="bottom-start">

Where this went wrong

1. Our menu component supports a data-menu-append-to-value attribute which determines where the DOM for the menu is rendered. This was configured in this case but pointed to an ID that did not exist (turbo-frame#ledger), which meant the menu was being appended outside of the <turbo-frame> element.
2. This meant that when one of the filter forms was submitted, turbo treated this as a full page visit to the .../ledger endpoint, and when the response didn't include the full page structure it bailed and issued a full page reload of that URL (likely because of the behaviour described in https://turbo.hotwired.dev/handbook/drive#reloading-when-assets-change)

Describe your changes

• Fixes the data-menu-append-to-value attribute.
• Scopes the params passed to the ledger turbo frame to just request.query_parameters instead of all of params as that led to action and controller being set which caused havoc with all the link_to(upsert_query_params... calls we had
• Uses explicit paths in all link_tos

[davidcornu]

This meant we were rendering the ledger endpoint with action and controller parameters which was really messing with the link_to calls in app/views/events/_filter.html.erb as we would get the transactions URL on initial load but the ledger URL on subsequent ones.

[sampoder]

thank you!