automatically expand everything on search

explorerhq · Aug 8, 2024 · e24ef9c · e24ef9c
1 parent e68c55f
commit e24ef9c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/explorer/src/js/query-list.js b/explorer/src/js/query-list.js
@@ -9,6 +9,11 @@ function searchFocus() {
         searchElement.focus();
     }
 }
+function expandAll() {
+    document.querySelectorAll('.collapse').forEach(function(element){
+       element.classList.add('show');
+    });
+}
 export function setupQueryList() {
 
     document.querySelectorAll('.query_favorite_toggle').forEach(function (element) {
@@ -17,7 +22,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],
+                   'searchStart': [expandAll]},
+        searchDelay: 250,
+        searchColumns: ['sort-name']
     };
     new List('queries', options);
 

diff --git a/explorer/templates/explorer/query_list.html b/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 %}