Persistence Stimulus controller to automatically append filtration form data to URL

assets/controllers/persistence.js

@@ -0,0 +1,23 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+    static targets = ['form'];
+
+    connect() {
+        this.#loadFormsState();
+    }
+
+    #loadFormsState() {
+        const url = new URL(window.location.href);
+
+        for (const form of this.formTargets) {
+            const formData = new FormData(form);
+
+            for (const [key, value] of formData) {
+                url.searchParams.set(key, String(value));
+            }
+        }
+
+        window.history.replaceState(null, null, url);
+    }
+}

assets/package.json

@@ -14,6 +14,11 @@
                 "main": "controllers/batch.js",
                 "fetch": "eager",
                 "enabled": true
+            },
+            "persistence": {
+                "main": "controllers/persistence.js",
+                "fetch": "eager",
+                "enabled": true
             }
         },
         "importmap": {

docs/src/docs/features/filtering.md

@@ -176,6 +176,25 @@ class ProductController extends AbstractController
 ```
 :::
 
+### Adding filters loaded from persistence to URL
+
+By default, the filters loaded from the persistence are not visible in the URL.
+
+It is recommended to make sure the **persistence** controller is enabled in your `assets/controllers.json`,
+which will automatically append the filters to the URL, even if multiple data tables are visible on the same page.
+
+```json
+{
+    "controllers": {
+        "@kreyu/data-table-bundle": {
+            "persistence": {
+                "enabled": true
+            }
+        }
+    }
+}
+```
+
 ## Default filtration
 
 The default filtration data can be overridden using the data table builder's `setDefaultFiltrationData()` method:

docs/src/docs/installation.md

@@ -56,6 +56,9 @@ Now, add `@kreyu/data-table-bundle` controllers to your `assets/controllers.json
             "personalization": {
                 "enabled": true
             },
+            "persistence": {
+                "enabled": true
+            },
             "batch": {
                 "enabled": true
             }

src/Resources/views/themes/base.html.twig

@@ -3,11 +3,13 @@
 {# Base HTML Theme #}
 
 {% block kreyu_data_table %}
-    <turbo-frame id="kreyu_data_table_{{ name }}" target="_top"
-        {% if has_batch_actions %}
-            data-controller="kreyu--data-table-bundle--batch"
-        {% endif %}
-    >
+    {% set stimulus_controllers = ['kreyu--data-table-bundle--persistence'] %}
+
+    {% if has_batch_actions %}
+        {% set stimulus_controllers = stimulus_controllers|merge(['kreyu--data-table-bundle--batch']) %}
+    {% endif %}
+
+    <turbo-frame id="kreyu_data_table_{{ name }}" data-controller="{{ stimulus_controllers|join(' ') }}" target="_top">
         {{ block('action_bar') }}
         {{ block('table') }}
 
@@ -18,7 +20,13 @@
 {% endblock %}
 
 {% block kreyu_data_table_form_aware %}
-    <turbo-frame id="kreyu_data_table_{{ name }}" target="_top">
+    {% set stimulus_controllers = ['kreyu--data-table-bundle--persistence'] %}
+
+    {% if has_batch_actions %}
+        {% set stimulus_controllers = stimulus_controllers|merge(['kreyu--data-table-bundle--batch']) %}
+    {% endif %}
+
+    <turbo-frame id="kreyu_data_table_{{ name }}" data-controller="{{ stimulus_controllers|join(' ') }}" target="_top">
         {{ block('action_bar') }}
 
         {{ form_start(form, form_variables) }}
@@ -254,7 +262,14 @@
 {% block kreyu_data_table_filters_form %}
     {% form_theme form with form_themes|default([_self]) %}
 
-    {{ form_start(form, { attr: { 'data-turbo-action': 'advance', 'data-turbo-frame': '_self', 'hidden': 'hidden' } }) }}
+    {{ form_start(form, {
+        attr: {
+            'data-turbo-action': 'advance',
+            'data-turbo-frame': '_self',
+            'data-kreyu--data-table-bundle--persistence-target': 'form',
+            'hidden': 'hidden',
+        }
+    }) }}
         {# This form should be empty - all its inputs should be on the outside, referenced using the "form" attribute #}
     {{ form_end(form, { render_rest: false }) }}