automatically expand everything on search (#659)

* automatically expand everything on search

* better pattern

Author: chrisclark

explorer/src/js/query-list.js

@@ -9,6 +9,14 @@ function searchFocus() {
         searchElement.focus();
     }
 }
+function expandAll(param) {
+    const searchTerm = document.querySelector('.search').value;
+    if (searchTerm.trim() !== "") {
+        document.querySelectorAll('.collapse').forEach(function (element) {
+            element.classList.add('show');
+        });
+    }
+}
 export function setupQueryList() {
 
     document.querySelectorAll('.query_favorite_toggle').forEach(function (element) {
@@ -17,7 +25,10 @@ export function setupQueryList() {
 
     let options = {
         valueNames: ['sort-name', 'sort-created', 'sort-created', 'sort-last-run', 'sort-run-count', 'sort-connection'],
-        handlers: {'updated': [searchFocus]}
+        handlers: {'updated': [searchFocus],
+                   'searchComplete': [expandAll]},
+        searchDelay: 250,
+        searchColumns: ['sort-name']
     };
     new List('queries', options);
 

explorer/templates/explorer/query_list.html

@@ -69,18 +69,18 @@ <h3>{% translate "All Queries" %}</h3>
             </thead>
             <tbody class="list">
                 {% for object in object_list %}
-                    <tr {% if object.is_in_category %}class="collapse {{object.collapse_target}}"{% endif %}>
+                    <tr {% if object.is_in_category %}class="collapse {{object.collapse_target}}" data-bs-config='{"delay":0}'{% endif %}>
                         {% if object.is_header %}
                             <td colspan="100">
                                 <strong>
                                     <span data-bs-toggle="collapse" style="cursor: pointer;" data-bs-target=".{{object.collapse_target}}">
-                                        {{ object.title }} ({{ object.count }})
+                                        <i class="bi-plus-circle"></i> {{ object.title }} ({{ object.count }})
                                     </span>
                                 </strong>
                             </td>
                         {% else %}
-                            <td class="sort-name{% if object.is_in_category %} indented{% endif %}">
-                                <a href="{% url 'query_detail' object.id %}">{{ object.title }}</a>
+                            <td class="sort-name">
+                                <a href="{% url 'query_detail' object.id %}"{% if object.is_in_category %} class="ms-3"{% endif %}>{{ object.title }}</a>
                             </td>
                             <td class="sort-created">{{ object.created_at|date:"m/d/y" }}
                                 {% if object.created_by_user %}