fix(savings_goals): update ONGOING count when filtering by status or search

The "ONGOING · N" badge was server-rendered with @active_goals.size and
never re-synced when the Stimulus filter hid cards. Add a count target
and update it alongside the existing empty/grid toggles.
This commit is contained in:
Guillem Arias
2026-05-11 12:50:37 +02:00
parent 638749c1d5
commit 69c45d4714
2 changed files with 5 additions and 2 deletions

View File

@@ -5,7 +5,7 @@ import { Controller } from "@hotwired/stimulus";
// and data-goal-status; the controller toggles `.hidden` on cards
// based on the active query/chip.
export default class extends Controller {
static targets = ["input", "chip", "card", "empty", "grid"];
static targets = ["input", "chip", "card", "empty", "grid", "count"];
static values = { status: { type: String, default: "all" } };
connect() {
@@ -35,6 +35,9 @@ export default class extends Controller {
if (this.hasGridTarget) {
this.gridTarget.classList.toggle("hidden", visible === 0);
}
if (this.hasCountTarget) {
this.countTarget.textContent = visible;
}
}
selectChip(event) {

View File

@@ -109,7 +109,7 @@
<div class="flex items-center gap-1.5 mb-4 text-[11px] font-medium uppercase tracking-wide text-secondary">
<span><%= t(".ongoing_section.heading") %></span>
<span class="text-subdued">·</span>
<span class="tabular-nums"><%= @active_goals.size %></span>
<span class="tabular-nums" data-savings-goals-filter-target="count"><%= @active_goals.size %></span>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5" data-savings-goals-filter-target="grid">
<% @active_goals.each do |goal| %>