realtime filtering using turbo frame

Author: jcrombez

assets/dist/form_turbo_frame_updater_controller.js

@@ -0,0 +1,58 @@
+import { Controller } from '@hotwired/stimulus';
+import {debounce} from "lodash/function";
+
+export default class extends Controller {
+    static values = {
+        events: { type: Array, default: ['change', 'input'] },
+        turboFrameIds: { type: Array, default: [] },
+    };
+
+    lastUsedUrl = null;
+
+    connect() {
+        this.handleChange = this.handleChange.bind(this);
+        this.handleChangeThrottled = debounce(this.handleChange, 250);
+
+        this.eventsValue.forEach(event => {
+            this.element.addEventListener(event, this.handleChangeThrottled);
+        });
+    }
+
+    disconnect() {
+        this.eventsValue.forEach(event => {
+            this.element.removeEventListener(event, this.handleChangeThrottled);
+        });
+    }
+
+    handleChange() {
+        if (this.element.tagName !== 'FORM' || this.element.method.toLowerCase() !== 'get') {
+            return
+        }
+
+        const url = new URL(this.element.action);
+        url.search = new URLSearchParams(new FormData(this.element)).toString();
+
+        const urlString = url.toString();
+
+        if (urlString === this.lastUsedUrl) {
+            return
+        }
+
+        this.lastUsedUrl = urlString;
+
+        this.turboFrameIdsValue.forEach((id, index) => {
+            const frame = document.querySelector(id);
+
+            if (frame) {
+                const urlWithCacheBuster = new URL(urlString);
+                urlWithCacheBuster.searchParams.set('_v', index + Date.now());
+                const finalUrl = urlWithCacheBuster.toString();
+
+                console.log('[auto-submit-form] Updating frame : ' + id + ' with URL: ' + finalUrl + '')
+                frame.setAttribute('src', finalUrl);
+            } else {
+                console.log('[auto-submit-form] Frame not found : "' + id +'".');
+            }
+        });
+    }
+}

assets/package.json

@@ -12,6 +12,13 @@
                 "webpackMode": "eager",
                 "fetch": "eager",
                 "enabled": true
+            },
+            "form-turbo-frame-updater": {
+                "main": "dist/form_turbo_frame_updater_controller.js",
+                "name": "form-turbo-frame-updater",
+                "webpackMode": "eager",
+                "fetch": "eager",
+                "enabled": true
             }
         },
         "importmap": {

src/Resources/views/theme/bootstrap5/datagrid-filters.html.twig

@@ -1,4 +1,16 @@
-{{ form_start(form) }}
+{% set relatedTurboFrames = this.relatedTurboFrames ?? false %}
+{% set form_options = {} %}
+
+{% if relatedTurboFrames %}
+    {% set form_options = form_options|merge({
+        'attr': {
+            'data-controller': 'form-turbo-frame-updater',
+            'data-form-turbo-frame-updater-turbo-frame-ids-value': this.relatedTurboFrames|json_encode
+        }
+    }) %}
+{% endif %}
+
+{{ form_start(form, form_options) }}
 
 {% set layoutFieldNames = [] %}
 {% for row in grid.filterLayout %}
@@ -22,6 +34,7 @@
     {% endif %}
 {% endfor %}
 
+{% if not relatedTurboFrames %}
 <div class="row">
     <div class="col text-end">
         <ul class="list-inline">
@@ -47,4 +60,6 @@
         </ul>
     </div>
 </div>
+{% endif %}
+
 {{ form_end(form) }}

src/Twig/Components/DatagridFiltersComponent.php

@@ -10,4 +10,6 @@ final class DatagridFiltersComponent
 {
     public FormView $form;
     public Grid $grid;
+    
+    public array $relatedTurboFrames = [];
 }