From 0bb54a079b12f654ed6c28a2c7af76112efb42e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Wr=C3=B3blewski?= <kontakt@swroblewski.pl>
Date: Sat, 20 Jul 2024 23:17:00 +0200
Subject: [PATCH] Persistence Stimulus controller to automatically append
 filtration form data to URL (#113)

---
 assets/controllers/persistence.js         | 23 ++++++++++++++++++
 assets/package.json                       |  5 ++++
 docs/src/docs/features/filtering.md       | 19 +++++++++++++++
 docs/src/docs/installation.md             |  3 +++
 src/Resources/views/themes/base.html.twig | 29 +++++++++++++++++------
 5 files changed, 72 insertions(+), 7 deletions(-)
 create mode 100644 assets/controllers/persistence.js

diff --git a/assets/controllers/persistence.js b/assets/controllers/persistence.js
new file mode 100644
index 00000000..1cecb115
--- /dev/null
+++ b/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);
+    }
+}
diff --git a/assets/package.json b/assets/package.json
index f638d601..d0e6baff 100755
--- a/assets/package.json
+++ b/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": {
diff --git a/docs/src/docs/features/filtering.md b/docs/src/docs/features/filtering.md
index 755cb3a2..56b91d0d 100644
--- a/docs/src/docs/features/filtering.md
+++ b/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:
diff --git a/docs/src/docs/installation.md b/docs/src/docs/installation.md
index f23e035a..551607ec 100644
--- a/docs/src/docs/installation.md
+++ b/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
             }
diff --git a/src/Resources/views/themes/base.html.twig b/src/Resources/views/themes/base.html.twig
index efe06bf8..d6cb3935 100755
--- a/src/Resources/views/themes/base.html.twig
+++ b/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 }) }}