add a toggle all/none incident types button (#1583)

this also fixes a few little bugs from my last PR

#1581

CHANGELOG.md

@@ -26,6 +26,7 @@ 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
+- Converted the "show incident type" dropdown into a multiselect, allowing filtering the Incidents page to any number of Incident Types. https://github.com/burningmantech/ranger-ims-server/issues/1581
 
 ### Removed
 

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

@@ -109,6 +109,7 @@
         Types
       </button>
       <ul id="ul_show_type" class="dropdown-menu">
+        <a class="dropdown-item" href="#" onclick="toggleCheckAllTypes(); return false;">All/None</a>
         <!-- li will be inserted here by JQuery -->
       </ul>
 

src/ims/element/static/incidents.js

@@ -337,12 +337,13 @@ function initTableButtons() {
     const types = fragmentParams.getAll("type");
     const validTypes = [];
     for (const t of types) {
-        console.log(`reading type ${t} checking`);
         if (t && allIncidentTypes.indexOf(t) !== -1) {
             validTypes.push(t);
         }
     }
-    setCheckedTypes(validTypes);
+    if (validTypes.length > 0) {
+        setCheckedTypes(validTypes);
+    }
     showCheckedTypes(false);
     showState(fragmentParams.get("state")??defaultState, false);
     showDays(fragmentParams.get("days")??defaultDaysBack, false);
@@ -469,7 +470,9 @@ function initSearch() {
                 return false
             }
 
-            if (_showTypes && _showTypes.length > 0) {
+            // don't bother with filtering, which may be computationally expensive,
+            // if all types seem to be selected
+            if (_showTypes.length !== allIncidentTypes.length) {
                 const intersect = Object.values(incident.incident_types).filter(t => _showTypes.includes(t)).length > 0;
                 if (!intersect) {
                     return false;
@@ -557,14 +560,23 @@ let _showTypes = [];
 
 function setCheckedTypes(types) {
     for (const $type of $('#ul_show_type > a')) {
-        if (types.length === 0 || types.includes($type.innerHTML)) {
+        if (types.includes($type.innerHTML)) {
             $type.classList.add("dropdown-item-checked")
         } else {
             $type.classList.remove("dropdown-item-checked")
         }
     }
 }
 
+function toggleCheckAllTypes() {
+    if (_showTypes.length === 0 || _showTypes.length < allIncidentTypes.length) {
+        setCheckedTypes(allIncidentTypes);
+    } else {
+        setCheckedTypes([]);
+    }
+    showCheckedTypes(true);
+}
+
 function readCheckedTypes() {
     const checkedTypes = [];
     for (const $type of $('#ul_show_type > a')) {
@@ -578,8 +590,10 @@ function readCheckedTypes() {
 function showCheckedTypes(replaceState) {
     _showTypes = readCheckedTypes();
 
-    const numTypes = _showTypes.length === allIncidentTypes.length ? "All" : _showTypes.length;
-    document.getElementById("show_type").textContent = `${numTypes} Types`;
+    const showTypeText = _showTypes.length === allIncidentTypes.length
+        ? "All Types"
+        : `Types (${_showTypes.length})`;
+    document.getElementById("show_type").textContent = showTypeText;
 
     if (replaceState) {
         replaceWindowState();