From 88ca9882d1b52e4e8f27f26037a99c6e5835e19f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joachim=20L=C3=B8vgaard?= <joachim@loevgaard.dk>
Date: Fri, 12 Jul 2024 13:01:48 +0200
Subject: [PATCH] Made the pagination form nicer

---
 src/Form/Builder/SearchFormBuilder.php          | 10 +++++++---
 src/Resources/translations/messages.en.yaml     |  3 +++
 src/Resources/views/search/index.html.twig      |  2 +-
 src/Resources/views/search_theme.html.twig      | 13 +++++++++++++
 .../search/index.html.twig                      | 17 ++++++++++++++++-
 5 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/Form/Builder/SearchFormBuilder.php b/src/Form/Builder/SearchFormBuilder.php
index a825a05..02cff31 100644
--- a/src/Form/Builder/SearchFormBuilder.php
+++ b/src/Form/Builder/SearchFormBuilder.php
@@ -99,21 +99,25 @@ private function buildPagination(SearchResult $searchResult, FormBuilderInterfac
         }
 
         $choices = [];
-        $choices['Current'] = $page;
+
+        // current is a special choice that we need to keep the page query parameter in the url on form submission
+        $choices['__current'] = $page;
 
         if ($searchResult->getPage() > 1) {
-            $choices['Previous'] = $page - 1;
+            $choices['setono_sylius_meilisearch.form.search.pagination.previous'] = $page - 1;
         }
 
         if ($searchResult->getPage() < $searchResult->getTotalPages()) {
-            $choices['Next'] = $page + 1;
+            $choices['setono_sylius_meilisearch.form.search.pagination.next'] = $page + 1;
         }
 
         $builder->add('p', ChoiceType::class, [
             'choices' => $choices,
+            'choice_attr' => fn (string $page) => ['style' => 'display: none'], // we only want to display the labels
             'required' => false,
             'expanded' => true,
             'placeholder' => false,
+            'block_prefix' => 'setono_sylius_meilisearch_page_choice',
         ]);
     }
 }
diff --git a/src/Resources/translations/messages.en.yaml b/src/Resources/translations/messages.en.yaml
index 751a695..e1a536b 100644
--- a/src/Resources/translations/messages.en.yaml
+++ b/src/Resources/translations/messages.en.yaml
@@ -4,6 +4,9 @@ setono_sylius_meilisearch:
             facet:
                 on_sale: On sale (%count%)
                 size: Size
+            pagination:
+                previous: Previous
+                next: Next
             q_placeholder: Search...
             update_filter: Update filter
         synonym:
diff --git a/src/Resources/views/search/index.html.twig b/src/Resources/views/search/index.html.twig
index 4f7b982..3259f79 100644
--- a/src/Resources/views/search/index.html.twig
+++ b/src/Resources/views/search/index.html.twig
@@ -16,7 +16,7 @@
                 <div class="twelve wide column">
                     <div class="ui grid">
                         <div class="eight wide column">
-                            {{ searchResult.hitsCount }} results found
+                            Displaying {{ (searchResult.page * searchResult.hitsPerPage) - searchResult.hitsPerPage }} - {{ searchResult.page * searchResult.hitsPerPage }} of {{ searchResult.hitsCount }}
                         </div>
                         <div class="eight wide right aligned column">
                             {{ form_widget(searchForm.sort) }}
diff --git a/src/Resources/views/search_theme.html.twig b/src/Resources/views/search_theme.html.twig
index 81ff37a..0ae97f9 100644
--- a/src/Resources/views/search_theme.html.twig
+++ b/src/Resources/views/search_theme.html.twig
@@ -21,3 +21,16 @@
         </ul>
     </div>
 {% endblock %}
+
+{% block setono_sylius_meilisearch_page_choice_widget %}
+    <nav class="pagination">
+        <ol>
+            {%- for child in form %}
+                <li{{ child.vars.label == '__current' ? ' style="display:none"' : '' }}>
+                    {{- form_widget(child) -}}
+                    {{- form_label(child, null, {translation_domain: choice_translation_domain}) -}}
+                </li>
+            {% endfor -%}
+        </ol>
+    </nav>
+{% endblock %}
diff --git a/tests/Application/templates/bundles/SetonoSyliusMeilisearchPlugin/search/index.html.twig b/tests/Application/templates/bundles/SetonoSyliusMeilisearchPlugin/search/index.html.twig
index 78fcbcc..9372742 100644
--- a/tests/Application/templates/bundles/SetonoSyliusMeilisearchPlugin/search/index.html.twig
+++ b/tests/Application/templates/bundles/SetonoSyliusMeilisearchPlugin/search/index.html.twig
@@ -11,6 +11,10 @@
             text-align: center;
         }
 
+        #search-form label {
+            cursor: pointer;
+        }
+
         /**
          * Facets
          */
@@ -49,7 +53,18 @@
             margin: 0 !important;
             padding: 0 !important;
             font-size: 14px !important;
-            cursor: pointer;
+        }
+
+        /**
+         * Pagination
+         */
+        nav.pagination ol {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            gap: 10px;
+            justify-content: center;
         }
 
         /**