Made the pagination form nicer

Setono · Jul 12, 2024 · 88ca988 · 88ca988
1 parent f8bc316
commit 88ca988
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
         }
 
         /**