From 28f76b279bf15844e7f7d35dafcdc7625f873944 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20J?= <jeremy@code-rhapsodie.fr>
Date: Tue, 17 Dec 2024 16:28:58 +0100
Subject: [PATCH] Fixed scheduled job run history pagination

---
 CHANGELOG.md                                  |  1 +
 .../ezdataflow/Dashboard/history.html.twig    |  3 ++
 .../admin/ezdataflow/Dashboard/main.html.twig | 27 ++++++++++
 .../ezdataflow/parts/tab/job_list.html.twig   | 49 +++++--------------
 .../parts/tab/schedule_list.html.twig         | 49 +++++--------------
 5 files changed, 55 insertions(+), 74 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index acc11b8..d74808e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Version 4.2.0
 
 * Added error count columns to job tables
+* Fixed scheduled job run history pagination
 
 # Version 4.1.2
 
diff --git a/src/Resources/views/themes/admin/ezdataflow/Dashboard/history.html.twig b/src/Resources/views/themes/admin/ezdataflow/Dashboard/history.html.twig
index ad70e70..5f7ee30 100644
--- a/src/Resources/views/themes/admin/ezdataflow/Dashboard/history.html.twig
+++ b/src/Resources/views/themes/admin/ezdataflow/Dashboard/history.html.twig
@@ -43,14 +43,17 @@
                 e.preventDefault();
                 const loading = document.getElementById('loading_ezdataflow_history_results');
                 const results = document.getElementById('ezdataflow_history_results').querySelector('.ibexa-table');
+                const pagination = document.getElementById('ezdataflow_history_results').querySelector('.pag');
                 loading.hidden = false;
                 results.innerHTML = '';
+                pagination.innerHTML = '';
                 fetch('{{ path('coderhapsodie.ezdataflow.history') }}?filter=' + this.value)
                     .then((r) => r.text())
                     .then((content) => {
                         const node = document.createElement('div');
                         node.innerHTML = content;
                         results.innerHTML = node.querySelector('#ezdataflow_history_results .ibexa-table').innerHTML;
+                        pagination.innerHTML = node.querySelector('#ezdataflow_history_results .pag').innerHTML;
                         loading.hidden = true;
                     })
                 ;
diff --git a/src/Resources/views/themes/admin/ezdataflow/Dashboard/main.html.twig b/src/Resources/views/themes/admin/ezdataflow/Dashboard/main.html.twig
index f7e9097..958bf42 100644
--- a/src/Resources/views/themes/admin/ezdataflow/Dashboard/main.html.twig
+++ b/src/Resources/views/themes/admin/ezdataflow/Dashboard/main.html.twig
@@ -71,6 +71,33 @@
                 .closest('ul').querySelectorAll('li.ibexa-tabs__tab');
             const tabs = document.getElementById('ibexa-tab-coderhapsodie-ezdataflow-code-rhapsodie-ezdataflow-repeating')
                 .closest('.tab-content').querySelectorAll('.tab-pane');
+
+            // Manage ajax pagination
+            document.addEventListener('click', (e) => {
+                const link = e.target.closest('.ibexa-pagination a');
+                if (!link) {
+                    return;
+                }
+
+                const block = link.closest('.ibexa-pagination').parentNode.parentNode;
+                const display = block.querySelector('.ibexa-table');
+                const pagination = block.querySelector('.pag');
+                const loader = document.querySelector('#' + block.dataset.loader);
+                e.preventDefault();
+                loader.hidden = false;
+                display.innerHTML = '';
+                pagination.innerHTML = '';
+                fetch(link.href)
+                    .then((r) => r.text())
+                    .then((content) => {
+                        const node = document.createElement('div');
+                        node.innerHTML = content;
+                        display.innerHTML = node.querySelector('#' + block.id).querySelector('.ibexa-table').innerHTML;
+                        pagination.innerHTML = node.querySelector('#' + block.id).querySelector('.pag').innerHTML;
+                        loader.hidden = true;
+                    })
+                ;
+            });
         });
     </script>
 {% endblock %}
diff --git a/src/Resources/views/themes/admin/ezdataflow/parts/tab/job_list.html.twig b/src/Resources/views/themes/admin/ezdataflow/parts/tab/job_list.html.twig
index 896736e..2f548e1 100644
--- a/src/Resources/views/themes/admin/ezdataflow/parts/tab/job_list.html.twig
+++ b/src/Resources/views/themes/admin/ezdataflow/parts/tab/job_list.html.twig
@@ -9,7 +9,7 @@
     </svg>
 </div>
 
-<div id="{{ id }}" class="history-details-aware">
+<div id="{{ id }}" data-loader="loading_{{ id }}" class="history-details-aware">
 
     {% set body_rows = [] %}
 
@@ -80,40 +80,15 @@
         {% endblock %}
     {% endembed %}
 
-    {% if pager.haveToPaginate %}
-        {% include '@ibexadesign/ui/pagination.html.twig' with {
-            'pager': pager,
-            'paginaton_params': {
-                'routeName': paginate_route,
-                'routeParams': paginate_params|default({})
-            }
-        } %}
-    {% endif %}
+    <div class="pag">
+        {% if pager.haveToPaginate %}
+            {% include '@ibexadesign/ui/pagination.html.twig' with {
+                'pager': pager,
+                'paginaton_params': {
+                    'routeName': paginate_route,
+                    'routeParams': paginate_params|default({})
+                }
+            } %}
+        {% endif %}
+    </div>
 </div>
-
-<script>
-    document.addEventListener('DOMContentLoaded', () => {
-        // Manage ajax pagination
-        const display = document.getElementById('{{ id }}');
-        display.addEventListener('click', (e) => {
-            const link = e.target.closest('.ibexa-pagination a');
-            if (!link) {
-                return;
-            }
-
-            const loader = document.getElementById('loading_{{ id }}');
-            e.preventDefault();
-            loader.hidden = false;
-            display.innerHTML = '';
-            fetch(link.href)
-                .then((r) => r.text())
-                .then((content) => {
-                    const node = document.createElement('div');
-                    node.innerHTML = content;
-                    display.innerHTML = node.querySelector('#{{ id }}').innerHTML;
-                    loader.hidden = true;
-                })
-            ;
-        });
-    });
-</script>
diff --git a/src/Resources/views/themes/admin/ezdataflow/parts/tab/schedule_list.html.twig b/src/Resources/views/themes/admin/ezdataflow/parts/tab/schedule_list.html.twig
index e5b0ede..5b95c69 100644
--- a/src/Resources/views/themes/admin/ezdataflow/parts/tab/schedule_list.html.twig
+++ b/src/Resources/views/themes/admin/ezdataflow/parts/tab/schedule_list.html.twig
@@ -7,7 +7,7 @@
     </svg>
 </div>
 
-<div id="{{ id }}" class="history-details-aware">
+<div id="{{ id }}" data-loader="loading_{{ id }}" class="history-details-aware">
     {% set body_rows = [] %}
 
     {% for item in pager.currentPageResults %}
@@ -113,40 +113,15 @@
         {% endblock %}
     {% endembed %}
 
-    {% if pager.haveToPaginate %}
-        {% include '@ibexadesign/ui/pagination.html.twig' with {
-            'pager': pager,
-            'paginaton_params': {
-                'routeName': paginate_route,
-                'routeParams': paginate_params|default({})
-            }
-        } %}
-    {% endif %}
+    <div class="pag">
+        {% if pager.haveToPaginate %}
+            {% include '@ibexadesign/ui/pagination.html.twig' with {
+                'pager': pager,
+                'paginaton_params': {
+                    'routeName': paginate_route,
+                    'routeParams': paginate_params|default({})
+                }
+            } %}
+        {% endif %}
+    </div>
 </div>
-
-<script>
-    document.addEventListener('DOMContentLoaded', () => {
-        // Manage ajax pagination
-        const display = document.getElementById('{{ id }}');
-        display.addEventListener('click', (e) => {
-            const link = e.target.closest('.ibexa-pagination a');
-            if (!link) {
-                return;
-            }
-
-            const loader = document.getElementById('loading_{{ id }}');
-            e.preventDefault();
-            loader.hidden = false;
-            display.innerHTML = '';
-            fetch(link.href)
-                .then((r) => r.text())
-                .then((content) => {
-                    const node = document.createElement('div');
-                    node.innerHTML = content;
-                    display.innerHTML = node.querySelector('#{{ id }}').innerHTML;
-                    loader.hidden = true;
-                })
-            ;
-        });
-    });
-</script>