Implement reset filters and cleanup submit data

openradx · Feb 27, 2024 · 823b837 · 823b837
1 parent 74d8889
commit 823b837
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 7 deletions.
diff --git a/radis/search/forms.py b/radis/search/forms.py
@@ -133,7 +133,11 @@ def create_filters_layout(self) -> Layout:
             RangeSlider("Age range", "age_from", "age_till", group_class="input-group-sm"),
             Div(
                 Button(
-                    "reset_filters", "Reset filters", type="button", css_class="btn btn-secondary"
+                    "reset_filters",
+                    "Reset filters",
+                    type="button",
+                    css_class="btn btn-secondary",
+                    **{"@click": "resetFilters"},
                 ),
                 css_class="d-flex justify-content-center",
             ),

diff --git a/radis/search/static/search/search.js b/radis/search/static/search/search.js
@@ -1,6 +1,54 @@
-function SearchForm() {
+function SearchForm($el) {
   return {
-    clear() {
+    handleSubmit() {
+      // Remove non set filters from URL by setting the not filled
+      // out inputs to disabled.
+      const filterInputEls = $el.querySelectorAll(
+        "#filters input, #filters select"
+      );
+      for (var i = 0; i < filterInputEls.length; i++) {
+        const filterInputEl = filterInputEls[i];
+        if (!filterInputEl.value) {
+          console.log(filterInputEl.id);
+          filterInputEl.setAttribute("disabled", true);
+        }
+      }
+      const ageFromEl = $el.querySelector("#id_age_from");
+      console.log(ageFromEl.value, ageFromEl.min);
+      if (ageFromEl.value === ageFromEl.min) {
+        ageFromEl.setAttribute("disabled", true);
+      }
+      const ageTillEl = $el.querySelector("#id_age_till");
+      if (ageTillEl.value === ageTillEl.max) {
+        ageTillEl.setAttribute("disabled", true);
+      }
+    },
+    resetFilters(event) {
+      const filterInputEls = $el.querySelectorAll(
+        "#filters input, #filters select"
+      );
+      for (var i = 0; i < filterInputEls.length; i++) {
+        const filterInputEl = filterInputEls[i];
+        if (filterInputEl.id === event.target.id) {
+          continue; // Don't reset the reset button value
+        }
+        if (filterInputEl.id === "id_age_from") {
+          filterInputEl.value = filterInputEl.min;
+          filterInputEl.dispatchEvent(new Event("input"));
+        } else if (filterInputEl.id === "id_age_till") {
+          filterInputEl.value = filterInputEl.max;
+          filterInputEl.dispatchEvent(new Event("input"));
+        } else {
+          filterInputEl.value = "";
+        }
+      }
+    },
+  };
+}
+
+function QueryInput() {
+  return {
+    clearQuery() {
       const queryInput = document.getElementById("id_query");
       // @ts-ignore
       queryInput.value = "";

diff --git a/radis/search/templates/search/form_elements/query_input.html b/radis/search/templates/search/form_elements/query_input.html
@@ -1,11 +1,11 @@
 {% load crispy_field from crispy_forms_field %}
 {% load bootstrap_icon from core_extras %}
-<div class="input-group">
+<div x-data="QueryInput()" class="input-group">
     <span class="input-group-text">Search</span>
     {% crispy_field query_field "class" "form-control" %}
     <button type="button"
             class="btn bg-transparent"
-            @click="clear()"
+            @click="clearQuery()"
             hx-post="{% url 'search_info' %}"
             hx-target="#search-panel"
             style="width: 40px;

diff --git a/radis/search/templates/search/search.html b/radis/search/templates/search/search.html
@@ -6,7 +6,7 @@
     <h4 class="mb-3">Search Reports</h4>
 {% endblock heading %}
 {% block content %}
-    <form method="get" x-data="SearchForm()">
+    <form method="get" x-data="SearchForm($el)" @submit="handleSubmit">
         <div class="row">{% crispy form form.query_helper %}</div>
         <div class="row">
             <div class="col">
@@ -21,7 +21,7 @@ <h4 class="mb-3">Search Reports</h4>
                 </div>
             </div>
             <div class="col col-auto">
-                <div class="card mt-3">
+                <div id="filters" class="card mt-3">
                     <div class="card-body">
                         <h5 class="card-title">Filters</h5>
                         {% crispy form form.filters_helper %}