Modify facet_list template and module

AuScope · Jul 16, 2024 · 38fd6b3 · 38fd6b3
1 parent daaa62e
commit 38fd6b3
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 23 deletions.
diff --git a/ckan/src/ckanext-igsn-theme/ckanext/igsn_theme/assets/js/facet-select-module.js b/ckan/src/ckanext-igsn-theme/ckanext/igsn_theme/assets/js/facet-select-module.js
@@ -26,7 +26,6 @@ this.ckan.module('facet-select-module', function ($, _) {
 
         updateQueryString: function ($element) {
             var selectedValues = $element.val();
-            var $form = $element.closest('form');
             var url = new URL(window.location.href);
             var params = new URLSearchParams(url.search);
             params.delete($element.attr('name'));
@@ -42,7 +41,7 @@ this.ckan.module('facet-select-module', function ($, _) {
 
             // Hide the select2 container and show loading indicator
             $element.select2('destroy');
-            $form.find('.loading-indicator').show();
+            this.el.find('.loading-indicator').show();
             $element.hide();
 
             // Delay the page reload to ensure the loading indicator is visible
@@ -51,4 +50,4 @@ this.ckan.module('facet-select-module', function ($, _) {
             }, 500);
         }
     };
-});
+});
diff --git a/ckan/src/ckanext-igsn-theme/ckanext/igsn_theme/templates/snippets/facet_list.html b/ckan/src/ckanext-igsn-theme/ckanext/igsn_theme/templates/snippets/facet_list.html
@@ -16,6 +16,25 @@
             {% if name not in ['groups', 'license_id', 'res_format'] %}
                 {% block facet_list_item %}
                     <section data-module="facet-select-module" class="module module-narrow module-shallow" data-title="{{ title }}">
+                    <style>
+                        .facet-select {
+                            display: none;
+                            width: 100% !important;
+                            max-width: 100%;
+                            padding: 5px;
+                            margin: 5px 0;
+                            box-sizing: border-box;
+                            font-size: 14px;
+                        }
+
+                        .loading-indicator {
+                            display: block;
+                            text-align: center;
+                            padding: 10px;
+                            font-size: 14px;
+                            color: #333;
+                        }                    
+                    </style>
                         {% block facet_list_heading %}
                             <h2 class="module-heading">
                                 {{ title }}
@@ -25,26 +44,24 @@ <h2 class="module-heading">
                             {% with items = items or h.get_facet_items_dict(name, search_facets) %}
                                 {% if items %}
                                     <nav aria-label="{{ title }}">
-                                        <form method="get" action="{{ h.url_for('dataset.search') }}" class="facet-form">
-                                            <select class="facet-select" name="{{ name }}" multiple="multiple" style="width: 100%;">
-                                                {% for item in items %}
-                                                    {% set label = label_function(item) if label_function else item.display_name %}
-                                                    {% set label_truncated = label|truncate(22) if not label_function else label %}
-                                                    {% set count = count_label(item['count']) if count_label else ('%d' % item['count']) %}
-                                                    <option value="{{ item.name }}" {% if item.active %}selected{% endif %}>
-                                                        {{ label_truncated }} ({{ count }})
-                                                    </option>
-                                                {% endfor %}
-                                            </select>
-                                            {% for key, value in request.args.items() %}
-                                                {% if key != name %}
-                                                    <input type="hidden" name="{{ key }}" value="{{ value }}">
-                                                {% endif %}
+                                        <select class="facet-select" name="{{ name }}" multiple="multiple" style="width: 100%;">
+                                            {% for item in items %}
+                                                {% set label = label_function(item) if label_function else item.display_name %}
+                                                {% set label_truncated = label|truncate(22) if not label_function else label %}
+                                                {% set count = count_label(item['count']) if count_label else ('%d' % item['count']) %}
+                                                <option value="{{ item.name }}" {% if item.active %}selected{% endif %}>
+                                                    {{ label_truncated }} ({{ count }})
+                                                </option>
                                             {% endfor %}
-                                            <div class="loading-indicator" style="display: none;">
-                                                <i class="fa fa-spinner fa-spin"></i> Loading...
-                                            </div>
-                                        </form>
+                                        </select>
+                                        {% for key, value in request.args.items() %}
+                                            {% if key != name %}
+                                                <input type="hidden" name="{{ key }}" value="{{ value }}">
+                                            {% endif %}
+                                        {% endfor %}
+                                        <div class="loading-indicator" style="display: none;">
+                                            <i class="fa fa-spinner fa-spin"></i> Loading...
+                                        </div>
                                     </nav>
                                 {% else %}
                                     <p class="module-content empty">{{ _('There are no {facet_type} that match this search').format(facet_type=title) }}</p>
@@ -56,4 +73,4 @@ <h2 class="module-heading">
             {% endif %}
         {% endif %}
     {% endwith %}
-{% endblock %}
+{% endblock %}