IBX-6338: As an Editor I'd like to sort the list of search results (#884

) * IBX-6338: As an Editor I'd like to sort the list of search results * fixup! IBX-6338: As an Editor I'd like to sort the list of search results * fixup! IBX-6338: As an Editor I'd like to sort the list of search results * Update src/bundle/Resources/views/themes/admin/ui/search/results.html.twig Co-authored-by: Michał Grabowski <[email protected]> * Fixed issues reported by QA --------- Co-authored-by: Michał Grabowski <[email protected]>
ibexa · Sep 15, 2023 · b7891f8 · b7891f8
1 parent d29e092
commit b7891f8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/src/bundle/Resources/encore/ibexa.js.config.js b/src/bundle/Resources/encore/ibexa.js.config.js
@@ -130,6 +130,7 @@ module.exports = (Encore) => {
         .addEntry('ibexa-admin-ui-search-js', [
             path.resolve(__dirname, '../public/js/scripts/button.content.edit.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.search.filters.js'),
+            path.resolve(__dirname, '../public/js/scripts/admin.search.sorting.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.search.js'),
             path.resolve(__dirname, '../public/js/scripts/udw/select.location.js'),
             path.resolve(__dirname, '../public/js/scripts/button.translation.edit.js'),

diff --git a/src/bundle/Resources/public/js/scripts/admin.search.sorting.js b/src/bundle/Resources/public/js/scripts/admin.search.sorting.js
@@ -0,0 +1,14 @@
+(function (global, doc) {
+    const searchForm = doc.querySelector('.ibexa-search-form');
+    const searchSortOrderSelect = doc.querySelector('.ibexa-search-form__sort-order-select');
+
+    if (searchSortOrderSelect) {
+        searchSortOrderSelect.addEventListener(
+            'change',
+            () => {
+                searchForm.submit();
+            },
+            false,
+        );
+    }
+})(window, window.document);
diff --git a/src/bundle/Resources/views/themes/admin/ui/search/results.html.twig b/src/bundle/Resources/views/themes/admin/ui/search/results.html.twig
@@ -30,6 +30,8 @@
                 {% endfor %}
             </div>
         </div>
+
+        {{ form_widget(form.sort, { attr: { dropdown_hidden: true  }}) }}
     {% else %}
         <div class="ibexa-search-form__results">
             {% set body_rows = [] %}
@@ -165,13 +167,18 @@
                 { },
             ] %}
 
+            {% set actions %}
+                {{ form_widget(form.sort, { attr: { class: 'ibexa-search-form__sort-order-select' }}) }}
+            {% endset %}
+
             {% embed '@ibexadesign/ui/component/table/table.html.twig' with {
                 headline: 'search.results_for'|trans({
                     '%total%': pager.nbResults,
                     '%search_phrase%': form.vars.data.query,
                 })|desc('Results for “%search_phrase%” (%total%)'),
                 head_cols: head_cols,
                 body_rows: body_rows,
+                actions,
             } %}
                 {% trans_default_domain 'ibexa_search' %}
                 {% block between_header_and_table %}
@@ -205,4 +212,6 @@
         <h2 class="ibexa-search-form__empty-title">{{ 'search.empty.title'|trans|desc('No search items') }}</h2>
         <div class="ibexa-search-form__empty-subtitle">{{ 'search.empty.subtitle'|trans|desc('Enter the phrase to find') }}</div>
     </div>
+
+    {{ form_widget(form.sort, { attr: { dropdown_hidden: true  }}) }}
 {% endif %}