From 08def4dec72649e585597fa20a4936609a46d1dd Mon Sep 17 00:00:00 2001
From: Paulo Vareiro <58229468+paulovareiro29@users.noreply.github.com>
Date: Wed, 13 Nov 2024 13:38:29 +0000
Subject: [PATCH] feat: implement load more script (#51)

* feat: implement load more script

* chore: update all enquiry templates
---
 src/js/load-more.js               | 44 ++++++++++++++++
 src/js/scripts.js                 |  3 +-
 src/pages/enquiry-all-states.twig | 85 ++++++++++++++++---------------
 src/pages/enquiry-validated.twig  | 80 ++++++++++++++++-------------
 src/pages/enquiry.twig            | 80 ++++++++++++++++-------------
 5 files changed, 181 insertions(+), 111 deletions(-)
 create mode 100644 src/js/load-more.js

diff --git a/src/js/load-more.js b/src/js/load-more.js
new file mode 100644
index 0000000..f08f23b
--- /dev/null
+++ b/src/js/load-more.js
@@ -0,0 +1,44 @@
+;(() => {
+  const getButton = (section) => section.querySelector('button')
+  const getArea = (section) => section.querySelector('[load-more-area]')
+  const getCurrentPage = (area) => parseInt(area.getAttribute('data-page'))
+  const getPerPage = (area) => parseInt(area.getAttribute('data-per-page'))
+  const getTotal = (area) => parseInt(area.getAttribute('data-total'))
+
+  const init = (section) => {
+    const area = getArea(section)
+    const perPage = getPerPage(area)
+    const total = area.children.length
+
+    area.setAttribute('data-total', total)
+    area.setAttribute('data-page', 1)
+    Array.from(area.children)
+      .slice(perPage)
+      .forEach((child) => child.classList.add('d-none'))
+  }
+
+  const handleLoadMore = (section) => {
+    const area = getArea(section)
+    const currentPage = getCurrentPage(area)
+    const perPage = getPerPage(area)
+    const total = getTotal(area)
+
+    const start = currentPage * perPage
+    const end = Math.min(start + perPage, total)
+
+    Array.from(area.children)
+      .slice(start, end)
+      .forEach((child) => child.classList.remove('d-none'))
+
+    area.setAttribute('data-page', currentPage + 1)
+
+    if (end >= total) {
+      getButton(section).classList.add('d-none')
+    }
+  }
+
+  document.querySelectorAll('[load-more-section]').forEach((section) => {
+    init(section)
+    getButton(section).addEventListener('click', () => handleLoadMore(section))
+  })
+})()
diff --git a/src/js/scripts.js b/src/js/scripts.js
index 3623ce3..5e01439 100644
--- a/src/js/scripts.js
+++ b/src/js/scripts.js
@@ -1,3 +1,4 @@
 import 'bootstrap'
 import './darkmode.js'
-import './tiles-showcase.js'
+import './load-more.js'
+import './tiles-showcase.js'
\ No newline at end of file
diff --git a/src/pages/enquiry-all-states.twig b/src/pages/enquiry-all-states.twig
index ecde3a3..a7def7a 100644
--- a/src/pages/enquiry-all-states.twig
+++ b/src/pages/enquiry-all-states.twig
@@ -152,46 +152,51 @@
         </div>
       </div>
 
-      <div class='d-flex flex-column gap-5 mb-5' role='region' aria-live='polite'>
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'coordinating'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'requested'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'denied'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'partially-provided'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'ready'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'reviewing'
-          }
-        %}
-      </div>
-
-      <div class='d-flex justify-content-center'>
-        {%
-          include 'partials::base/b_link.twig' with {
-          text: 'Mehr Datenanfragen anzeigen',
-          icon: 'plus-lg'
-          }
-        %}
+      <div load-more-section>
+        <div
+          class='d-flex flex-column gap-5 mb-5'
+          role='region'
+          aria-live='polite'
+          load-more-area
+          data-per-page='5'
+          data-page='0'
+        >
+          {% for i in 0..5 %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'coordinating'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'requested'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'denied'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'partially-provided'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'ready'
+              }
+            %}
+          {% endfor %}
+        </div>
+        <div class='d-flex justify-content-center'>
+          {%
+            include 'partials::base/b_link.twig' with {
+            text: 'Mehr Datenanfragen anzeigen',
+            icon: 'plus-lg'
+            }
+          %}
+        </div>
       </div>
     </div>
   </section>
diff --git a/src/pages/enquiry-validated.twig b/src/pages/enquiry-validated.twig
index 187f3ad..8b3907f 100644
--- a/src/pages/enquiry-validated.twig
+++ b/src/pages/enquiry-validated.twig
@@ -160,41 +160,51 @@
         </div>
       </div>
 
-      <div class='d-flex flex-column gap-5 mb-5' role='region' aria-live='polite'>
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'coordinating'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'requested'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'denied'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'partially-provided'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'ready'
-          }
-        %}
-      </div>
-
-      <div class='d-flex justify-content-center'>
-        {%
-          include 'partials::base/b_link.twig' with {
-          text: 'Mehr Datenanfragen anzeigen',
-          icon: 'plus-lg'
-          }
-        %}
+      <div load-more-section>
+        <div
+          class='d-flex flex-column gap-5 mb-5'
+          role='region'
+          aria-live='polite'
+          load-more-area
+          data-per-page='5'
+          data-page='0'
+        >
+          {% for i in 0..5 %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'coordinating'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'requested'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'denied'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'partially-provided'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'ready'
+              }
+            %}
+          {% endfor %}
+        </div>
+        <div class='d-flex justify-content-center'>
+          {%
+            include 'partials::base/b_link.twig' with {
+            text: 'Mehr Datenanfragen anzeigen',
+            icon: 'plus-lg'
+            }
+          %}
+        </div>
       </div>
     </div>
   </section>
diff --git a/src/pages/enquiry.twig b/src/pages/enquiry.twig
index 1e0ee32..af4cb58 100644
--- a/src/pages/enquiry.twig
+++ b/src/pages/enquiry.twig
@@ -152,42 +152,52 @@
         </div>
       </div>
 
-      <div class='d-flex flex-column gap-5 mb-5' role='region' aria-live='polite'>
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'coordinating'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'coordinating'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'coordinating'
-          }
-        %}
-
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'requested'
-          }
-        %}
-        {%
-          include 'partials::base/b_request.twig' with {
-          status: 'coordinating'
-          }
-        %}
-      </div>
+      <div load-more-section>
+        <div
+          class='d-flex flex-column gap-5 mb-5'
+          role='region'
+          aria-live='polite'
+          load-more-area
+          data-per-page='5'
+          data-page='0'
+        >
+          {% for i in 0..5 %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'coordinating',
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'coordinating'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'coordinating'
+              }
+            %}
 
-      <div class='d-flex justify-content-center'>
-        {%
-          include 'partials::base/b_link.twig' with {
-          text: 'Mehr Datenanfragen anzeigen',
-          icon: 'plus-lg'
-          }
-        %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'requested'
+              }
+            %}
+            {%
+              include 'partials::base/b_request.twig' with {
+              status: 'coordinating'
+              }
+            %}
+          {% endfor %}
+        </div>
+        <div class='d-flex justify-content-center'>
+          {%
+            include 'partials::base/b_link.twig' with {
+            text: 'Mehr Datenanfragen anzeigen',
+            icon: 'plus-lg'
+            }
+          %}
+        </div>
       </div>
     </div>
   </section>