From 5e6297d5942db6830f239acda0ebc5e316812e28 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   | 16 ++++++++++++++--
 hub/templates/hub/explore.html |  6 +++---
 hub/tests/test_views.py        |  8 ++++++++
 4 files changed, 29 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..9c1f1c3a7 100644
--- a/hub/static/js/explore.esm.js
+++ b/hub/static/js/explore.esm.js
@@ -245,9 +245,21 @@ const app = createApp({
 
       return url
     },
+    filtersValid() {
+      var valid = true
+      this.filters.forEach(function(d) {
+        var value = d.selectedValue
+        if (value === "") {
+          valid = false
+        }
+      })
+      return valid
+    },
     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")