Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-22 14:49:38 +02:00
Code Issues Releases Activity Actions 1

Small redesign of transaction filters (#650)

Browse source
This commit is contained in:
Zach Gollwitzer 2024-04-18 17:05:37 -04:00 • committed by GitHub
parent 0a1fa525d5
commit 0277bc94f3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 60 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/javascript/controllers/tabs_controller.js
View file

@ -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 = () => {

47
app/views/transactions/_search_form.html.erb
View file

@ -11,18 +11,44 @@
<%= 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>
<%# 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="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 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-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>
@ -34,11 +60,6 @@
</div>
</div>
</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>
</div>
</div>
</div>
<% end %>

2
app/views/transactions/search_form/_amount_filter.html.erb
View file

@ -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>

4
app/views/transactions/search_form/_date_filter.html.erb Normal file
View file

@ -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>

2
app/views/transactions/search_form/_merchant_filter.html.erb
View file

@ -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>

4
app/views/transactions/search_form/_type_filter.html.erb Normal file
View file

@ -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>