https://pacosmoda.es/assets/store/controllers/form_submit_spinner_controller

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4    static targets = ["spinner", "submitButton"]
5
6    connect() {
7        this.element.addEventListener('turbo:submit-end', (event) => {
8            const submitButton = event.detail.formSubmission.submitter;
9
10            if (submitButton) {
11                this.hideSpinner(submitButton);
12            }
13
14            // Actualizar la URL del navegador con los parámetros del formulario
15            this.updateBrowserUrl()
16        })
17
18    }
19
20    submit(event) {
21        const submitButton = event.submitter || (event.detail ? event.detail.submitter : null);
22        if (submitButton) {
23            const spinner = submitButton.querySelector('.spinner-border');
24            submitButton.disabled = true;
25            spinner.style.display = "inline-block";
26        }
27    }
28
29    hideSpinner(submitButton) {
30        const spinner = submitButton.querySelector('.spinner-border');
31
32        spinner.style.display = "none";
33        submitButton.disabled = false;
34    }
35
36    updateBrowserUrl() {
37        const formData = new FormData(this.element)
38        const params = new URLSearchParams()
39
40        for (const [key, value] of formData.entries()) {
41            if (value && value.trim() !== '') {
42                params.append(key, value)
43            }
44        }
45
46        const formAction = this.element.action
47        const baseUrl = new URL(formAction, window.location.origin)
48        const queryString = params.toString()
49        const newUrl = queryString ? `${baseUrl.pathname}?${queryString}` : baseUrl.pathname
50
51        window.history.pushState({ turboStream: true }, '', newUrl)
52    }
53
54    resetFilters(event) {
55        event.preventDefault()
56
57        // Limpiar checkboxes y radios
58        this.element.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false)
59        this.element.querySelectorAll('input[type="radio"]').forEach(rb => rb.checked = false)
60
61        // Limpiar inputs de precio
62        const minPrice = this.element.querySelector('input[name="min_price"]')
63        const maxPrice = this.element.querySelector('input[name="max_price"]')
64        if (minPrice) minPrice.value = ''
65        if (maxPrice) maxPrice.value = ''
66
67        // Limpiar input de orden
68        const orderInput = this.element.querySelector('input[name="order"]')
69        if (orderInput) orderInput.value = ''
70
71        // Enviar el formulario limpio por Turbo Stream
72        this.element.requestSubmit()
73    }
74};