QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-05-30 07:49:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(transactions): migrate transaction filter searches to DS::SearchInput (#1998)

Browse Source 
* fix(transactions): migrate filter sidebar searches to DS::SearchInput

Replace hand-rolled search fields that used invalid focus:ring-gray-500 with DS::SearchInput (:embedded). Align date filter focus styles with the DS focus ring pattern.

Refs #1715

* fix(transactions): localize filter search copy and align date focus ring

Address validator feedback by replacing hardcoded filter input labels with i18n keys and updating date filter focus classes to the current design-system ring pattern.

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
glorydavid03023
2026-05-29 17:48:17 -05:00
committed by GitHub
parent 3bcc86f4a8
commit 208b3dec9d
6 changed files with 46 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/views/transactions/searches/filters/_account_filter.html.erb
View File

@@ -1,9 +1,14 @@
<%# locals: (form:) %>
<div data-controller="list-filter">
<div class="relative">
<input type="search" autocomplete="off" placeholder="Filter accounts" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-secondary rounded-md py-2 pl-10 pr-3 bg-container focus:ring-gray-500 sm:text-sm">
<%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
</div>
<%= render DS::SearchInput.new(
variant: :embedded,
placeholder: t(".filter_accounts"),
aria_label: t(".filter_accounts"),
data: {
list_filter_target: "input",
action: "input->list-filter#filter"
}
) %>
<div class="my-2" id="list" data-list-filter-target="list">
<% Current.user.accessible_accounts.alphabetically.each do |account| %>
<div class="filterable-item flex items-center gap-2 p-2" data-filter-name="<%= account.name %>">

13
app/views/transactions/searches/filters/_category_filter.html.erb
View File

@@ -1,9 +1,14 @@
<%# locals: (form:) %>
<div data-controller="list-filter">
<div class="relative">
<input type="search" autocomplete="off" placeholder="Filter category" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
<%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
</div>
<%= render DS::SearchInput.new(
variant: :embedded,
placeholder: t(".filter_category"),
aria_label: t(".filter_category"),
data: {
list_filter_target: "input",
action: "input->list-filter#filter"
}
) %>
<div class="my-2" id="list" data-list-filter-target="list">
<% family_categories.each do |category| %>
<div class="filterable-item flex items-center gap-2 p-2" data-filter-name="<%= category.name %>">

4
app/views/transactions/searches/filters/_date_filter.html.erb
View File

@@ -3,9 +3,9 @@
<%= form.date_field :start_date,
placeholder: t(".start_date"),
value: @q[:start_date],
class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3 focus:ring-gray-500 sm:text-sm" %>
class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3 text-base sm:text-sm focus-visible:ring-2 focus-visible:ring-alpha-black-300" %>
<%= form.date_field :end_date,
placeholder: t(".end_date"),
value: @q[:end_date],
class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3 focus:ring-gray-500 sm:text-sm mt-2" %>
class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3 text-base sm:text-sm mt-2 focus-visible:ring-2 focus-visible:ring-alpha-black-300" %>
</div>

13
app/views/transactions/searches/filters/_merchant_filter.html.erb
View File

@@ -1,9 +1,14 @@
<%# locals: (form:) %>
<div data-controller="list-filter">
<div class="relative">
<input type="search" autocomplete="off" placeholder="Filter merchants" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
<%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
</div>
<%= render DS::SearchInput.new(
variant: :embedded,
placeholder: t(".filter_merchants"),
aria_label: t(".filter_merchants"),
data: {
list_filter_target: "input",
action: "input->list-filter#filter"
}
) %>
<div class="my-2" id="list" data-list-filter-target="list">
<% Current.family.assigned_merchants_for(Current.user).alphabetically.each do |merchant| %>
<div class="filterable-item flex items-center gap-2 p-2" data-filter-name="<%= merchant.name %>">

13
app/views/transactions/searches/filters/_tag_filter.html.erb
View File

@@ -1,9 +1,14 @@
<%# locals: (form:) %>
<div data-controller="list-filter">
<div class="relative">
<input type="search" autocomplete="off" placeholder="Filter tags" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
<%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
</div>
<%= render DS::SearchInput.new(
variant: :embedded,
placeholder: t(".filter_tags"),
aria_label: t(".filter_tags"),
data: {
list_filter_target: "input",
action: "input->list-filter#filter"
}
) %>
<div class="my-2" id="list" data-list-filter-target="list">
<% Current.family.tags.alphabetically.each do |tag| %>
<div class="filterable-item flex items-center gap-2 p-2" data-filter-name="<%= tag.name %>">

8
config/locales/views/transactions/en.yml
View File

@@ -278,9 +278,17 @@ en:
unexpected_error: "Unexpected error during conversion: %{error}"
searches:
filters:
account_filter:
filter_accounts: Filter accounts
category_filter:
filter_category: Filter category
date_filter:
start_date: "Start date"
end_date: "End date"
merchant_filter:
filter_merchants: Filter merchants
tag_filter:
filter_tags: Filter tags
amount_filter:
equal_to: Equal to
greater_than: Greater than