https://booko.co.nz/assets/controllers/alerts_filter_controller-7f5e375d.js

1import { Controller } from "@hotwired/stimulus"
2
3// Live filtering for the /alerts toolbar. Typing submits the form after a short
4// pause; picking a segment submits at once. The form targets the results frame,
5// so the field you're typing in is never re-rendered and keeps its cursor.
6//
7// It also owns the Clear link's visibility: the toolbar sits outside the frame
8// and isn't re-rendered on a filter change, so the server can't keep that link
9// honest — this can, by reading the form itself.
10//
11// Connects to data-controller="alerts-filter"
12export default class extends Controller {
13  static targets = ["clear"]
14  static values = { delay: { type: Number, default: 300 } }
15
16  connect() {
17    this.refreshClear()
18  }
19
20  disconnect() {
21    clearTimeout(this.timer)
22  }
23
24  // Typing: wait for a break, so a five-letter title is one request, not five.
25  submit() {
26    this.refreshClear()
27    clearTimeout(this.timer)
28    this.timer = setTimeout(() => this.element.requestSubmit(), this.delayValue)
29  }
30
31  // A click on a segment is a finished decision — don't make it wait.
32  submitNow() {
33    this.refreshClear()
34    clearTimeout(this.timer)
35    this.element.requestSubmit()
36  }
37
38  clear() {
39    clearTimeout(this.timer)
40  }
41
42  refreshClear() {
43    if (!this.hasClearTarget) return
44
45    const data = new FormData(this.element)
46    const filtering =
47      (data.get("q") || "").trim() !== "" ||
48      (data.get("status") || "all") !== "all" ||
49      (data.get("condition") || "all") !== "all"
50
51    this.clearTarget.classList.toggle("hidden", !filtering)
52  }
53}