From b3af8bf1aee7cf630505bf735d86c1b6887f34d0 Mon Sep 17 00:00:00 2001 From: Alessio Cappa <104093777+alessiocappa@users.noreply.github.com> Date: Wed, 24 Dec 2025 01:57:16 +0100 Subject: [PATCH] Transactions & Activities pages improvements (#452) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: Add toggle on mobile to show/hide checkboxes in transaction page * fix: Add multi-select toggle also in activities page. Make JS controller compatible also in this view. * feat: Add category in mobile view * feat: Add mobile layout for transaction categories * feat: Add margin for pagination on mobile * fix: Ensure category exists when displaying the name * fix: Adjust mobile paddings * fix: Display "uncategorized" label if no category is set * fix: Expand transaction name/subtitle * feat: Add merchant name on desktop view * feat: Move merchant name before account name * fix: Add class to hide merchant on mobile * feat: Add merchant logo on mobile * fix: add pointer-events-none to merchant image on mobile view * feat: toggle header checkbox in transaction page when button is clicked * Remove unnecessary CSS class * Remove duplicate CSS class * Remove wrong Enable Banking logo URL * Update app/views/transactions/_transaction.html.erb Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Alessio Cappa <104093777+alessiocappa@users.noreply.github.com> * Revert "Update app/views/transactions/_transaction.html.erb" This reverts commit 9766c50a1d478e72be4a99ca8311db2e30717a6d. * Add translation for Loan Payment/Transfer * Apply review comments * Add accessible name for toggle based on review comments * Use border instead of border-1 class * Apply review comments * Missing l10n key --------- Signed-off-by: Alessio Cappa <104093777+alessiocappa@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Juan José Mata --- .../UI/account/activity_date.html.erb | 7 +- .../UI/account/activity_feed.html.erb | 21 ++++-- .../transaction_categories_controller.rb | 5 ++ .../controllers/checkbox_toggle_controller.js | 39 ++++++++++ app/views/accounts/show/_activity.html.erb | 11 +-- app/views/categories/_badge_mobile.html.erb | 14 ++++ .../categories/_category_name_mobile.html.erb | 7 ++ app/views/categories/_menu.html.erb | 7 +- app/views/category/dropdowns/_row.html.erb | 1 + app/views/entries/_entry_group.html.erb | 7 +- app/views/entries/_selection_bar.html.erb | 2 +- app/views/shared/_pagination.html.erb | 2 +- app/views/shared/_ruler.html.erb | 2 +- app/views/transactions/_transaction.html.erb | 72 ++++++++++++------- .../_transaction_category.html.erb | 7 +- .../transactions/_transfer_match.html.erb | 5 +- app/views/transactions/index.html.erb | 11 +-- .../transactions/searches/_form.html.erb | 11 +++ app/views/valuations/_valuation.html.erb | 10 +-- config/locales/views/transactions/ca.yml | 4 +- config/locales/views/transactions/de.yml | 2 + config/locales/views/transactions/en.yml | 2 + config/locales/views/transactions/es.yml | 2 + config/locales/views/transactions/nb.yml | 4 +- config/locales/views/transactions/pt-BR.yml | 2 + config/locales/views/transactions/ro.yml | 2 + config/locales/views/transactions/tr.yml | 4 +- config/locales/views/transactions/zh-CN.yml | 2 + 28 files changed, 211 insertions(+), 54 deletions(-) create mode 100644 app/javascript/controllers/checkbox_toggle_controller.js create mode 100644 app/views/categories/_badge_mobile.html.erb create mode 100644 app/views/categories/_category_name_mobile.html.erb diff --git a/app/components/UI/account/activity_date.html.erb b/app/components/UI/account/activity_date.html.erb index 6efa7e967..672c6d77c 100644 --- a/app/components/UI/account/activity_date.html.erb +++ b/app/components/UI/account/activity_date.html.erb @@ -4,9 +4,12 @@
<%= check_box_tag "#{date}_entries_selection", - class: ["checkbox checkbox--light", "hidden": entries.size == 0], + class: ["checkbox checkbox--light hidden lg:block", "lg:hidden": entries.size == 0], id: "selection_entry_#{date}", - data: { action: "bulk-select#toggleGroupSelection" } %> + data: { + action: "bulk-select#toggleGroupSelection", + checkbox_toggle_target: "selectionEntry" + } %>

<%= tag.span I18n.l(date, format: :long) %> diff --git a/app/components/UI/account/activity_feed.html.erb b/app/components/UI/account/activity_feed.html.erb index dd9528430..362e1af06 100644 --- a/app/components/UI/account/activity_feed.html.erb +++ b/app/components/UI/account/activity_feed.html.erb @@ -1,5 +1,5 @@ <%= turbo_frame_tag dom_id(account, "entries") do %> -

+
<%= tag.h2 t("accounts.show.activity.title"), class: "font-medium text-lg" %> @@ -46,8 +46,18 @@ "data-auto-submit-form-target": "auto" %>
-
<% end %> + <%= button_tag type: "button", + id: "toggle-checkboxes-button", + aria: { label: t(".toggle_selection_checkboxes") }, + class: "lg:hidden font-medium whitespace-nowrap inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-primary border border-secondary hover:bg-surface-hover", + data: { + action: "click->checkbox-toggle#toggle", + checkbox_toggle_target: "toggleButton" + } do %> + <%= helpers.icon("list-todo") %> + <% end %> +
<% if activity_dates.empty? %> @@ -66,8 +76,11 @@
<%= check_box_tag "selection_entry", - class: "checkbox checkbox--light", - data: { action: "bulk-select#togglePageSelection" } %> + class: "checkbox checkbox--light hidden lg:block", + data: { + action: "bulk-select#togglePageSelection", + checkbox_toggle_target: "selectionEntry" + } %> <%= tag.p t("accounts.show.activity.date") %>
diff --git a/app/controllers/transaction_categories_controller.rb b/app/controllers/transaction_categories_controller.rb index 4ad75db59..3fe8207dc 100644 --- a/app/controllers/transaction_categories_controller.rb +++ b/app/controllers/transaction_categories_controller.rb @@ -28,6 +28,11 @@ class TransactionCategoriesController < ApplicationController partial: "categories/menu", locals: { transaction: transaction } ), + turbo_stream.replace( + "category_name_mobile_#{transaction.id}", + partial: "categories/category_name_mobile", + locals: { transaction: transaction } + ), *flash_notification_stream_items ] end diff --git a/app/javascript/controllers/checkbox_toggle_controller.js b/app/javascript/controllers/checkbox_toggle_controller.js new file mode 100644 index 000000000..ba24c9aa8 --- /dev/null +++ b/app/javascript/controllers/checkbox_toggle_controller.js @@ -0,0 +1,39 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static targets = ["selectionEntry", "toggleButton"] + + toggle() { + if (this.selectionEntryTargets.length === 0) return + + const shouldShow = this.selectionEntryTargets[0].classList.contains("hidden") + + this.selectionEntryTargets.forEach((el) => { + if (shouldShow) { + el.classList.remove("hidden") + } else { + el.classList.add("hidden") + } + }) + + if (!shouldShow) { + const bulkSelectElement = + this.element.querySelector("[data-controller~='bulk-select']") || + this.element.closest("[data-controller~='bulk-select']") || + document.querySelector("[data-controller~='bulk-select']") + if (bulkSelectElement) { + const bulkSelectController = this.application.getControllerForElementAndIdentifier( + bulkSelectElement, + "bulk-select" + ) + if (bulkSelectController) { + bulkSelectController.deselectAll() + } + } + } + + if (this.hasToggleButtonTarget) { + this.toggleButtonTarget.classList.toggle("bg-surface", shouldShow) + } + } +} diff --git a/app/views/accounts/show/_activity.html.erb b/app/views/accounts/show/_activity.html.erb index ce9e74cd8..7bd35639b 100644 --- a/app/views/accounts/show/_activity.html.erb +++ b/app/views/accounts/show/_activity.html.erb @@ -1,7 +1,7 @@ <%# locals: (account:) %> <%= turbo_frame_tag dom_id(account, "entries") do %> -
+
<%= tag.h2 t(".title"), class: "font-medium text-lg" %> <% unless @account.linked? %> @@ -55,7 +55,7 @@ <% else %> <%= tag.div id: dom_id(@account, "entries_bulk_select"), data: { - controller: "bulk-select", + controller: "bulk-select checkbox-toggle", bulk_select_singular_label_value: t(".entry"), bulk_select_plural_label_value: t(".entries") } do %> @@ -66,8 +66,11 @@
<%= check_box_tag "selection_entry", - class: "checkbox checkbox--light", - data: { action: "bulk-select#togglePageSelection" } %> + class: "checkbox checkbox--light hidden lg:block", + data: { + action: "bulk-select#togglePageSelection", + checkbox_toggle_target: "selectionEntry" + } %>

<%= t(".date") %>

<%= tag.p t(".amount"), class: "col-span-2 justify-self-end" %> diff --git a/app/views/categories/_badge_mobile.html.erb b/app/views/categories/_badge_mobile.html.erb new file mode 100644 index 000000000..4f96f25b4 --- /dev/null +++ b/app/views/categories/_badge_mobile.html.erb @@ -0,0 +1,14 @@ +<%# locals: (category:) %> +<% category ||= Category.uncategorized %> + +
+ + <% if category.lucide_icon.present? %> + <%= icon category.lucide_icon, size: "sm", color: "current" %> + <% end %> + +
\ No newline at end of file diff --git a/app/views/categories/_category_name_mobile.html.erb b/app/views/categories/_category_name_mobile.html.erb new file mode 100644 index 000000000..2f9bd07cb --- /dev/null +++ b/app/views/categories/_category_name_mobile.html.erb @@ -0,0 +1,7 @@ + + <% if transaction.transfer&.categorizable? || transaction.transfer.nil? %> + <%= transaction.category&.name || Category.uncategorized.name %> + <% else %> + <%= transaction.transfer&.payment? ? payment_category.name : transfer_category.name %> + <% end %> + diff --git a/app/views/categories/_menu.html.erb b/app/views/categories/_menu.html.erb index f7c74eaca..ad7dc4f5c 100644 --- a/app/views/categories/_menu.html.erb +++ b/app/views/categories/_menu.html.erb @@ -2,7 +2,12 @@ <%= render DS::Menu.new(variant: "button") do |menu| %> <% menu.with_button do %> - <% render partial: "categories/badge", locals: { category: transaction.category } %> + +
+ <%= render partial: "categories/badge_mobile", locals: { category: transaction.category } %> +
<% end %> <% menu.with_custom_content do %> diff --git a/app/views/category/dropdowns/_row.html.erb b/app/views/category/dropdowns/_row.html.erb index 6e25d478f..0a4927dcd 100644 --- a/app/views/category/dropdowns/_row.html.erb +++ b/app/views/category/dropdowns/_row.html.erb @@ -13,6 +13,7 @@ } ), method: :patch, + data: { turbo_frame: "category_dropdown" }, class: "flex w-full items-center gap-1.5 cursor-pointer focus:outline-none" do %> <%= icon("check") if is_selected %> diff --git a/app/views/entries/_entry_group.html.erb b/app/views/entries/_entry_group.html.erb index 2ee8954c1..7a0d14470 100644 --- a/app/views/entries/_entry_group.html.erb +++ b/app/views/entries/_entry_group.html.erb @@ -4,9 +4,12 @@
<%= check_box_tag "#{date}_entries_selection", - class: ["checkbox checkbox--light", "hidden": entries.size == 0], + class: ["checkbox checkbox--light hidden lg:block", "lg:hidden": entries.size == 0], id: "selection_entry_#{date}", - data: { action: "bulk-select#toggleGroupSelection" } %> + data: { + action: "bulk-select#toggleGroupSelection", + checkbox_toggle_target: "selectionEntry" + } %>

<%= tag.span I18n.l(date, format: :long) %> diff --git a/app/views/entries/_selection_bar.html.erb b/app/views/entries/_selection_bar.html.erb index 48648c2a4..4c7d8d48b 100644 --- a/app/views/entries/_selection_bar.html.erb +++ b/app/views/entries/_selection_bar.html.erb @@ -1,4 +1,4 @@ -

+
<%= check_box_tag "entry_selection", 1, true, class: "checkbox checkbox--light", data: { action: "bulk-select#deselectAll" } %> diff --git a/app/views/shared/_pagination.html.erb b/app/views/shared/_pagination.html.erb index afc047de5..c3c9c292a 100644 --- a/app/views/shared/_pagination.html.erb +++ b/app/views/shared/_pagination.html.erb @@ -1,7 +1,7 @@ <%# locals: (pagy:) %>