From 0277bc94f37dedd46a7f778d5bed0e8aeb8fdf22 Mon Sep 17 00:00:00 2001
From: Zach Gollwitzer <zach.gollwitzer@gmail.com>
Date: Thu, 18 Apr 2024 17:05:37 -0400
Subject: [PATCH] Small redesign of transaction filters (#650)

---
 app/javascript/controllers/tabs_controller.js |  5 +-
 app/views/transactions/_search_form.html.erb  | 71 ++++++++++++-------
 .../search_form/_amount_filter.html.erb       |  2 +-
 .../search_form/_date_filter.html.erb         |  4 ++
 .../search_form/_merchant_filter.html.erb     |  2 +-
 .../search_form/_type_filter.html.erb         |  4 ++
 6 files changed, 60 insertions(+), 28 deletions(-)
 create mode 100644 app/views/transactions/search_form/_date_filter.html.erb
 create mode 100644 app/views/transactions/search_form/_type_filter.html.erb

diff --git a/app/javascript/controllers/tabs_controller.js b/app/javascript/controllers/tabs_controller.js
index 15332871..16838e2a 100644
--- a/app/javascript/controllers/tabs_controller.js
+++ b/app/javascript/controllers/tabs_controller.js
@@ -16,7 +16,10 @@ export default class extends Controller {
   }
 
   select(event) {
-    this.updateClasses(event.target.dataset.id);
+    const element = event.target.closest("[data-id]");
+    if (element) {
+      this.updateClasses(element.dataset.id);
+    }
   }
 
   onTurboLoad = () => {
diff --git a/app/views/transactions/_search_form.html.erb b/app/views/transactions/_search_form.html.erb
index 86bfb07d..c595540c 100644
--- a/app/views/transactions/_search_form.html.erb
+++ b/app/views/transactions/_search_form.html.erb
@@ -11,32 +11,53 @@
             <%= lucide_icon("list-filter", class: "w-5 h-5 text-gray-500") %>
             <p class="text-sm font-medium text-gray-900">Filter</p>
           </button>
-          <div data-menu-target="content" class="hidden absolute z-10 top-12 right-0 border border-alpha-black-25 bg-white rounded-lg shadow-xs min-w-[450px]">
-            <div data-controller="tabs" data-tabs-active-class="border-b-2 border-b-black text-gray-900" data-tabs-default-tab-value="txn-account-filter">
-              <div class="flex items-center px-3 text-sm font-medium text-gray-500 gap-4 border-b border-b-alpha-black-50">
-                <button class="py-2 border-b-2" type="button" data-id="txn-account-filter" data-tabs-target="btn" data-action="tabs#select">Account</button>
-                <button class="py-2 border-b-2" type="button" data-id="txn-amount-filter" data-tabs-target="btn" data-action="tabs#select">Amount</button>
-                <button class="py-2 border-b-2" type="button" data-id="txn-category-filter" data-tabs-target="btn" data-action="tabs#select">Category</button>
-                <button class="py-2 border-b-2" type="button" data-id="txn-merchant-filter" data-tabs-target="btn" data-action="tabs#select">Merchant</button>
-              </div>
-              <div class="p-2 max-h-[300px] overflow-y-auto">
-                <div id="txn-account-filter" data-tabs-target="tab">
-                  <%= render partial: "transactions/search_form/account_filter", locals: { form: form } %>
-                </div>
-                <div id="txn-amount-filter" data-tabs-target="tab">
-                  <%= render partial: "transactions/search_form/amount_filter", locals: { form: form } %>
-                </div>
-                <div id="txn-category-filter" data-tabs-target="tab">
-                  <%= render partial: "transactions/search_form/category_filter", locals: { form: form } %>
-                </div>
-                <div id="txn-merchant-filter" data-tabs-target="tab">
-                  <%= render partial: "transactions/search_form/merchant_filter", locals: { form: form } %>
-                </div>
-              </div>
+          <%# TODO: Refactor this for readability and maintainability %>
+          <div data-menu-target="content" data-controller="tabs" data-tabs-active-class="bg-gray-25 text-gray-900" data-tabs-default-tab-value="txn-account-filter" class="hidden absolute flex z-10 h-80 w-[540px] top-12 right-0 border border-alpha-black-25 bg-white rounded-lg shadow-xs">
+            <div class="flex w-44 flex-col items-start p-3 text-sm font-medium text-gray-500 border-r border-r-alpha-black-25">
+              <button class="flex text-gray-500 hover:bg-gray-25 items-center gap-2 px-3 rounded-md py-2 w-full" type="button" data-id="txn-date-filter" data-tabs-target="btn" data-action="tabs#select">
+                <%= lucide_icon("calendar", class: "w-5 h-5") %>
+                <span class="text-sm font-medium">Date</span>
+              </button>
+              <button class="flex text-gray-500 hover:bg-gray-25 items-center gap-2 px-3 rounded-md py-2 w-full" type="button" data-id="txn-account-filter" data-tabs-target="btn" data-action="tabs#select">
+                <%= lucide_icon("layers", class: "w-5 h-5") %>
+                <span class="text-sm font-medium">Account</span>
+              </button>
+              <button class="flex text-gray-500 hover:bg-gray-25 items-center gap-2 px-3 rounded-md py-2 w-full" type="button" data-id="txn-type-filter" data-tabs-target="btn" data-action="tabs#select">
+                <%= lucide_icon("shapes", class: "w-5 h-5") %>
+                <span class="text-sm font-medium">Type</span>
+              </button>
+              <button class="flex text-gray-500 hover:bg-gray-25 items-center gap-2 px-3 rounded-md py-2 w-full" type="button" data-id="txn-amount-filter" data-tabs-target="btn" data-action="tabs#select">
+                <%= lucide_icon("hash", class: "w-5 h-5") %>
+                <span class="text-sm font-medium">Amount</span>
+              </button>
+              <button class="flex text-gray-500 hover:bg-gray-25 items-center gap-2 px-3 rounded-md py-2 w-full" type="button" data-id="txn-category-filter" data-tabs-target="btn" data-action="tabs#select">
+                <%= lucide_icon("tag", class: "w-5 h-5") %>
+                <span class="text-sm font-medium">Category</span>
+              </button>
+              <button class="flex text-gray-500 hover:bg-gray-25 items-center gap-2 px-3 rounded-md py-2 w-full" type="button" data-id="txn-merchant-filter" data-tabs-target="btn" data-action="tabs#select">
+                <%= lucide_icon("store", class: "w-5 h-5") %>
+                <span class="text-sm font-medium">Merchant</span>
+              </button>
             </div>
-            <div class="text-sm p-3 flex items-center justify-between border-t border-t-alpha-black-50">
-              <p class="text-gray-500"><%= q.conditions.reject { |condition| condition.values.any?(&:blank?) }.size %> filters applied</p>
-              <%= button_to "Clear all", search_transactions_path(clear: true), method: :post, class: "text-gray-900 font-medium", form: { "data-turbo-frame": "transactions_list" } %>
+            <div class="p-2 max-h-full overflow-y-auto grow">
+              <div id="txn-date-filter" data-tabs-target="tab">
+                <%= render partial: "transactions/search_form/date_filter", locals: { form: form } %>
+              </div>
+              <div id="txn-account-filter" data-tabs-target="tab">
+                <%= render partial: "transactions/search_form/account_filter", locals: { form: form } %>
+              </div>
+              <div id="txn-type-filter" data-tabs-target="tab">
+                <%= render partial: "transactions/search_form/type_filter", locals: { form: form } %>
+              </div>
+              <div id="txn-amount-filter" data-tabs-target="tab">
+                <%= render partial: "transactions/search_form/amount_filter", locals: { form: form } %>
+              </div>
+              <div id="txn-category-filter" data-tabs-target="tab">
+                <%= render partial: "transactions/search_form/category_filter", locals: { form: form } %>
+              </div>
+              <div id="txn-merchant-filter" data-tabs-target="tab">
+                <%= render partial: "transactions/search_form/merchant_filter", locals: { form: form } %>
+              </div>
             </div>
           </div>
         </div>
diff --git a/app/views/transactions/search_form/_amount_filter.html.erb b/app/views/transactions/search_form/_amount_filter.html.erb
index 54bf8744..ae785f06 100644
--- a/app/views/transactions/search_form/_amount_filter.html.erb
+++ b/app/views/transactions/search_form/_amount_filter.html.erb
@@ -1,4 +1,4 @@
 <%# locals: (form:) %>
 <div class="py-12 flex items-center justify-center">
-  <p class="text-gray-500 text-sm">Coming soon...</p>
+  <p class="text-gray-500 text-sm">Filter by amount coming soon...</p>
 </div>
diff --git a/app/views/transactions/search_form/_date_filter.html.erb b/app/views/transactions/search_form/_date_filter.html.erb
new file mode 100644
index 00000000..abe66367
--- /dev/null
+++ b/app/views/transactions/search_form/_date_filter.html.erb
@@ -0,0 +1,4 @@
+<%# locals: (form:) %>
+<div class="py-12 flex items-center justify-center">
+  <p class="text-gray-500 text-sm">Filter by date coming soon...</p>
+</div>
diff --git a/app/views/transactions/search_form/_merchant_filter.html.erb b/app/views/transactions/search_form/_merchant_filter.html.erb
index 54bf8744..dd8e24a0 100644
--- a/app/views/transactions/search_form/_merchant_filter.html.erb
+++ b/app/views/transactions/search_form/_merchant_filter.html.erb
@@ -1,4 +1,4 @@
 <%# locals: (form:) %>
 <div class="py-12 flex items-center justify-center">
-  <p class="text-gray-500 text-sm">Coming soon...</p>
+  <p class="text-gray-500 text-sm">Filter by merchant coming soon...</p>
 </div>
diff --git a/app/views/transactions/search_form/_type_filter.html.erb b/app/views/transactions/search_form/_type_filter.html.erb
new file mode 100644
index 00000000..a273a374
--- /dev/null
+++ b/app/views/transactions/search_form/_type_filter.html.erb
@@ -0,0 +1,4 @@
+<%# locals: (form:) %>
+<div class="py-12 flex items-center justify-center">
+  <p class="text-gray-500 text-sm">Filter by type coming soon...</p>
+</div>