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

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) { select(event) {
this.updateClasses(event.target.dataset.id); const element = event.target.closest("[data-id]");
if (element) {
this.updateClasses(element.dataset.id);
}
} }
onTurboLoad = () => { onTurboLoad = () => {

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

@ -11,32 +11,53 @@
<%= lucide_icon("list-filter", class: "w-5 h-5 text-gray-500") %> <%= lucide_icon("list-filter", class: "w-5 h-5 text-gray-500") %>
<p class="text-sm font-medium text-gray-900">Filter</p> <p class="text-sm font-medium text-gray-900">Filter</p>
</button> </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]"> <%# TODO: Refactor this for readability and maintainability %>
<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 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 items-center px-3 text-sm font-medium text-gray-500 gap-4 border-b border-b-alpha-black-50"> <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="py-2 border-b-2" type="button" data-id="txn-account-filter" data-tabs-target="btn" data-action="tabs#select">Account</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-date-filter" data-tabs-target="btn" data-action="tabs#select">
<button class="py-2 border-b-2" type="button" data-id="txn-amount-filter" data-tabs-target="btn" data-action="tabs#select">Amount</button> <%= lucide_icon("calendar", class: "w-5 h-5") %>
<button class="py-2 border-b-2" type="button" data-id="txn-category-filter" data-tabs-target="btn" data-action="tabs#select">Category</button> <span class="text-sm font-medium">Date</span>
<button class="py-2 border-b-2" type="button" data-id="txn-merchant-filter" data-tabs-target="btn" data-action="tabs#select">Merchant</button> </button>
</div> <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">
<div class="p-2 max-h-[300px] overflow-y-auto"> <%= lucide_icon("layers", class: "w-5 h-5") %>
<div id="txn-account-filter" data-tabs-target="tab"> <span class="text-sm font-medium">Account</span>
<%= render partial: "transactions/search_form/account_filter", locals: { form: form } %> </button>
</div> <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">
<div id="txn-amount-filter" data-tabs-target="tab"> <%= lucide_icon("shapes", class: "w-5 h-5") %>
<%= render partial: "transactions/search_form/amount_filter", locals: { form: form } %> <span class="text-sm font-medium">Type</span>
</div> </button>
<div id="txn-category-filter" data-tabs-target="tab"> <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">
<%= render partial: "transactions/search_form/category_filter", locals: { form: form } %> <%= lucide_icon("hash", class: "w-5 h-5") %>
</div> <span class="text-sm font-medium">Amount</span>
<div id="txn-merchant-filter" data-tabs-target="tab"> </button>
<%= render partial: "transactions/search_form/merchant_filter", locals: { form: form } %> <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">
</div> <%= lucide_icon("tag", class: "w-5 h-5") %>
</div> <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>
<div class="text-sm p-3 flex items-center justify-between border-t border-t-alpha-black-50"> <div class="p-2 max-h-full overflow-y-auto grow">
<p class="text-gray-500"><%= q.conditions.reject { |condition| condition.values.any?(&:blank?) }.size %> filters applied</p> <div id="txn-date-filter" data-tabs-target="tab">
<%= button_to "Clear all", search_transactions_path(clear: true), method: :post, class: "text-gray-900 font-medium", form: { "data-turbo-frame": "transactions_list" } %> <%= 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> </div>
</div> </div>

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

@ -1,4 +1,4 @@
<%# locals: (form:) %> <%# locals: (form:) %>
<div class="py-12 flex items-center justify-center"> <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> </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:) %> <%# locals: (form:) %>
<div class="py-12 flex items-center justify-center"> <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> </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>