From 1b64e476a3e480d00d5cd9b2e98aa0a96a5ecf23 Mon Sep 17 00:00:00 2001
From: Curtis Conard <cconard96@gmail.com>
Date: Mon, 16 Dec 2024 17:45:24 -0500
Subject: [PATCH] add pager and small adjustments

---
 .../Knowbase/KnowbaseItemController.php       | 25 ++---
 templates/components/pager.html.twig          | 35 +++----
 templates/pages/tools/search_solution.twig    | 96 ++++++++++++-------
 3 files changed, 94 insertions(+), 62 deletions(-)

diff --git a/src/Glpi/Controller/Knowbase/KnowbaseItemController.php b/src/Glpi/Controller/Knowbase/KnowbaseItemController.php
index 5d238816671..bc20148ae57 100644
--- a/src/Glpi/Controller/Knowbase/KnowbaseItemController.php
+++ b/src/Glpi/Controller/Knowbase/KnowbaseItemController.php
@@ -125,14 +125,14 @@ public function searchSolution(Request $request): Response
         $criteria = KnowbaseItem::getListRequest([
             'contains' => $contains,
         ]);
+        $count_criteria = $criteria;
         $criteria['START'] = $start;
         $criteria['LIMIT'] = $_SESSION['glpilist_limit'];
-        $count_criteria = $criteria;
-        unset($count_criteria['SELECT'], $count_criteria['ORDERBY']);
+        unset($count_criteria['SELECT'], $count_criteria['ORDERBY'], $count_criteria['GROUPBY']);
         $count_criteria['COUNT'] = 'cpt';
 
         $it = $DB->request($criteria);
-        $total_count = $DB->request($count_criteria)->current()['cpt'];
+        $total_count = $DB->request($count_criteria)->current()['cpt'] ?? 0;
         $results = [];
 
         foreach ($it as $data) {
@@ -164,14 +164,17 @@ public function searchSolution(Request $request): Response
             ];
         }
 
-        return new StreamedResponse(static function () use ($contains, $itemtype, $items_id, $results, $request) {
-            $twig_params = [
-                'contains' => $contains,
-                'results' => $results,
-                'itemtype' => $itemtype,
-                'items_id' => $items_id,
-                'is_ajax' => $request->get('ajax_reload', 0),
-            ];
+        $twig_params = [
+            'contains' => $contains,
+            'results' => $results,
+            'itemtype' => $itemtype,
+            'items_id' => $items_id,
+            'is_ajax' => $request->get('ajax_reload', 0),
+            'count' => $total_count,
+            'start' => $start,
+        ];
+
+        return new StreamedResponse(static function () use ($twig_params) {
             TemplateRenderer::getInstance()->display('pages/tools/search_solution.twig', $twig_params);
         });
     }
diff --git a/templates/components/pager.html.twig b/templates/components/pager.html.twig
index 49544a93329..98a35819191 100644
--- a/templates/components/pager.html.twig
+++ b/templates/components/pager.html.twig
@@ -65,6 +65,7 @@
 {% set current_page = ((current_start - 1) / limit)|round(0, 'ceil') + 1 %}
 
 {% set short_display = short_display|default(false) %}
+{% set no_limit_display = no_limit_display|default(false) %}
 
 {# limit the number of adjacents links displayed #}
 {% set adjacents = 2 %}
@@ -72,29 +73,31 @@
 {% set rand = rand|default(random()) %}
 
 <div class="flex-grow-1 d-flex flex-wrap flex-md-nowrap  align-items-center justify-content-between mb-2 search-pager">
-    {% if not short_display %}
-        <span class="search-limit d-none d-md-block">
+    {% if not no_limit_display %}
+        {% if not short_display %}
+            <span class="search-limit d-none d-md-block">
+                {% include 'components/dropdown/limit.html.twig' with {
+                    'no_onchange': fluid_search|default(false),
+                    'select_class': 'search-limit-dropdown',
+                    'href': href|replace({'%start%': start}),
+                    'additional_attributes': short_display ? {
+                        'title': __('Rows per page'),
+                    } : {
+                        'aria-labelledby': 'list_limit' ~ rand ~ '_label',
+                    },
+                    'rand': rand,
+                } %}
+                <span id="list_limit{{ rand }}_label">{{ __('rows / page') }}</span>
+            </span>
+        {% endif %}
+        <span class="search-limit {{ short_display ? "" : "d-block d-md-none" }}">
             {% include 'components/dropdown/limit.html.twig' with {
                 'no_onchange': fluid_search|default(false),
                 'select_class': 'search-limit-dropdown',
                 'href': href|replace({'%start%': start}),
-                'additional_attributes': short_display ? {
-                    'title': __('Rows per page'),
-                } : {
-                    'aria-labelledby': 'list_limit' ~ rand ~ '_label',
-                },
-                'rand': rand,
             } %}
-            <span id="list_limit{{ rand }}_label">{{ __('rows / page') }}</span>
         </span>
     {% endif %}
-    <span class="search-limit {{ short_display ? "" : "d-block d-md-none" }}">
-        {% include 'components/dropdown/limit.html.twig' with {
-            'no_onchange': fluid_search|default(false),
-            'select_class': 'search-limit-dropdown',
-            'href': href|replace({'%start%': start}),
-        } %}
-    </span>
 
     {% if not short_display %}
         <p class="m-0 text-muted d-none d-md-block page-infos">
diff --git a/templates/pages/tools/search_solution.twig b/templates/pages/tools/search_solution.twig
index 7994f44c415..06b8c1003b6 100644
--- a/templates/pages/tools/search_solution.twig
+++ b/templates/pages/tools/search_solution.twig
@@ -41,28 +41,39 @@
             <div id="search_solution_form" class="d-flex justify-content-center mb-3 mt-3">
                 {{ inputs.text('contains', contains, {additional_attributes: {size: 50}, input_addclass: 'me-1'}) }}
                 {{ inputs.button('search', _x('button', 'Search')) }}
+                {{ inputs.hidden('start', start) }}
             </div>
-            <div class="search-solution-results list-group list-group-flush list-group-hoverable">
-                {% for result in results %}
-                    <div class="list-group-item d-flex" data-solution-id="{{ result.id }}">
-                        <div class="col-auto">
-                            <i class="{{ result.icon }}" title="{{ result.icon_title }}"></i>
+            {% if results|length %}
+                {{ include('components/pager.html.twig', {
+                    no_limit_display: true,
+                }) }}
+                <div class="search-solution-results list-group list-group-flush list-group-hoverable">
+                    {% for result in results %}
+                        <div class="list-group-item d-flex" data-solution-id="{{ result.id }}">
+                            <div class="col-auto">
+                                <i class="{{ result.icon }}" title="{{ result.icon_title }}"></i>
+                            </div>
+                            <div class="col">
+                                <div class="fs-2">{{ result.name }}</div>
+                                <div class="fs-4">{{ result.content_preview }}</div>
+                            </div>
+                            <div class="col-auto">
+                                <button type="button" class="btn btn-ghost-secondary btn-sm btn-icon use-solution" title="{{ __('Use as a solution') }}">
+                                    <i class="ti ti-check"></i>
+                                </button>
+                                <button type="button" class="btn btn-ghost-secondary btn-sm btn-icon view-solution" title="{{ __('Preview') }}">
+                                    <i class="ti ti-eye"></i>
+                                </button>
+                            </div>
                         </div>
-                        <div class="col">
-                            <div class="fs-2">{{ result.name }}</div>
-                            <div class="fs-4">{{ result.content_preview }}</div>
-                        </div>
-                        <div class="col-auto">
-                            <button type="button" class="btn btn-ghost-secondary btn-sm btn-icon use-solution" title="{{ __('Use as a solution') }}">
-                                <i class="ti ti-check"></i>
-                            </button>
-                            <button type="button" class="btn btn-ghost-secondary btn-sm btn-icon view-solution" title="{{ __('View') }}">
-                                <i class="ti ti-eye"></i>
-                            </button>
-                        </div>
-                    </div>
-                {% endfor %}
-            </div>
+                    {% endfor %}
+                </div>
+            {% else %}
+                <div class="alert alert-info">
+                    {{ __('No data') }}
+                </div>
+            {% endif %}
+
         </div>
         <div class="card preview-card" style="display: none">
             <div>
@@ -114,6 +125,25 @@
             $('#{{ container_id}}').find('div.spinner-overlay').css('visibility', 'hidden');
         }
 
+        function refreshResults() {
+            showLoading();
+            $.ajax({
+                url: '{{ path('/Knowbase/KnowbaseItem/SearchSolution/') ~ (itemtype ~ '/' ~ items_id)|e('js') }}',
+                method: 'GET',
+                data: {
+                    contains: $('#{{ container_id}} #search_solution_form input[name="contains"]').val(),
+                    ajax_reload: 1,
+                    start: $('#{{ container_id}} #search_solution_form input[name="start"]').val(),
+                }
+            }).then((html) => {
+                $('#{{ container_id}}').html(html);
+                hideLoading();
+            }, () => {
+                window.glpi_toast_error('{{ __('An error occurred while searching for solutions') }}');
+                hideLoading();
+            });
+        }
+
         // Use Solution button handled by whatever loads this template (form_solution.html.twig for example)
         $('#{{ container_id}}').on('click', 'button.view-solution', (e) => {
             const kbi_id = $(e.target).closest('.list-group-item').attr('data-solution-id');
@@ -131,24 +161,20 @@
                 hideLoading();
             });
         }).on('click', 'button[name="search"]', () => {
-            showLoading();
-            $.ajax({
-                url: '{{ path('/Knowbase/KnowbaseItem/SearchSolution/') ~ (itemtype ~ '/' ~ items_id)|e('js') }}',
-                method: 'GET',
-                data: {
-                    contains: $('#{{ container_id}} #search_solution_form input[name="contains"]').val(),
-                    ajax_reload: 1
-                }
-            }).then((html) => {
-                $('#{{ container_id}}').html(html);
-                hideLoading();
-            }, () => {
-                window.glpi_toast_error('{{ __('An error occurred while searching for solutions') }}');
-                hideLoading();
-            });
+            refreshResults();
         }).on('click', 'button.back-to-results', () => {
             $('#{{ container_id}} .preview-card').hide();
             $('#{{ container_id}} .search-card').show();
+        }).on('keyup', 'input[name="contains"]', (e) => {
+            if (e.key === 'Enter') {
+                refreshResults();
+            }
+        }).on('click', '.search-pager .page-link', (e) => {
+            e.preventDefault();
+            const clicked_link = $(e.target).closest('.page-link');
+            const new_start = clicked_link.attr('data-start');
+            $('#{{ container_id}} input[name="start"]').val(new_start);
+            refreshResults();
         });
     </script>
 {% endif %}