make all filter configs part of the search query (#1579)

with this change, for the Incidents and Field Reports page: * when the user changes any of the filters, the browser's URL automatically changes in response. * the user can bookmark one of those Incidents or Field Reports links to easily jump back to the same filtered view.
burningmantech · Feb 5, 2025 · 6bb671e · 6bb671e
1 parent 9ff1c91
commit 6bb671e
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 61 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,10 +25,12 @@ Each month below should look like the following, using the same ordering for the
 
 - Started allowing searches using regular expressions on the Incidents and Field Reports pages, mostly to support "OR"-based queries. https://github.com/burningmantech/ranger-ims-server/issues/1570
 - Created the ability to have a search query as part of an Incidents or Field Reports page URL. This allows bookmarking. https://github.com/burningmantech/ranger-ims-server/issues/1570
+- Put all the table filters (state, type, rows, days-ago) into the URLs, making all of those bookmarkable, in addition to search. https://github.com/burningmantech/ranger-ims-server/issues/1570
 
 ### Removed
 
 - Dropped Incident "priority" from the UI, since almost no one was using it. https://github.com/burningmantech/ranger-ims-server/issues/1574
+- Removed the "show all" keyboard shortcut for Incidents and Field Reports pages, since the new bookmarkable filtered views make such a shortcut unnecessary. https://github.com/burningmantech/ranger-ims-server/issues/1570
 
 ## 2025-01
 

diff --git a/src/ims/element/incident/incidents_template/template.xhtml b/src/ims/element/incident/incidents_template/template.xhtml
@@ -17,7 +17,6 @@
           <p class="mt-2 mb-0">Keyboard shortcuts</p>
           <ul>
             <li><code>n</code>: create new Incident <br/></li>
-            <li><code>a</code>: show all Incidents <br/></li>
             <li><code>/</code>: jump to search field <br/></li>
           </ul>
           <p class="mt-2 mb-0">In the search field</p>
@@ -61,13 +60,13 @@
         <span class="selection">All</span>
       </button>
       <ul class="dropdown-menu">
-        <li id="show_state_all" onclick="showState('all');">
+        <li id="show_state_all" onclick="showState('all', true);">
           <a href="#" class="name dropdown-item">All States</a>
         </li>
-        <li id="show_state_open" onclick="showState('open');">
+        <li id="show_state_open" onclick="showState('open', true);">
           <a href="#" class="name dropdown-item">Open</a>
         </li>
-        <li id="show_state_active" onclick="showState('active');">
+        <li id="show_state_active" onclick="showState('active', true);">
           <a href="#" class="name dropdown-item">Active</a>
         </li>
       </ul>
@@ -83,19 +82,19 @@
         <span class="selection">All Days</span>
       </button>
       <ul class="dropdown-menu">
-        <li id="show_days_all" onclick="showDays(null);">
+        <li id="show_days_all" onclick="showDays('all', true);">
           <a href="#" class="name dropdown-item">All Days</a>
         </li>
-        <li id="show_days_0" onclick="showDays(0);">
+        <li id="show_days_0" onclick="showDays(0, true);">
           <a href="#" class="name dropdown-item">Today</a>
         </li>
-        <li id="show_days_1" onclick="showDays(1);">
+        <li id="show_days_1" onclick="showDays(1, true);">
           <a href="#" class="name dropdown-item">Last 2 Days</a>
         </li>
-        <li id="show_days_2" onclick="showDays(2);">
+        <li id="show_days_2" onclick="showDays(2, true);">
           <a href="#" class="name dropdown-item">Last 3 Days</a>
         </li>
-        <li id="show_days_3" onclick="showDays(3);">
+        <li id="show_days_3" onclick="showDays(3, true);">
           <a href="#" class="name dropdown-item">Last 4 Days</a>
         </li>
       </ul>
@@ -110,7 +109,7 @@
         <span class="selection">All Types</span>
       </button>
       <ul id="ul_show_type" class="dropdown-menu">
-        <li id="show_type_all" onclick="showType(null);">
+        <li id="show_type_all" onclick="showType('all', true);">
           <a href="#" class="name dropdown-item">All Types</a>
         </li>
         <!-- Additional li will be inserted here by JQuery -->
@@ -126,16 +125,16 @@
         <span class="selection">All Rows</span>
       </button>
       <ul class="dropdown-menu">
-        <li id="show_rows_all" onclick="showRows(null);">
+        <li id="show_rows_all" onclick="showRows('all', true);">
           <a href="#" class="name dropdown-item">All Rows</a>
         </li>
-        <li id="show_rows_25" onclick="showRows(  25);">
+        <li id="show_rows_25" onclick="showRows(  25, true);">
           <a href="#" class="name dropdown-item">25 Rows</a>
         </li>
-        <li id="show_rows_50" onclick="showRows(  50);">
+        <li id="show_rows_50" onclick="showRows(  50, true);">
           <a href="#" class="name dropdown-item">50 Rows</a>
         </li>
-        <li id="show_rows_100" onclick="showRows( 100);">
+        <li id="show_rows_100" onclick="showRows( 100, true);">
           <a href="#" class="name dropdown-item">100 Rows</a>
         </li>
       </ul>

diff --git a/src/ims/element/incident/reports_template/template.xhtml b/src/ims/element/incident/reports_template/template.xhtml
@@ -17,7 +17,6 @@
           <p class="mt-2 mb-0">Keyboard shortcuts</p>
           <ul>
             <li><code>n</code>: create new Field Report <br/></li>
-            <li><code>a</code>: show all Field Reports <br/></li>
             <li><code>/</code>: jump to search field <br/><br/></li>
           </ul>
           <p class="mt-2 mb-0">In the search field</p>
@@ -61,19 +60,19 @@
         <span class="selection">All Days</span>
       </button>
       <ul class="dropdown-menu">
-        <li id="show_days_all" onclick="showDays(null);">
+        <li id="show_days_all" onclick="showDays('all', true);">
           <a href="#" class="name dropdown-item">All Days</a>
         </li>
-        <li id="show_days_0" onclick="showDays(0);">
+        <li id="show_days_0" onclick="showDays(0, true);">
           <a href="#" class="name dropdown-item">Today</a>
         </li>
-        <li id="show_days_1" onclick="showDays(1);">
+        <li id="show_days_1" onclick="showDays(1, true);">
           <a href="#" class="name dropdown-item">Last 2 Days</a>
         </li>
-        <li id="show_days_2" onclick="showDays(2);">
+        <li id="show_days_2" onclick="showDays(2, true);">
           <a href="#" class="name dropdown-item">Last 3 Days</a>
         </li>
-        <li id="show_days_3" onclick="showDays(3);">
+        <li id="show_days_3" onclick="showDays(3, true);">
           <a href="#" class="name dropdown-item">Last 4 Days</a>
         </li>
       </ul>
@@ -87,16 +86,16 @@
         <span class="selection">All Rows</span>
       </button>
       <ul class="dropdown-menu">
-        <li id="show_rows_all" onclick="showRows(null);">
+        <li id="show_rows_all" onclick="showRows('all', true);">
           <a href="#" class="name dropdown-item">All Rows</a>
         </li>
-        <li id="show_rows_25" onclick="showRows(  25);">
+        <li id="show_rows_25" onclick="showRows(  25, true);">
           <a href="#" class="name dropdown-item">25 Rows</a>
         </li>
-        <li id="show_rows_50" onclick="showRows(  50);">
+        <li id="show_rows_50" onclick="showRows(  50, true);">
           <a href="#" class="name dropdown-item">50 Rows</a>
         </li>
-        <li id="show_rows_100" onclick="showRows( 100);">
+        <li id="show_rows_100" onclick="showRows( 100, true);">
           <a href="#" class="name dropdown-item">100 Rows</a>
         </li>
       </ul>

diff --git a/src/ims/element/static/field_reports.js b/src/ims/element/static/field_reports.js
@@ -46,11 +46,6 @@ function initFieldReportsPage() {
             if (e.key.toLowerCase() === "n") {
                 document.getElementById("new_field_report").click();
             }
-            // a --> show all for this event
-            if (e.key.toLowerCase() === "a") {
-                showDays(null);
-                showRows(null);
-            }
             // TODO: should there also be a shortcut to show the default filters?
         });
         document.getElementById("helpModal").addEventListener("keydown", function(e) {
@@ -233,10 +228,12 @@ function initTableButtons() {
         .children(".col-sm-6:first")
         .replaceWith($("#button_container"));
 
+    const urlParams = new URLSearchParams(window.location.search);
+
     // Set button defaults
 
-    showDays(null);
-    showRows(25);
+    showDays(urlParams.get("days")??defaultDaysBack, false);
+    showRows(urlParams.get("rows")??defaultRows, false);
 }
 
 
@@ -353,9 +350,12 @@ function initSearch() {
 //
 
 let _showModifiedAfter = null;
+let _showDaysBack = null;
+const defaultDaysBack = "all";
 
-function showDays(daysBackToShow) {
-    const id = (daysBackToShow == null) ? "all" : daysBackToShow.toString();
+function showDays(daysBackToShow, replaceState) {
+    const id = daysBackToShow.toString();
+    _showDaysBack = daysBackToShow;
 
     const menu = $("#show_days");
     const item = $("#show_days_" + id);
@@ -366,7 +366,7 @@ function showDays(daysBackToShow) {
     // Update menu title to reflect selected item
     menu.children(".selection").html(selection);
 
-    if (daysBackToShow == null) {
+    if (daysBackToShow === "all") {
         _showModifiedAfter = null;
     } else {
         const after = new Date();
@@ -377,6 +377,10 @@ function showDays(daysBackToShow) {
         _showModifiedAfter = after;
     }
 
+    if (replaceState) {
+        replaceWindowState();
+    }
+
     fieldReportsTable.draw();
 }
 
@@ -385,8 +389,12 @@ function showDays(daysBackToShow) {
 // Show rows button handling
 //
 
-function showRows(rowsToShow) {
-    const id = (rowsToShow == null) ? "all" : rowsToShow.toString();
+let _showRows = null;
+const defaultRows = 25;
+
+function showRows(rowsToShow, replaceState) {
+    const id = rowsToShow.toString();
+    _showRows = rowsToShow;
 
     const menu = $("#show_rows");
     const item = $("#show_rows_" + id);
@@ -397,10 +405,14 @@ function showRows(rowsToShow) {
     // Update menu title to reflect selected item
     menu.children(".selection").html(selection);
 
-    if (rowsToShow == null) {
+    if (rowsToShow === "all") {
         rowsToShow = -1;
     }
 
+    if (replaceState) {
+        replaceWindowState();
+    }
+
     fieldReportsTable.page.len(rowsToShow);
     fieldReportsTable.draw()
 }
@@ -410,13 +422,19 @@ function showRows(rowsToShow) {
 // Update the page URL based on the search input and other filters.
 //
 
-function pushWindowState() {
+function replaceWindowState() {
     const newParams = [];
 
     const searchVal = document.getElementById("search_input").value;
     if (searchVal) {
         newParams.push(["q", searchVal]);
     }
+    if (_showDaysBack != null && _showDaysBack !== defaultDaysBack) {
+        newParams.push(["days", _showDaysBack]);
+    }
+    if (_showRows != null && _showRows !== defaultRows) {
+        newParams.push(["rows", _showRows]);
+    }
 
     // Next step is to create search params for the other filters too