IBX-7420: Added total number of results to autocomplete (#1072)

ibexa · Jan 8, 2024 · 0383fb3 · 0383fb3
1 parent 36d3c06
commit 0383fb3
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 4 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/admin.search.autocomplete.js b/src/bundle/Resources/public/js/scripts/admin.search.autocomplete.js
@@ -13,12 +13,13 @@
     const clearBtn = globalSearch.querySelector(' .ibexa-input-text-wrapper__action-btn--clear');
     const autocompleteNode = globalSearch.querySelector('.ibexa-global-search__autocomplete');
     const autocompleteListNode = globalSearch.querySelector('.ibexa-global-search__autocomplete-list');
+    const autocompleteResultsCountNumber = globalSearch.querySelector('.ibexa-global-search__autocomplete-total-count-number');
     let searchAbortController;
-    const showResults = (searchText, results) => {
+    const showResults = (searchText, { suggestionResults, totalCount }) => {
         const { renderers } = ibexa.autocomplete;
         const fragment = doc.createDocumentFragment();
 
-        results.forEach((result) => {
+        suggestionResults.forEach((result) => {
             const container = doc.createElement('ul');
             const renderer = renderers[result.type];
 
@@ -40,11 +41,12 @@
 
         autocompleteListNode.innerHTML = '';
         autocompleteListNode.append(fragment);
+        autocompleteResultsCountNumber.innerHTML = totalCount;
 
         window.ibexa.helpers.ellipsis.middle.parse(autocompleteListNode);
 
         autocompleteNode.classList.remove('ibexa-global-search__autocomplete--hidden');
-        autocompleteNode.classList.toggle('ibexa-global-search__autocomplete--results-empty', results.length === 0);
+        autocompleteNode.classList.toggle('ibexa-global-search__autocomplete--results-empty', suggestionResults.length === 0);
     };
     const getAutocompleteList = (searchText) => {
         const url = Routing.generate('ibexa.search.suggestion', { query: searchText, limit: resultLimit });

diff --git a/src/bundle/Resources/public/scss/_global-search.scss b/src/bundle/Resources/public/scss/_global-search.scss
@@ -86,7 +86,7 @@
 
     &__autocomplete-view-all {
         display: flex;
-        justify-content: end;
+        justify-content: space-between;
         padding: calculateRem(4px) 0;
 
         .ibexa-btn {
@@ -96,6 +96,17 @@
         }
     }
 
+    &__autocomplete-total-count {
+        font-size: $ibexa-text-font-size-medium;
+        color: $ibexa-color-dark-400;
+        display: flex;
+        align-items: center;
+    }
+
+    &__autocomplete-total-count-number {
+        margin-left: calculateRem(4px);
+    }
+
     &__autocomplete-item {
         padding: calculateRem(4px) 0;
         border-bottom: calculateRem(1px) solid $ibexa-color-light;

diff --git a/src/bundle/Resources/translations/ibexa_search.en.xliff b/src/bundle/Resources/translations/ibexa_search.en.xliff
@@ -16,6 +16,11 @@
         <target state="new">Cannot load suggestions</target>
         <note>key: autocomplete.request.error</note>
       </trans-unit>
+      <trans-unit id="95d62d3e38a2c9042e56a3c7fb087d8645384229" resname="autocomplete.results_count">
+        <source>Results</source>
+        <target state="new">Results</target>
+        <note>key: autocomplete.results_count</note>
+      </trans-unit>
       <trans-unit id="9909b3aba5a51f5fd34ba6c9fdba12115ced5564" resname="autocomplete.view_all_results">
         <source>View all results</source>
         <target state="new">View all results</target>

diff --git a/src/bundle/Resources/views/themes/admin/ui/global_search.html.twig b/src/bundle/Resources/views/themes/admin/ui/global_search.html.twig
@@ -27,6 +27,10 @@
             })|e('html_attr')  }}">
         </ul>
         <div class="ibexa-global-search__autocomplete-view-all">
+            <div class="ibexa-global-search__autocomplete-total-count">
+                {{ 'autocomplete.results_count'|trans|desc('Results') }}:
+                <span class="ibexa-global-search__autocomplete-total-count-number"></span>
+            </div>
             <button 
                 class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small"
                 type="submit"