mirror of
https://github.com/we-promise/sure.git
synced 2026-09-09 08:34:26 +00:00
ab175cc43c
* fix(ui): make whole list row clickable, not just the name text Fixes #3366. Transaction, split-parent, trade, and account list rows carry hover styling that implies the whole row is clickable, but only the name text actually opened the detail drawer — clicking the avatar, amount, or whitespace between them did nothing. Add a clickable-row Stimulus controller that delegates a click anywhere on the row to its primary link, while leaving real interactive descendants (checkbox, category menu, account link, quick-edit badge, kebab menu) to handle their own clicks. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * fix(ui): exclude popover/menu panels from row click delegation, preserve modifier clicks Codex review on #3367 flagged two issues in clickable_row_controller: - Category/account popovers render as position:fixed but stay DOM descendants of the row, so clicking their background (padding, headings, plain text) fell through to the row's link. - linkTarget.click() discarded Ctrl/Cmd/Shift modifiers, so modified clicks opened in the current frame instead of a new tab. * fix(ui): exclude quick-edit dropdown, use window.open for modified clicks CodeRabbit review on #3367 found two more issues: - The investment activity quick-edit dropdown is a hand-rolled absolute-positioned panel (not DS::Popover/DS::Menu), so it wasn't covered by the earlier popover/menu exclusion and background clicks inside it fell through to the row link. - Redispatching a synthetic MouseEvent with modifier flags doesn't actually open a new tab: browsers only honor Ctrl/Cmd/Shift on trusted, native click events, so the previous "fix" was cosmetic. Explicitly call window.open() for modified clicks instead. * fix(ui): make Dividend/Interest quick-edit badge not swallow row clicks jjmata found that the activity-label badge renders as a real <button> even when Dividend/Interest trades have no dropdown/click handler (income_trade), so clickable-row's "a, button, ..." exclusion still treats it as an interactive descendant and swallows the click instead of opening the row — same dead-spot symptom as #3366, relocated to this one badge. Render it as a <span> in that case so the row click delegates normally. * fix(ui): show pointer cursor on delegated Dividend/Interest badge CodeRabbit caught that the badge kept cursor-default after becoming a non-interactive <span> that delegates its click to the row link — the cursor no longer matched the actual (now clickable) behavior. --------- Co-authored-by: GFR <248542187+gfr-free@users.noreply.github.com> Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
218 lines
11 KiB
ERB
218 lines
11 KiB
ERB
<%# locals: (entry:, balance_trend: nil, view_ctx: "global", in_split_group: false) %>
|
|
|
|
<% transaction = entry.entryable %>
|
|
<% transaction_security_logo_url = transaction.activity_security&.display_logo_url %>
|
|
<% open_path = if transaction.transfer?
|
|
transaction.transfer.present? ? transfer_path(transaction.transfer) : entry_path(entry)
|
|
else
|
|
in_split_group ? entry_path(entry, grouped: true) : entry_path(entry)
|
|
end %>
|
|
|
|
<%= turbo_frame_tag dom_id(entry) do %>
|
|
<%= turbo_frame_tag dom_id(transaction) do %>
|
|
<div class="group flex lg:grid lg:grid-cols-12 items-center text-primary text-sm font-medium p-3 lg:p-4 <%= "pl-8 lg:pl-12" if in_split_group %>"
|
|
data-controller="clickable-row"
|
|
data-action="click->clickable-row#open">
|
|
|
|
<div class="pr-4 lg:pr-10 flex items-center gap-3 lg:gap-4 col-span-7 min-w-0">
|
|
<%= check_box_tag dom_id(entry, "selection"),
|
|
disabled: transaction.transfer.present?,
|
|
class: "checkbox checkbox--light hidden lg:block",
|
|
data: {
|
|
id: entry.id,
|
|
entry_type: entry.entryable_type,
|
|
"bulk-select-target": "row",
|
|
action: "bulk-select#toggleRowSelection",
|
|
checkbox_toggle_target: "selectionEntry"
|
|
} %>
|
|
|
|
<div class="flex md:hidden items-center gap-1 col-span-2 relative shrink-0">
|
|
<%= render "transactions/transaction_category", transaction: transaction, variant: "mobile", in_split_group: in_split_group %>
|
|
<% if transaction_security_logo_url.present? %>
|
|
<%= image_tag Setting.transform_brand_fetch_url(transaction_security_logo_url),
|
|
class: "w-5 h-5 rounded-full absolute -bottom-1 -right-1 border border-secondary pointer-events-none",
|
|
loading: "lazy" %>
|
|
<% elsif transaction.merchant&.logo_url.present? %>
|
|
<%= image_tag Setting.transform_brand_fetch_url(transaction.merchant.logo_url),
|
|
class: "w-5 h-5 rounded-full absolute -bottom-1 -right-1 border border-secondary pointer-events-none",
|
|
loading: "lazy" %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="max-w-full min-w-0 <%= "opacity-50 text-secondary" if entry.excluded %>">
|
|
<%= content_tag :div, class: ["flex items-center gap-3 lg:gap-4"] do %>
|
|
<div class="hidden lg:flex">
|
|
<% if transaction.transfer? %>
|
|
<%= render DS::FilledIcon.new(
|
|
icon: "arrow-right-left",
|
|
hex_color: Category::TRANSFER_COLOR,
|
|
size: "lg",
|
|
rounded: true
|
|
) %>
|
|
<% elsif transaction_security_logo_url.present? %>
|
|
<%= image_tag Setting.transform_brand_fetch_url(transaction_security_logo_url),
|
|
class: "w-9 h-9 rounded-full border border-secondary",
|
|
loading: "lazy" %>
|
|
<% elsif transaction.merchant&.logo_url.present? %>
|
|
<%= image_tag Setting.transform_brand_fetch_url(transaction.merchant.logo_url),
|
|
class: "w-9 h-9 rounded-full border border-secondary",
|
|
loading: "lazy" %>
|
|
<% else %>
|
|
<div class="hidden lg:flex">
|
|
<%= render DS::FilledIcon.new(
|
|
variant: :text,
|
|
text: entry.name,
|
|
size: "lg",
|
|
rounded: true
|
|
) %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="truncate">
|
|
<div class="space-y-0.5">
|
|
<div class="flex items-center gap-1 min-w-0">
|
|
<div class="truncate flex-shrink">
|
|
<%= link_to(
|
|
entry.name,
|
|
open_path,
|
|
data: {
|
|
turbo_frame: "drawer",
|
|
turbo_prefetch: false,
|
|
clickable_row_target: "link"
|
|
},
|
|
class: "hover:underline"
|
|
) %>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-1 flex-shrink-0">
|
|
<% if transaction.one_time? %>
|
|
<span class="text-orange-500" title="One-time <%= entry.amount.negative? ? "income" : "expense" %> (excluded from averages)">
|
|
<%= icon "asterisk", size: "sm", color: "current" %>
|
|
</span>
|
|
<% end %>
|
|
|
|
<%# Pending indicator %>
|
|
<% if transaction.pending? %>
|
|
<%= render DS::Pill.new(
|
|
label: t("transactions.transaction.pending"),
|
|
tone: :neutral,
|
|
marker: false,
|
|
icon: "clock",
|
|
title: t("transactions.transaction.pending_tooltip")
|
|
) %>
|
|
<% end %>
|
|
|
|
<%# Potential duplicate indicator - different styling for low vs medium confidence %>
|
|
<% if transaction.has_potential_duplicate? %>
|
|
<% if transaction.low_confidence_duplicate? %>
|
|
<%= render DS::Pill.new(
|
|
label: t("transactions.transaction.review_recommended"),
|
|
tone: :neutral,
|
|
marker: false,
|
|
icon: "help-circle",
|
|
title: t("transactions.transaction.review_recommended_tooltip")
|
|
) %>
|
|
<% else %>
|
|
<%= render DS::Pill.new(
|
|
label: t("transactions.transaction.possible_duplicate"),
|
|
tone: :warning,
|
|
marker: false,
|
|
icon: "alert-triangle",
|
|
title: t("transactions.transaction.potential_duplicate_tooltip")
|
|
) %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<%# Split indicator %>
|
|
<% if @split_parent_entry_ids ? @split_parent_entry_ids.include?(entry.id) : entry.split_parent? %>
|
|
<%= render DS::Pill.new(
|
|
label: t("transactions.transaction.split"),
|
|
tone: :neutral,
|
|
marker: false,
|
|
icon: "split",
|
|
title: t("transactions.transaction.split_tooltip")
|
|
) %>
|
|
<% end %>
|
|
<% if entry.split_child? && !in_split_group %>
|
|
<span class="text-secondary" title="<%= t("transactions.transaction.split_child_tooltip") %>">
|
|
<%= icon "corner-down-right", size: "sm", color: "current" %>
|
|
</span>
|
|
<% end %>
|
|
|
|
<% if transaction.transfer.present? %>
|
|
<%= render "transactions/transfer_match", transaction: transaction %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-secondary text-xs font-normal">
|
|
<% if transaction.transfer? %>
|
|
<span class="text-secondary">
|
|
<%= transaction.loan_payment? ? t("transactions.show.loan_payment") : t("transactions.show.transfer") %> •
|
|
<% if transaction.transfer.present? %>
|
|
<% counterpart = transaction.transfer_as_outflow.present? ? transaction.transfer.to_account : transaction.transfer.from_account %>
|
|
<% if counterpart.present? && @accessible_account_ids&.include?(counterpart.id) %>
|
|
<% if transaction.transfer_as_outflow.present? %>
|
|
<%= entry.account.name %> → <%= counterpart.name %>
|
|
<% else %>
|
|
<%= entry.account.name %> ← <%= counterpart.name %>
|
|
<% end %>
|
|
<% else %>
|
|
<%= entry.account.name %>
|
|
<% end %>
|
|
<% else %>
|
|
<%= entry.account.name %>
|
|
<% end %>
|
|
</span>
|
|
<% else %>
|
|
<% if transaction.merchant&.present? %>
|
|
<span class="hidden lg:inline truncate"><%= transaction.merchant.name %> • </span>
|
|
<% end %>
|
|
<span class="text-secondary hidden lg:inline">
|
|
<%= link_to entry.account.name,
|
|
account_path(entry.account, tab: "transactions"),
|
|
data: { turbo_frame: "_top" },
|
|
class: "hover:underline" %>
|
|
</span>
|
|
<div class="flex min-w-0 items-center gap-1">
|
|
<%= render "categories/category_name_mobile", transaction: transaction %>
|
|
<% if transaction.merchant&.present? %>
|
|
<span class="lg:hidden min-w-0 truncate">• <%= transaction.merchant.name %></span>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden md:flex min-w-0 items-center gap-1 col-span-3">
|
|
<% if entry.account.supports_trades? && !transaction.transfer? %>
|
|
<%# For investment/crypto accounts, show activity label instead of category %>
|
|
<%= render "investment_activity/quick_edit_badge", entry: entry, entryable: transaction %>
|
|
<% else %>
|
|
<%= render "transactions/transaction_category", transaction: transaction, variant: "desktop", in_split_group: in_split_group %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="shrink-0 col-span-4 lg:col-span-2 ml-auto flex items-center justify-end gap-2 <%= "opacity-50" if entry.excluded %>">
|
|
<%# Protection indicator - shows on hover when entry is protected from sync %>
|
|
<% if entry.protected_from_sync? && !entry.excluded? %>
|
|
<%= link_to entry_path(entry),
|
|
data: { turbo_frame: "drawer", turbo_prefetch: false },
|
|
class: "invisible group-hover:visible transition-opacity",
|
|
title: t("entries.protection.tooltip") do %>
|
|
<%= icon "lock", size: "sm", class: "text-secondary" %>
|
|
<% end %>
|
|
<% end %>
|
|
<%= content_tag :p,
|
|
transaction.transfer? && view_ctx == "global" ? "+/- #{format_money(entry.amount_money.abs)}" : format_money(-entry.amount_money),
|
|
class: ["privacy-sensitive", "text-green-600": entry.amount.negative?] %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|