[Scorecards] Merge advanced and main filter

mysociety · Nov 7, 2024 · 1c42d8c · 1c42d8c
1 parent b0c1b01
commit 1c42d8c
Show file tree

Hide file tree

Showing 4 changed files with 331 additions and 505 deletions.
diff --git a/scoring/static/scoring/js/main.js b/scoring/static/scoring/js/main.js
@@ -382,56 +382,121 @@ forEachElement('.js-section-council-autocomplete', function(input){
 });
 
 function ajaxLoadCouncilTypeScorecard(url) {
-    var selectors = [
-        '#council-type-filter',
-        // '#advancedFilter .modal-body',
-        '.scorecard-table'
+    const selectors = [
+      '#home-page-main-filter',
+      '.scorecard-table'
     ];
-
-    selectors.forEach(function(selector){
-        document.querySelector(selector).classList.add('loading-shimmer');
+    
+    selectors.forEach(selector => {
+      document.querySelector(selector)?.classList.add('loading-shimmer');
     });
-
+  
     fetch(url)
-    .then(function(response) {
-        return response.text()
-    })
-    .then(function(html) {
-        var parser = new DOMParser();
-        var doc = parser.parseFromString(html, "text/html");
-        selectors.forEach(function(selector){
-            document.querySelector(selector).replaceWith(doc.querySelector(selector));
+      .then(response => response.text())
+      .then(html => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, "text/html");
+
+        selectors.forEach(selector => {
+          const newElement = doc.querySelector(selector);
+          const currentElement = document.querySelector(selector);
+          if (newElement && currentElement) {
+            currentElement.replaceWith(newElement);
+          }
         });
+
         setUpTableSorting();
-    })
-    .catch(function(err) {
+
+        const advancedFilter = document.querySelector('#advancedFilter');
+        if (advancedFilter) {
+          new bootstrap.Collapse(advancedFilter, {
+            toggle: false
+          });
+        }
+      })
+      .catch(err => {
         window.location.href = url;
-    });
+      });
+}
+
+function handleFilterChange(e) {
+    e.preventDefault();
+
+    const mainForm = document.getElementById('home-page-main-filter');
+    if (!mainForm) return;
+    const formData = new FormData(mainForm);
+
+    // Convert FormData to URLSearchParams
+    const params = new URLSearchParams(formData);
+
+    // Get the base URL (current path without query parameters)
+    const baseUrl = window.location.pathname;
+    const url = `${baseUrl}?${params.toString()}`;
+    history.pushState({}, '', url);
+
+    ajaxLoadCouncilTypeScorecard(url);
 }
 
-if ( typeof window.fetch !== 'undefined' ) {
-    document.addEventListener('click', function(e){
-        if ( e.target.matches('#council-type-filter a') ) {
-            e.preventDefault();
-            var href = e.target.href;
-            history.pushState({}, '', href);
-            ajaxLoadCouncilTypeScorecard(href);
+if (typeof window.fetch !== 'undefined') {
+    document.addEventListener('click', e => {
+      if (e.target.matches('#council-type-filter a')) {
+        e.preventDefault();
+        const href = e.target.href;
+        history.pushState({}, '', href);
+        ajaxLoadCouncilTypeScorecard(href);
+      }
+    });
+
+    // Handle form submission (Apply filters button)
+    document.addEventListener('submit', e => {
+      if (e.target.matches('#home-page-main-filter')) {
+        handleFilterChange(e);
+      }
+    });
+
+    // Handle radio buttons and select changes
+    document.addEventListener('change', e => {
+      if (e.target.matches('#home-page-main-filter input[type="radio"]') ||
+          e.target.matches('#home-page-main-filter select')) {
+        handleFilterChange(new Event('submit'));
+      }
+    });
+
+    // Handle reset button
+    document.addEventListener('click', e => {
+      if (e.target.matches('#resetButton')) {
+        e.preventDefault();
+
+        const mainForm = document.getElementById('home-page-main-filter');
+        if (mainForm) {
+          // Reset radio buttons
+          mainForm.querySelectorAll('input[type="radio"]').forEach(radio => {
+            radio.checked = radio.defaultChecked;
+          });
+
+          // Reset select elements
+          mainForm.querySelectorAll('select').forEach(select => {
+            select.selectedIndex = 0;
+          });
+
+          handleFilterChange(new Event('submit'));
         }
+      }
     });
 
-    var councilTypePaths = [
-        '/',
-        '/scoring/district/',
-        '/scoring/county/',
-        '/scoring/combined/',
-        '/scoring/northern-ireland/'
+    const councilTypePaths = [
+      '/',
+      '/scoring/district/',
+      '/scoring/county/',
+      '/scoring/combined/',
+      '/scoring/northern-ireland/'
     ];
 
-    window.addEventListener('popstate', function(e){
-        var url = new URL(window.location.href);
-        if ( councilTypePaths.indexOf(url.pathname) != -1 ) {
-            ajaxLoadCouncilTypeScorecard(window.location.href);
-        }
+    window.addEventListener('popstate', e => {
+      const url = new URL(window.location.href);
+      if (councilTypePaths.includes(url.pathname)) {
+        ajaxLoadCouncilTypeScorecard(window.location.href);
+      }
     });
 }
 

diff --git a/scoring/templates/scoring/home.html b/scoring/templates/scoring/home.html
@@ -28,7 +28,6 @@ <h3 class="fs-6 mb-3 lh-1">Load a Scorecard by council type</h3>
         </div>
 
         <div class="my-5 mx-auto position-relative" style="max-width: 1440px;">
-            {% include 'scoring/includes/advanced-filter.html' %}
 
             <div class="bg-gray-200 px-3 py-2 border">
                 {% include 'scoring/includes/jump-to-council.html' %}