From 7d0ec5d66e78e2ae446f55ca1a6d54fd2e583f44 Mon Sep 17 00:00:00 2001
From: Struan Donald <struan@exo.org.uk>
Date: Tue, 28 Nov 2023 14:40:08 +0000
Subject: [PATCH] do some validation on filters before updating the map

Highlight empty filters and also prevent the map updating if there are
empty filters.
Also ignore empty filters at the back end to avoid 500 errors

Fixes #328
---
 hub/mixins.py                  |  4 ++++
 hub/static/js/explore.esm.js   | 11 +++++++++--
 hub/templates/hub/explore.html |  6 +++---
 hub/tests/test_views.py        |  8 ++++++++
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/hub/mixins.py b/hub/mixins.py
index 5d7fb437b..aa3d5096a 100644
--- a/hub/mixins.py
+++ b/hub/mixins.py
@@ -24,6 +24,10 @@ class FilterMixin:
     def filters(self):
         filters = []
         for param, value in self.request.GET.items():
+            # we don't filter on blank values so skip them
+            if value == "":
+                continue
+
             if "__" in param and param not in ["shader", "columns"]:
                 name, comparator = param.split("__", 1)
             else:  # pragma: nocover
diff --git a/hub/static/js/explore.esm.js b/hub/static/js/explore.esm.js
index c26af472c..aba8a6cdc 100644
--- a/hub/static/js/explore.esm.js
+++ b/hub/static/js/explore.esm.js
@@ -245,9 +245,16 @@ const app = createApp({
 
       return url
     },
+    filtersValid() {
+      return this.filters.every(function(filter){
+        return filter.selectedValue !== "";
+      });
+    },
     updateState() {
-      window.history.replaceState(this.state(), '', this.url())
-      this.updateResults()
+      if (this.filtersValid()) {
+        window.history.replaceState(this.state(), '', this.url())
+        this.updateResults()
+      }
     },
     restoreState() {
       const params = new URL(window.location).searchParams
diff --git a/hub/templates/hub/explore.html b/hub/templates/hub/explore.html
index a5f35262c..31bcceece 100644
--- a/hub/templates/hub/explore.html
+++ b/hub/templates/hub/explore.html
@@ -47,11 +47,11 @@ <h3 class="h6">${ filter.title }</h3>
                             <option v-for="option in filter.options" :value="option">${ option }</option>
                         </select>
                         <div v-else-if="filter.data_type == 'percent'" class="input-group flex-grow-1 flex-shrink-1">
-                            <input type="text" inputmode="numeric" pattern="[0-9]*" v-model="filter.selectedValue" class="form-control form-control-sm text-end">
+                            <input type="text" inputmode="numeric" pattern="[0-9]*" v-model="filter.selectedValue" class="form-control form-control-sm text-end" :class="{ 'is-invalid': filter.selectedValue === '' }">
                             <span class="input-group-text lh-1">%</span>
                         </div>
-                        <input v-else-if="filter.data_type == 'integer'" type="text" inputmode="numeric" pattern="[0-9]*" v-model="filter.selectedValue" class="form-control form-control-sm flex-grow-1 flex-shrink-1">
-                        <input v-else type="text" v-model="filter.selectedValue" class="form-control form-control-sm flex-grow-1 flex-shrink-1">
+                        <input v-else-if="filter.data_type == 'integer'" type="text" inputmode="numeric" pattern="[0-9]*" v-model="filter.selectedValue" class="form-control form-control-sm flex-grow-1 flex-shrink-1" :class="{ 'is-invalid': filter.selectedValue === '' }">
+                        <input v-else type="text" v-model="filter.selectedValue" class="form-control form-control-sm flex-grow-1 flex-shrink-1" :class="{ 'is-invalid': filter.selectedValue === '' }">
                         <p v-if="filter.is_in" class="flex-grow-1 text-muted mb-0 mt-2 text-center fs-8">Tip: Ctrl-click (PC) or Cmd-click (Mac) to select multiple items</p>
                     </div>
                     <details class="mt-3">
diff --git a/hub/tests/test_views.py b/hub/tests/test_views.py
index 59d4af201..5fcb4cf42 100644
--- a/hub/tests/test_views.py
+++ b/hub/tests/test_views.py
@@ -124,6 +124,14 @@ def setUp(self):
         self.u = User.objects.create(username="user@example.com")
         self.client.force_login(self.u)
 
+    def test_explore_json_page_null_value(self):
+        url = reverse("explore_json")
+        response = self.client.get(url + "?mp_last_elected__year__lt=")
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, "South Borsetshire")
+        self.assertContains(response, "Borsetshire West")
+        self.assertContains(response, "Borsetshire East")
+
     def test_explore_json_page_year_lt(self):
         url = reverse("explore_json")
         response = self.client.get(url + "?mp_last_elected__year__lt=2019")