Move category dropdown menu content into a turbo frame (#782)

* Move category dropdown menu content into a turbo frame

* Fix lint

* Review fixes

* Cleanup

* Review fixes

* Final cleanup

* Revert schema change

app/controllers/transactions/categories/deletions_controller.rb

@@ -15,7 +15,7 @@ def create
 
   private
     def set_category
-      @category = Current.family.transaction_categories.find(params[:transaction_category_id])
+      @category = Current.family.transaction_categories.find(params[:category_id])
     end
 
     def set_replacement_category

app/controllers/transactions/categories/dropdowns_controller.rb

@@ -0,0 +1,22 @@
+class Transactions::Categories::DropdownsController < ApplicationController
+  before_action :set_from_params
+
+  def show
+    @categories = categories_scope.to_a.excluding(@selected_category).prepend(@selected_category).compact
+  end
+
+  private
+  def set_from_params
+    if params[:category_id]
+      @selected_category = categories_scope.find(params[:category_id])
+    end
+
+    if params[:transaction_id]
+      @transaction = Current.family.transactions.find(params[:transaction_id])
+    end
+  end
+
+  def categories_scope
+    Current.family.transaction_categories.alphabetically
+  end
+end

app/views/transactions/categories/_menu.html.erb

@@ -1,48 +1,15 @@
 <%# locals: (transaction:) %>
 <div class="relative" data-controller="menu">
-  <button data-menu-target="button cursor-pointer" class="flex">
+  <button data-menu-target="button" class="flex cursor-pointer">
     <%= render partial: "transactions/categories/badge", locals: { category: transaction.category } %>
   </button>
   <div data-menu-target="content" class="absolute z-10 hidden w-screen mt-2 max-w-min cursor-default">
     <div class="w-64 text-sm font-semibold leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
-      <div class="flex flex-col relative" data-controller="list-filter">
-        <div class="grow p-1.5">
-          <div class="relative flex items-center bg-white border border-gray-200 rounded-lg">
-            <input placeholder="Search" autocomplete="nope" type="search" class="placeholder:text-sm placeholder:text-gray-500 font-normal h-10 relative pl-10 w-full border-none rounded-lg" data-list-filter-target="input" data-action="list-filter#filter">
-            <%= lucide_icon("search", class: "w-5 h-5 text-gray-500 ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
-          </div>
+      <%= turbo_frame_tag "category_dropdown", src: transaction_category_dropdown_path(category_id: transaction.category_id, transaction_id: transaction.id), loading: :lazy do %>
+        <div class="p-6 flex items-center justify-center">
+          <p class="text-sm text-gray-500 animate-pulse"><%= t(".loading") %></p>
         </div>
-        <div data-list-filter-target="list" class="flex flex-col gap-0.5 p-1.5 mt-0.5 mr-2 max-h-64 overflow-y-scroll scrollbar">
-          <div class="pb-2 pl-4 mr-2 text-gray-500 hidden" data-list-filter-target="emptyMessage">
-            No categories found
-          </div>
-          <% sorted_categories = Current.family.transaction_categories.sort_by { |category| category.id == transaction.category_id ? 0 : 1 } %>
-          <% sorted_categories.each do |category| %>
-            <%= render partial: "transactions/categories/dropdown/row", locals: { category:, transaction: } %>
-          <% end %>
-        </div>
-        <hr>
-        <div class="relative p-1.5 w-full">
-          <%= link_to new_transaction_category_path(transaction_id: transaction),
-                class: "flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100",
-                data: { turbo_frame: "modal" } do %>
-            <%= lucide_icon "plus", class: "w-5 h-5" %>
-
-            <%= t(".add_new") %>
-          <% end %>
-
-          <% if transaction.category %>
-            <%= button_to transaction_path(transaction),
-                  method: :patch,
-                  params: { transaction: { category_id: nil } },
-                  class: "flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100" do %>
-              <%= lucide_icon "minus", class: "w-5 h-5" %>
-
-              <%= t(".clear") %>
-            <% end %>
-          <% end %>
-        </div>
-      </div>
+      <% end %>
     </div>
   </div>
 </div>

app/views/transactions/categories/dropdown/_row.html.erb → app/views/transactions/categories/dropdowns/_row.html.erb

@@ -1,8 +1,8 @@
-<%# locals: (category:, transaction:) %>
-<% is_selected = transaction.category_id == category.id %>
+<%# locals: (category:) %>
+<% is_selected = category.id === @selected_category&.id %>
 
 <%= content_tag :div, class: ["filterable-item flex justify-between items-center border-none rounded-lg px-2 py-1 group w-full", { "bg-gray-25": is_selected }], data: { filter_name: category.name } do %>
-  <%= button_to transaction_path(transaction, transaction: { category_id: category.id }), method: :patch, class: "flex w-full items-center gap-1.5 cursor-pointer" do %>
+  <%= button_to transaction_path(@transaction, transaction: { category_id: category.id }), method: :patch, class: "flex w-full items-center gap-1.5 cursor-pointer" do %>
     <span class="w-5 h-5">
       <%= lucide_icon("check", class: "w-5 h-5 text-gray-500") if is_selected %>
     </span>

app/views/transactions/categories/dropdowns/show.html.erb

@@ -0,0 +1,39 @@
+<%= turbo_frame_tag "category_dropdown" do %>
+  <div class="flex flex-col relative" data-controller="list-filter">
+    <div class="grow p-1.5">
+      <div class="relative flex items-center bg-white border border-gray-200 rounded-lg">
+        <input placeholder="<%= t(".search_placeholder") %>" autocomplete="nope" type="search" class="placeholder:text-sm placeholder:text-gray-500 font-normal h-10 relative pl-10 w-full border-none rounded-lg" data-list-filter-target="input" data-action="list-filter#filter">
+        <%= lucide_icon("search", class: "w-5 h-5 text-gray-500 ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
+      </div>
+    </div>
+    <div data-list-filter-target="list" class="flex flex-col gap-0.5 p-1.5 mt-0.5 mr-2 max-h-64 overflow-y-scroll scrollbar">
+      <div class="pb-2 pl-4 mr-2 text-gray-500 hidden" data-list-filter-target="emptyMessage">
+        <%= t(".no_categories") %>
+      </div>
+      <% @categories.each do |category| %>
+        <%= render partial: "transactions/categories/dropdowns/row", locals: { category: } %>
+      <% end %>
+    </div>
+    <hr>
+    <div class="relative p-1.5 w-full">
+      <%= link_to new_transaction_category_path(transaction_id: @transaction),
+                  class: "flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100",
+                  data: { turbo_frame: "modal" } do %>
+        <%= lucide_icon "plus", class: "w-5 h-5" %>
+
+        <%= t(".add_new") %>
+      <% end %>
+
+      <% if @transaction.category %>
+        <%= button_to transaction_path(@transaction),
+                      method: :patch,
+                      params: { transaction: { category_id: nil } },
+                      class: "flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100" do %>
+          <%= lucide_icon "minus", class: "w-5 h-5" %>
+
+          <%= t(".clear") %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

config/locales/views/transaction/en.yml

@@ -16,10 +16,15 @@ en:
             category will be uncategorized. Instead of leaving them uncategorized,
             you can also assign a new category below.
           replacement_category_prompt: Select category
-      dropdown:
+      dropdowns:
         row:
           delete: Delete category
           edit: Edit category
+        show:
+          add_new: Add new
+          clear: Clear
+          no_categories: No categories found
+          search_placeholder: Search
       edit:
         edit: Edit category
       form:
@@ -29,8 +34,7 @@ en:
         categories: Categories
         new: New
       menu:
-        add_new: Add new
-        clear: Clear
+        loading: Loading...
       new:
         new_category: New category
       row:

config/routes.rb

@@ -38,16 +38,19 @@
   end
 
   resources :transactions do
-    match "search" => "transactions#search", on: :collection, via: %i[ get post ], as: :search
-
     collection do
-      scope module: :transactions do
-        resources :categories, as: :transaction_categories do
+      match "search" => "transactions#search", via: %i[ get post ]
+
+      scope module: :transactions, as: :transaction do
+        resources :categories do
           resources :deletions, only: %i[ new create ], module: :categories
+          collection do
+            resource :dropdown, only: :show, module: :categories, as: :category_dropdown
+          end
         end
 
-        resources :rules, only: %i[ index ], as: :transaction_rules
-        resources :merchants, only: %i[ index new create edit update destroy ], as: :transaction_merchants
+        resources :rules, only: %i[ index ]
+        resources :merchants, only: %i[ index new create edit update destroy ]
       end
     end
   end