replace URL query string on changes to search field (#1578)

This makes bookmarking a lot more intuitive, since the URL
will always reflect the current state of the search field.
This approach works on the client-side to replace that URL,
using pushState.

After this, I plan to create query params for the other filters
on the Incidents and Field Reports pages, then add those values
to this updated URL as well.

#1570

src/ims/element/incident/incidents_template/template.xhtml

@@ -23,7 +23,6 @@
           <p class="mt-2 mb-0">In the search field</p>
           <ul>
             <li>Type an IMS number then press <code>⏎</code> to be redirected to that Incident</li>
-            <li>Type a search string then press <code>⏎</code> to get a bookmarkable URL</li>
             <li>Search by regular expression by enclosing a pattern with slashes, e.g. <code>/r.nger/</code> or <code>/\b(dog|cat)\b/</code></li>
             <li>All searches are case insensitive</li>
           </ul>

src/ims/element/incident/reports_template/template.xhtml

@@ -23,7 +23,6 @@
           <p class="mt-2 mb-0">In the search field</p>
           <ul>
             <li>Type an FR number then press <code>⏎</code> to be redirected to that Field Report</li>
-            <li>Type a search string then press <code>⏎</code> to get a bookmarkable URL</li>
             <li>Search by regular expression by enclosing a pattern with slashes, e.g. <code>/r.nger/</code> or <code>/\b(dog|cat)\b/</code></li>
             <li>All searches are case insensitive</li>
           </ul>

src/ims/element/static/field_reports.js

@@ -259,6 +259,7 @@ function initSearchField() {
     const searchInput = document.getElementById("search_input");
 
     const searchAndDraw = function () {
+        pushWindowState();
         let q = searchInput.value;
         let isRegex = false;
         if (q.startsWith("/") && q.endsWith("/")) {
@@ -304,12 +305,6 @@ function initSearchField() {
                         "Field_Report:" + val,
                     );
                 }
-                // Redirect to a bookmarkable URL that shows the results for the search query.
-                if (val !== "") {
-                    window.location.replace(
-                        `${urlReplace(url_viewFieldReports)}?q=${encodeURIComponent(val)}`,
-                    )
-                }
             }
         }
     );
@@ -409,3 +404,22 @@ function showRows(rowsToShow) {
     fieldReportsTable.page.len(rowsToShow);
     fieldReportsTable.draw()
 }
+
+
+//
+// Update the page URL based on the search input and other filters.
+//
+
+function pushWindowState() {
+    const newParams = [];
+
+    const searchVal = document.getElementById("search_input").value;
+    if (searchVal) {
+        newParams.push(["q", searchVal]);
+    }
+
+    // Next step is to create search params for the other filters too
+
+    const newURL = `${urlReplace(url_viewFieldReports)}?${new URLSearchParams(newParams).toString()}`;
+    window.history.replaceState(null, null, newURL);
+}

src/ims/element/static/incidents.js

@@ -358,6 +358,7 @@ function initSearchField() {
     const searchInput = document.getElementById("search_input");
 
     const searchAndDraw = function () {
+        pushWindowState();
         let q = searchInput.value;
         let isRegex = false;
         if (q.startsWith("/") && q.endsWith("/")) {
@@ -403,12 +404,6 @@ function initSearchField() {
                         "Incident:" + eventID + "#" + val,
                     );
                 }
-                // Redirect to a bookmarkable URL that shows the results for the search query.
-                if (val !== "") {
-                    window.location.replace(
-                        `${viewIncidentsURL}?q=${encodeURIComponent(val)}`,
-                    )
-                }
             }
         }
     );
@@ -587,3 +582,21 @@ function showRows(rowsToShow) {
     incidentsTable.page.len(rowsToShow);
     incidentsTable.draw()
 }
+
+//
+// Update the page URL based on the search input and other filters.
+//
+
+function pushWindowState() {
+    const newParams = [];
+
+    const searchVal = document.getElementById("search_input").value;
+    if (searchVal) {
+        newParams.push(["q", searchVal]);
+    }
+
+    // Next step is to create search params for the other filters too
+
+    const newURL = `${viewIncidentsURL}?${new URLSearchParams(newParams).toString()}`;
+    window.history.replaceState(null, null, newURL);
+}