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

@@ -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

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

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">

hub/tests/test_views.py

@@ -124,6 +124,14 @@ def setUp(self):
         self.u = User.objects.create(username="[email protected]")
         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")